作者博客：http://blog.csdn.net/stationxp 作者微博：http://weibo.com/liuhailong2008 转载请取得作者同意
// Override sizzle attribute retrieval jQuery.find = Sizzle; jQuery.expr = Sizzle.selectors; jQuery.expr[":"] = jQuery.expr.pseudos; jQuery.unique = Sizzle.uniqueSort; jQuery.text = Sizzle.getText; jQuery.isXMLDoc = Sizzle.isXML; jQuery.contains = Sizzle.contains;从字面分析jQuery.expr和jQuery.expr[":"]应该是我们的着力点。
Expr = Sizzle.selectors = {
pseudos: {
"enabled": function( elem ) {
return elem.disabled === false;
},
"disabled": function( elem ) {
return elem.disabled === true;
}
}
}通过以上代码，我们看出jQuery.expr[":"]就是我们的发力点，jQuery.expr.pseudos的代码可以作为我们的参考。$.extend($.expr[':'],{
"uitype": function(elem){
// blabla
return true/false;
}
}); 从传入参数elem中，可以通过elem.attr()获得属性，做判断，然后决定当前元素是否返回。$(":enabled")
$("#xx :enabled")
$("blabla :enabled")那我们扩展的选择器用法应该是： $("blabla :uitype") 。 "gt": createPositionalPseudo(function( matchIndexes, length, argument ) {
var i = argument < 0 ? argument + length : argument;
for ( ; ++i < length; ) {
matchIndexes.push( i );
}
return matchIndexes;
})
function createPositionalPseudo( fn ) {
return markFunction(function( argument ) {
argument = +argument;
return markFunction(function( seed, matches ) {
var j,
matchIndexes = fn( [], seed.length, argument ),
i = matchIndexes.length;
// Match elements found at the specified indexes
while ( i-- ) {
if ( seed[ (j = matchIndexes[i]) ] ) {
seed[j] = !(matches[j] = seed[j]);
}
}
});
});
}太复杂，懒得看，写段代码试一下<div uitype='header'>头</div>
<div uitype='footer'>尾</div>
<script>
$.extend($.expr[':'],{
"uitype": function(elem){
var t = $(elem).attr('uitype');
console.log(t);
return !!t;
}
});
var arr = $(":uitype");
console.log(arr.length);
</script>输出：<div uitype='header'>header</div>
<div uitype='footer'>footer</div>
<script>
$.extend($.expr[':'],{
"uitype": function(elem){
// var t = $(elem).attr('uitype');
console.log(arguments.callee.caller);//打印调用者
for(var i = 0;i<arguments.length;++i){//打印参数的值
console.log(typeof arguments[i],arguments[i]);
}
return true;
}
});
var arr = $(":uitype[uitype='footer']");
console.log(arr.length); // output : 1
输出：function elementMatcher( matchers ) {
return matchers.length > 1 ?
function( elem, context, xml ) {
var i = matchers.length;
while ( i-- ) {
if ( !matchers[i]( elem, context, xml ) ) {
return false;
}
}
return true;
} :
matchers[0];
}传入了3个参数：元素本身，上下文，和是否xml。
[]已经被实现了，试试小括号：
<div uitype='header'>header</div>
<div uitype='footer'>footer</div>
<script>
$.extend($.expr[':'],{
"uitype": function(elem,content,xml){
for(var i = 0;i<arguments.length;++i){
console.log(i);
console.log(typeof arguments[i],arguments[i]);
}
return true;
}
});
var arr = $(":uitype(xx)");
console.log(arr.length);
</script>输出：
充满无限可能了！
<strong><div uitype='header'>header</div>
<div uitype='footer'>footer</div>
<script>
$.extend($.expr[':'],{
"uitype": function(elem,someNumber,exprParams){
console.log($(elem).attr('uitype'),exprParams[3]);
return true;
}
});
var arr = $(":uitype(xx)");</strong>输出：Java程序员的JavaScript学习笔记（12——jQuery-扩展选择器）
原文地址：http://blog.csdn.net/stationxp/article/details/40501123
