软件技术12款强大的jQuery选择器

五月花 发表 于:8年前 浏览量:56

jQuery中最重要的当属jQuery选择器,它彻底改变了我们平时获取对象的方式,可以获取几乎任何语意的对象,  而有时在完成一些特殊任务时查找合适的选择器会变得麻烦。此时,自己创建的自定义选择器就派上用场了。 

最近我开始越来越频繁地写jQuery 选择器,我发现在完成一些特殊任务时这是一个很清晰有效的方法,而我以前通常是用迭代器的。这是件如果你不去做便不会发现的事。所以我决定写些指导来让大家轻松运用jQuery写出自己的选择器。

首先这是一个在创建自己的jQuery选择器会需要的样板文件:

  1. $.extend($.expr[':'], 
  2.     selectorName: function(el, i, m) 
  3.     { 
  4.         return true/false
  5.     }, 
  6.      
  7.     selectorName2: function(el, i, m) 
  8.     { 
  9.         return true/false
  10.     } 
  11. }); 

下面是调用选择器的两种方法,一种需要参数一种不需要,

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

参数“i”和“m”并不会一直在用,他们只是集合中元素的当前指针和参数的匹配器。当你调用一个参数时匹配器才会出现,通常的表达和返回值如下:

  1. [":width(>100)""width"""">100"

你可以根据自己的喜好输入相应的值,我也给出了一些例子来更灵活地创建选择器的取值范围。基本上我是为了让当前项目需要时可以方便地获取并使用selectors.js文件。

还有一点我们可以把这些选择器跟一些已存在的有趣的jQuery选择器绑在一起。

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

你可以下载程序库找出你要的文件。[点击下载]

也可以免费上传你的选择器。[点击上传]

下面是用在我项目里的12款我自己创建的自定义选择器实例。只要在当前元素通过选择器测试时能够输出true或者false值,你就可以任意在这些选择器里随意加自己的东西。

1. :loaded

           选择所有的下载图片。

  1. $.extend($.expr[':'], 
  2.     loaded: function(el) 
  3.     { 
  4.         return $(el).data('loaded'); 
  5.     } 
  6.  
  7. $('img').load(function(){ $(this).data('loaded'true); }); 
  8. $('img:loaded'); 

2. :width

       选择所有比宽度特殊值大/小的元素

  1. $.extend($.expr[':'], 
  2.     width: function(el, i, m) 
  3.     { 
  4.         if(!m[3]||!(/^(<|>)\d+$/).test(m[3])) {return false;} 
  5.         return m[3].substr(0,1) === '>' ?  
  6.             $(el).width() > m[3].substr(1) : $(el).width() < m[3].substr(1); 
  7.     } 
  8.  
  9. $('#container :width(>100)'); 

3. :height

           选择所有高度比特殊值大/小的元素。

  1. $.extend($.expr[':'], 
  2.     height: function(el, i, m) 
  3.     { 
  4.         if(!m[3]||!(/^(<|>)\d+$/).test(m[3])) {return false;} 
  5.         return m[3].substr(0,1) === '>' ?  
  6.             $(el).height() > m[3].substr(1) : $(el).height() < m[3].substr(1); 
  7.     } 
  8.  
  9. $('#container :height(<100)'); 

4. :leftOf

           选择所有位于特定元素左边的元素。

  1. $.extend($.expr[':'], 
  2.     leftOf: function(el, i, m) 
  3.     { 
  4.         var oe = $(el).offset(); 
  5.         var om = $(m[3]).offset(); 
  6.  
  7.         return oe.left + $(el).width() < om.left; 
  8.     } 
  9.  
  10. $('#container :leftOf(#element)'); 

5. :rightOf

           选择所有位于特定元素右边的元素。

  1. $.extend($.expr[':'], 
  2.     rightOf: function(el, i, m) 
  3.     { 
  4.         var oe = $(el).offset(); 
  5.         var om = $(m[3]).offset(); 
  6.  
  7.         return oe.left > om.left + $(m[3]).width(); 
  8.     } 
  9.  
  10. $('#container :rightOf(#element)'); 

6. :external

           选择所有除了当前连接其他域名的链接标签

  1. $.extend($.expr[':'], 
  2.     external: function(el) 
  3.     { 
  4.         if(!el.href) {return false;} 
  5.         return el.hostname && el.hostname !== window.location.hostname; 
  6.     } 
  7.  
  8. $('#container :external'); 

7. :target

           选择指定目标的所有链接标签

  1. $.extend($.expr[':'], 
  2.     target: function(el, i, m) 
  3.     { 
  4.         if(!m[3]) {return false;} 
  5.         return (m[3] === '_self' && ($(el).attr('target') == '' || !el.target)) ||  
  6.             (m[3] === $(el).attr('target')); 
  7.     } 
  8.  
  9. $('#container :target(_self)'); 

8. :inView

           选择在可视窗口中的所有元素。

  1. $.extend($.expr[':'], 
  2.     inView: function(el) 
  3.     { 
  4.         var offset = $(el).offset(); 
  5.  
  6.         return !( 
  7.             (offset.top > $(window).height() + $(document).scrollTop()) ||  
  8.             (offset.top + $(el).height() < $(document).scrollTop()) ||  
  9.             (offset.left > $(window).width() + $(document).scrollLeft()) ||  
  10.             (offset.left + $(el).width() < $(document).scrollLeft()) 
  11.         ) 
  12.     } 
  13.  
  14. $('#container :inView'); 

9. :largerThan

           选择所有比指定元素大的元素。

  1. $.extend($.expr[':'], 
  2.     largerThan: function(el, i, m) 
  3.     { 
  4.         if(!m[3]) {return false;} 
  5.         return $(el).width() * $(el).height() > $(m[3]).width() * $(m[3]).height(); 
  6.     } 
  7.  
  8. $('#container :largerThan(#element)'); 

10. :isBold

   选择所有字体权重为700的所有元素。

  1. $.extend($.expr[':'], 
  2.     isBold: function(el) 
  3.     { 
  4.         return $(el).css("fontWeight") === '700'
  5.     } 
  6.  
  7. $('#container :isBold'); 

11. :color

   选择有指定颜色(rgb格式)的元素。

  1. $.extend($.expr[':'], 
  2.     color: function(el, i, m) 
  3.     { 
  4.         if(!m[3]) {return false;} 
  5.         return $(el).css('color') === m[3]; 
  6.     } 
  7.  
  8. $("#container :color(rgb(255, 0, 0))"); 

12. :hasId

   选择指定id归属的元素。

  1. $.extend($.expr[':'], 
  2.     hasId: function(el) 
  3.     { 
  4.         return $(el).attr('id') !== undefined && $(el).attr('id') !== ''
  5.     } 
  6.  
  7. $("#container :hasId"); 

自己创建的自定义选择器可能不会常常用到,但是它确实是值得关注,你的武器库里应该有它的位置。它们会在一些时候派上用场,手到擒来并且让你的代码清晰易于维护。

 
本文由 五月花发表。转载请注明出处:https://www.mihua.net/list/0/2987.html

发表评论

您的昵称:

猜你喜欢

最近更新