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 
               )