jQuery选择器

 
 

jQuery选择器

本文内容引自于单东林《锋利的jQuery》,未经原作者准许,禁止以商业目的转载发布!

选择器是jQuery的根基,在jQuery中,对事件处理、遍历DOM(Document Object Model)Ajax(Asynchronous JavaScript and XML)操作都依赖于选择器。


1 优势

1.1 简洁的写法

$()被jQuery作为选择器函数来使用。例如,$("#ID")用来代替document.getElementById()

1.2 支持CSS1到CSS3选择器

支持从CSS1~3的部分选择器,同时它也有少量独有的选择器。使用CSS选择器时,开发人员需要考虑主流浏览器是否支持某些选择器。而在jQuery中,开发人员则可以放心地使用jQuery选择器而无需考虑浏览器是否支持这些选择器

1.3 完善的处理机制

使用jQuery获取网页中不存在的元素也不会报错,例如:

<div>test</div>
<script type="text/javascript">
$('#tt').css("color", "red") // 这里无需判断$('#tt')是否存在
</script>

有了这个预防措施,即使以后因为某种原因删除网页上某个以前使用过的元素,也不用担心这个网页的JavaScript代码会报错。

2 CSS选择器和jQuery选择器

2.1 基本选择器

CSS jQuery 功能
#id $(“#test”) 选取id为test的元素
.class $(“.test”) 选取所有class为test的元素
element $(“p”) 选取所有的<p>元素
* $(“*”) 选取所有的元素
selector1,selector2,…selectorN $(“div,span,p.myClass”) 选取所有<div><span>和拥有class为myClass的<p>标签的一组元素

2.2 层次选择器

