当前位置:嗨网首页>书籍在线阅读

48-解决方案

  
选择背景色: 黄橙 洋红 淡粉 水蓝 草绿 白色 选择字体: 宋体 黑体 微软雅黑 楷体 选择字体大小: 恢复默认

2.12.2 解决方案

可以在 jQuery.expr[':'] 对象下扩展jQuery的选择器表达式,这是 Sizzle.selectors.filters 的别名。每个新的过滤器表达式都定义为这个对象的属性,如:

jQuery.expr[':'].newFilter = function(elem, index, match){
   return true; //像filter()方法一样返回true/false
};

该函数将在当前集合的所有元素上运行,必须返回真(在集合中保留元素)或者假(从集合中删除元素)。传递给函数的信息有三个部分:问题中的元素、元素在整个集合中的索引,以及从包含用于更复杂表达式的重要信息的正则表达式匹配返回的匹配数组。

例如,你打算选择有某个属性的所有元素。下列过滤器匹配内联显示的所有元素:

jQuery.expr[':'].inline = function(elem) {
   return jQuery(elem).css('display') === 'inline';
};

既然已经创建了一个自定义选择器,就可以将其用在任何选择器表达式中:

// E.g. #1
jQuery('div a:inline').css('color', 'red');
// E.g. #2
jQuery('span').filter(':not(:inline)').css('color', 'blue')

jQuery的自定义选择器( :radio:hidden 等)就是这样创建的。