标签：封装 his tin 种类 jquery 方便 复用 dcl 其他
编写插件的目的是给已有的一些方法或函数做一个封装，便于复用
jQuery插件分三种类型
1.封装对象方法的插件：
这种是将对象方法封装起来，用于对通过选择器获取的jq对象进行操作，是最常见的一种插件
2. 封装全局函数的插件:
可以将独立的函数加到jq命名空间下
3.选择器插件:
插件的基本要点：
文件命名推荐 jquery,[插件名].js
所有的对象方法都应当附加到jQuery.fn对象上，而所有的全局函数都应当附加到jQuery对象本身上
在插件内部，this指向当前通过选择器获取的jQuery对象，而不像一般方法那样，例如click(),内部this指向DOM元素
通过this.each来遍历所有元素
所有方法或函数插件都应该以分号结尾，可以在插件头部先加上分好，避免他人的不规范代码给插件带来影响
;(function($){
//此处编写jQuery插件代码
})(jQuery);
jQuery插件机制
jQuery提供了两个用于扩展jQuery功能的方法，jQuery.fn.extend()方法，用于扩展对象方法；jQuert.extend()用于扩展后两种插件
jQuery.extend()除了可以扩展jquery对象外，还可以扩展已有的object对象 jQuery.extend(target, obj1,obj2....)
用一个或多个其他对象来扩展一个对象，然后返回被扩展的对象
如：合并setting对象和options对象，修改并返回setting对象
var setting = {validate: false, limit: 5,name: "foo" };
var options = {validate: true, name: "bar"};
var newOptions = jQuery.extend(setting, options);
结果为：
newOptions = {validate:false, limit: 5, name:"foo"};
jQuery.extend()方法经常被用于设置插件方法的一系列默认参数
如： ;(function($){
options = $.extend({
name: "bar",
length:5,
dataType: ‘xml‘ //默认参数
}, options); //options为传递的参数
})(jQuery);
通过使用jQuery.extend()方法，可以很方便的用传入的参数来覆盖默认值
1.封装对象方法插件
//实现表格隔行变色和单选按钮选中，单选按钮所在行变色
<style>
thead td{
border-bottom:1px solid #F00
}
table{
width: 500px;
margin: 0 auto;
text-align: center;
}
tr{
line-height: 40px;
}
.odd{background-color: #7EC4CC;}
.even{background-color: #A1A1A1;}
.selected{background-color: #FF0000;}
</style>
<table cellspacing="0" cellpadding="0" id="tab2">
<thead>
<tr>
<td></td>
<td>姓名</td>
<td>性别</td>
<td>暂住地</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="check"/></td>
<td>张三</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td><input type="checkbox" name="check"/></td>
<td>李四</td>
<td>男</td>
<td>浙江宁波</td>
</tr><tr>
<td><input type="checkbox" name="check" checked/></td>
<td>王五</td>
<td>女</td>
<td>浙江宁波</td>
</tr><tr>
<td><input type="checkbox" name="check"/></td>
<td>赵六</td>
<td>男</td>
<td>浙江宁波</td>
</tr><tr>
<td><input type="checkbox" name="check"/></td>
<td>rain</td>
<td>女</td>
<td>浙江宁波</td>
</tr>
</tbody>
</table>
引入js
js代码
$(‘#tab2‘).alertBgColor().find(‘thead tr‘).css(‘color‘,‘red‘);
插件代码
写法1：jquery选择符一个元素
;(function($) {
$.fn.extend({
‘alertBgColor‘: function(options) {
options = $.extend({
odd: ‘odd‘,
even: ‘even‘,
selected: ‘selected‘
}, options);
//不能直接用$(‘tbody>tr‘)选择表各行，这样会使页面中全部的tr都各行变色，应该使用选择器选中某个表格，执行alertBgColor方法后
//将对应的表格内tr元素进行隔行变色，$(‘tbody>tr:odd‘,this)表示在匹配的元素内查找
$(‘tbody>tr:odd‘, this).addClass(options.odd);
$(‘tbody>tr:even‘, this).addClass(options.even);
$(‘tbody>tr‘).click(function() {
var hasSelected = $(this).hasClass(options.selected);
$(this)[hasSelected ? ‘removeClass‘ : ‘addClass‘](options.selected)
.find(‘:checkbox‘).prop(‘checked‘, !hasSelected);
});
$(‘tbody>tr:has(":checked")‘, this).addClass(options.selected);
return this; //返回this，使方法可链
}
})
})(jQuery);
写法2：jquery选择符可能匹配一个或多个元素
;(function($) {
$.fn.extend({
‘alertBgColor‘: function(options) {
options = $.extend({
odd: ‘odd‘,
even: ‘even‘,
selected: ‘selected‘
}, options);
//不能直接用$(‘tbody>tr‘)选择表各行，这样会使页面中全部的tr都各行变色，应该使用选择器选中某个表格，执行alertBgColor方法后
//将对应的表格内tr元素进行隔行变色，$(‘tbody>tr:odd‘,this)表示在匹配的元素内查找
return this.each(function() { //jquery选择符可能匹配一个或多个。用this.each()遍历匹配元素
$(‘tbody>tr:odd‘, this).addClass(options.odd);
$(‘tbody>tr:even‘, this).addClass(options.even);
$(‘tbody>tr‘).click(function() {
var hasSelected = $(this).hasClass(options.selected);
$(this)[hasSelected ? ‘removeClass‘ : ‘addClass‘](options.selected)
.find(‘:checkbox‘).prop(‘checked‘, !hasSelected);
});
$(‘tbody>tr:has(":checked")‘, this).addClass(options.selected);
})
}
})
})(jQuery);
//封装全局函数的插件
//实现字符串拼接字符串
;(function($){
$.extend({
connect: function(text){
return ‘你好‘+text;
}
})
})(jQuery);
var val = $.connect(‘world!‘);
console.log(val)
});
标签：封装 his tin 种类 jquery 方便 复用 dcl 其他
原文地址：http://www.cnblogs.com/Kakaxi-hatake/p/7138839.html
