下面是一个用jQuery编写选择器的模版文件,你需要的全都在这里:
$.extend($.expr[':'], { selectorName: function(el, i, m) { return true/false; }, selectorName2: function(el, i, m) { return true/false; } });
下面是两种调用一个选择器的方法,一种带有一个参数而另一种则没有参数:
i与m参数可以是缺省的,当传入一个集合,他们只是用来匹配一个参数的当前元素的索引。当你传入一个参数时,匹配器便开始工作了,这是一个正则表达式匹配器,返回类似如下信息:
[":width(>100)", "width", "", ">100"]
你会经常使用到m[3]的值,至此,便由你决定如何处理传入的参数。下面给出了一系列的例子。
我们可以与jQuery已有的选择器一起进行链式的调用,这是相当有意思的:
$("#container :isBold:even"); $("#container :leftOf(#element):width(>100):height(>100)");
以下列出12个自定义的选择器实例,你可以在这些选择器中放入任何内容,只要你根据当前元素是否通过选择器测试返回true或者false值即可。
1、:loaded
选择所有加载完的图片:
$.extend($.expr[':'], { loaded: function(el) { return $(el).data('loaded'); } } $('img').load(function(){ $(this).data('loaded', true); }); $('img:loaded');
2、:width
选择所有宽度大于或小于指定值的元素:
$.extend($.expr[':'], { width: function(el, i, m) { if(!m[3]||!(/^(<|>)\d+$/).test(m[3])) {return false;} return m[3].substr(0,1) === '>' ? $(el).width() > m[3].substr(1) : $(el).width() < m[3].substr(1); } } $('#container :width(>100)');
3、:height
选择所有高度大于或小于指定值的元素:
$.extend($.expr[':'], { height: function(el, i, m) { if(!m[3]||!(/^(<|>)\d+$/).test(m[3])) {return false;} return m[3].substr(0,1) === '>' ? $(el).height() > m[3].substr(1) : $(el).height() < m[3].substr(1); } } $('#container :height(<100)');
4、:leftOf
选择在指定元素左边的所有元素
$.extend($.expr[':'], { leftOf: function(el, i, m) { var oe = $(el).offset(); var om = $(m[3]).offset(); return oe.left + $(el).width() < om.left; } } $('#container :leftOf(#element)');
5、:rightOf
选择在指定元素右边的所有元素
$.extend($.expr[':'], { rightOf: function(el, i, m) { var oe = $(el).offset(); var om = $(m[3]).offset(); return oe.left > om.left + $(m[3]).width(); } } $('#container :rightOf(#element)');
6、:external
选择所有带外站链接的锚点标签
$.extend($.expr[':'], { external: function(el) { if(!el.href) {return false;} return el.hostname && el.hostname !== window.location.hostname; } } $('#container :external');
7、:target
选择指定target属性的锚点标签
$.extend($.expr[':'], { target: function(el, i, m) { if(!m[3]) {return false;} return (m[3] === '_self' && ($(el).attr('target') == '' || !el.target)) || (m[3] === $(el).attr('target')); } } $('#container :target(_self)');
8、:inView
选取位于可视窗口内的所有元素
$.extend($.expr[':'], { inView: function(el) { var offset = $(el).offset(); return !( (offset.top > $(window).height() + $(document).scrollTop()) || (offset.top + $(el).height() < $(document).scrollTop()) || (offset.left > $(window).width() + $(document).scrollLeft()) || (offset.left + $(el).width() < $(document).scrollLeft()) ) } } $('#container :inView');
9、:largerThan
选取比指定元素大的所有元素
$.extend($.expr[':'], { largerThan: function(el, i, m) { if(!m[3]) {return false;} return $(el).width() * $(el).height() > $(m[3]).width() * $(m[3]).height(); } } $('#container :largerThan(#element)');
10、:isBold
选择font-weight为700的所有元素、
$.extend($.expr[':'], { isBold: function(el) { return $(el).css("fontWeight") === '700'; } } $('#container :isBold');
11、:color
选择颜色为指定RGB值的所有元素
$.extend($.expr[':'], { color: function(el, i, m) { if(!m[3]) {return false;} return $(el).css('color') === m[3]; } } $("#container :color(rgb(255, 0, 0))");
12、:hasId
选择存在id属性的所有元素
$.extend($.expr[':'], { hasId: function(el) { return $(el).attr('id') !== undefined && $(el).attr('id') !== ''; } } $("#container :hasId");