jQuery插件开发模式

来源：互联网发布：喋血街头java 编辑：程序博客网时间：2024/05/22 13:20

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<scriptsrc="jquery-1.11.1.min.js"></script>
</head>
<body>
<div id="myDiv">This is a Params JQuery!</div>
<script>
/* 
方法列表： 
1、jQquery.extend(Object); 是对jQuery类的自定义扩展
2、jQuery.fn.exten(Object)；是对jQuery对象的自定义扩展*/


jQuery.fn.test =function(){
alert('这是jquery对象方法!');
}

jQuery('div').click(function(){
$(this).test()
})

jQuery.fn.extend({
test:function(){
return this.each(function(){
alert(this.nodeName)
});
}
});
jQuery('body *').click(function(){
$(this).test()
})

/*优选*/
(function($){
$.fn.hilight=function(options){
var defaults={
foreground:'red',
background:'yellow'
};
var opts =$.extend(defaults,options);
$(this).css('background-color',opts.background);
$(this).css('color',opts.foreground);
};
})(jQuery)
$('#myDiv').hilight({foreground:'blue',background:'red'})
</script>
</body>
</html>

阅读全文

0 0