如何编写jquery插件

2020-05-24 21:33:11易采站长站整理

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 id="btn">测试</button>
<script>
;(function($){
var $index = -1;