Java程序猿的JavaScript学习笔记(12——jQuery-扩展选择器)

计划按例如以下顺序完毕这篇笔记:

  1. Java程序猿的JavaScript学习笔记(1——理念)
  2. Java程序猿的JavaScript学习笔记(2——属性复制和继承)
  3. Java程序猿的JavaScript学习笔记(3——this/call/apply)
  4. Java程序猿的JavaScript学习笔记(4——this/闭包/getter/setter)
  5. Java程序猿的JavaScript学习笔记(5——prototype)
  6. Java程序猿的JavaScript学习笔记(6——面向对象模拟)
  7. Java程序猿的JavaScript学习笔记(7——jQuery基本机制)
  8. Java程序猿的JavaScript学习笔记(8——jQuery选择器)
  9. Java程序猿的JavaScript学习笔记(9——jQuery工具方法)
  10. Java程序猿的JavaScript学习笔记(10——jQuery-在“类”层面扩展)
  11. Java程序猿的JavaScript学习笔记(11——jQuery-在“对象”层面扩展)
  12. Java程序猿的JavaScript学习笔记(12——jQuery-扩展选择器)
  13. Java程序猿的JavaScript学习笔记(13——jQuery UI)
  14. Java程序猿的JavaScript学习笔记(14——扩展jQuery UI)

这是笔记的第12篇,本篇我们尝试扩展jQuery选择器。同一时候这也是一个jQuery源代码解读的过程。

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

0、为什么要扩展?

自带的功能非常强。但有时候代码会非常啰嗦,并且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学习笔记——内部类及其调用方法


下一篇:include指令和include标签的区别