jQuery学习笔记(一)jQuery选择器
目录
第一次写博客，希望自己能够长期坚持，以写博客的方式作为总结与复习。
最近一段时间开始学习jQuery,通过写一个jQuery学习笔记的专题，对jQuery的知识做一个总结，并给出部分Demo来练习，使其能够掌握jQuery的基本技能。
今天所写的内容是关于jQuery选择器。
在学习jQuery选择器之前，有必要先了解一下css选择器，首先要明确一个新手容易混淆的概念：css选择器与jQuery选择器是两个不同的概念，正如DOM对象与jQuery对象（jQuery对象是通过jQuery包装DOM对象后所产生的的对象，无法使用DOM对象的任何方法）也是两个不同的概念。常用的css选择器有标签选择器、ID选择器、类选择器、群组选择器、后代选择器、通配选择器等。
jQuery选择器完全继承了CSS的风格，可以方便快捷的找出特定的DOM元素，然后为其添加行为。jQuery选择器与css选择器最大的不同就在于jQuery选择器是找到元素后为其添加行为，而css选择器则是找到元素后为其添加样式，但是jQuery选择器也可以操作css样式，并且更加灵活。这样一个HTML页由三部分构成，HTML中的标签负责网页的内容，css负责样式，jQuery（更确切的说应该是Javascript）负责其行为。
一. 下面谈谈关于jQuery选择器的优点
1.简洁的写法
在JS中，我们最常写的一个函数就是document.getElementById(),通过ID获取元素，而在jQuery中只需$("#Id")即可完成这一工作。
2.支持css1到css3的选择器
3.完善处理机制
即使是用jQuery选择器获取页面上不存在的元素也不会报错，这一点不同于js.
二.jQuery选择器中各类选择器
jQuery的选择器大体分为四大类：基本选择器、层次选择器、过滤选择器、表单选择器。作为初学者而言，恐怕一时难以掌握如此之多的选择器，个人认为，掌握基本选择器以及会一些过滤选择器即可胜任大部分我们需要的操作。何况很多选择器与CSS如此相像！下面就分别来介绍这四大类选择器，其中过滤选择器还细分了6类，都用了表格的方式，这样即使到了以后项目中需要的时候也可以直接查阅这些表格。
具体介绍及用法见表1。
表1 基本选择器
| 选择器 | 描述 | 返回 | 示例 |
| #id | 根据给定的id匹配一个元素
|
单个元素 | $("#test")选取id为test的元素 |
| .class | 根据给定的类名匹配元素
|
集合元素 | $(".test")选取所有class为test的元素 |
| element | 根据给定的元素名匹配元素
|
集合元素 | $("p")选取所有的<p>元素 |
| * | 匹配所有元素
|
集合元素 | $(*)选取所有元素 |
| selector1,selector2, ...,selectorN |
将每一个选择器匹配到的元素 合并后一起返回 |
集合元素 | $("div,span,p.myClass")选取所有<div> <span>和拥有myClass的<p>标签的一组 元素
|
2.层次选择器
即通过DOM元素之间的层次关系来获取指定的元素，具体介绍及用法见表2
表2 层次选择器
| 选择器 | 描述 | 返回 | 示例 |
| $("ancestor descendant") | 选取ancestor里的所有descendan 元素 |
集合元素 | $("div span')选取<div>里的 所有<span>元素 |
| $("parent>child") | 选取parent元素下的child元素 | 集合元素 | $("div>span")选取<div>里的所有<span>子元素 |
| $("prev+next") | 选取紧接在prev元素后的next元素 | 单个元素 | $(".one+div")选取class为one的下个<div>同辈元素 |
| $("prev~siblings") | 选取prev元素之后的所有siblings元素 | 集合元素 | $("#two~div")选取id为two的元素后面 所有<div>同辈元素 |
注意$("ancestor descendant")与$("parent>child")的区别：$("ancestor descendant")选取的是所有的后代元素，而$("parent>child")选取的只是其 parent 元素下的子元素（child元素）。
3.过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，选择器都以(:)开头。
过滤选择器可以分为：基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、和表单对象属性过滤选择器。
3.1基本过滤选择器
具体用法见表3
表3 基本过滤选择器
| 选择器 | 描述 | 返回 | 示例 |
| :first | 选取第一个元素 | 单个元素 | $("div first")选取所有<div>元素中的第一个<div>元素 |
| :last | 选取最后一个元素 | 单个元素 | $("div:last")选取所有<div>元素里的最后一个<div>元素 |
| :not(selector) | 去除所有与给定选择器匹配的元素 | 集合元素 | $("input :not(.myClass)")选取class不是myClass的 <input>元素 |
| :even | 选取索引是偶数的所有元素， 索引下标从0开始 |
集合元素 | $("input :even")选取索引是偶数的<input>元素 |
| :odd | 选取索引是奇数的所有元素， 索引下标从0开始 |
集合元素 | $(“input :odd”)选取索引是奇数的<input>元素 |
| :eq(index) | 选取索引等于index的元素 | 单个元素 | $("input:eq(0)")选取索引为0<input>元素 |
| :gt(indext) | 选取索引大于index的元素 | 集合元素 | $("input:gt(1)")选取索引大于1的<input>元素 |
| :lt(index) | 选取索引小于index的元素 | 集合元素 | $("input:lt(1)")选取索引小于1的<input>元素 |
| :header | 选取所有的标题元素 | 集合元素 | $(":header")选取所有的<h1><h2><h3>... |
| :animated | 选取当前正在执行动画的所有元素 | 集合元素 | $("div:animated")选取正在执行动画的<div>元素 |
| :focus | 选取当前获取焦点的元素 | 集合元素 | $(":focus")选取当前获得焦点的元素 |
3.2内容过滤选择器
具体用法见表4
表4 内容过滤选择器
| 选择器 | 描述 | 返回 | 示例 |
| :contains(text) | 选取文本内容为“text”的元素 | 集合元素 | $("div:contains('我')")选取含有文本“我”的<div>元素 |
| :empty | 选取不包含子元素或者文本的空元素 | 集合元素 | $("div:empty")选取不包含子元素的<div>空元素 |
| :has(selector) | 选取含有选择器所匹配的元素的元素 | 集合元素 | $("div:has(p)")选取含有<p>元素的<div>元素 |
| :parent | 选取含有子元素或者文本的元素 | 集合元素 | $("div:parent")选取拥有子元素或者文本的<div>元素 |
3.3可见性过滤选择器
可见性过滤选择器是根据元素的可见和不可见的状态来选择相应的元素。具体见表5.
表5 可见性过滤选择器
| 选择器 | 描述 | 返回 | 示例 |
| :hidden | 选取所有不可见的元素 | 集合元素 | $("input:hidden")选取所有不可见的<input> |
| :visible | 选取所有可见的元素 | 集合元素 | $("div:visible")选取所有可见的<div>元素 |
3.4属性过滤选择器
属性选择器的过滤规则是通过元素的属性来获取相应的元素，属性都用包含在[]中,并没有冒号。具体见表6.
表6 属性过滤选择器
| 选择器 | 描述 | 返回 | 示例 |
| [attribute] | 选取拥有此属性的元素 | 集合元素 | $("div[id]")选取拥有属性为id的<div>元素 |
| [attribute=value] | 选取属性值为value的元素 | 集合元素 | $("div[title=test]")选取属性title为“test”的<div>元素 |
| [attribute!=value] | 选取属性值不为value的元素 | 集合元素 | $("div[title!=test]")选取属性title不为“test”的<div>元素，没有属性titl e的<div>元素也为被选取 |
| [attribute^=value] | 选取属性的值以value开始的元素 | 集合元素 | $("div[title^=test]")选取属性title以“test”开始的<div>元素 |
| [attribute$=value] | 选取属性的值以values结尾的元素 | 集合元素 | $("div[title$=test]")选取属性title以“value”结束的<div>元素 |
| [attribute*=value] | 选取属性的值含有value的元素 | 集合元素 | $("div[title*=test]")选取属性title中含有“title"的<div>元素 |
| [attribute|=value] | 选取属性等于给定字符串或以该字符为 前缀（该字符串后跟一个连字符"-"）的元素 |
集合元素 | $("div[title|='en']")选取属性title为"en"或者以“en”开头字符串的<div> 元素 |
| [attribute~=value] | 选取属性用空格分隔的值中包含一个给定值 的元素 |
集合元素 | $("div[title~='uk']")选取属性title用空格分隔值中包含“uk”的<div> 元素 |
| [attribute1][attribute] ...[attributeN] |
一个复合属性选择器，没选择一次，缩小一 次范围 |
集合元素 | $("div[id][title$=test]")选取拥有属性id并且属性title以test结尾的 <div>元素 |
3.5 子元素过滤选择器
在用子元素过滤选择器时要弄清父元素与子元素的关系。具体用法见表7
表7 子元素过滤选择器
| 选择器 | 描返 | 返回 | 示例 |
| :nth-child (index/eve/ odd/equation) |
选取每个父元素下的第index个 子元素或者奇偶元素（index从1开始） |
集合元素 | :eq(index)只匹配一个元素，而:nth-child将为每一个 父元素匹配子元素，并且:nth-child(index)的index是从1开始， 而:eq(index)是从0开始。 |
| :first-child |
选取每个父元素的第一个子元素 |
集合元素 | ：first只返回单个元素，而:first-child选择器将为每个父元素匹配 第一个子元素。 $("ul li:first-child")选取每一个ul中第一个<li>元素 |
| :last-child | 选取每个父元素的最后一个子元素 | 集合元素 | $("ul li:last-chilid")选取每一个ul中的最后一个<li>元素 |
| :only-child | 如果某个元素是它父元素中的唯一一个 子元素，那么它就会被匹配，如果父元 素中含有其他元素，那么将不会匹配 |
集合元素 | $("ul li:onyl-child")选取ul中是唯一子元素的<li>元素 |
3.6 表单对象属性过滤选择器
表单对象属性过滤选择器主要是针对表单元素中enabled、disabled、checked、selected等属性进行过滤。具体用法见表8
表8 表单对象属性过滤选择器
| 选择器 | 描述 | 返回 | 示例 |
| :enabled | 选取所有可用元素 | 集合元素 | $("#form1:enabled")选取id为"form1"的表单的所有可用元素 |
| :disabled | 选取所有不可用元素 | 集合元素 | $("#form2:disabled")选取id为"form2"的表单中的所有不可用的元素 |
| :checked | 选取所有被选中的元素(单选框，复选框) | 集合元素 | $("input:checked")选取所有被选中的<input>元素 |
| :seleted | 选取所有被选中的选项元素(下拉列表) | 集合元素 | $("select option:selected")选取所有被选中的选项元素 |
4.表单选择器
专门用于开发者获取表单中的某个或者某种类型的元素。对于用户的交互性有着很重要的影响。具体用法见表9.
表9 表单选择器
| 选择器 | 描述 | 返回 | 示例 |
| :input | 选取所有<input>、<textarea>、<select> 和<button>元素 |
集合元素 | $(":input")选取所有<input>、<textarea>、 <select>和<button>元素 |
| :text | 选取所有的单行文本框 |
集合元素 | $(":text")选取所有的单行文本框 |
| :password | 选取所有的密码框 |
集合元素 | $(":password")选取所有的密码框 |
| :radio | 选取所有的单选框 |
集合元素 | $(":radio")选取所有的单选框 |
| :checkbox | 选取所有的多选框 |
集合元素 | $(":checkbox")选取所有的多选框 |
| :submit | 选取所有的提交按钮 |
集合元素 | $(":submit")选取所有的提交按钮 |
| :image | 选取所有的图相按钮 |
集合元素 | $(":image")选取所有的图相按钮 |
| :reset | 选取所有的重置按妞 |
集合元素 | $(":reset")选取所有的重置按钮 |
| :button | 选取所有的按钮 |
集合元素 | $(":button")选取所有的按钮 |
| :file | 选取所有的上传域 |
集合元素 | $(":file")选取所有的上传域 |
| :hidden | 选取所有的不可见元素 |
集合元素 | $(":hidden")选取所有的不可见元素 |
小结
此次学习笔记主要写了关于jQuery选择器，jQuery选择器是jQuery的基础，只有将jQuery选择器熟练掌握，才能掌握jQuery中DOM操作、以及对表单、表格的操作、在Ajax的应用等等。好了，也对于jQuery选择器总结的差不多了。从中午开始，写到晚上，感觉写博客果然也是一种总结提高的好方法，对之前很多陌生的jQuery选择器重新认识了一遍。