<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo</title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<style>
*{margin:0;padding:0;}
ul,li{list-style:none;}
html,body{width:100%; height:100%;}
div {width: 300px; height: 200px;}
.d1 {background: red;}
.d2 {background: blue; display: none;}
.d3 {background: yellow; display: none;}
</style>
</head>
<body>
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
<script>
;(function($) {
/*类级别开发插件*/
//直接添加全局函数
$.popup = function() {
console.log(1);
};
//extend扩展静态方法
$.extend({
popup2 : function() {
console.log(2);
}
});
//命名空间下定义方法
$.hwb = {
popup3 : function() {
console.log(3);
}
}
/*对象级别开发插件*/
//$.fn.setBgColor模版
$.fn.setBgColor = function(options) {
var defaults = {
num : "a"
};
var options = $.extend(defaults, options);//不能加{}
return this.each(function() {
$(this).attr("index", defaults.num);
console.log(defaults.num);
});
}
})(jQuery);
$(function() {
$.popup();//1
$.popup2();//2
$.hwb.popup3();//3
//$.fn.setBgColor();
$("div").setBgColor({
num : "b"
}).css("background", "black");//b b b
})
</script>
</body>
</html>
jQuery插件的编写方法
最新推荐文章于 2022-07-10 23:12:33 发布
388
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
