理解jQuery选择器与Sizzle

什么是jQuery选择器?

jQuery选择器通俗来讲就是一个获取html元素的工具。比如,$("p") 选取 <p> 元素,$("p")是jQuery的选择器的写法,这么写就可以获取(选取)html里的<p>元素。

jQuery选择器包括元素选择器、属性选择器、CSS选择器。(个人感觉这个分类比较扯淡)

注意:属性选择器的意思并不是选择属性,而是根据属性选择元素。

详细参考:http://www.w3school.com.cn/jquery/jquery_selectors.asp

什么叫html元素?什么是属性?

html代码里的开始标签+内容+结束标签就构成一个元素,英文是element。

<p>这是一个标签,</p>这也是一个标签,英文是tag。

<p>XXX</p>这就是一个元素。

特殊的<br/>这也是一个标签。

属性估计大家都清楚,比如标签<body bgcolor="red">中,bgcolor="red"就是属性。

也就是说,属性是在标签中的;而在不混淆的情况下,我们经常把元素称作为标签(部分人包括我经常这样),也不是一个很大的问题。

不用jQuery选择器的话是如何实现该功能的?

如果不用jQeury,简单的元素选择器的一般原生js写法是:getElementById()、getElementByClassName()等函数获取元素。在这种情况下,$的作用仅仅是简化了代码的书写方法。

当然,这只是最简单的情况下。$写法的在这种情况下其实也是调用getElementById(),但复杂情况则通过jQuery选择器的复杂实现。

jQuery选择器是如何实现的?

w3c上是这么说:jQuery 使用 CSS 选择器来选取 HTML 元素。我个人又一次感觉更扯淡。所以还是建议怎么使用可以看w3c,原理的东西还是看别的。

可以参考这篇文章:

jQuery选择器引擎和Sizzle介绍:http://blog.csdn.net/freshlover/article/details/10813657

Sizzle引擎--原理与实践(一):http://www.cnblogs.com/xesam/archive/2012/02/15/2352466.html

什么是sizzle?

sizzle是一个纯js的CSS选择器引擎(A pure-JavaScript CSS selector engine)。最新版本是2.1.1(jquery-sizzle-2.1.1-jquery.2.1.2-11-gf8ef711.zip)。

官网是:http://sizzlejs.com/

它是jQuery官网的一部分。(jQuery官网一共有5部分:jQuery、jQueryUI、jQueryMobile、Sizzle、QUnit)但它是独立的,虽然jQuery本身使用sizzle,但是你完全可以在不使用jQuery的情况下使用sizzle。

本文出处:http://blog.csdn.net/ouyida3/article/details/43915543

2015.2.23

时间: 2025-01-14 13:55:13

理解jQuery选择器与Sizzle的相关文章

jQuery选择器代码详解(四)——Expr.preFilter

原创文章,转载请注明出处,多谢! Expr.preFilter是tokenize方法中对ATTR.CHILD.PSEUDO三种选择器进行预处理的方法.具体如下: Expr.preFilter : { "ATTR" : function(match) { /* * 完成如下任务: * 1.属性名称解码 * 2.属性值解码 * 3.若判断符为~=,则在属性值两边加上空格 * 4.返回最终的mtach对象 * * match[1]表示属性名称, * match[1].replace(rune

jQuery选择器代码详解(八)——addCombinator函数

function addCombinator(matcher, combinator, base) 1.源码 function addCombinator(matcher, combinator, base) { var dir = combinator.dir, checkNonElements = base && dir === "parentNode", doneName = done++; return combinator.first ? // Check a

jQuery选择器源码分析和easyui核心分析

写在选择器源码分析之前 这里指对1.7.2版本的源码分析,更高版本添加了更多代码. 整个jQuery的代码是写在一个(function(window, undefined){})(window);这样一个闭包里.请思考,为什么要这样做? 将其写在一个闭包函数里,并传入window直接运行的好处有三: 1,统一命名空间,防止变量的污染:  2,将window作为参数传入函数,在函数里调用window的时候,就不用再去找外层的对象,可以提高效率 : 3,undefined并不是javascript的

JavaScript(15)jQuery 选择器

jQuery 选择器 选择器允许对元素组或单个元素进行操作. jQuery 元素选择器和属性选择器允许通过标签名.属性名或内容对 HTML 元素进行选择. 在 HTML DOM 术语中:选择器允许对 DOM 元素组或单个 DOM 节点进行操作. jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") 选取所有 class="intro" 的 &

锋利的jQuery学习笔记之jQuery选择器

在介绍jQuery选择器之前,先简单介绍一下CSS选择器---> 一.CSS选择器 常见的CSS选择器有以下几种: 选择器 语法 描述 示例 标签选择器 E{CSS规则} 以文档元素为选择符 td{font-size:10px;} a{tetx-decoration:none;} ID选择器 #ID{CSS规则} 以文档元素的唯一标示ID为选择符 #node{corlor:red;} 类选择器 .className{CSS规则} 以文档元素的class作为选择符 div.node{backgro

jquery 选择器(name,属性,元素)大全

jQuery 选择器大体上可分为:基本选择器.层次选择器.过滤选择器.表单选择器. 其中过滤选择器可以分为:简单过滤选择器.内容过滤选择器.可见性过滤选择器.属性过滤选择器.子元素过滤选择器.表单对象属性过滤选择器.选择器是jQuery最基础的东西,下面向大家介绍jquery+%D1%A1%D4%F1%C6%F7/" target="_blank">jquery 选择器的用法 选择器是jQuery的核心组成部分,因为使用jQuery操作DOM时所做的每件事都和选择器密切

jQuery选择器详解及实例---《转载》

选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编写jQuery代码的效率.本文配合截图.代码和简单的概括对所有jQuery选择器进行了介绍,也列举出了一些需要注意和区分的地方. 一.基本选择器 1. id选择器(指定id元素) 将id="one"的元素背景色设置为黑色.(id选择器返单个元素) $(document).ready(func

使用jquery选择器大全的用法介绍

在jquery开发(http://www.maiziedu.com/course/python/303-2785/)当中,很多人都很在意选择器的问题,首先选择器是jQuery最基础的东西,也对获得页面元素变得更加容易.更加灵活,能减轻工程师的开发压力,本文主要加深对选择器的理解以及用法,帮助提升个人编写jQuery代码的效率.下面就一起看看对所有jQuery选择器的介绍,并且也列举出了一些需要注意和区分的地方. 一.基本选择器 1. id选择器(指定id元素) 将id="one"的元素

js jquery 选择器总结

一.原始JS选择器. id选择器:document.getElementById("test"); name选择器:document.getElementByName("test"); 节点选择器:document.getElementsByTagName("p"); 二.jQuery 选择器. 1.jQuery 元素选择器. id选择器:$("#test"); class选择器:$(".test"); 节