jQuery中自定义插件，主要可以分为三大类：封装对象方法的插件、封装全局函数的插件、选择器插件。
以下分享低版本jQuery和jQuery2.0+版本中选择器插件的使用：
原理：
jQuery的选择符解析器首先会使用一组正则表达式来解析选择器，然后针对解析出的每个选择符执行一个函数，称为选择器函数。最后根据这个选择器函数的返回值为true还是false来决定是否保留这个元素。这样就可以找到匹配的元素节点
先上代码，在解析：
低版本jQuery
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 引入jQuery -->
<script src="../../scripts/jquery-1.4.js" type="text/javascript"></script>
<script type="text/javascript">
//插件编写
;(function($) {
$.extend(jQuery.expr[":"], {
between : function( a , i ,m ) {
var tmp=m[3].split(","); //将传递进来的m[3]以逗号为分隔符，切成一个数组
return tmp[0]-0<i&&i<tmp[1]-0;
}
});
})(jQuery);
//插件应用
$(function(){
$("div:between(2,5)").css("background","white");
})
</script>
</head>
<body>
<div style="background:red">0</div>
<div style="background:blue">1</div>
<div style="background:green">2</div>
<div style="background:yellow">3</div>
<div style="background:gray">4</div>
<div style="background:orange">5</div>
</body>
</html>
注意：这里参数i是有效的
jQuery2.0+版本
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../Content/js/jquery-2.1.3.js"></script>
<script type="text/javascript">
; (function ($) {
$.extend(jQuery.expr[":"], {
between: function (a, i, m) {
var tmp = m[3].split(","); //将传递进来的m[3]以逗号为分隔符，切成一个数组
return tmp[0]< $(a).index() && $(a).index() < tmp[1];
}
});
})(jQuery);
</script>
<script type="text/javascript">
$(function () {
$("div:between(2,5)").css("background", "white");
});
</script>
</head>
<body>
<div style="background-color: red">0</div>
<div style="background-color: yellow">1</div>
<div style="background-color: green">2</div>
<div style="background-color: blue">3</div>
<div style="background-color: olive">4</div>
<div style="background-color: orange">5</div>
</body>
</html>
注意在高版本中，无法使用参数i，通过index()替换即可！
---------------------------------------------------------分割线-------------------------
其他说明：
例子中用到了function(a,i,m){//……},如下说明：
| 参数 | 说明 | ||||||||||
| a | 指向的事当前遍历到的DOM元素 | ||||||||||
| i | 指的事当前遍历到的DOM元素的索引值，从0开始。 (注意：高版本中不起作用，可以用$(a).index()来代替) |
||||||||||
| m | 其有jQuery正则解析引擎进一步解析后的产物，是一个长度为4的数组：
|
例子引用资料&&更多学习可以参考：《锋利的jQuery》
时间： 2024-08-03 10:26:27