通过使用jQuery.extend()方法，可以很方便地用传入的参数来覆盖默认值。此时，对方法的调用依旧保持一致，只不过要传入的是一个映射而不是一个参数列表。这种机制比传统的每个参数都去检测的方式不仅灵活而且更加简洁。此外使用命名参数意味着再添加新选项也不会影响过去编写的代码，从而使开发者使用起来更加直观明了
编写插件
1、封装jQuery对象方法的插件
编写设置和获取颜色的插件color()，该插件用于实现以下两个功能:
(1)设置匹配元素的颜色
(2)获取匹配的元素(元素集合中的第一个)的颜色
由于是对jQuery对象的方法拓展，因此采用拓展第一类插件的方法jQuery.fn.extend()来编写，这里给这个方法提供了一个参数value，如果调用方法的时候传递了value这个参数，那么就是用这个值来设置字体颜色，否则就是获取匹配元素的字体颜色的值
;(function(){ jQuery.fn.extend({ "color":function(value){ if(value == undefined){ return this.css("color"); }else{ return this.css("color",value); } } }); })(jQuery);
实际上，CSS()方法内容已经有判断value是否为undefined的机制，所以才可以根据传递参数的不同而返回不同的值。因此，代码可以删减如下
;(function(){ jQuery.fn.extend({ "color":function(value){ return this.css("color",value); } }); })(jQuery);
<span>测试文字</span> <input type="color"> <script> ;(function($){ $.fn.extend({ "color":function(value){ return this.css("color",value); } }); })(jQuery); $('#color').on('change',function(){ $('#test').color($(this).val()); }) </script>
另外，如果要定义一组插件，可以使用如下所示写法:
;(function(){ jQuery.fn.extend({ "color":function(value){ //插件代码 }, "border":function(value){ //插件代码 }, "background":function(value){ //插件代码 } }); })(jQuery);
2、封装全局函数的插件
这类插件是在jQuery命名空间内部添加一个函数
例如新增两个函数，用于去除左侧和右侧空格。虽然jQuery已经提供了jQuery.trim()方法来去除两端空格，但在某些情况下，会只希望去除某一侧的空格
去除左侧、右侧的空格的函数分别写成如下jQuery代码。(text||"")部分是用于防止传递进来的text这个字符串变量处于未定义的特殊状态，如果text是undeined，则返回字符串""，否则返回字符串text。这个处理是为了保证接下来的字符串替换方法replace()方法不会出错
;(function($){ $.extend({ ltrim:function( text ){ return (text || "").replace(/^\s+/g,""); }, rtrim:function( text ){ return (text || "").replace(/\s+$/g,""); } }); })(jQuery); var $str = " test "; console.log($.trim($str));//'test' console.log($.ltrim($str));//'test ' console.log($.rtrim($str));//' test'
3、自定义选择器
jQuery以其强大的选择器著称，那么jQuery的选择器的工作原理是什么呢？
jQuery的选择解析器首先会使用一组正则表达式来解析选择器，然后针对解析出的每一个选择符执行一个函数，称为选择函数。最后根据这个选择函数的返回值为true还是false来决定是否保留这个元素，这样就可以找到匹配的元素节点
如$("div:gl(1)")，该选择器首先会获取所有的<div>元素，然后隐式地遍历这些<div>元素，并逐个将这些<div>元素作为参数，连同括号里的“1”等一些参数一起传递给gt对应的选择器函数进行判断。如果返回true则保留，否则不保留，这样得到的结果就是一个符合要求的<div>元素的集合
选择器的函数一共接受3个参数，形式如下：
function (a,i,m){ //... }
第一个参数为a，指的是当前遍历到的DOM元素
第二个参数为i，指的是当前遍历到的DOM元素的索引值，从0开始
第三个参数是m，它是由jQuery正则解析引擎进一步解析后的产物，是一个数组：其中最重要的一个是m[3]，在$("div:gl(1)")中即为括号里的数字“1”。
在jQuery中已经有lt、gt和eq选择器，因此这里写一个介于两者之间(between)的选择器
思路：在上面的三个参数中，m[3]为"a,b"的形式，因此把m[3]用","分隔，然后跟索引值i进行对比，如果i在m[3]表示的范围之间就返回true，否则为false
;(function($){ $.extend($.expr[":"],{ between:function(a,i,m){ var temp=m[3].split(","); return +temp[0]<i&&i<+temp[1]; } }); })(jQuery);
[注意]经测试，函数中第二个参数i的值始终为0，无法获取索引值，这时就需要自造索引，代码如下