首页 > 代码库 > Java程序员的JavaScript学习笔记（12——jQuery-扩展选择器）

Java程序员的JavaScript学习笔记（12——jQuery-扩展选择器）

2024-07-29 10:47:16   220人阅读

计划按如下顺序完成这篇笔记：
1.    理念。
2.    属性复制和继承。
3.    this/call/apply。
4.    闭包/getter/setter。
5.    prototype。
6.    面向对象模拟。
7.    jQuery基本机制。
8.    jQuery选择器。
9.    jQuery工具方法。
10.    jQuery-在“类”层面扩展。
11.    jQuery-在“对象”层面扩展。
12.    jQuery-扩展选择器。
13.    jQuery UI。
14.    扩展jQuery UI。
这是笔记的第12篇，本篇我们尝试扩展jQuery选择器，同时这也是一个jQuery源码解读的过程。

作者博客：http://blog.csdn.net/stationxp
作者微博：http://weibo.com/liuhailong2008
转载请取得作者同意

0、为什么要扩展？

自带的功能很强，但有时候代码会很啰嗦，而且初级人员总是掌握不好，影响效率。
从架构角度可以简化的话，能提高程序可读性，提高效率。

1、如何扩展？

jQuery为选择器提供了丰富的扩展机制。如下：
// 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的代码可以作为我们的参考。
扩展jQuery选择器的代码如下：
$.extend($.expr[':'],{
    "uitype": function(elem){
		// blabla
        return true/false;
    }
});
从传入参数elem中，可以通过elem.attr()获得属性，做判断，然后决定当前元素是否返回。
比想象的简单太多！

问过度娘，psedudos中定义的选择器用法是：
$(":enabled")
$("#xx :enabled")
$("blabla :enabled")
那我们扩展的选择器用法应该是： $("blabla :uitype") 。
Err...还需要传入参数，形如： $("div[:uitype=‘panel‘]");
找个例子：
		"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]);
				}
			}
		});
	});
}
太复杂，懒得看，写段代码试一下

2、举例子

2.1、不带参数的

<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>
输出：
undefined
undefined
undefined
undefined
header
footer
undefined
2 // 找到两个


2.2、带参数的

<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 code ... 
object  div //footer的dom，而且只有这个，已经做好筛选了， [] 中的筛选是不需要我写代码就能获得的
object #document //文档根对象
boolean false 
关于调用者，根据function code找到了
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>
输出：
object  div // elem 
number 0 // 什么？ 
object ["uitype", "uitype", "", "xx"] //得到了 xx ，这个正是我想要的


充满无限可能了！


整理代码框架如下：
<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>
输出：
header xx 
footer xx 


能限制你的只有你的想象力了！

Java程序员的JavaScript学习笔记（12——jQuery-扩展选择器）


联系
我们