JQuery.fn.extend(object) ===》扩展 jQuery 元素集来提供新的方法(通常用来制作插件)。
JQuery.extend(object) ===》扩展jQuery对象本身。
$.fn.extend() ===》 $("#box").xxx():局部
$.extend() ===》$.xxx() : 全局
插件的写法(规则)
1》引入方式
<script src='jquery1.7.js'></script>
<script src='插件'></script>
2》插件命名
jquery.插件名称.js
3》插件内部:匿名函数自我执行
(function(){
})()
4》分号:避免出现问题
;(function(){
})();
5》为了实现连缀写法,每一个插件最后返回this
EXP1:
1>index.html:
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script src='jquery1.7.js'></script>
<script src='jquery.color.js'></script>
<script>
\$(function(){
$("ul").eq(0).color();
$("ul").eq(1).color({
bg:"blue"
});
$("ul").eq(2).color();})
</script>
</body>
2>jquery.color.js:
;(function($){
$.fn.color = function( options ){
var defaults = {
bg:"red"
}
var settings = $.extend({},defaults,options);
$(this).css({
color:settings.bg
})
}
//插件灵活性
//传递参数
//a)默认参数
//b)传递==》修改参数
return this;//返回当前元素,这样可以继续在后面.出函数
})(jQuery);
EXP2:
1>index.html:
<style>
*{margin:0;padding:0;}
#tab1{
width:400px;
height: auto;
border:1px solid #ccc;
}
#tab2{
width:200px;
height: auto;
border:1px solid red;
}
ul,ol{
list-style: none;
}
ul li{
float: left;
width:200px;
height: 100px;
text-align: center;
}
.hide{
display: none;
}
.active{
background: orange;
opacity: 0.5;
}
ol li{
width:50px;
height: 50px;
border-radius: 50%;
background: #000;
float:left;
margin:20px;
}
#tab2 p{
width:200px;
height: 200px;
line-height: 200px;
}
.bg{
background: red;
}
</style>
<body>
<div id="tab1">
<ul>
<li class="active">信息公告</li>
<li>服务公告</li>
</ul>
<div>
<p>AAAAAAAAAAAAAAAAAAAAAAAAAA</p>
<p class="hide">BBBBBBBBBBBBBBBBBBBBBBBBBB</p>
</div>
</div>
<div id="tab2">
<ol>
<li class="bg"></li>
<li></li>
</ol>
<div>
<p>1111111111</p>
<p class="hide">2222222222</p>
</div>
2>jquery.tab.js:
;(function($){
$.fn.tab = function(options){
var defaults = {
parent:"#tab1",
mouseEvent:"click",
active:"active"
}
var settings = $.extend({},defaults,options);
$(this).find("li").bind(settings.mouseEvent,function(){
$(this).addClass(settings.active).siblings().removeClass(settings.active);
var idx = $(this).index();
$(settings.parent).find("p").eq(idx).show().siblings().hide();
})
return this;
}
})(jQuery);