jQuery Sizzle选择器（三）

[转]JQuery - Sizzle选择器引擎原理分析

原文: https://segmentfault.com/a/1190000003933990 ----------------------------------------------------------------------- 说明:14年学习的jquery源码,搬到这里供大家交流. 一.前言 Sizzle原来是jQuery里面的选择器引擎,后来逐渐独立出来,成为一个独立的模块,可以自由地引入到其他类库中.我曾经将其作为YUI3里面的一个module,用起来畅通无阻,没有任何障碍.S…

jQuery Sizzle选择器（三）

在Sizzle的入口方法Sizzle()中看到的一个根据浏览器来初始化document各个方法的函数setDocument(),接下来主要看一下这个方法都做了什么. 但之前有必要看一下它用到的一些Sizzle内部使用的方法: // 通过创建一个div元素,检测被传入的fn是否被当前浏览器支持function assert( fn ) { var div = document.createElement("div"); //此处用try-catch的原因是:被传入的fn很有可能是会报错的…

jQuery Sizzle选择器（二）

自己开始尝试读Sizzle源码. 1.Sizzle同过自执行函数的方式为自己创建了一个独立的作用域,它可以不依赖于jQuery的大环境而独立存在.因此它可以被应用到其它js库中.实现如下:(function(window, undefined){})(window, undefined); 2.Sizzle中最头疼的就是一大片的复杂正则表达式: // 为正则准备的字符串.匹配选择器中的布尔值,例如 $( "input:checked" ); booleans = "…

jQuery Sizzle选择器（一）

1.浏览器对css选择器采取逆向(从右向左)解析的原因: 如果正向解析,例如「div div p em」,我们首先就要检查当前元素到 html 的整条路径,找到最上层的div,再往下找,如果遇到不匹配就必须回到最上层那个 div,往下再去匹配选择器中的第一个 div,回溯若干次才能确定匹配与否,效率很低. 逆向匹配则不同,如果当前的 DOM 元素是 div,而不是 selector 最后的 em,那只要一步就能排除.只有在匹配时,才会不断向上找父节点进行验证.找到所有的em之后,再通过查找他的父…

jQuery笔记---选择器(三)

1.1查找隐藏的tr元素的个数 $(“table tr:hidden”).size() 查找所有可见的tr元素的个数 $(“table tr:not(:hidden)”).size() 一般是不使用,因为效率太慢举例: <body> <table border=" align="center"> <tr style="display:none"> 不显示的意思,所以下面值显示两个,这个tr是不显示的 <td&…

jQuery源码分析系列（三）Sizzle选择器引擎-下

