oracle选择器,强大的JQuery-自定义选择器

这次来玩下JQuery的高级货，对选择器进行扩展。如果能理解，基本JQuery可以出师了。

场景： $("div:eq(2)"), 表示匹配所有div集合中的第二个，假如，我想匹配div集合中的第3个到第6个呢，很遗憾，jQuery没法提供，要自己扩展。

第一步，设计选择器

$("div:jqextend(3,6)"),

第二步，开始写扩展

;(function($) { //1

$.extend(jQuery.expr[":"], { //5

jqextend : function( a , i ,m ) { //2

var tmp=m[3].split(","); //3

return tmp[0]-0

}

});

})(jQuery);

1)注意,不能省略，在压缩jquery用。否则会有奇怪的问题出现。

2) function( a , i ,m ) ，a表示当前遍历到的DOM对象，i 表示遍历到的DOM对象的索引，m是JQ的正则引擎解析后的对象，对"div:jqextend(3,6)"来说，m[0]=:jqextend(3,6), m[1]=:, m[2]=jqextend, m[3]=3,6,

3)将传递进来的m[3]以逗号为分隔符，切成一个数组

4)tmp[0]=3,tmp[1]=6,然后和遍历到的DOM对象的索引i比较,符合条件的返回true即匹配

5)对jQuery再进行一次扩展，jQuery.expr[":"]出来的还是jQuery对象,这个是没有问题的

第三步，插件应用,对符合条件的div标红

$("div:jqextend(3,6)").css("background","red");