JQuery选择器

jQuery选择器简介

在程序开发中，无论是操作DOM还是为元素添加事件，都需要先获取到指定元素。
为此，jQuery提供了选择器，通过选择器可以获取元素并对元素进行操作。本节将针对
什么是jQuery选择器，以及jQuery选择器的优势进行讲解。

什么是jQuery选择器

通过CSS选择器获取元素的方式是非常灵活的，但是CSS选择器获取元素后只能操作该元素的样式，要想为元素添加行为(如处理单击事件)，还需要通过JavaScript代码来实现。为此，jQuery模仿CSS选择器实现了jQuery选择器，通过jQuery选择器来获取元素，不仅让获取元素的方式更加多样化，而且可以在获取元素后为元素添加行为。
jQuery选择器的基本语法格式如下所示

$(selector);

上诉代码中，select代表jQuery选择器，代码执行后，返回一个jQuery对象。

通过与CSS选择器对比的方式演示jQuery选择器的基本用法。

1. 准备页面结构

<div id="myDiv">我是一个div</div>

2. 通过CSS添加样式

# myDiv{
border:1px solid black;
}

上述代码中，使用CSS选择器获取Id值为myDiv的div元素，并为div元素添加样式。

3. 通过jQuery添加样式
   在不使用CSS代码中，使用jQuery代码也可以实现和上图一样的效果。

$('#myDiv').css('border','1px solid black');

上述代码中，使用jQuery选择器获取id值为myDiv的div元素，然后调用jQuery的css（）方法为该元素添加样式。

需要注意的是，使用jQuery选择器获取元素后，由于返回的是jQuery对象，所以不仅能为元素添加样式，而且支持为元素添加行为。例如，为元素绑定事件、操作元素属性等操作。此处只要了解jQuery选择器的使用即可。

jQuery选择器的优势

不使用jQuery选择器的情况下，开发者经常通过JavaScript来获取DOM元素，示例代码：

//根据id值获取元素
document.getElementById('id的值');
//根据元素的名称获取元素
document.getElementsByTagName('元素的名称');

与上述代码不同的是，jQuery选择器获取元素对象的方式更加简洁。

//根据id的值获取元素
$('#id的值');
//根据元素的名称获取元素
$('元素的名称');

实际上jQuery选择器的出现不仅是为了简化JavaScript的写法，也是由于JavaScript提供的选择DOM的方式较少，难以满足实际开发的众多需求。因此，jquery选择器中提供了更多选择DOM得方式。

基本选择器

jQuery中基本选择器是最简单直观的选择器，包括id选择器、类选择器、元素选格
器和通配符选择器，详细介绍如表。

选择器	描述	返回值
# id	id选择器，根据id值匹配一个元素	单个元素
.class	类选择器，根据类名匹配元素	元素集合
element	元素选择器，根据元素名匹配所有元素	元素集合
*	通配符选择器，匹配所有元素	元素集合
selector1,selector2,·,selectorN	同时获取多个元素	元素集合

jQuery提供的同时获取多个元素的选择器，是利用逗号(，)分隔，将每
一个选择器匹配到的元素合并后一起返回。
为了读者更好地理解基本选择器的使用，接下来通过一个案例进行演示，H

 <style> 
 div ( 
    border:1px solid black; 
    }
</style> 
<div id="byId">第1个div元素，id值为byDiv</div>
<p>第1个p元素</p > 
<p class="byClass">第2个p元素，类名为byClass</p >
<div class="byClass">第2个div元素，类名为byClass</div> 

上述代码中，定义了两个div元素和两个p元素，第1个div 元素的id值为byld，第2个div 元素与第2个p元素设置了相同的类名byClass。

下面使用不同的jQuery基本选择器操作以上的HTML页面。

1. id选择器
   与类选择器不同的是，一个规范的HTML文档中不会出现多个元素具有相同id值的
   情况。因此，一个id选择器只能获取一个元素。
   下面为id是byId的元素设置背景色。在demo2-1.html文件中添加jQuery代码，如
   下所示。

