码迷,mamicode.com
首页 > 其他好文 > 详细

使用自定义选择器

时间:2014-12-18 14:59:14      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:style   blog   ar   io   color   os   使用   sp   on   

jQuery允许我们在css选择器的基础上定义自定义选择器来让我们的代码更简洁;

下面是使用方法和参数说明:

 1 $.expr[‘:‘].mycustomselector= function(element, index, meta, stack){
 2     // element- DOM元素
 3     // index - 堆栈中当前遍历的索引值
 4     // meta - 关于你的选择器的数据元
 5     // stack - 用于遍历所有元素的堆栈
 6  
 7     // 包含当前元素则返回true
 8     // 不包含当前元素则返回false
 9 };
10  
11 // 自定义选择器的应用:
12 $(‘.someClasses:test‘).doSomething();

下面,我们来举个栗子(对,栗子就是这样举起来的);

我们通过使用自定义选择器来锁定含有”rel”属性的元素集:
html:

 1 <ul>
 2   <li>
 3     <a href="#">without rel</a>
 4   </li>
 5   <li>
 6     <a rel="somerel" href="#">with rel</a>
 7   </li>
 8   <li>
 9     <a rel="" href="#">without rel</a>
10   </li>
11   <li>
12     <a rel="nofollow" href="#">a link with rel</a>
13   </li>
14 </ul>

js:

 1 $.expr[‘:‘].withRel = function(element){
 2   var $this = $(element);
 3   //仅返回rel属性不为空的元素
 4   return ($this.attr(‘rel‘) != ‘‘);
 5 };
 6  
 7 $(document).ready(function(){
 8 //自定义选择器的使用很简单,它和其他选择器一样,返回一个元素包装集
 9 //你可以为他使用格式方法,比如下面这样修改它的css样式
10  $(‘a:withRel‘).css(‘background-color‘, ‘green‘);
11 });

这样,我们就让rel属性不为空的元素的背景颜色变成绿色。(第1,2,4个<a>背景颜色变成绿色,也就是说没有rel属性的<a>也被选中了。$this.attr(‘rel‘) !=‘ ‘居然返回true

注意:我们可以在js部分的第4行代码中编写我们需要实现的逻辑与包含器。包含返回true,不包含返回false。

        这里有个很奇怪的现象,当我们把js部分的第4行代码改为 return ($this.attr(‘rel‘)); 只有第2个和第4个<a>被选中了。也就是说,3个<a>rel=""为空的元素,也是返回false(没被选中);

         

 

使用自定义选择器

标签:style   blog   ar   io   color   os   使用   sp   on   

原文地址:http://www.cnblogs.com/yesw/p/4171522.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!