掌握jQuery的选择器

选择器至少可以追溯到“CSS选择器”。jQuery的源代码中内嵌了一个叫Sizzle的对象,其实就是选择器了。在jQuery官网上显示Sizzle属于“Other jQuery Foundation Projects”,Sizzle能够独立为一个单独的项目,由此不难体会到选择器的重要性。看看下面三个页面,相比之下,jQuery选择器官方文档看起来是最“乱”的。

http://www.w3.org/TR/css3-selectors
CSS选择器W3C标准文档   

https://github.com/jquery/sizzle/wiki/Sizzle-Documentation
Sizzle文档   

http://api.jquery.com/category/selectors/
jQuery选择器官方文档

jquery1.9.0源代码有这样一行:

jQuery.find = Sizzle;

导入jquery.js和sizzle.js,可以看到jQuery.find和Sizzle确实是一回事。

iJs.showObjectNames("window.jQuery.find");
iJs.showObjectNames("window.Sizzle");
    [Object] window.jQuery.find        |--[function] attr        |--[function] compile        |--[function] contains        |--[function] error        |--[function] getText        |--[function] isXML        |--[function] matches        |--[function] matchesSelector        |--[function] setDocument        |--[function] uniqueSort        |--[object] selectors

[Object] window.Sizzle        |--[function] attr        |--[function] compile        |--[function] contains        |--[function] error        |--[function] getText        |--[function] isXML        |--[function] matches        |--[function] matchesSelector        |--[function] setDocument        |--[function] uniqueSort        |--[object] selectors

既然Sizzle自称"supports virtually all CSS 3 Selectors",那么不妨就参考下面W3C描述吧,再难找到更好的文档片断了(点击链接可查看语法细节),不是么?

(备注:这个Table贴过来总是出现显示问题,于是对html代码进行了编辑,其中一个替换是(<a\shref="[^">]*">)[^<]*(</a>)替换为$1更多$2)

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索文档
, jquery
, function
, jquery图片查看器
, 选择
, setDocument
, sizzle
, Selectors
, Find选择器
, jquery选择器
, Sizzle方法
(function($){})(jQuery)
jquery的选择器、jquery的name选择器、jquery中的选择器、jquery的选择器有哪些、jquery常用的选择器,以便于您获取更多的相关知识。

时间: 2024-12-29 20:30:37

掌握jQuery的选择器的相关文章

jQuery 自定义选择器

严格来说是自定义伪类选择器,不过也相当有意思了. 昨天我学习其中一个 jquery lazy load 源码的时候,看到末尾这么写的. /* Custom selectors for your convenience.  译: 提供自定义选择方便你使用. */ /* Use as $("img:below-the-fold").something() or 译: 你可以这样使用 $("img:below-the-fold").something() 或 */ /*

jquery 层次选择器siblings与nextAll的区别介绍

jquery 层次选择器包括siblings与nextAll,本文为大家介绍下具体的使用方法,想学习的朋也可以参考下,希望对大家有所帮助   HTML代码: 复制代码 代码如下: <div> <div >1</div> <div class="one"> 2 <div>2_1 <div>2_1_1</div> </div> <div>2_2</div> </di

setTimeout内不支持jquery的选择器的解决方案

  在JS中无论是setTimeout还是setInterval,在使用函数名作为调用句柄时都不能带参数,而在许多场合必须要带参数,这就需要想方法解决. 今天在写一个js延时事件的时候发现在setTimeout这个方法里面使用jquery的$(this)竟然不起作用,各种测试,最后得出结论是setTimeout内不支持jquery的选择器.于是请教了一下QQ上做jquery开发的高手,马上就把这问题解决了,在这里记录一下. 下面是作者做延时处理时的js代码: ? 1 2 3 4 5 6 7 8

jQuery过滤选择器用法分析

这篇文章主要介绍了jQuery过滤选择器用法,实例分析了:first.:last.:odd.:even等等常用的过滤选择器的使用技巧,非常具有实用价值,需要的朋友可以参考下     本文实例讲述了jQuery过滤选择器用法.分享给大家供大家参考.具体分析如下: 在实践中,可以在基本选择器的基础上添加过滤选择器来完成查询任务,根据具体情况,在过滤选择器中可以使用元素的索引值.内容.属性.子元素位置.表单 域属性以及可见性作为筛选条件 1. :first选择器 格式: 代码如下: $("select

jQuery的选择器中的通配符使用介绍

 这篇文章主要介绍了jQuery的选择器中的通配符,需要的朋友可以参考下 1.选择器  (1)通配符:  代码如下: $("input[id^='code']");//id属性以code开始的所有input标签  $("input[id$='code']");//id属性以code结束的所有input标签  $("input[id*='code']");//id属性包含code的所有input标签    (2)根据索引选择  代码如下: $(&q

jQuery 复合选择器应用的几个例子_jquery

<!-- 本文例子所引用的jQuery版本为 jQuery-1.8.3.min.js --> 一. 复合选择器对checkbox的相关操作 <input type="checkbox" id="ckb_1" /> <input type="checkbox" id="ckb_2" disabled="true" /> <input type="checkb

jQuery元素选择器用法实例_jquery

本文实例讲述了jQuery元素选择器用法.分享给大家供大家参考.具体分析如下: 元素选择器根据元素名称匹配所有的元素. 实例代码: 复制代码 代码如下: $("div") 以上代码匹配所有的div元素. 实例代码: 复制代码 代码如下: <!DOCTYPE html>   <html>   <head>   <meta charset=" utf-8">   <meta name="author&quo

jQuery分组选择器用法实例_jquery

本文实例讲述了jQuery分组选择器用法.分享给大家供大家参考.具体分析如下: 分组选择器将每一个选择器匹配到的元素合并后一起返回,能够对它们进行相同的操作. 实例代码: 复制代码 代码如下: $(".mydiv ,span") 以上代码能够匹配类名为mydiv的元素和所有的span元素.两个选择器之间要用逗号分割. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=&qu

jQuery后代选择器用法实例_jquery

本文实例讲述了jQuery后代选择器用法.分享给大家供大家参考.具体分析如下: 后代选择器匹配给定的祖先元素下用以匹配的所有后代元素. 点击选择器可以查阅参考手册中所有jQuery选择器. 代码实例如下: 复制代码 代码如下: $(".mydiv span") 以上代码匹配类名mydiv元素包含的span元素.两个选择器之间要用空格分隔. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta