`
phpxiaoxin
  • 浏览: 249134 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

关于jquery 1.3 选择器引擎(Sizzle selector engine)

    博客分类:
  • js
阅读更多

红色带括号文字部分乃我自己加的说明

 

关于jQuery的新选择器引擎–Sizzle下面地址有介绍了,这里不多说了

原文:http://roln.cn/archives/252

 

下面看一下例子和结构图。转自(原文更详细): http://blog.allansong.com/?p=6

 

从jQuery 1.3.2的源码来看, sizzle的代码行差不多刚好1K, 从1429到2427。
以一个很简单的multiple selector为例:

<html>

<head>

<script src=”link_to_jquery.js”></script>

<script language=”javascript”>

$(function(){

        $(”div,span,p.myClass”) . css(”border”, “3px solid red”);

});

</script>

</head>

<body>        

        <div>div</div>

        <p class=”myClass”>p class=”myClass”</p>

        <p class=”notMyClass”>p class=”notMyClass”</p>

        <span>span</span>

</body>

</html>

 

从$(“div, span, p.myClass”)开始深入jQuery sizzle, 一步一步来看sizzle是怎么工作的?


(此图虽然流程很明白,但是我看功力尚浅,看代码的时候可真费劲阿,到现在还没完全都弄熟。)

 


关于sizzle的源码分析,可以看这个文章:

http://lwp8407120426.blog.163.com/blog/static/464280752009145364974/

关于jQuery Sizzle选择器跟普通选择器的区别

转自(有删节,原文内容更详细且有评论):http://www.cssrain.cn/article.asp?id=1315

举个一个选择器来说: $("div  p");

每个更换选择器之前,查找步骤如下:
1,先查找页面上所有的div 。
2,循环所有的div,查找每个div下的p 。
3,合并结果 。


采用Sizzle选择器之后,查找步骤如下:
1,先查找页面上所有的p 。
2,循环所有的p,查找每个p的父元素,
   1)如果不是div,遍历上一层。
   2)如果已经是顶层,排除此p。
   3)如果是div,则保存此p元素。

(上面说的两种思路需要思考借鉴,包括在其他地方。大家也可看看原文的评论。)
  • 大小: 343.7 KB
分享到:
评论

相关推荐

    jquery 选择器引擎sizzle浅析

    于是看了jquery的源码,jquery用的选择器的引擎是sizzle,是jquery的作者另一开源项目,在github上面有,号称最快的dom选择器!不到2000行代码。上面说了不是很精彩的开场白,我么来个 for example: $(‘.test’) 在...

    jQuery中的Sizzle引擎分析

    在 http://www.cnblogs.com/strick/p/5078435.html 有描述

    jQuery源码分析之sizzle选择器详解

    jquery从1.3开始,使用了新的选择器–sizzle。效率超过了以前的jquery版本的其他选择器。下面这篇文章主要介绍了jQuery源中sizzle选择器的相关资料,文中介绍的很详细,需要的朋友可以参考借鉴,下面来一起看看吧。

    jquery中文api

    基于开源的选择器引擎sizzle(从1.3版开始使用)。 ⒉DOM元素遍历及修改(包含对CSS1-3的支持) ⒊事件处理 ⒋动态特效 ⒌AJAX ⒍通过插件来扩展 ⒎方便的工具 - 例如浏览器版本判断 ⒏渐进增强 ⒐链式调用 ⒑多...

    jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析

    近期看了一些网上关于Sizzle的分析文章,就匹配次序往往就说使用了从右到左的逆向匹配法,但是具体如何并没有详细介绍,或者就像我之前的几篇文章一样,就代码一行一行做详细介绍,但缺乏整体概念,这里就jQuery-...

    jQuery常规选择器源码

    jQuery常规选择器源码,适合初学者哦,可以下载下来作为参考资料的。

    jQuery-1.8.2.js

    基于开源的选择器引擎sizzle(从1.3版开始使用)。 ⒉DOM元素遍历及修改(包含对CSS1-3的支持) ⒊事件处理 ⒋动态特效 ⒌AJAX ⒍通过插件来扩展 ⒎方便的工具 - 例如浏览器版本判断 ⒏渐进增强 ⒐链式调用 ⒑多...

    Selenium.WebDriver.Extensions:Selenium WebDriver的扩展,包括jQuerySizzle选择器支持

    Selenium WebDriver的扩展包括jQuery / Sizzle选择器支持。 产品特点 主要 支持嵌套选择器 易于设置:安装NuGet软件包并开始与您现有的Selenium解决方案一起使用 通过与Appveyor的持续集成设置,单元和集成测试以及...

    jQuery中的Sizzle引擎分析demo

    在 http://www.cnblogs.com/strick/p/5078435.html 描述

    最新jquery.1.8.1

    此外,选择器引擎Sizzle修复了一些边缘问题和bug,包括对于多个选择符(~ &gt; +)的改进、更好地检测浏览器bug等。 5. XSS防护 $()方法可以创建HTML元素,如果被用来传递一个[removed]标签,则可以运行脚本。...

    浅谈Sizzle的“编译原理”

    作为一个独立全新的选择器引擎,出现在jQuery 1.3版本之后,并被John Resig作为一个开源的项目。Sizzle是独立的一部分,不依赖任何库,如果你不想用jQuery,可以只用Sizzle,也可以用于其他框架如:Mool, Dojo,YUI...

    jQuery源码分析-04 选择器-Sizzle-工作原理分析

    在分析Sizzle源码之前,先整理一下选择器的工作原理 先明确一些选择器中用到的名词,后边阅读时不会有歧义: 选择器表达式: “div &gt; p” 块表达式: “div” “p” 并列选择器表达式: “div, p” 块分割器: ...

    最新JQuery版本1.8

    此外,选择器引擎Sizzle修复了一些边缘问题和bug,包括对于多个选择符(~ &gt; +)的改进、更好地检测浏览器bug等。 5. XSS防护 $()方法可以创建HTML元素,如果被用来传递一个[removed]标签,则可以运行脚本。...

    jQuery选择器源码解读(一):Sizzle方法

    * Sizzle方法是Sizzle选择器包的主要入口,jQuery的find方法就是调用该方法获取匹配的节点 * 该方法主要完成下列任务: * 1、对于单一选择器,且是ID、Tag、Class三种类型之一,则直接获取并返回结果 * 2、对于...

    SizzleStats:用于收集 Sizzle 选择器性能统计信息的 jQuery 插件

    Sizzle 通过$.find()集成到 jQuery 中,并用于所有接受选择器字符串的方法中,例如.filter(selector) 、 .closest(selector)等。 SizzleStats 插件的使用: 在开发阶段,在 jQuery 之后的某个地方将此脚本包含在...

Global site tag (gtag.js) - Google Analytics