计划按如下顺序完成这篇笔记:
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程序员之路-----看专业程序员的成长之路
黑马程序员-SpringCloud-学习笔记-03-Eureka注册中心
整合黑马程序员入学Java知识——-------------精华总结
java程序员面试之150++--
黑马程序员-SpringCloud-学习笔记-02-微服务拆分及远程调用
javascript 特效大全----网页程序员的救星 javascript 特效大全----网页程序员的救星 javascript 特效大全----网页程序员的救星 javascript 特效大全----网页程序员的救星 javascript 特效大全----网页程序员的救星 ...
本书是本人目前所看到的国内最好的jquery学习指导书,通俗易懂,深入浅出,一切都从实际开发出发,让大家很快就能上手做ajax开发!因为本书比较大,只能分为多个分卷,请大家谅解!
java程序员好用工具-截屏-Snipaste-1.16.2-1106
java8 Stream API及常用方法,java初级程序员面试(csdn)————程序
javascript 特效大全----网页程序员的救星 javascript 特效大全----网页程序员的救星 javascript 特效大全----网页程序员的救星 javascript 特效大全----网页程序员的救星 javascript 特效大全----网页程序员的救星
本书是本人目前所看到的国内最好的jquery学习指导书,通俗易懂,深入浅出,一切都从实际开发出发,让大家很快就能上手做ajax开发!因为本书比较大,只能分为多个分卷,请大家谅解!
本书是本人目前所看到的国内最好的jquery学习指导书,通俗易懂,深入浅出,一切都从实际开发出发,让大家很快就能上手做ajax开发!因为本书比较大,只能分为多个分卷,请大家谅解!
本书是本人目前所看到的国内最好的jquery学习指导书,通俗易懂,深入浅出,一切都从实际开发出发,让大家很快就能上手做ajax开发!因为本书比较大,只能分为多个分卷,请大家谅解!
本书是本人目前所看到的国内最好的jquery学习指导书,通俗易懂,深入浅出,一切都从实际开发出发,让大家很快就能上手做ajax开发!因为本书比较大,只能分为多个分卷,请大家谅解!
本书是本人目前所看到的国内最好的jquery学习指导书,通俗易懂,深入浅出,一切都从实际开发出发,让大家很快就能上手做ajax开发!因为本书比较大,只能分为多个分卷,请大家谅解!
本书是本人目前所看到的国内最好的jquery学习指导书,通俗易懂,深入浅出,一切都从实际开发出发,让大家很快就能上手做ajax开发!因为本书比较大,只能分为多个分卷,请大家谅解!
本书是本人目前所看到的国内最好的jquery学习指导书,通俗易懂,深入浅出,一切都从实际开发出发,让大家很快就能上手做ajax开发!因为本书比较大,只能分为多个分卷,请大家谅解!
本书是本人目前所看到的国内最好的jquery学习指导书,通俗易懂,深入浅出,一切都从实际开发出发,让大家很快就能上手做ajax开发!因为本书比较大,只能分为多个分卷,请大家谅解!
程序员晋升.doc————电子版_doc版
Java程序员面试笔试宝典-何昊pdf版,高清,带有书签。