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的实现的更多相关文章

  1. [JQuery]JQuery选择器引擎Sizzle

    写代码过程中,发现使用JQuery选择器时,$('div.tooltip')和$('.tooltip')的结果不一样,怀疑和选择器的代码逻辑有关(事后证明是代码的低级错误,但是从查找原因的过程中,学到 ...

  2. Linux shell中的一个问题 ${}带正则匹配的表达式

    目前在准备龙芯项目的PMON,在研究其编译过程的时候,看到一些make 语句,百思不得其解.后来在shell编程中看到一点资料,牵扯到Shell中的正则表达式.故记录下来,以备后来查阅. 问题: 在某 ...

  3. jquery 通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素)

    jquery 通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素) $("ul").append("<li cla ...

  4. 常用的re模块的正则匹配的表达式

    07.01自我总结 常用的re模块的正则匹配的表达式 一.校验数字的表达式 1.数字 ^[0-9]\*$ 2.n位的数字 ^\d{n}$ 3.至少n位的数字 ^\d{n,}$ 4.m-n位的数字 ^\ ...

  5. 数据结构(3) 第三天 栈的应用:就近匹配/中缀表达式转后缀表达式 、树/二叉树的概念、二叉树的递归与非递归遍历(DLR LDR LRD)、递归求叶子节点数目/二叉树高度/二叉树拷贝和释放

    01 上节课回顾 受限的线性表 栈和队列的链式存储其实就是链表 但是不能任意操作 所以叫受限的线性表 02 栈的应用_就近匹配 案例1就近匹配: #include <stdio.h> in ...

  6. 十七.jQuery源码解析之入口方法Sizzle(1)

    函数Sizzle(selector,context,results,seed)用于查找与选择器表达式selector匹配的元素集合.该函数是选择器引擎的入口. 函数Sizzle执行的6个关键步骤如下: ...

  7. JQuery前端技术记录

    [Jquery-leearning notes-2015]by lijun 1   Jquery是javascript实现的库,目标在于改变web应用的高交互性的方式. 其不唐突性:样式(.css). ...

  8. jquery的find()

    jQuery 遍历 - find() 方法 jQuery 遍历参考手册 实例 搜索所有段落中的后代 span 元素,并将其颜色设置为红色: $("p").find("sp ...

  9. jQuery 源码分析(十九) DOM遍历模块详解

    jQuery的DOM遍历模块对DOM模型的原生属性parentNode.childNodes.firstChild.lastChild.previousSibling.nextSibling进行了封装 ...

随机推荐

  1. Python学习路程day19

    Python之路,Day19 - Django 进阶   本节内容 自定义template tags 中间件 CRSF 权限管理 分页 Django分页 https://docs.djangoproj ...

  2. meta头部标签意义作用!

    1.<meta name="viewport" id="viewport" content="width=device-width, initi ...

  3. 手把手Maven搭建SpringMVC+Spring+MyBatis框架(超级详细版)

    手把手Maven搭建SpringMVC+Spring+MyBatis框架(超级详细版) SSM(Spring+SpringMVC+Mybatis),目前较为主流的企业级架构方案.标准的MVC设计模式, ...

  4. Android Studio 个人常用设置

    1.主题 Darcula主题真的看起来舒服很多呢: 2.常用快捷键 "Toggle Case" "Quick Documentation" "Refo ...

  5. bookstores网上书店测试缺陷报告1

    Bookstore网上书店系统测试缺陷报告   缺陷编号 01.01.0001 发现人 吴赵昕 记录日期 2016-06-10 所属模块 购物车 确认人 吴赵昕 确认日期 2016-06-10 当前状 ...

  6. Oracle监听小问题

    啥情况 宁波_弈风 15:17:40   宁波_弈风 15:17:49 默认配置路径 宁波_弈风 15:18:09   宁波_弈风 15:19:13 我原来一直都在SAMPLE文件里面配置和保存,因为 ...

  7. Adobe Dreamweaver代码编辑

    Adobe Dreamweaver 同义词 DW(Adobe Dreamweaver的缩写)一般指Adobe Dreamweaver Adobe Dreamweaver,简称“DW”,中文名称 &qu ...

  8. 如何清除SQL Server Management Studio的最近服务器列表

    SQL Server Management Studio (SSMS) 的"连接到服务器"对话框会记录用户所有访问过的服务器名称,这个功能对于经常连接多个数据库的人来说确实挺方便的 ...

  9. Fiddler2 主菜单

    Fiddler2 主菜单 六个主菜单分别是: 文件(File) Capture Traffic ——启用捕获功能,快捷键 F12 此功能的开启/关闭状态,程序安装后默认是开启的.可以在 Fiddler ...

  10. nginx 基本操作

    nginx 是什么 nginx 是轻量.高性能的网页服务器,相较 Apache 占有内存小. 下载 https://nginx.org/en/download.html 默认根目录 安装目录下的 ht ...