jQuery三：基本选择器；层叠选择器；属性选择器；（这三类选择器是比较常用的）

jQuery的主要工作就是简化JavaScript的开发；其主要包括（1）选中页面元素；（2）对选中的元素进行操作；两个部分；

本篇博客主要介绍如何选中页面元素，主要内容是基本选择器、层叠选择器、属性选择器；这三类选择器是在实际中比较常用的选择器；

---

目录

一：引文：

二：基本选择器：id选择器、标签选择器、类选择器、组合选择器

 三：层叠选择器

 四：属性选择器

---

一：引文：

两个要素：

在JavaScript中有document.getElementById()等方式获取元素，但这种方式有点古老、麻烦、局限；

jQuery选择器是一种更加快捷高效的方式：

下面语法1和语法2是等价的，当在页面中引入jQuery文件后，使用JQuery关键字和$是完全等价的；符合需求，高效准确地选择器表达式是关键！

---

---

---

---

---

---

二：基本选择器：id选择器、标签选择器、类选择器、组合选择器

id选择器和类选择器最常用；

标签选择器杀伤面积太大，所以用的并不多；

组合选择器有点提升页面元素间的耦合性，所以可能用的也不多；

组合选择器的范例：组合选择器中，选择器表达式之间用逗号隔开；通过jQuery二：一个jQuery简单示例中的小例子可以试一试；

---

---

---

---

---

---

 三：层叠选择器

通过jQuery二：一个jQuery简单示例中的小例子：

后代选择器示例1：

选择a标签，这个a标签必须是li标签的后代标签；

…………………………

后代选择器示例2：即使a标签不是div标签的直接子标签，但是后代选择器依旧能够选中；

…………………………

后代选择器示例3：

……………………………………………………

子选择器示例1：必须得是直接子节点才会被选中；

选择a标签，这个a标签必须是li标签的直接子标签；

……………………………………………………

兄弟选择器示例1：

选择p标签，这个p标签需要是span标签的兄弟标签，是平级节点；

而且这个p标签必须是span标签之后的标签：

---

---

---

---

---

---

 四：属性选择器

比如当前需求是：获取到超链接地址为“网易”的元素；

属性选择器中，selector是前面讲到的选择器表达式，其他选择器后面跟个[  ]， [  ]中的是某个属性的属性值，相当于是在原有选择器的基础上二次筛选；

示例1：完全匹配：a[href='http://www.baidu.com']：是选中a标签，这个a标签的href属性的属性值是“http://www.baidu.com”；

…………………………

示例2：开头匹配：拿到所有邮箱的超链接：a[href^='http://mail.']：

…………………………

示例3：结尾匹配：a[href$='edu.cn']

、

…………………………

示例4：包含匹配：a[href*='edu.cn']

…………………………

说明1：属性选择器中，属性可以是其他任何属性：input[type='text']；这个意思是选择input标签，且其type属性为text的元素：

…………………………

说明2：如上input[type='text']；为什么选择旁边的那个文本框也是文本框，为什么没有被选中？这是因为，属性选择器只会选择明确书写了某个属性的元素：

…………………………

说明3：如上input[type='text']；形如这个，其需要用单引号的；

很显然因为：$(“input[type='text']”).addClass("highlight");  所以需要使用单引号。