jQuery插件是什么？常见的的jQuery插件主要分为三个类型:封装对象方法的插件；封装全局函数的插件；选择器插件。那么基于这三个jQuery插件之下的各个jQuery插件的编写及使用又是怎样的呢？接下来我们就来谈一谈关于jQuery插件的使用和写法。
jQuery插件分类：
1.封装对象方法的插件
这种插件是将对象方法封装起来，用于对通过选择器获取的jQuery对象进行操作，是最常见的一种插件。
2.封装全局函数的插件
可以将独立的函数加到jQuery命名空间之下。例如jQuery.noConflict()方法、常用的jQuery.ajax()方法以及去除首位空格的jQuery.trim()方法等，都是jQuery内部作为全局函数的插件附加到内核上去的。
3．选择器插件
个别情况下，会需要用到选择器插件。
插件的基本要点
1.jQuery插件的文件名推荐命名为jquery.[插件名].js，以免和其他JavaScript库插件混淆。
2.所有的对象方法都应该附加到jQuery.fn对象上，而所有的全局函数都应当附加到jQuery对象本身上。
3.在插件内部，this指向的是当前通过选择器获取的jQuery对象，而不像一般方法那样，例如click()方法，内部的this指向的DOM元素。
4.可以通过this.each来遍历所有元素。
5.所有的方法或函数插件，都应当以分号结尾，否则压缩的时候可能出现问题。为了更稳妥些，甚至可以在插件头部先加上一个分号，以免他人的不规范代码给插件带来影响。
6.插件应该返回一个jQuery对象，以保证插件的可链式操作。除非插件需要返回的是一些需要获取的量，例如字符串或者数组等。
7.避免在插件内部使用$作为jQuery对象的别名，而应使用完整的jQuery来表示。这样可以避免冲突，当然，也可以利用闭包这种技巧来回避这个问题，使插件内部继续使用$作为jQuery的别名。很多插件都是这样做的。
插件中的闭包
关于闭包，ECMAScript对其进行了简单的描述：允许使用内部函数（即函数定义和函数表达式位于另一个函数体内），而且，这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数，当其中一个这样的内部函数在包含它们的外部函数之外被调用时，就会形成闭包。即内部函数会在外部函数返回后被执行。而这个内部函数执行时，它仍然必须访问其外部函数的局部变量、参数以及其他内部函数。这些局部变量、参数和函数声明（最初时）的值是外部函数返回时的值，但也会收到内部函数的影响。
首先定义一个匿名函数function(){/*这里放置代码*/},然后用括号括起来，变成（function(){/*这里放置代码*/}）这种形式，最后通过（）这个运算符来执行。可以传递参数进去，以供内部函数使用。
//注意为了更好的兼容性，开始之前还有一个分号：
;(function($){ //开始时将$作为匿名函数的形参
/*这里放置代码，可以使用$作为jQuery的缩写别名*/
})(jQuery); //这里就将jQuery作为实参传递给匿名函数了 Salin selepas log masuk
以上是一种常见的jQuery插件的结构。
jQuery插件的机制
jQuery提供了两种用于扩展jQuery功能的方法，即jQuery.fn.extend()方法和jQuery.extend()方法。前者用于之前提到的3种插件类型中的第1种，后者用于扩展后两种插件。这两个方法都接受一个参数，类型为Object。Object对象的“名/值对”分别代表“函数或方法名/函数主体”。
jQuery.extend()方法除了可以用于扩展jQuery对象之外，还有一个强大的功能，就是用与扩展已有的Object对象。
jQuery代码如下：
jQuery.extend(target,obj1,…….[objN])
用一个或多个其它对象来扩展一个对象，然后返回被扩展的对象。
例如合并settings对象和options对象，修改并返回settings对象。
var settings={validate:false,limit:5,name:”foo”};
var options={validate:true,name:”bar”};
var newOptions=jQuery.extend(settings,options); Salin selepas log masuk
结果为：
newOptins={valitdate:true,limit:5,name:”bar”}; Salin selepas log masuk
jQuery.extend()方法经常被用于设置插件方法的一系列默认参数，如下面的代码所示：
function foo(options){
options=jQuery.extend({
name:”bar”,
limit:5,
datatype:”xml”
},options);
}; Salin selepas log masuk
如果调用foo()方法的时候，在传递的参数options对象中设置了相应的值，那么就使用设置的值，否则就用默认的值。代码如下：
foo({name:”a”,length:”4”,dataType:”json”});
foo({name:”a”,length:”4”});
foo({name:”a”});
foo(); Salin selepas log masuk
通过使用jQuery.extend()方法，可以很方便地用传入的参数来覆盖默认值。此时，对方法的调用依旧保持一致，只不过要传入的是一个映射而不是一个参数列表。这种机制比传统的每个参数都去检测的方式不仅灵活而且更加简洁。此外使用命名参数意味着再添加新选项也不会影响过去编写的代码，从而使开发者使用起来更加直观明了。
编写jQuery插件
1.封装jQuery对象方法的插件
编写设置获取颜色的插件
首先介绍如何编写一个color()插件。该插件用于实现以下两个功能。
(1)设置匹配元素的颜色。
(2)获取匹配的元素（元素集合中的第1个）的颜色。
首先将该插件按规范命名为jquery.color.js。
然后再JavaScript文件里搭好框架.由于是对jQuery对象的方法扩展，因此采用第1类方法jQuery.fn.extend()来编写。
;(function($){
$.fn.extend({
“color”:function(value){
//这里写插件代码
}
});
})(jQuery); Salin selepas log masuk
这里给这个方法提供一个参数value，如果调用了方法的时候传递了value这个参数，那么就是用这个值来设置字体颜色；否则就是匹配元素的字体颜色的值。
首先，实现第1个功能，设置字体颜色。注意，由于插件内部的this指向的是jQuery对象，而非普通的DOM对象。代码如下：
;(function($){
$.fn.extend({
“color”:function(value){
return this.css(“color”,value);
}
});
})(jQuery); Salin selepas log masuk
接下来实现第2个功能。如果没用给方法传递参数，那么就是获取集合对象中第1个对象的color的值。由于css()方法本身就具有返回第1个匹配元素样式值的功能，因此此处无需通过eq()来获取第1个元素。只要这两个方法结合起来,判断一下value的值是否是undefined即可。
jQuery代码如下：
;(function($){
$.fn.extend({
“color”:function(value){
if(color===undefined){
return this.css(“color”,value);
}else{
Return this.css(“color”,value);
}
}
});
})(jQuery); Salin selepas log masuk
这样一来，插件也就完成了。现在来测试一下代码。
<script type=”text/javascript”>
//插件编写
;(function($){
$.fn.extend({
“color”:function(value){
if(color===undefined){
return this.css(“color”,value);
}else{
Return this.css(“color”,value);
}
}
});
})(jQuery);
//插件应用
$(function(){
//查看第一个div的color样式值
alert($(“div”).color()+”\n返回字符串，证明此插件可用。”);
//把所有的div字体颜色都设为红色
alert($(“div”).color(“red”)+”\n返回object证明得到的是jQuery对象。“)；
}）
</script>
<div style=”color:red”>red</div>
<div style=”color:blue”>blue</div>
<div style=”color:green”>green</div>
<div style=”color:yellow”>yellow</div>
另外，如果要定义一组插件，可以使用如下所示的写法：
:(function($){
$.fn.extend({
"color":function(value){
//插件代码
},
"border":function(value){
//插件代码
},
"background":function(value){
//插件代码
}
};
})(jQuery); Salin selepas log masuk
表格隔行变色插件
表格隔行变色的代码如下：
$("tbody>tr:odd").addClass("odd");
$("tbody>tr:even").addClass("even");
$('tbody>tr').click(function(){
//判断是否选中
var hasSelected=$(this).hasClass('selected');
//如果选中，则移出selected类，否则就加上selected类
$(this)[hasSelected?"removeClass":"addClass"]('selected')
//查找内部的checkbox,设置对应的属性
.find('checkbox').attr('checked'.!hasSelected);
});
//如果复选框默认情况下是选择的，则高色
$('tbody>tr:has(:checked)').addClass('selected'); Salin selepas log masuk
首先把插件方法取名为alterBgColor，然后为该插件方法搭好框架，jQuery代码如下：
;(function($){
$.fn.extend({
"alterBgColor":function(options){
//插件代码
}
});
})(jQuery); Salin selepas log masuk
框架完成后，接下来就需要为options定义默认值。默认构建这样({odd:"odd",even:"even",selected:"selected"})一个Object。这样就可以通过$("#sometable").alterBgColor({odd:"odd",even:"even",selected:"selected"})自定义奇偶行的样式类名以及选中后的样式类名。同时，直接使用$("#sometable").alterBgColor()就可以应用 默认的样式类名。
jQuery代码如下：
;(function($){
$.fn.extend({
"alterBgColor":function(options){
options=$.extend({
odd:"odd", /*偶数行样式*/
even:"even", /*奇数行样式*/
selected:"selected" /*选中行样式*/
},options);
}
});
})(jQuery); Salin selepas log masuk
如果在后面的程序中需要使用options对象的属性，可以使用如下的方式来获得：
options.odd; //获取options对象中odd属性的值
options.even; //获取options对象中even属性的值
options.selected; //获取options对象中selected属性的值 Salin selepas log masuk
接下来就需要把这些值放到程序中，来代替先前程序中的固定值。
最后就是匹配元素的问题了。显然不能直接用$('tbody>tr')选择表格行，这样会使页面中全部的
元素都隔行变色。应该使用选择器选中某个表格，执行alterBgColor()方法后，将对应的表格内 元素进行隔行变色。因此，需要把所有通过$('tbody>tr')选择的对象改写成$('tbody>tr',this)，表示在匹配的元素内（当前表格内）查找，并应用上一步中的默认值。jQuery代码如下：;(function($){
$.fn.extend({
"alterBgColor":function(options){
//设置默认值
options=$.extend({
odd."odd",
even."even",
selected:"selected"
},options);
$("tbody>tr:odd",this).addClass(options,odd);
$("tbody>tr:even",this).addClass(options,even);
$("tbody>tr",this).click(function(){
//判断是否选中
var hasSelected=$(this).hasClass(options,selected);
//如果选中，则移出selected类，否则加上selected类
$(this)[hasSelected?"removeClass":"addClass"](options,selected)
//查找内部的checkbox,设置对应属性
.find(':checkbox').attr('checked',!hasSelected);
});
//如果单选框默认情况下是选择的，则高色
$('tbody>tr:has(:checkd),this').addClass(options,selected);
rerturn this; //返回this，使方法可链
}
});
})(jQuery); Salin selepas log masuk
在代码的最后，返回this，让这个插件具有可链性。
调用alterBgColor()方法，以便查看是否能独立工作，并且具有可链性。$('#table2')
.alterBgColor() //应用插件
.find("th").css("color","red"); //可链式操作 Salin selepas log masuk
需要注意的是，jQuery的选择符可能会匹配1个或者多个元素。因此，在编写插件时必须考虑到这些情况。可以在插件内部调用each()方法来遍历匹配元素，然后执行相应的方法，this会依次引用每个DOM元素。如下jQuery代码所示：
;(function($)){
$.fn.extend({
"SomePlugin":function(options){
return this.each(function(){
//这里置放代码
});
}
});
})(jQuery); Salin selepas log masuk
相关推荐：
jQuery简单滚动插件
jquery.tmpl JQuery模板插件_jquery
Atas ialah kandungan terperinci jQuery插件有哪些？jQuery插件的写法分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
2019-04-16 16:04:28
2020-09-15 11:26:00
2020-09-10 14:26:14
2020-09-08 11:06:15
2020-09-09 09:46:36
2020-10-12 14:51:04
2020-09-10 14:40:02
2019-04-24 16:20:55
2020-10-13 11:40:03
2019-04-15 14:06:21
Topik-topik yang berkaitan
Lagi>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
