[原]Java程序员的JavaScript学习笔记(12——jQuery-扩展选择器)
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){// blablareturn 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 indexeswhile ( 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
能限制你的只有你的想象力了!
转载于:https://www.cnblogs.com/liuhailong2008/p/4055289.html
[原]Java程序员的JavaScript学习笔记(12——jQuery-扩展选择器)相关推荐
- [原]Java程序员的JavaScript学习笔记(7——jQuery基本机制)
计划按如下顺序完成这篇笔记: 理念. 属性复制和继承. this/call/apply. 闭包/getter/setter. prototype. 面向对象模拟. jQuery基本机制. jQuery ...
- [原]Java程序员的JavaScript学习笔记(1——理念)
计划按如下顺序完成这篇笔记: 理念. 属性复制和继承. this/call/apply. this/闭包/getter/setter. prototype. 面向对象模拟. jQuery基本机制. j ...
- Java程序员的JavaScript学习笔记(13—— jQuery UI)
千万别做程序员,尤其别做Java这种门槛低,入门快的程序员(别跟我说Java搞精通了也很牛之类的,原因不解释,做5年以上就知道了),程序员本来就是我见过最坑爹的职业了...Java程序员更是,现在满地 ...
- Java程序猿的JavaScript学习笔记(12——jQuery-扩展选择器)
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Java程序猿的JavaScript学习笔记(汇总文件夹)
最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...
- Java程序猿的JavaScript学习笔记(10—— jQuery-在“类”层面扩展)
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- 黑马程序员之javascript学习笔记:雪花飞舞特效
--------------------------------------------------- 2345王牌技术员联盟.2345王牌技术员联盟.期待与您交流!----------------- ...
- 了不起的盖茨比读后感---Java程序员学Python学习笔记(二)
还是从logdown搬过来的,搬的时候稍微排版了下.今天废话比较多,其实这应该搬到豆掰电影去的.不喜的看官可以绕过.顺便推荐该电影打雷姐唱的一首歌,Young and Beautiful 我们奋力前行 ...
- 黑马程序员_java自学学习笔记(八)----网络编程
黑马程序员_java自学学习笔记(八)----网络编程 android培训. java培训.期待与您交流! 网络编程对于很多的初学者来说,都是很向往的一种编程技能,但是很多的初学者却因为很长一段时间无 ...
最新文章
- 双链表偶数节点求和java_java--删除链表偶数节点
- jS四种函数的调用方式
- HTTP_POST———使用mysql_udf与curl库完成http_post通信模块(mysql_udf,multi_curl,http,post)...
- Dell 电话技术支持工程师答用户问(暴笑)
- GAN能合成2k高清图了!还能手动改细节 | 论文+代码,英伟达出品
- 海绵城市工程_打造透水“民心路”、共创海绵“生态城”|市政工程管理处持续推进城市道路“黑臭水体改造”工程...
- Java HttpServlet 详解
- ZOJ 1914 Arctic Network
- 小米范工具系列之一:小米范 web查找器
- 》》css3--动画
- [转载 蓝韦巍]类似浩方、VS对战平台系统的实现
- Flutter系列五:State的生命周期
- 2020年中国研究生数学建模竞赛E题
- 《From Captions to Visual Concepts and Back》阅读笔记
- qBittorrent
- 深入理解DSP中的重要概念(FT、DTFT、DFT、DFS、ZT、FFT)
- 欢迎前来日本王子酒店享用当地应季美食
- 【Nginx】nginx代理视频流hls地址
- 怎么将PPT里面的普通文字设置成艺术文字
- 第三份工作(一)编写中
热门文章
- 小波图像增强matlab,用Matlab实现基于小波变换的图像增强技术
- linux ubuntu fadora,两大主流Linux版本Ubuntu 18.04和Fedora 28的对比
- “希希敬敬对”团队作业——敏捷冲刺5
- goole机器学习视频链接【学习笔记】
- 为不同的屏幕尺寸提供不同的图片(为那些没有必要下载全尺寸大图的设备节省带宽)...
- quart动态执行定时任务
- 视图、存储函数、存储过程、触发器:MySQL系列之五
- CentOS7 使用tab建补全命令
- Linux远程复制命令SCP
- 设计模式 之 --- GRASP