jQuery中最重要的当属jQuery选择器，它彻底改变了我们平时获取对象的方式，可以获取几乎任何语意的对象, 而有时在完成一些特殊任务时查找合适的选择器会变得麻烦。此时，自己创建的自定义选择器就派上用场了。
最近我开始越来越频繁地写jQuery选择器，我发现在完成一些特殊任务时这是一个很清晰有效的方法，而我以前通常是用迭代器的。这是件如果你不去做便不会发现的事。所以我决定写些指导来让大家轻松运用jQuery写出自己的选择器。
首先这是一个在创建自己的jQuery选择器会需要的样板文件：
$.extend($.expr[':'],
{
selectorName: function(el, i, m)
{
return true/false;
},
selectorName2: function(el, i, m)
{
return true/false;
}
});
下面是调用选择器的两种方法，一种需要参数一种不需要，
$("#container :selectorName");
$("#conainert :selectorName(#element)");
$("#conainert :selectorName(>300)");
参数“i”和“m”并不会一直在用，他们只是集合中元素的当前指针和参数的匹配器。当你调用一个参数时匹配器才会出现，通常的表达和返回值如下：
[":width(>100)", "width", "", ">100"]
你可以根据自己的喜好输入相应的值，我也给出了一些例子来更灵活地创建选择器的取值范围。基本上我是为了让当前项目需要时可以方便地获取并使用selectors.js文件。
还有一点我们可以把这些选择器跟一些已存在的有趣的jQuery选择器绑在一起。
$("#container :isBold:even");$("#container :leftOf(#element):width(>100):height(>100)");
你可以下载程序库找出你要的文件。[点击下载]
也可以免费上传你的选择器。[点击上传]
下面是用在我项目里的12款我自己创建的自定义选择器实例。只要在当前元素通过选择器测试时能够输出true或者false值，你就可以任意在这些选择器里随意加自己的东西。
1. :loaded
选择所有的下载图片。
$.extend($.expr[':'],
{
loaded: function(el)
{
return $(el).data('loaded');
}
}
$('img').load(function(){ $(this).data('loaded', true); });
$('img:loaded');
2. :width
选择所有比宽度特殊值大/小的元素
$.extend($.expr[':'],
{
width: function(el, i, m)
{
if(!m[3]||!(/^(<|>)d+$/).test(m[3])) {return false;}
return m[3].substr(0,1) === '>' ?
$(el).width() > m[3].substr(1) : $(el).width() < m[3].substr(1);
}
}
$('#container :width(>100)');
3. :height
选择所有高度比特殊值大/小的元素。
$.extend($.expr[':'],
{
height: function(el, i, m)
{
if(!m[3]||!(/^(<|>)d+$/).test(m[3])) {return false;}
return m[3].substr(0,1) === '>' ?
$(el).height() > m[3].substr(1) : $(el).height() < m[3].substr(1);
}
}
$('#container :height(<100)');
4. :leftOf
选择所有位于特定元素左边的元素。
$.extend($.expr[':'],
{
leftOf: function(el, i, m)
{
var oe = $(el).offset();
var om = $(m[3]).offset();
return oe.left + $(el).width() < om.left;
}
}
$('#container :leftOf(#element)');
5. :rightOf
选择所有位于特定元素右边的元素。
$.extend($.expr[':'],
{
rightOf: function(el, i, m)
{
var oe = $(el).offset();
var om = $(m[3]).offset();
return oe.left > om.left + $(m[3]).width();
}
}
$('#container :rightOf(#element)');
6. :external
选择所有除了当前连接其他域名的链接标签
$.extend($.expr[':'],
{
external: function(el)
{
if(!el.href) {return false;}
return el.hostname && el.hostname !== window.location.hostname;
}
}
$('#container :external');
7. :target
选择指定目标的所有链接标签
$.extend($.expr[':'],
{
target: function(el, i, m)
{
if(!m[3]) {return false;}
return (m[3] === '_self' && ($(el).attr('target') == '' || !el.target)) ||
(m[3] === $(el).attr('target'));
}
}
$('#container :target(_self)');
8. :inView
选择在可视窗口中的所有元素。
$.extend($.expr[':'],
{
inView: function(el)
{
var offset = $(el).offset();
return !(
(offset.top > $(window).height() + $(document).scrollTop()) ||
(offset.top + $(el).height() < $(document).scrollTop()) ||
(offset.left > $(window).width() + $(document).scrollLeft()) ||
(offset.left + $(el).width() < $(document).scrollLeft())
)
}
}
$('#container :inView');
9. :largerThan
选择所有比指定元素大的元素。
$.extend($.expr[':'],
{
largerThan: function(el, i, m)
{
if(!m[3]) {return false;}
return $(el).width() * $(el).height() > $(m[3]).width() * $(m[3]).height();
}
}
$('#container :largerThan(#element)');
10. :isBold
选择所有字体权重为700的所有元素。
$.extend($.expr[':'],
{
isBold: function(el)
{
return $(el).css("fontWeight") === '700';
}
}
$('#container :isBold');
11. :color
选择有指定颜色（rgb格式）的元素。
$.extend($.expr[':'],
{
color: function(el, i, m)
{
if(!m[3]) {return false;}
return $(el).css('color') === m[3];
}
}
$("#container :color(rgb(255, 0, 0))");
12. :hasId
选择指定id归属的元素。
$.extend($.expr[':'],
{
hasId: function(el)
{
return $(el).attr('id') !== undefined && $(el).attr('id') !== '';
}
}
$("#container :hasId");
自己创建的自定义选择器可能不会常常用到，但是它确实是值得关注，你的武器库里应该有它的位置。它们会在一些时候派上用场，手到擒来并且让你的代码清晰易于维护。
