首页 > 代码库 > 使用自定义选择器
使用自定义选择器
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（没被选中）；
使用自定义选择器
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。