选择函数:select() 看到select()函数,if(match.length === 1){}存在的意义是尽量简化执行步骤,避免compile()函数的调用. 简化操作同样根据tokenize()函数获得标签数组,然后对标签数组首元素是特殊ID选择器的情况进行了判断,之后对标签数组进行遍历匹配,只有当匹配到正确的选择器seed=find(){}并且token为空,此时才是找到了正确结果. select = Sizzle.select = function (selector, conte…

jQuery-1.9.1源码分析系列（三） Sizzle选择器引擎——编译原理

这一节要分析的东东比较复杂,篇幅会比较大,也不知道我描述后能不能让人看明白.这部分的源码我第一次看的时候也比较吃力,现在重头看一遍,再分析一遍,看能否查缺补漏. 看这一部分的源码需要有一个完整的概念后去看才比较容易看懂,所以我们先把整个编译的原理阐述以后再进行解析. 还是以上次的那个CSS选择器为例:#chua > a + .group labe[for="age"].按照我们正常解析CSS的思路从右往左解析(这是效率较高的处理方法),解析之前词法分析完毕,词法分析结果保存在to…

【三】jquery之选择器

转自:https://www.cnblogs.com/youfeng365/p/5846650.html jquery参考手册:http://jquery.cuishifeng.cn/index.html jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div") …

JQuery Sizzle引擎源代码分析

最近在拜读艾伦在慕课网上写的JQuery课程,感觉在国内对JQuery代码分析透彻的人没几个能比得过艾伦.有没有吹牛?是不是我说大话了? 什么是Sizzle引擎? 我们经常使用JQuery的选择器查询元素,查询的选择器有简单也有复杂: 简单点:“div”.“.navi”.“div.navi”. 复杂点:"div input[type='checkbox']"."div.navi + .section p". Query实现查询时也是优先使用DOM标准查询函数,…

Sizzle选择器引擎介绍

一.前言 Sizzle原来是jQuery里面的选择器引擎,后来逐渐独立出来,成为一个独立的模块,可以自由地引入到其他类库中.我曾经将其作为YUI3里面的一个module,用起来畅通无阻,没有任何障碍.Sizzle发展到现在,以jQuery1.8为分水岭,大体上可以分为两个阶段,后面的版本中引入了编译函数的概念,Sizzle的源码变得更加难读.不再兼容低版本浏览器,而且看起来更加零散.本次阅读的是Sizzle第一个阶段的最终版本jQuery1.7,从中收获颇多,一方面是框架设计的思路,另外一方面是…

jQuery基本选择器模块（二）

选择器模块 1.push方法的兼容性(了解) 问题:IE8不支持aplly方法中的第二个参数是伪数组目标:实现 push 方法的浏览器兼容性问题 var push = [].push; try { // 判断 push 是否可用 var container = document.createElement("div"); container.innerHTML = "<p></p><p></p>"; push.ap…

jQuery学习笔记——jQuery常规选择器

一．简单选择器在使用 jQuery 选择器时,我们首先必须使用“$()”函数来包装我们的 CSS 规则.而CSS 规则作为参数传递到 jQuery 对象内部后,再返回包含页面中对应元素的 jQuery 对象.随后,我们就可以对这个获取到的 DOM 节点进行行为操作了.#box {//使用 ID 选择器的 CSS 规则color:red;//将 ID 为 box 的元素字体颜色变红}在 jQuery 选择器里,我们使用如下的方式获取同样的结果:$('#box').css('color', 'red…

JavaScipt 源码解析 Sizzle选择器

jQuery的定位就是一个DOM的操作库,那么可想而知选择器是一个至关重要的模块.Sizzle,作为一个独立全新的选择器引擎,出现在jQuery 1.3版本之后,并被John Resig作为一个开源的项目,可以用于其他框架:Mool.Dojo.YUI等. jQuery是总入口,选择器支持9种方式的处理: 1.$(document) 2.$('<div>') 3.$('div') 4.$('#test') 5.$(function(){}) 6.$("input:radio"…

jQuery过滤选择器

//基本过滤器$('li:first').css('background','#ccc');//第一个元素$('li:last').css('background','red');//最后一个元素$('li:not(.red)').css('background','red');//非class为red的元素$('li:even').css('background','red');//索引为偶数的元素$('li:odd').css('background','red');//索引为奇数的元素$(…

关于jquery ID选择器的一点看法

最近看到一道前端面试题: 请优化selector写法:$(".foo div#bar:eq(0)") 我给出的答案会是: 1. $("#bar") 2. $("div#bar") 下面说说我为什么会给出两种答案 1. 因为页面要求ID是唯一的,题目中的语句,可以直接优化成ID选择 2. 因为jQuery的选择器引擎用的是Sizzle,而$("div#bar")这样的写法,在Sizzle内部,会是一个从右往左的查找顺序,也就是…

jQuery入门第三

jQuery入门第三 1.HTML 2.CSS 衣服 3.javascript 可以动的人 4.DOM 编程对html文档的节点操作 5.jQuery 对 javascript的封装简练的语法复杂的操作 * -选择器 * -筛选 * -CSS * -属性 * -文档 * -事件 * -Ajax(Django) <style> td{ border:1px solid black; } td{ width:70px; height:20px; } p{ width:70px; height…

jQuery基础学习(三)—jQuery中的DOM操作

一.查找节点查找属性节点: 通过jQuery的选择器来完成. 操作属性节点: 调用jQuery对象的attr()来获取它的属性值. 操作文本节点: 通过text()方法. //1.操作文本节点:通过jQuery的text()方法 alert($("#bj").text()); $("#bj").text("南京"); alert($("#bj").text()); //2.操作属性节点 //注:…

jQuery常用选择器总结

jQuery常用选择器总结: 我们都知道jQuery是JavaScript(JS)的框架,它的语法简单使用方便,被广大开发人员青睐.现在我就它常用的并且十分强大的选择器的方式,做一个总结.鉴于它的选择器方式众多,我就自己平时工作之中所遇到的常见的方式做一个总结. 一,元素查找方式: $("#myElement") 选择id为myElement的元素,因为id在使用中是唯一的,所以这样的选择也是指定的不变的. $("div") 选择所有的div标签元素,返…

js jquery css 选择器总结

js jquery css 选择器总结一.原始JS(Document 对象)选择器. id选择器:document.getElementById("test"); name选择器:document.getElementsByName("test"); 节点选择器:document.getElementsByTagName("p"); class选择器:document.getElementsByClassName("test"…

python 全栈开发，Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)

js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象对象 : 属性和方法某个对象中 function $(id){ return document.getElementById(id) } 事件操作 3.BOM user-Agent location.pathname location.href 一.jQuery的介绍 1.为什么要使用jQuery 在用js写代码时,会遇到一些问题: window.on…

jquery 属性选择器

jquery 属性选择器第一种根据属性选择E[attr] $("[title]").click().......... 即选择所有元素内属性带有title的元素即<li class="aaaa" title="ttt">li-1</li><li title="fffff">li-2</li><div class="aaaa" title=&quo…

jQuery基础——选择器、效果

一.使用JS的痛处在学习和使用js的过程中发现了js的一些痛处: 1.书写繁琐,代码量大. 2.代码复杂. 3.动画效果很难实现.使用定时器,要小心各种定时器的清除.各种操作和处理事件不好实现. 4.浏览器的兼容性. 同样是实现点击按钮后,展示三个div栏,并在div栏显示内容: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti…

JQuery日期选择器插件date-input

JQuery日期选择器插件之date-input 官方网站:http://jonathanleighton.com/projects/date-input/ 下载地址: http://github.com/jonleighton/date_input/raw/master/jquery.date_input.js http://github.com/jonleighton/date_input/raw/master/date_input.css 中文支持: [javascript] view p…

jquery-5 jQuery筛选选择器

jquery-5 jQuery筛选选择器一.总结一句话总结:选择器加动态添加方法可以不用想方法名,这个简单方便. 1.筛选选择器有哪三种? 过滤查找串联 1.过滤 eq();first();last();not();slice(); 2.查找 children();find();next();nextAll();parent();prev();prevAll();siblings(); 3.串联 add();andSelf(); 2.筛选选择器中的查找有哪几种? 子代后代邻接兄弟…

jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法

jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法一丶什么是JQuery JQuery: JQuery是js的一个库,高度封装了js常用的功能,提供简便方法,调用简单,提高开发效率 js库是包含了把复杂的功能封装到简单的方法中 JQuery的两大特性: 链式编程:可以.的形式实现多个功能 …

jQuery基础-选择器，样式操作

入口函数:ready() 当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时,会发生 ready 事件. 由于该事件在文档就绪后发生,因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法.正如上面的例子中那样. ready() 函数规定当 ready 事件发生时执行的代码. ready() 函数仅能用于当前文档,因此无需选择器. 允许使用以下三种语法: 语法 1 $(document).ready(function) 语法 2 $().ready(funct…

jQuery css()选择器使用说明

css选择器只是jquery中的一个功能罢了,下面我来给各位朋友详细介绍jQuery css()选择器使用方法与说明详解,有需要了解学习的同学可参考. CSS操作有一个重要的方法:CSS() CSS()有三个不同的语法,来完成各自的工作: ■$(selector).css(name,value)■$(selector).css({properties})■$(selector).css(name) 返回CSS属性使用CSS(name)返回指定的第一个匹配元素的CSS属性值: 示例 $(this)…