jQuery基础之选择器
上一篇文章介绍了jQuery对象与DOM对象的区别与联系，属于比较基础的，这篇文章来介绍下jQuery基础之选择器。
选择器是jQuery的根基，在jQuery中，对事件处理、遍历DOM和Ajax操作都依赖于选择器。因此，如果能熟练的使用选择器，不仅能简化代码，而且可以达到事半功倍的效果。jQuery选择器完全继承了CSS的风格。利用jQuery选择器，可以非常便捷的找出特定的DOM元素，然后为它们添加相应的行为，而无需担心浏览器是否支持这一选择器。
jQuery选择器可简单分为基本选择器、层次选择器、过滤选择器、表单选择器。下面通过表格进行一一介绍。
1.基本选择器
| 选择器 | 描 述 | 返 回 | 示 例 |
|---|---|---|---|
| #id | 匹配给定的id | 单个元素 | $(“header”) |
| .class | 匹配给定的类名 | 集合元素 | $(“.test”) |
| E | 匹配给定的标签名 | 集合元素 | $(“div”) |
| * | 匹配所有元素 | 集合元素 | $(“*’) |
| E, .class, E… | 匹配给定的集合 | 集合元素 | $(“span, .tips”) |
2.层次选择器
| 选择器 | 描 述 | 返 回 | 示 例 |
|---|---|---|---|
| $(“ancestor descendant”) | 匹配ancestor里的所有 descendant(后代)元素 |
集合元素 | $(“body div”) |
| $(“parent>child”) | 匹配parent下的所有 child(子)元素 |
集合元素 | $(“div>span”) |
| $(“prev+next”) | 匹配紧接在prev后的 next元素 |
集合元素 | $(“.error+span”) |
| $(“prev~siblings”) | 匹配prev后的所有 siblings元素 |
集合元素 | $(“span~a”) |
3.过滤选择器
3.1 基本过滤选择器
| 选择器 | 描 述 | 返 回 | 示 例 |
|---|---|---|---|
| :first | 匹配第一个元素 | 单个元素 | $(“div:first”) |
| :last | 匹配最后一个元素 | 单个元素 | $(“span:last”) |
| :even | 匹配索引是偶数的元素 索引从0开始 |
集合元素 | $(“li:even”) |
| : odd | 匹配索引是奇数的元素 索引从0开始 |
集合元素 | $(“li:odd”) |
| :eq(index) | 匹配索引等于index的元 素(索引从0开始) |
单个元素 | $(“input:eq(2)”) |
| :gt(index) | 匹配索引大于index的元 素(索引从0开始) |
集合元素 | $(“input:gt(1)”) |
| :lt(index) | 匹配索引小于index的元 素(索引从0开始) |
集合元素 | $(“input:lt(5)”) |
| :header | 匹配所有h1,h2…等 标题元素 |
集合元素 | $(“:header”) |
| :animated | 匹配所有正在执行 动画的元素 |
集合元素 | $(“div:animated”) |
3.2 内容过滤选择器
| 选择器 | 描 述 | 返 回 | 示 例 |
|---|---|---|---|
| :contains(text) | 匹配含有文本内容text 的元素 |
集合元素 | $(“p:contains(今天)”) |
| :empty | 匹配不含子元素或 文本元素的空元素 |
集合元素 | $(“p:empty”) |
| :has(selector) | 匹配包含selector元素 的元素 |
集合元素 | $(“div:has(span)”) |
| :parent | 匹配含有子元素或文本 的元素 |
集合元素 | $(“div:parent”) |
3.3 可见性过滤选择器
| 选择器 | 描 述 | 返 回 | 示 例 |
|---|---|---|---|
| :hidden | 匹配所有不可见 的元素 |
集合元素 | $(“:hidden”) |
| :visible | 匹配所有可见元素 | 集合元素 | $(“:visible”) |
3.4 属性过滤选择器
| 选择器 | 描 述 | 返 回 | 示 例 |
|---|---|---|---|
| [attr] | 匹配拥有此属性 的元素 |
集合元素 | $(“img[alt]“) |
| [attr=value] | 匹配属性值为value 的元素 |
集合元素 | $(“a[title=test]“) |
| [attr!=value] | 匹配属性值不等于 value的元素 |
集合元素 | $(“a[title!=test]“) |
| [attr^=value] | 匹配属性值以value 开头的元素 |
集合元素 | $(“img[alt^=welcome]“) |
| [attr$=value] | 匹配属性值以value 结尾的元素 |
集合元素 | $(“img[alt$=last]“) |
| [attr*=vlaue] | 匹配属性值中含有 value的元素 |
集合元素 | $(“div[title*=test]“) |
| [attr1][attr2]… | 通过多个属性 进行匹配 |
集合元素 | $(“div[id][title*=test]“) |
3.5 子元素过滤选择器
| 选择器 | 描 述 | 返 回 | 示 例 |
|---|---|---|---|
| :nth-child | 匹配每个父元素下的 第index个子元素 索引从1开始 |
集合元素 | $(“div:nth-child(2)”) |
| :first-child | 匹配每个父元素的 第一个子元素 |
集合元素 | $(“div:first-child”) |
| :last-child | 匹配每个父元素的 最后一个子元素 |
集合元素 | $(“div:last-child”) |
| : only-child | 某元素是它父元素中 的唯一的子元素 则匹配它 |
集合元素 | $(“div:only-child”) |
3.6 表单对象属性过滤选择器
| 选择器 | 描 述 | 返 回 | 示 例 |
|---|---|---|---|
| :enabled | 匹配所有可用元素 | 集合元素 | $(“form :enabled”) |
| :disabled | 匹配所有不可用 的元素 |
集合元素 | $(“form :disabled”) |
| :checked | 匹配所有被选中的元素 (含单选框，复选框) |
集合元素 | $(“input:checked”) |
| :selected | 匹配所有被选中的 选项元素 |
集合元素 | $(“select :selected”) |
4.表单选择器
| 选择器 | 描 述 | 返 回 | 示 例 |
|---|---|---|---|
| :input | 匹配所有input, textarea, select, button元素 |
集合元素 | $(“input”) |
| :text | 匹配所有文本框 | 集合元素 | $(“:text”) |
| :password | 匹配所有密码框 | 集合元素 | $(“:password”) |
| :radio | 匹配所有单选框 | 集合元素 | $(“:radio”) |
| :checkbox | 匹配所有所有多选框 | 集合元素 | $(“:checkbox”) |
| :submit | 匹配所有提交按钮 | 集合元素 | $(“:submit”) |
| :image | 匹配所有图像按钮 | 集合元素 | $(“:image”) |
| :reset | 匹配所有重置按钮 | 集合元素 | $(“:reset”) |
| :button | 匹配所有按钮 | 集合元素 | $(“:button”) |
| :file | 匹配所有上传域 | 集合元素 | $(“:file”) |
jQuery对象和DOM对象的区别与联系
一、什么是DOM对象
所谓DOM，即Document Object Model（文档对象模型），每一个DOM都可以表示成一棵树，请看下面的代码，这是一个简单的网页基本结构。
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="gbk"> 5 <title>Document</title> 6 </head> 7 <body> 8 <p>这是一个段落</p> 9 <div id="test">这是一个div</div> 10 </body> 11 </html>
在上面的这颗DOM树中，所有的标签（如p, div等）组成的节点都称为DOM元素节点。我们可以通过javascript中的getElementsByTagName或者getElementById来获取元素节点。通过这种方式得到的DOM元素就是DOM对象。DOM对象可以使用javascript中的方法和属性来进行操作，例如：
1 var oDiv = document.getElementBy("test"); //获取DOM对象 2 var oDivHtml = oDiv.innerHTML; //获取div中的html内容
二、什么是jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象。
jQuery对象是jQuery独有的，如果一个对象是jQuery对象，那么就可以使用jQuery里的任何方法。例如：（还是针对上面那段网页基本结构），我们可以使用：
1 $("#test").html();
来获取div中的html内容，这和上面通过DOM对象来获取div中的内容得到的最终结果是一样的。
但是需注意的是：在jQuery对象中无法使用任何DOM对象的方法。例如$("#test").innerHTML和$("#id").checked之类的写法都是错误的，可以用$("#test").html()和$("#id").attr("checked")之类的jQuery方法来代替。
当然，DOM对象也同样不能使用jQuery里的方法。例如document.getElementById(“id”).html()也会报错，只能用document.getElementByID(“id”).innerHTML语句。
三、jQuery对象和DOM对象的相互转换
1.DOM对象转换成jQuery对象
DOM对象转换成jQuery对象相对比较简单，这里放在前面说。对于一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。方式为$(DOM对象)。例如：
var oDom = document.getElementById("test2"); //DOM对象 var oJquery = $(oDom); //转换成jQuery对象
转换后，可以任意使用jQuery中的方法。
2.jQuery对象转成DOM对象
jQuery对象不能使用DOM中的方法，但如果对jQuery所提供的方法不熟悉，或者jQuery没有封装想要的方法，不得不使用DOM对象的时候，有以下两种处理方法。
jQuery提供了两种方法将一个jQuery对象转换成DOM对象，即[index]和get([index])。
（1）jQuery对象是一个数组对象，可以通过[index]的方法得到相应的DOM对象。例如：
1 var oCheckBox = $(".checkBox"); //jQuery对象 2 var oDomCheckBox = oCheckBox[0]; //DOM对象 3 alert(oDomCheckBox.checked); //弹出checkbox是否被选中
（2）另一种方法是jQuery本身提供的，通过get(index)方法得到相应的DOM对象。例如
1 var oCheckBox = $(".checkBox"); //jQuery对象 2 var oDomCheckBox = oCheckBox.get(0); //DOM对象 3 alert(oDomCheckBox.checked); //弹出checkbox是否被选中
通过以上几种方法，可以任意地相互转换jQuery对象和DOM对象。