<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
(function($){
$.extend($.fn,{
color:function(options){ //自定义插件名称
var options = $.extend({ //参数选项对象处理
bcolor:"white", //背景默认值
fcolor:"black" //前景色默认值
},options);
return this.each(function(){ //返回匹配的jQuery对象
$(this).css("color",options.fcolor); //遍历设置没个DOM元素字体颜色
$(this).css("backgroundColor",options.bcolor);
//遍历设置没个DOM元素背景颜色
})
}
})
})(jQuery);
$(function(){
$("p").color({
bcolor:"pink",
fcolor:"red"
})
})
</script>
</head>
<body>
<!--
如何封装代码
1.想要封装jquery插件，第一步是定义一个独立的域
-->
<!--<script type="text/javascript">
(function($){
//自定义插件的代码
})(jQuery)//封装插件的方法
//jQuery提供了方法，extend()方法
</script>-->
<!--2.填写封装方法-->
<!--<script type="text/javascript">
(function($){
$.extend($.fn,{ //jQuery对象方法扩展
//函数列表
})
})(jQuery)
</script>-->
<!--3.填写拓展的方法-->
<p>1111</p>
<p>22</p>
<p>33</p>
</body>
</html>
封装代码
猜你喜欢
转载自www.cnblogs.com/weixin2623670713/p/13210157.html
今日推荐
周排行