另外，如果要定义一组插件，可以使用如下所示写法:

;(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，无法获取索引值，这时就需要自造索引，代码如下
;(function($){
var $index = -1;
$.extend($.expr[":"],{
between:function(a,i,m){
var temp=m[3].split(",");
$index++;
return +temp[0]<$index&&$index<+temp[1];
}
});
})(jQuery);

<div>
<i>0</i>
<i>1</i>
<i>2</i>
<i>3</i>
<i>4</i>
<i>5</i>
</div>
<button>测试</button>
<script>
;(function($){
var $index = -1;
$.extend($.expr[":"],{
between:function(a,i,m){
var temp=m[3].split(",");
$index++;
return +temp[0]<$index&&$index<+temp[1];
}
});
})(jQuery);
$('#btn').click(function(){
$('i:between(1,5)').css('background','lightblue');
});
</script>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

本文前端（javascript）相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: jQuery、CSS、变量、冲突、

分页：12

转载请注明
本文标题：如何编写jquery插件
本站链接：
分享请点击：

1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责；
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性，不作出任何保证或承若；
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。

登录后可拥有收藏文章、关注作者等权限...

   注册     登录