jQuery 选择器 - 码农教程

jQuery网页脚本语言核心之一

概述：

1. 选择器是jQuery的基础

2. 对事件处理，遍历DOM和Ajax操作都依赖于选择器

3. 可简化代码

什么是jQuery选择器？

层叠样式表

良好地继承了css选择器语法，还继承了其获取页面元素便捷高效的特点

于css不同，jQuery选择器获取元素后，为该元素添加的是行为

有良好的兼容性

优势

1. 简洁的写法

(1) $(选择)

2. 完善的处理机制

(1) 简洁，避免某些错误

类型：

可通过css选择器和过滤选择器两种方式选择元素，每种又有不同的方法来获取元素

1. 通过css选择器选取元素

(1) 基本选择器

(2) 层次选择器

(3) 属性选择器

2. 通过过滤选择呢亲选择元素

(1) 基本过滤选择器

(2) 可见性过滤选择器

详解：

通过css选择器选取元素

jQuery支持大多数css选择器

最常用的有：基本选择器，层次选择器和属性选择器

在jQuery中它们构成的规则于css选择器完全相同

1. 基本选择器

1. 继承了css选择器的语法和功能

2. 主要由元素标签名，class，id和多个选择器组成

3. 可以实现大多数页面元素的查找

4. 主要包括：

(1) 标签选择器

(2) 类选择器

(3) Id选择器

(4) 并集选择器

(5) 全局选择器

补充：jQuery中还有交集选择器：

语法：$(AB)

一个元素，必须保证AB两个属性同时具备（与并集选择器正好相反）

2. 层次选择器

1. 通过DOM之间的层次关系来获取元素

2. jQuery有四种常用的层次选择器：

(1) 后代选择器

(2) 子选择器

(3) 相邻选择器

(4) 同辈选择器

层级选择器之间的相似与不同点： 1)层级选择器都有一个参考节点 2)后代选择器包含子选择器的选择的内容 3)一般兄弟选择器包含相邻兄弟选择的内容 4)相邻兄弟选择器和一般兄弟选择器所选择到的元素，必须在同一个父元素下.

在层次选择呢亲中，后代选择器和子选择器较为常用，而相邻元素选择器和同辈元素选择器在jQuery中可以用更加简单的方法代替：

（1）使用next()房代替prev-next（相邻元素选择器）

（2）使用nextAll()方法代替prev`siblings（同辈元素选择器）

3. 属性选择器

属性选择器：语法标识：（[]）

什么是属性选择器？

1. 顾名思义，属性选择器就是通过HTML元素的属性选择元素的选择器

2. 与css中的属性选择器语法构成完全一致

条件属性选择器

　　条件属性选择器共包括6种，其中[attribute!=value]选择器是jQuery自己拓展的选择器

[attribute!=value]

[attribute!=value]选择器选择属性值不等于value的元素，返回集合元素

[注意]class="test test1"的元素也符合$('[class!="test"]')的情况，因为属性选择器的严格匹配机制

[attribute^=value]

[attribute^=value]选择器选择属性值以value开始的元素，返回集合元素

[attribute$=value]

[attribute$=value]选择器选择属性值以value结束的元素，返回集合元素

[attribute*=value]

[attribute*=value]选择器选择属性值包含value的元素，返回集合元素

[attribute|=value]

[attribute|=value]选择器选择属性值等于value或以value-开头的元素，返回集合元素

[attribute~=value]

[attribute~=value]选择器选择属性值用空格分隔的值中包含value的元素，返回集合元素

[注意]$('[class~="test"]')选择器包含class="test"的元素的情况

通过条件过滤选取元素

过滤：把不要的滤掉，留下需要的

语法标识：（：）

主要通过特定的过滤规则来筛选出所有的DOM元素

同样：过滤规则与css中伪类语法相同，即选择器都以一个冒号（:）开头。冒号前是需要过滤的元素

栗子：

（1）a:hover 表示当鼠标指针移过<a>元素时

（2）Tr:visited 表示当鼠标指针访问过<tr> 元素后

经典栗子：

实现列表隔行变色

注意：奇偶过滤选择器从0开始

1. 基本过滤选择器

注：$(“:header”) 选取的时所有h1`h6的标签

让文本框获取焦点：$(“input”).focus（）；

过滤选择器是通过元素所处的位置来获取元素的

2. 可见性过滤选择器

通过元素的显示状态，即元素显示或隐藏来选取元素

：visible：控制眼睛能看到

：hidden：控制本有但隐藏的元素

$(“:hiddden”).show()可以拿出不可见的代码(比如js，jQuery)

Css：type=”hidden” 隐藏域

在可见性选择器中需要注意的是，选择器 :hidden获取的元素不仅包括样式属性display为“none”的元素，还包括文本隐藏域和visibility：hidden之类的元素

3. 补充

表格样式：将相邻边线折成一个，并且填充表格内的空格

jQuery选择器注意事项

1. 选择器中含有特殊符号的注意事项

W3C 规范中，规定属性值中不能含有某些特殊字符，但在实际开发过程中，可能会遇到表达中含有'# 和“.”等特殊字符的情况，如果按照普通的方式去处理就会出错。解决此类错误的方法是使用转义符转义。

HM 代码如下:

<div id="id#a">aa</div>
<div id="id [2] ">cc</div>

按照普通的方式来获取，例如:

$("#id#a") ;
$("#id[2]");

以上代码不能正确获取到元素，正确的写法如下。

$("#id\#a") ;
$("#id\[2\]");

2. 选择器中含有空格的注意事项

选择器中的空格也是不容忽视的，多一个空格或少一个空格，可能会得到截然不同的长。

HTML 代码如下。

<div class="test">
    <div style="display:none;">aa</div>
    <div style="display:none; ">bb</div>
    <div style="display:none;">cc</div>
    <div class="test" style="display:none;">dd</div>
</div>
<div class="test" style="display:none;">ee</div>
<div class="test" style="display:none;">ff</div>

使用如下jQuery 选择器分别来获取它们。

//带空格的jQuery选择器
var $t a= $(".test :hidden") ;
//不带空格的jQuery选择器
var $t b= $ (".test:hidden") ;
var len a = $t_a.length;
var len_b= $t_b.length;
//输出4
alert("$('.test :hidden') = "+len_a) ;
//输出3
alert ("$ ('.test:hidden')= "+1en_b) ;

之所以会出现不同的结果，是因为后代选择器与过滤选择器存在不同。

//带空格的jQuery 选择器
var $t a= $ (".test :hidden") ;
以上代码选取的是class 为“test”的元素内部的隐藏元素。
而代码:
/1不带空格的jQuery选择器
var $t b= $(".test:hidden") ;
选取的是隐藏的class 为“test" 的元素。

最后：