jQuery——选择元素

理解DOM

jQuery最强大的特性之一就是能够简化在DOM中选择元素的任务。DOM（文档对象模型）充当了JavaScript与网页之间的接口，它以对象网络而非纯文本的形式来表现HTML的源代码。

关于DOM的学习，在之前的博客中有总结。

用来取得DOM元素树中元素的工具，就是jQuery选择符和遍历方法。

---

使用$()函数

通过jQuery的各种选择符和方法取得的结果集合会被包装在jQuery对象中，通过jQuery对象实际地操作这些元素会非常简单。可以轻松地为jQuery对象绑定事件、添加漂亮的效果，也可以将多重修改或效果通过jQuery对象连缀到一起。

jQuery对象与常规的DOM元素不同，而且也没有必要为实现某些任务给纯DOM元素或节点列表添加相同的方法和属性。

为了创建jQuery对象，就要使用$()对象。这个函数接受CSS选择符作为参数，充当一个工厂，返回包含页面中对应元素的jQuery对象。所有能在样式表中使用的选择符都可以传给这个函数，随后我们就可以对匹配的元素集合应用jQuery方法。

有三种基本的选择符：标签名、ID和类。这些选择符可以单独使用，也可以与其他选择符组合使用。

选择符： 标签名 CSS：p{ } jQuery：(‘p’)  说明：取得文档中所有的段落。  
  选择符：ID   CSS：#some-id{}   jQuery：(‘#some-id’) 说明：取得文档中ID为some-id的一个元素。
选择符：类 CSS：.some-class{} jQuery：$(.some-class’) 说明：取得文档类为some-class的所有元素。

在将方法连缀到$()工厂函数后面时，包装在jQuery对象中的元素会被自动、隐式地循环遍历。换句话说，这样就避免了使用for循环之类的显式迭代。

---

CSS选择符

jQuery支持CSS规范1到规范3中的所有选择符。

---

属性选择符

属性选择符是CSS选择符中特别有用的一类选择符。属性选择符通过HTML元素的属性选择元素。例如链接的title属性或图像的alt属性。例如，要选择带有alt属性的所有图像元素：$('img[alt]')

为链接添加样式

属性选择符使用一种从正则表达式中借鉴来的通配符语法，以^表示值在字符串的开始，以$表示值在字符串的结尾。而且，也是用星号*表示要匹配的值可以出现在字符串中的任意位置，用叹号！表示对值取反。

---

自定义选择符

jQuery中的多数自定义选择符都可以让我们从已经找到的元素中选出一或多个元素。自定义选择符通常跟在一个CSS选择符后面，基于已经选择的元素集的位置来查找元素。自定义选择符的语法与CSS的伪类选择符语法相同，即选择符以冒号（：）开头。例如，我们想要从带有horizontal类的

集合中选择第2项，使用如下代码$('div.horizontal:eq(1)')

注意：因为JavaScript数组采用从0开始的编号方式，所以eq(1)取得的是集合中的第2个元素。而CSS则是从1开始。

---

访问DOM元素

jQuery提供了.get()方法，要访问对象引用的第一个DOM元素，可以使用.get(0)。