matchesSelector 匹配选择器表达式sizzle的实现
Sizzle.matchesSelector = function( node, expr ) {
return Sizzle( expr, null, null, [node] ).length > 0;
};
(function(){
var html = document.documentElement,
matches = html.matchesSelector || html.mozMatchesSelector || html.webkitMatchesSelector || html.msMatchesSelector;
if ( matches ) {
// Check to see if it's possible to do matchesSelector
// on a disconnected node (IE 9 fails this)
var disconnectedMatch = !matches.call( document.createElement( "div" ), "div" ),
pseudoWorks = false;
try {
// This should fail with an exception
// Gecko does not error, returns false instead
matches.call( document.documentElement, "[test!='']:sizzle" );
} catch( pseudoError ) {
pseudoWorks = true;
}
Sizzle.matchesSelector = function( node, expr ) {
// Make sure that attribute selectors are quoted
expr = expr.replace(/\=\s*([^'"\]]*)\s*\]/g, "='$1']");
if ( !Sizzle.isXML( node ) ) {
try {
if ( pseudoWorks || !Expr.match.PSEUDO.test( expr ) && !/!=/.test( expr ) ) {
var ret = matches.call( node, expr );
// IE 9's matchesSelector returns false on disconnected nodes
if ( ret || !disconnectedMatch ||
// As well, disconnected nodes are said to be in a document
// fragment in IE 9, so check for that
node.document && node.document.nodeType !== 11 ) {
return ret;
}
}
} catch(e) {}
}
return Sizzle(expr, null, null, [node]).length > 0;
};
}
})();
偶然在github上看到一个很好的是示例实现代码为
(function(global, ElemProto) {
var matchesMethod = (function() {
if (ElemProto.matchesSelector) {
return 'matchesSelector';
}
var prefixes = [ 'webkit', 'moz', 'ms', 'o' ];
for ( var i = 0, len = prefixes.length; i < len; i++) {
var prefix = prefixes[i];
var method = prefix + 'MatchesSelector';
if (ElemProto[method]) {
return method;
}
}
})();
console.log('abc');
// ----- match ----- //
function match(elem, selector) {
return elem[matchesMethod](selector);
}
// ----- appendToFragment ----- //
function checkParent(elem) {
// not needed if already has parent
if (elem.parentNode) {
return;
}
var fragment = document.createDocumentFragment();
fragment.appendChild(elem);
}
function query(elem, selector) {
// append to fragment if no parent
checkParent(elem);
// match elem with all selected elems of parent
var elems = elem.parentNode.querySelectorAll(selector);
for ( var i = 0, len = elems.length; i < len; i++) {
// return true if match
if (elems[i] === elem) {
return true;
}
}
// otherwise return false
return false;
}
// ----- matchChild ----- //
function matchChild(elem, selector) {
checkParent(elem);
return match(elem, selector);
}
// ----- matchesSelector ----- //
var matchesSelector;
if (matchesMethod) {
var div = document.createElement('div');
var supportsOrphans = match(div, 'div');
matchesSelector = supportsOrphans ? match : matchChild;
} else {
matchesSelector = query;
}
console.log(matchesSelector);
// transport
if (typeof define === 'function' && define.amd) {
// AMD
define('matches-selector/matches-selector', [], function() {
return matchesSelector;
});
} else {
// browser global
window.matchesSelector = matchesSelector;
}
})(this, Element.prototype);
源地址:https://gist.github.com/3062955
matchesSelector 匹配选择器表达式sizzle的实现的更多相关文章
- [JQuery]JQuery选择器引擎Sizzle
写代码过程中,发现使用JQuery选择器时,$('div.tooltip')和$('.tooltip')的结果不一样,怀疑和选择器的代码逻辑有关(事后证明是代码的低级错误,但是从查找原因的过程中,学到 ...
- Linux shell中的一个问题 ${}带正则匹配的表达式
目前在准备龙芯项目的PMON,在研究其编译过程的时候,看到一些make 语句,百思不得其解.后来在shell编程中看到一点资料,牵扯到Shell中的正则表达式.故记录下来,以备后来查阅. 问题: 在某 ...
- jquery 通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素)
jquery 通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素) $("ul").append("<li cla ...
- 常用的re模块的正则匹配的表达式
07.01自我总结 常用的re模块的正则匹配的表达式 一.校验数字的表达式 1.数字 ^[0-9]\*$ 2.n位的数字 ^\d{n}$ 3.至少n位的数字 ^\d{n,}$ 4.m-n位的数字 ^\ ...
- 数据结构(3) 第三天 栈的应用:就近匹配/中缀表达式转后缀表达式 、树/二叉树的概念、二叉树的递归与非递归遍历(DLR LDR LRD)、递归求叶子节点数目/二叉树高度/二叉树拷贝和释放
01 上节课回顾 受限的线性表 栈和队列的链式存储其实就是链表 但是不能任意操作 所以叫受限的线性表 02 栈的应用_就近匹配 案例1就近匹配: #include <stdio.h> in ...
- 十七.jQuery源码解析之入口方法Sizzle(1)
函数Sizzle(selector,context,results,seed)用于查找与选择器表达式selector匹配的元素集合.该函数是选择器引擎的入口. 函数Sizzle执行的6个关键步骤如下: ...
- JQuery前端技术记录
[Jquery-leearning notes-2015]by lijun 1 Jquery是javascript实现的库,目标在于改变web应用的高交互性的方式. 其不唐突性:样式(.css). ...
- jquery的find()
jQuery 遍历 - find() 方法 jQuery 遍历参考手册 实例 搜索所有段落中的后代 span 元素,并将其颜色设置为红色: $("p").find("sp ...
- jQuery 源码分析(十九) DOM遍历模块详解
jQuery的DOM遍历模块对DOM模型的原生属性parentNode.childNodes.firstChild.lastChild.previousSibling.nextSibling进行了封装 ...
随机推荐
- Github Atom 1.12.0-beta3 发布
Github Atom 1.12.0-beta3 发布了,Atom 是 Github 专门为程序员推出的一个跨平台文本编辑器.具有简洁和直观的图形用户界面,并有很多有趣的特点:支持CSS,HTML,J ...
- 安全协议系列(五)---- IKE 与 IPSec(中)
在上一篇中,搭建好了实验环境.完整运行一次 IKE/IPSec 协议,收集相关的输出及抓包,就可以进行协议分析.分析过程中,我们将使用 IKE 进程的屏幕输出和 Wireshark 抓包,结合相关 R ...
- WebGL如何解决中文文字载入
关于WebGL载入中文字体问题,我在网上搜了一下,发现例子并不多,而且只能实现隶书的载入,不支持其他中文字体. 下面是实现的代码: <script src="../js/three.m ...
- protobuf简介和使用
1.Protocol Buffers简介 Protocol Buffers (ProtocolBuffer/ protobuf )是Google公司开发的一种数据描述语言,类似于XML能够将结构化数据 ...
- oracle全文索引
1.检查数据库是否具有全文检索功能(这是针对已经建成使用的数据库) 查看用户中是否存在ctxsys用户,查询角色里是否存在ctxapp角色.以上两个中的1个不满足(不存在),则说明没有装过全文检索功能 ...
- 【Excel】宏之初认识
出于提高效率的原因,希望excel能够不需要人为干预的完成一些操作,学习excel宏的编写与调试: 第一列输入公式,第二类输出计算结果:(如果自动获取文件的行数,待补充) Sub Calc() a = ...
- Excel 改变列表头显示方式, Excel显示列数字
'显示数字列号 Sub showCellNumber() Application.ReferenceStyle = xlR1C1 End Sub '显示字母列号 Sub showCellZimu() ...
- SqlServer性能优化 通过压缩与计算列提高性能(十一)
压缩: 1.压缩的对象 1.表 2.索引(非聚集索引手工做) 3.备份(手工做) 2.对性能影响 1.提高IO性能 2.降低CPU性能 行压缩: 1.对null值不占用空间 2.对Nu ...
- 从零开始学习Node.js例子八 使用SQLite3和MongoDB
setup.js:初始化数据库 var util = require('util'); var async = require('async'); //npm install async var no ...
- Swift 编程语言自己实践 -自己在Xcode6 动手写20140603
Swift 是什么,大家都回去百度或者Google,有的甚至认为是Taylor Swift(她是我的偶像),但是如果今天在百度百科里搜索绝对没有说是Apple最新推出的编程语言,因为是在2014年6月 ...