jQuery选择器源码解读(七):elementMatcher函数


Posted in Javascript onMarch 31, 2015

要读懂Sizzle的Compile执行过程,首先需要弄清楚涉及的各个子程序的功能和关键变量和作用,我将逐一对jQuery-1.10.2版本的Compile代码进行说明,望能给予大家帮助。

elementMatcher(matchers)

1、源码

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];

}

2、功能

该函数返回一个函数,用来判定传入的elem是否符合匹配执行函数数组matchers,若不满足返回false,否则返回true。

若matchers仅有一个元素,则返回该元素本身,否则返回一个新函数——即代码中的function(elem, context, xml)函数。

返回函数效果有点类似于context.filter(selectors),当然,其结果仅仅返回true或false,而非jQuery对象。

3、参数
matchers——数组,每个元素都是非伪类的匹配器执行函数。例如:在实际执行过程中,div.map span:lt(10),其中div和,map的匹配执行函数就会作为matchers的两个元素传入elementMatcher函数来过滤span节点的父节点是否满足要求。

4、返回函数

4.1 若matchers多于1个元素,则返回如下函数:

function(elem, context, xml) {

 var i = matchers.length;

 while (i--) {

  if (!matchers[i](elem, context, xml)) {

   return false;

  }

 }

 return true;

}

4.1.1 功能
从matchers最后一个元素到第一个元素依次调用,以匹配传入的elem节点是否满足要求,全部满足返回true,否则返回false。

4.1.2 参数

elem——待检查的单个节点元素。

context——执行整个选择器字符串匹配的上下文节点,大部分时候是没有用途。

xml——当前搜索对象是HTML还是XML文档,若是HTML,则xml参数为false。

4.2 若matchers只有1个元素,则返回该元素本身。
4.2.1 功能
检查传入的elem是否与选择器匹配,若匹配返回true,否则返回false。

4.2.2 参数
同4.1.2参数说明。

Javascript 相关文章推荐
Extjs Gird 支持中文拼音排序实现代码
Apr 15 Javascript
Jquery获得控件值的三种方法总结
Feb 13 Javascript
jquery默认校验规则整理
Mar 24 Javascript
在JS数组特定索引处指定位置插入元素
Jul 27 Javascript
jquery选择器需要注意的问题
Nov 26 Javascript
超级简单的jquery操作表格方法
Dec 15 Javascript
JavaScript设计模式之建造者模式介绍
Dec 28 Javascript
javascript DIV实现跟随鼠标移动
Mar 19 Javascript
开启BootStrap学习之旅
May 04 Javascript
JavaScript面试题(指针、帽子和女朋友)
Nov 23 Javascript
移动端效果之Swiper详解
Oct 09 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
Sep 29 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
Mar 31 #Javascript
jQuery选择器源码解读(五):tokenize的解析过程
Mar 31 #Javascript
JavaScript制作windows经典扫雷小游戏
Mar 31 #Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
Mar 31 #Javascript
JavaScript制作简易的微信打飞机
Mar 31 #Javascript
JS获取表格内指定单元格html内容的方法
Mar 31 #Javascript
JS实现为表格动态添加标题的方法
Mar 31 #Javascript
You might like
php文档更新介绍
2011/07/22 PHP
PHP 用session与gd库实现简单验证码生成与验证的类方法
2016/11/15 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
jQuery之折叠面板的深入解析
2013/06/19 Javascript
判断某个字符在一个字符串中是否存在的js代码
2014/02/28 Javascript
JS实现文字放大效果的方法
2015/03/03 Javascript
jQuery获取页面元素绝对与相对位置的方法
2015/06/10 Javascript
jquery点击切换背景色的简单实例
2016/08/25 Javascript
node学习记录之搭建web服务器教程
2017/02/16 Javascript
JavaScript屏蔽Backspace键的实现代码
2017/11/02 Javascript
vue结合Echarts实现点击高亮效果的示例
2018/03/17 Javascript
关于Vue项目跨平台运行问题的解决方法
2018/09/18 Javascript
基于游标的分页接口实现代码示例
2018/11/12 Javascript
Nginx设置为Node.js的前端服务器方法总结
2019/03/27 Javascript
微信小程序自定义导航栏实例代码
2019/04/05 Javascript
详解elementui之el-image-viewer(图片查看器)
2019/08/30 Javascript
详解vue-router的Import异步加载模块问题的解决方案
2020/05/13 Javascript
手写Vue2.0 数据劫持的示例
2021/03/04 Vue.js
python实现生命游戏的示例代码(Game of Life)
2018/01/24 Python
Python利用splinter实现浏览器自动化操作方法
2018/05/11 Python
pandas中apply和transform方法的性能比较及区别介绍
2018/10/30 Python
Python实现的逻辑回归算法示例【附测试csv文件下载】
2018/12/28 Python
Python GUI库PyQt5图形和特效样式QSS介绍
2020/02/25 Python
python实现引用其他路径包里面的模块
2020/03/09 Python
解决PyCharm IDE环境下,执行unittest不生成测试报告的问题
2020/09/03 Python
Python监听剪切板实现方法代码实例
2020/11/11 Python
使用CSS3的rem属性制作响应式页面布局的要点解析
2016/05/24 HTML / CSS
实例教程 利用html5和css3打造一款创意404页面
2014/10/20 HTML / CSS
美国知名女性服饰品牌:New York & Company
2017/03/23 全球购物
英国绿色商店:Natural Collection
2019/05/03 全球购物
Street One瑞士:德国现代时装公司
2019/10/09 全球购物
高中生学习计划书
2014/09/15 职场文书
2014年仓库管理员工作总结
2014/11/18 职场文书
《山中访友》教学反思
2016/02/24 职场文书
SpringCloud Alibaba项目实战之nacos-server服务搭建过程
2021/06/21 Java/Android
MySQL利用UNION连接2个查询排序失效详解
2021/11/20 MySQL