使用自定义选择器

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（没被选中）；