CSS jQuery 功能
E F $(“div span”) 选取<div>里所有的<span>元素
E>F $(“div>span”) 选取<div>元素下元素名是<span>的子元素
E+F $(“.one+div”) 选取class为one的下一个<div>同辈元素
E~F $(“#two~div”) 选取id为two的元素后面的所有<div>同辈元素

2.3 过滤选择器

2.3.1 基本过滤选择器

CSS jQuery 功能
:first $(“div:first”)  
:last $(“div:last”)  
:not(selector) $(“input:not(.myClass)”)  
:even $(“input:even”)  
:odd $(“input:odd”)  
:eq(index) :gt(index) :lt(index) $(“input:eq(1)”)  
:header $(“:header”) 选取所有的标题元素
:animated $(“div:animated”) 选取当前正在执行动画的所有元素
:focus $(“:focus”) 选取当前获取焦点的元素

2.3.2 内容过滤选择器

CSS jQuery
:contains(text) $(“div:contains(“text”)”)
:empty $(“div:empty”)
:has(selector) $(“div:has(p)”)
:parent $(“div:parent”)

2.3.3 可见性过滤选择器

CSS jQuery
:hidden $(“:hidden”)
:visible $(“div:visible”)

2.3.4 属性过滤选择器

CSS jQuery
[attribute] $(“div[id]”)
[attribute=value] $(“div[title=test]”)
[attribute!=value] $(“div[title!=test]”)
[attribute^=value] $ * | ~ $(“div[^=test]”)
[attr1][attr2][attrN] $(“div[id][title$=’test’”])

2.3.5 子元素过滤选择器

CSS jQuery
:nth-child(n) 同上
:first-child  
:last-child  
:only-child  

2.3.6 表单对象属性过滤选择器

CSS jQuery
:enabled 同上
:disabled  
:checked  
:selected  

2.4 表单选择器

CSS jQuery
:input  
:text  
:password  
:radio  
:checkbox  
:submit  
:image  
:reset  
:button  
:file  
:hidden  
 
 

【前端学习】【jQuery选择器】的更多相关文章

  1. 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器

    × 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...

  2. 深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 本文是子元素选择器的续篇,主要介绍关于nth-of-type()选择器的内容.该部分内容并非没有出现在<锋利的 ...

  3. 深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器

    × 目录 [1]简单属性 [2]具体属性 [3]条件属性 前面的话 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器.属性过滤选择器可分为简单属性选择器.具体属性选 ...

  4. 深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为 ...

  5. 【前端】jQuery选择器$()的实现原理

    今天三七互娱技术面试的时候面试官问了我这个问题,当时一脸懵逼,于是好好总结一下. 当我们使用jquery选择器的时候,$(s).回默认去执行jquery内部封装好的一个init的构造函数每次申明一个j ...

  6. 前端学习☞jquery

    一 什么是jQuery对象? jQuery 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 j ...

  7. 深入学习jQuery选择器系列第七篇——表单选择器

    × 目录 [1]表单元素 [2]对象属性 前面的话 无论是提交还是传递数据,表单元素在动态交互页面的作用是非常重要的.jQuery专门加入了表单选择器,从而能够极其方便地获取到某个类型的表单元素 表单 ...

  8. 深入学习jQuery选择器系列第三篇——过滤选择器之索引选择器

    × 目录 [1]通用形式 [2]首尾索引 [3]奇偶索引[4]范围索引 前面的话 上一篇介绍了过滤选择器中的子元素选择器部分,本文开始介绍极易与之混淆的索引选择器 通用形式 $(':eq(index) ...

  9. 前端学习——JQuery Ajax使用经验

    0.前言     在项目推进过程中常常使用Ajax,通过Jquery提供的函数能够很方便的使用Ajax,可是在实际使用中也遇到一些问题,比如怎样防止浏览器使用缓存,怎样使用同步方式等.通过博文整理总结 ...

  10. 前端学习-jQuery

    老师博客:https://www.cnblogs.com/yuanchenqi/articles/6070667.html day43,day44 jquery 中文文档:http://jquery. ...

随机推荐

  1. 第五篇、iOS常用的工具 app icon 、office文件格式互转、在线HTML编辑器、16、10进制互转

    1.图片工厂,一键生成所以的应用图标 2.office文件转换格式 3.HTML在线编辑器 4.十六进制和十进制互转

  2. C#——字符操作

    题目要求:用户随机输入字母及数字组成的字符串,当用户连续输入字符串‘hello’时,程序结束用户输入,并分别显示用户输入的字母及数字的数目. 代码: using System; using Syste ...

  3. sql2000下如何新建并使用dbml

    默认新建的dbml只是支持sql2005及其以上版本. 但是现在是sql2000怎么办?我要是想要用linq to sql 的? 解决方案如下: 1首先打开cmd,在其中cd到sqlmetal.exe ...

  4. javascript笔记——jQuery插件开发的几种方式

    jQuery插件开发分为两种: 1 类级别  类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法. 开发扩展其方法时使用$.extend方法,即jQuery.e ...

  5. 【HTML 5或CSS3入门教程】找兼职撰写人才

    出版社要出版一套HTML 5和CSS 3方向的图书,目前急缺两名写作人员,要求1.熟悉CSS 3的各种属性,或熟悉HTML 5框架2.熟悉各种CSS代码,或熟悉各种HTML 5代码3.有写作的兴趣爱好 ...

  6. c#索引器的简单用法

    abstract class Bird { protected string name; public abstract string Name { get; set; } public abstra ...

  7. Error LNK2001 无法解析的外部符号 的几种情况及解决办法

    最近遇到的关于VS里编译出现的“无法解析的外部符号”问题,在网上寻求解决办=办法时查到下面的博客内容,作者讲解的挺全面的,作为收藏以备将来查询. 原文http://blog.csdn.net/shen ...

  8. OpenCV3读取、写入和保存图像

    需要说明的是在OpenCV3中已经将imread()和imwrite()函数转移到imgcodecs模块中,因此读写图像时,需要包含imgcodecs.hpp头文件,但是highgui.hpp头文件中 ...

  9. Jxl操作excel的demo

    网上很多例子,都是用Jxl读或者写excel,本文实现的功能就是将数据源in.xls的第几行第几列数据写入到out.xls的第几行第几列,不覆盖out.xls其他原有的数据. 需要导入的包:jxl.j ...

  10. 用 .htaccess 实现网址规范化

    网址规范化在 SEO 中是一个比较重要的环节,同时存在不同的网址版本,不但可能造成内容重复,还不能正确的集中权重.目前大多数网站,绑定的域名都有带 www 和不带两个版本,甚至很多网站同时绑定多个域名 ...