$('#byId').css('background1,'pink'): 

上述代码中，css()是jQuery提供的方法，用于设置元素的Css样式。其中，background用于设置背景，pink是背景颜色的值。

2. 类选择器

一个HTML文档中，可以为不同元素设置同名的class值，这样便可以同时设置不同元素的相同样式或行为。
修改的jQuery代码，为页面中类名为byClass的所有元素设置相同的背景色。如下所示。

$('.byClass ').css('background',"#a0edbc'); 

修改完成后，重新使用浏览器访问。从图可以看出，引用了类名为byClass的p元素和 div元素都被设置了背景色。

3. 元素选择器
   元素选择器适用于开发中需要为页面中的所有匹配元素添加样式或行为。

4. 通配符选择器
   在实际开发中，若需要为页面上的所有元素添加相同的样式或者行为，此时便可用通配符选择器“ * ”
   一次性获取页面所有元素。
   需要注意的是，虽然通配符选择器可匹配所有元素，但会影响网页渲染的时间。因此，实际开发中应尽量避免使用通配符选择器。需要时，在jQuery的$()中使用逗号，即可同时获取多个元素。

层次选择器

层次选择器中的“层次”是指DOM元素的层次关系。例如，按照层次结构关系可以获取指定DOM元素的子元素，后代元素，兄弟元素，父元素。

jQuery的层次选择器可以快速定位与指定元素具有层次关系的元素。层次选择器按照DOM元素的层次可以分为子元素选择器、后代选择器和兄弟选择器，

选择器	描述	返回值
parent>child	子元素选择器，根据父元素匹配所有的子元素	元素集合
selector selectorl	后代选择器 根据祖先元素(selector)匹配所有的后代元素(selectorl)	元素集合
prev +next	兄弟选择器 ，匹配prev 元素紧邻的兄弟元素	元素集合
prev~siblings	兄弟选择器，匹配prev元素后的所有兄弟元素	元素集合

为了读者更好地理解层次选择器的使用，接下来通过一个案例为读者进行演示，
HTML代码片段如所示。

 div ( 
    border:1px solid black; 
    }
</style> 

		<p>这是div前面的p元素</p > 
<div id="dv"> 
<p>这是div中的第1个p元素</p > 
<ul> 
<li>这是第1个li元素</li> 
<li><p>这是第2个工i中的元素</p></li> 
</ul> 
<p>这是div中的第2个p元素</p > 
 </div> 
<p>这是div后面的第1个p元素</p > 
<p>这是div后面的第2个p元素</p > 
<p>这是div后面的第3个p元素</p > 

页面结构设计完成后，下面将最外层的 div元素当做默认的元素，子元素、后代元
素以及兄弟元素都是相对于该div 元素进行操作。使用浏览器访问页面
的初始效果如图所示。

下面使用不同的jQuery基本选择器操作以上的HTML页面。

1. 子元素选择器
   子元素选择器指的是通过父元素(parent)获取其下的指定子元素(child)。下面在文件中添加如下jQuery 代码，为图中 div元素的子元素添加背景色。

$('#dv >p').css('backgroundcolor','red1); 

上述代码中，在选择器中通过符号“>”获取id值为dv 下的所有子元素p，并修改它们的背景色。

多学一招：children（）

在jQuery中，还可以使用children()方法代替子元素选择器，获取指定元素的子元素。

$('#dv>p');
$('#dv').children('p');

上述代码中,children()方法得参数p表示要获取的子元素，调用该方法的是子元素得父元素对象，如$(‘div’)

后代选择器

后代元素与子元素的区别在于，后代元素不仅包括子元素，还包括子元素下的所有其他元素。

$('#dv p').css('backgroundColor','red');

上述代码中，在选择器中通过空格，获取id值等于dv的所有后代p元素，并修改他们的背景色。

多学一招：find（）方法

在jQuery中，还可以使用find（）方法获取指定元素的后代元素。

$('dv p');   //使用后代选择器获取
$('#dv').fid('p');   //使用find()方法获取

上述代码中，find()方法获取指定元素的兄弟元素，兄弟元素可以理解为同辈元素或同级元素。

兄弟选择器

通过兄弟选择器可以获取指定元素的兄弟元素，兄弟元素可以理解为同辈元素或同级元素。

$('dv+p').css('backgroundColor','red');

上述代码中，在选择器中通过符号“+”获取紧邻id值为dv的下一个兄弟元素p，并修改它的背景色。

另外，若要获取指定元素后的所有兄弟元素，可以在选择器中使用符号“~”。修改上述代码

$('dv~p').css('backgroundColor','red');

多学一招：next(),nextAll()和siblings()方法得使用

jQuery中提供的next()方法可获取指定元素紧邻的下一个兄弟元素，nextAll()方法可获取指定元素后的所有兄弟元素，而siblings（）方法则可获取指定元素的所有兄弟元素。

//获取id为dv后紧邻的兄弟元素p
$('div').next('p').css('background','red');
//获取id为dv后所有兄弟元素p
$('div').nextAll('p').css('background','red');
//获取id为dv的所有兄弟元素p
$('div').siblings('p').css('background','red');

过滤选择器

为了快速筛选DOM元素，jQuery提供了一些过滤选择器。过滤选择器支持不同的过滤规则筛选DOM元素，与CSS中伪装选择器类似。过滤选择器通常以“：”开头，“：”后面用于指定过滤规则。
jQuery过滤选择器按照过滤规则不同可以分为基本过滤选择器，可见性过滤选择器，内容过滤选择器，属性过滤选择器，子元素过滤选择器，表单过滤选择器，表单对象属性过滤选择器。

基本过滤选择器

在jQuery中，基本过滤选择器的过滤规则多数与元素的索引值有关。例如，获取DOM中的第一个p元素，示例代码如下。

$('p:eq(0)');

上述代码中，0代表索引值，第一个p元素的索引值为0。除上述方式外，jQuery 提供了一个快捷方式，使用“:first”选择器获取第一个元素，示例代码如下。

$(' p:first'); 

了解基本过滤选择器的使用规律后，下面介绍jQuery 中常用的与索引和快捷方式馆选元素的基本过滤选择器，具体如表所示。

选择器	描述	返回值
: first	获取第一个元素	单个元素
:last	获取最后一个元素	单个元素
:not(selector)	获取除给定选择器外的所有元素	元素集合
:even	获取所有索引值为偶数的元素，索引号从0开始	元素集合
:odd	获取所有索引值为奇数的元素，索引号从0开始	元素集合
:eq(index)	获取指定索引值得元素，索引号从0开始	单个元素
:gt(index)	获取所有大于给定索引值的元素，索引号从0开始	元素集合
:t(index)	获取所有小于给定索引值的元素，索引号从0开始	元素集合
:header	获取所有标题类型的元素，如 h1, h2,…	元素集合
:animated	获取正在执行动画效果的元素	元素集合

需要注意的是“:even"和“:odd"的使用，它们经常被应用到表格或者列表中。

为了读者更好地理解，接下来通过一个案例演示“:even”和“:odd”选择器的具体使用。HTML代码片段

<ul style="width:200px"> 
<li>春天摇身一变</li> 
<li>成了有秘密的人</li>
<li>枯萎是花瓣的秘密</li> 
<li>凋零是叶子的秘密</li>
</ul>

上述代码中，定义了一个ul列表，该列表中包含4个Ii元素。
下面在添加 jQuery代码，对获取到的偶数行和奇数行数据做不同的样式处理，如下所示。

//索引值为偶数的li 
 $('li:even').css("backgroundcolor','pink'); 
 //索引值为奇数的li 
 $('li:odd').css(' border','solid 1px black'); 

上述代码中，第2行使用":even”过滤选择器获取索引值为偶数的奇数行li元素，然后使用css0方法为匹配的li元素添加背景色。
第4行使用:odd"过滤选择器获取索引值为奇数的偶数行li元素，然后使用css0 方法为匹配的li元素添加边框。

可见性过滤选择器

在网页开发中，具有动态效果的页面往往有很多元素被隐藏。例如，折叠式菜单中，折叠起来的子菜单实际上是被隐藏的元素，又称不可见元素，展开的子菜单即可见元素。
jQuery 中提供了可见性过滤选择器，可根据元素的可见性来获取元素，具体如表所示。

选择器	返回值	描述
:visible	获取所有的可见元素	元素集合
:hidden	获取所有不可见元素	元素集合

表中的":hidden”选择器可以获取CSS样式为"display:none",以及属性" type=“hidden””的文本隐藏域。

为了读者更好地理解，接下来通过一个案例演示":visible”和":hidden”选择器的具体用法，HTML代码片段如所示。

<p id="dis">显示文本1</p > 
<p id="vis">显示文本2</p > 
<input type="hidden" value="隐藏文本城"> 

上述代码中，定义了两个id值不同的p元素和一个input 隐藏文本域，两个P元素默认在页面上可见，input默认不可见。
下面在html中添加jQuery代码，对获取到的可见元素设置背景色，控制台打印输出，如下所示。

//获取所有可见元素，添加背景色
 $(':visible').css('backgroundColor','yellow'); 
 //在控制台输出元素集合
console.log($(':visible')); 

上述代码中，使用“:visible"选择器获取所有可见的元素，并为获取到的元素添背景色，第4行代码用于在控制台输出使用“:visible”选择器获取的所有可见元素的集修改完成。

继续修改中的jQuery代码，替换为如下代码。

//获取显示的p元素，设置两种不同的隐藏方式
$('#dis:visible').css(' display1,'none'); 
$('#vis:visible').css('visibility','hidden'); 
//获取隐藏的元素，在控制台输出元素集合
console.log('隐藏的p元素:); 
console.log($(' p:hidden')); 
console.log('隐藏域input:): 
console.log($('input:hidden')); 

上述代码中，分别使用两种不同方式将两个p元素隐藏起来，第2行通过样式"display:none"隐藏id 值为dis的p元素，第3行通过样式"visibility:hidden”隐藏id值为vis的p元素。第6行和第8行用于输出使用“:hidden”选择器获取的隐藏元素的集合。

修改完成后，网页中的两个p元素都已被隐藏。展开控制台中通过“:hidden”获取的隐藏元素，可以看到，使用"“:hidden”选择器获取到了id值为dis 的p元素和 input隐藏域，但是没有获取到id值为vis 的p元素，说明“:hidden”选择器无法获取CsS样式为“visibility:hidden”的隐藏元素。

注意:input隐藏域一般不会设置样式，但是如果为input隐藏域设置Css样式为"visibility:hidden",“:hidden"”选择器同样可以获取到该元素。

内容过滤选择器

元素的内容是指它所包含的子元素或文本内容，jQuery中提供的内容过滤选择器可根据元素的内容来获取元素，如表所示。

选择器	返回值	描述
:contains(text)	获取包含给定文本的元素	元素集合
:empty	获取所有不包含子元素或者文本的空元素	元素集合
:has(selector)	获取含有选择器所匹配的元素	元素集合
:parent	获取含有子元素或者文本的元素	元素集合

为了读者更好地理解，接下来通过一个案例演示内容过滤选择器的具体使用，HTML
代码片段如

<style> 
div ( 
 width:200px;
 height:30px;
 margin:5px; 
 border:solid 1px black; 
 }
</style> 
<div>我是div元素的文本</div> 
<div>我也是div元素的文本</div> 
<div><span>我是div内span 元素的文本</span></div> 
<div></div> 

上述代码中定义了4个diy元素，并为div元素添加初始样式。
，第2个div 元素的文本相比第1个div 元素多了一个“也”字。下在html 中添加jQuery代码，为含有“也”字的 div 设置背景色，如下所示.

$('div:contains(也)').css('background','pink'); 

上述代码中，使用“:contains”选择器获取文本中包含“也”字的div 元素，然后为
配元素添加背景色。

继续修改html中的jQuery代码，为含有span标签的div元素设置背景色如下所示。

$('div:has(span)').css('background ',' pink'); 

上述代码中，使用":has(selector)”选择器获取文本包含子元素span的div元素，然后为匹配元素添加背景色。

继续修改 demo2-5.html中的jQuery 代码，为空的div 元素设置背景色，如下所示。

$('div:empty').css('background','pink'): 

上述代码中，使用“:empty"选择器可获取没有元素内容的div元素，然后为匹配元素添加背景色。

属性过滤选择器

jQuery 不仅可以通过元素的内容筛选元素，也可以通过元素的属性来筛选元素。jQuery 的属性过滤选择器将过滤规则包裹在"口”中，

选择器	描述	返回值
[attribute]	获取包含给定属性的元素	元素集合
[attribute=value]	获取等于给定的属性是某个特定值的元素	元素集合
[attribute!=value]	获取不等于给定的属性是某个特定值的元素	元素集合
[attribute^=value]	获取给定的属性是以某些值开始的元素	元素集合
[attribute$=value]	获取给定的属性是以某些值结尾的元素	元素集合
[attribute*=value]	获取给定的属性是以包含某些值的元素	元素集合
[selector1][selector2][selectorN]	获取满足多个条件的复合属性的元素	元素集合

为了读者更好地理解，接下来通过一个案例演示属性过滤选择器的具体使用，HTML
代码片段

<style> 
div {
width:200px; margin:5px; 
border:solid 1px black; 
</style> 
 <div class="dv">class=dv</div> 
 <div title="标题">title=标题</div> 
  <div class="dv1"title="标题1">class=dv1 title=标题1</div> 
  <div class="dv1"title="标题2">class=dv1 title=标题2</div> 

上述代码中定义了4个div元素，并为div 元素添加了不同的class 和title属性值。

添加jQuery 代码，获取class属性值以d开头的元素，

$('[class^=d]").css('background',' yellow'); 

上述代码中，使用"[class -d]”获取class属性值以d开头的元素，然后为匹配Q 添加背景色。

子元素过滤选择器

jQuery中子元素过滤选择器通过父元素和子元素的关系，来获取相应的元素，可图2-30 匹配复合属性同时获取不同父元素下满足条件的子元素。

<ul> 
<li>item 1-0</1i> <1i>item 1-1</li> 
</ul> <ul> 
<li>item 2-0</li> <1i>item 2-1</1i> 
</ul> 

如果想同时获取上述代码中的两个ul列表下的第1个li元素，便可以使用子元素过虑选择器，示例代码如下所示。

$('1i:first-child'); 

与层次选择器中的子元素选择器相比，子元素过滤选择器拥有较灵活的过滤规则，jQuery 中的子元素过滤器如表所示。

选择器	描述	返回值
:first-child	获取每个父元素下的第一个子元素	元素集合
:last-child	获取每个父元素下的最后一个子元素	元素集合
:only-child	获取每个仅有一个子元素的父元素下的子元素	元素集合
:nth-child(eq/evenjoddjindex)	获取每个元素下的特定元素，索引号从1开始	元素集合

为了读者更好地理解，接下来通过一个案例演示子元素过滤选择器的具体使用，

<ul> 
<li>北京</li> 
<li>上海</li> 
</ul> 
<ul> 
<li>广州</li> <li>深圳</li> 
<li>天津</li> 
</ul> 
<ul>  
<li>重庆</li> 
</ul> 

上述代码中定义了4个ul列表，前面两个ul列表分别包含2个li子元素，后面两个ul列表分别包含1个li子元素。
接着在html中添加jQuery代码，获取父元素下仅含一个的子元素:

$('1i:only-child).css('background','orange '); 

上述代码中，使用":only-child"选择器获取所有仅包含一个 li元素 的ul列表下的 li元素，然后为匹配的元素添加背景色。

继续修改html中的jQuery 代码，获取元素指定元素下的第一个元素。

$('li:nth-child(1)').css('background','orange '); 

上述代码中，使用“:nth-child(1)”选择器，获取每个ul列表的第1个li元素 ，然后为匹配的元素添加背景色，需要注意的是，nth-child的参数索引值从1开始。