12个很棒的jQuery选择器扩展(翻译)

我最近开始编写本身的jQuery选择器，我愈来愈开始意识到这是一种不错而简洁的完成某些特定任务的方式，而以往我使用的是迭代器。css

这些选择器中若是不是你一直在寻找的，你也许根本将不会碰到。因此我决定写下一个简单的教程来告知你用jQuery写出本身的选择器是一件至关轻松的事。jquery

下面是一个用jQuery编写选择器的模版文件，你须要的全都在这里：web

 
       01 
       $.extend($.expr[':'], 
     
       02 
       { 
     
       03 
           selectorName: function(el, i, m) 
     
       04 
           { 
     
       05 
               return true/false; 
     
       06 
           }, 
     
       07 
             
       08 
           selectorName2: function(el, i, m) 
     
       09 
           { 
     
       10 
               return true/false; 
     
       11 
           } 
     
       12 
       });

下面是两种调用一个选择器的方法，一种带有一个参数而另外一种则没有参数：正则表达式

 
       1 
       $("#container :selectorName"); 
     
       2 
       $("#conainert :selectorName(#element)"); 
     
       3 
       $("#conainert :selectorName(>300)");

i与m参数能够是缺省的，当传入一个集合，他们只是用来匹配一个参数的当前元素的索引。当你传入一个参数时，匹配器便开始工做了，这是一个正则表达式匹配器，返回相似以下信息：测试

 
       1 
       [":width(>100)", "width", "", ">100"]

你会常常使用到m[3]的值，至此，便由你决定如何处理传入的参数。下面给出了一系列的例子。this

咱们能够与jQuery已有的选择器一块儿进行链式的调用，这是至关有意思的：spa

 
       1 
       $("#container :isBold:even"); 
     
       2 
       $("#container :leftOf(#element):width(>100):height(>100)");

你能够在此下载该库和文档.net

如下列出12个自定义的选择器实例，你能够在这些选择器中放入任何内容，只要你根据当前元素是否经过选择器测试返回true或者false值便可。code

一、：loaded教程

选择全部加载完的图片：

 
       01 
       $.extend($.expr[':'], 
     
       02 
       { 
     
       03 
           loaded: function(el) 
     
       04 
           { 
     
       05 
               return $(el).data('loaded'); 
     
       06 
           } 
     
       07 
       } 
     
       08 
         
       09 
       $('img').load(function(){ $(this).data('loaded', true); }); 
     
       10 
       $('img:loaded');

二、：width

选择全部宽度大于或小于指定值的元素：

 
       01 
       $.extend($.expr[':'], 
     
       02 
       { 
     
       03 
           width: function(el, i, m) 
     
       04 
           { 
     
       05 
               if(!m[3]||!(/^(<|>)\d+$/).test(m[3])) {return false;} 
     
       06 
               return m[3].substr(0,1) === '>' ? 
     
       07 
                   $(el).width() > m[3].substr(1) : $(el).width() < m[3].substr(1); 
     
       08 
           } 
     
       09 
       } 
     
       10 
         
       11 
       $('#container :width(>100)');

三、：height

选择全部高度大于或小于指定值的元素：

 
       01 
       $.extend($.expr[':'], 
     
       02 
       { 
     
       03 
           height: function(el, i, m) 
     
       04 
           { 
     
       05 
               if(!m[3]||!(/^(<|>)\d+$/).test(m[3])) {return false;} 
     
       06 
               return m[3].substr(0,1) === '>' ? 
     
       07 
                   $(el).height() > m[3].substr(1) : $(el).height() < m[3].substr(1); 
     
       08 
           } 
     
       09 
       } 
     
       10 
         
       11 
       $('#container :height(<100)');

四、：leftOf

选择在指定元素左边的全部元素

 
       01 
       $.extend($.expr[':'], 
     
       02 
       { 
     
       03 
           leftOf: function(el, i, m) 
     
       04 
           { 
     
       05 
               var oe = $(el).offset(); 
     
       06 
               var om = $(m[3]).offset(); 
     
       07 
         
       08 
               return oe.left + $(el).width() < om.left; 
     
       09 
           } 
     
       10 
       } 
     
       11 
         
       12 
       $('#container :leftOf(#element)');

五、：rightOf

选择在指定元素右边的全部元素

 
       01 
       $.extend($.expr[':'], 
     
       02 
       { 
     
       03 
           rightOf: function(el, i, m) 
     
       04 
           { 
     
       05 
               var oe = $(el).offset(); 
     
       06 
               var om = $(m[3]).offset(); 
     
       07 
         
       08 
               return oe.left > om.left + $(m[3]).width(); 
     
       09 
           } 
     
       10 
       } 
     
       11 
         
       12 
       $('#container :rightOf(#element)');

六、：external

选择全部带外站连接的锚点标签

 
       01 
       $.extend($.expr[':'], 
     
       02 
       { 
     
       03 
           external: function(el) 
     
       04 
           { 
     
       05 
               if(!el.href) {return false;} 
     
       06 
               return el.hostname && el.hostname !== window.location.hostname; 
     
       07 
           } 
     
       08 
       } 
     
       09 
         
       10 
       $('#container :external');

七、：target

选择指定target属性的锚点标签

 
       01 
       $.extend($.expr[':'], 
     
       02 
       { 
     
       03 
           target: function(el, i, m) 
     
       04 
           { 
     
       05 
               if(!m[3]) {return false;} 
     
       06 
               return (m[3] === '_self' && ($(el).attr('target') == '' || !el.target)) || 
     
       07 
                   (m[3] === $(el).attr('target')); 
     
       08 
           } 
     
       09 
       } 
     
       10 
         
       11 
       $('#container :target(_self)');

八、：inView

选取位于可视窗口内的全部元素

 
       01 
       $.extend($.expr[':'], 
     
       02 
       { 
     
       03 
           inView: function(el) 
     
       04 
           { 
     
       05 
               var offset = $(el).offset(); 
     
       06 
         
       07 
               return !( 
     
       08 
                   (offset.top > $(window).height() + $(document).scrollTop()) || 
     
       09 
                   (offset.top + $(el).height() < $(document).scrollTop()) || 
     
       10 
                   (offset.left > $(window).width() + $(document).scrollLeft()) || 
     
       11 
                   (offset.left + $(el).width() < $(document).scrollLeft()) 
     
       12 
               )