jQuery和Ajax实战教程（第2版）课件 第2章-jQuery元素获取

第二章jQuery元素获取2.1引言基本格式:$(选择器).方法();​核心逻辑:先通过选择器获取元素,再调用方法进行批量操作0102核心语法模式​2.1引言$()函数(选择器)​定义jQuery的“主打”功能，用于高效选择页面元素优势​比原生JS(getElementById()、getElementsByClassName()等)更简洁基础示例:​$("#box"):选择id为box的元素​$(".box"):选择类名为box的元素2.1引言三、jQuery支持的选择器类型​与CSS写法相同的选择器(直接复用CSS选择器语法)​jQuery自创选择器(扩展特有选择逻辑)​通过节点关系选择元素的写法(基于DOM结构定位)01四、节点关系方法(获取关联元素)​作用：基于已选元素，快速获取其关联节点​示例：$(选择器).children();​功能：获取指定选择器元素的所有子元素022.2CSS2.1版本的选择器选择器意义$("#box")选择所有id为box的元素$(".box")选择所有类名为box的元素$("div")选择所有div标签$("divulli")选择所有div中的ul中的li标签$(".boxulli.spec")选择所有类名为box的元素中的ul中的类名为spec的li标签$(".spec,.warn")选择所有类名为spec的元素，以及所有类名为warn的元素$("divul*")选择所有div中的ul中的任意元素jQuery全面支持所有CSS2.1版本的选择器。左表列出了所有CSS2.1选择器所有CSS2.1选择器2.2CSS2.1版本的选择器

一、案例演示：jQuery选择器应用创建包含指定类名的列表结构，作为操作对象：HTML结构为列表项设置基础样式，确保可见性：CSS样式<divclass="box">

<ul>

<li></li>

<liclass="spec"></li>

<li></li>

<liclass="spec"></li>

<liclass="spec"></li>

</ul></div><styletype="text/css">

ul{

list-style:none;

}

li{

float:left;

width:100px;

height:100px;

margin-right:10px;

background-color:#ccc;

}</style>2.2CSS2.1版本的选择器

一、案例演示：jQuery选择器应用01引入jQuery库02选择特定元素并修改样式jQuery代码实现<scripttype="text/javascript"src="jslib/jquery-3.7.1.min.js"></script><scripttype="text/javascript">$(".boxulli.spec").css("background-color","red");</script>2.2CSS2.1版本的选择器

一、案例演示：jQuery选择器应用效果说明符合.boxulli.spec选择器的元素(3个li)背景变为红色，其余保持默认灰色(如图所示)。符合选择器的元素被设置成了红色底层使用querySelectorAll()实现，该方法从IE9开始支持，因此仅兼容IE9及以上浏览器。jQuery2代

和3代：1为兼容IE6、7、8，通过正则表达式“词法分析”，结合getElementById()和getElementsByTagName()实现，算法名为“sizzle”，实现难度更高。jQuery1代：22.2CSS2.1版本的选择器

不同版本的底层差异2.2CSS2.1版本的选择器

jQuery选择器注意事项关键问题:选择器写错时,$()函数不会报错错误示例:(忘记在box前加".",语句不报错但无效果)检查方法:用alert()函数弹出选中元素的length值判断正确示例:(正确选择器的length值不为0)01020304$("box").css("background-color","red");alert($("box").length);

//弹出0,选择器错误alert($(".box").length);

//弹出1,选择器正确2.3CSS3选择器jQuery从3代开始，全面支持CSS3选择器下表列出了这些选择器选择器意义关系选择器$("div>p")选择所有父级是div的p标签$("div+p")选择所有紧跟在div之后的第一个p标签$("ul~p")选择所有ul之后的每一个p标签属性选择器$("a[href]")选择所有带有href属性的a标签$("a[href^='https']")选择所有href属性的值以"https"开头的a标签$("a[href$='.pdf']")选择所有href属性的值以".pdf"结尾的a标签$("a[href*='test']")选择所有href属性的值包含子字符串"test"的a标签序号选择器$("p:first-child")选择所有是其父级元素的第一个子元素的p标签$("p:last-child")选择所有是其父级元素的最后一个子元素的p标签$("p:nth-child(3)")选择所有是其父级元素的第3个子元素的p标签$("p:nth-last-child(3)")选择所有是其父级元素的倒数第3个子元素的p标签CSS3选择器仅选择父元素为div的直接子元素p>选择器的作用：0102HTML结构03jQuery代码2.3CSS3选择器

案例1：直接子元素选择器(div>p)<div>

<p>我的父级是div</p>

<p>我的父级是div</p>

<section>

<p>我的父级不div</p>

</section></div>

$("div>p").css("background-color","pink");页面效果前2个p标签(父级为div的直接子元素)背景变为粉色嵌套在section中的p标签未被选中(非div直接子级),如图所示。所有父级是div的p标签变为粉色2.3CSS3选择器

案例1：直接子元素选择器(div>p)关键知识点：>符号：仅匹配直接子元素(父与子为直接包含关系)与空格的区别：divp(空格)：选择div内所有后代p(包括嵌套层级)div>p(>)：仅选择div的直接子p(不包含嵌套层级)2.3CSS3选择器

案例1：直接子元素选择器(div>p)选择所有在ul之后且同属一个父元素的p标签~选择器的作用：0102HTML结构03jQuery代码

<divclass="box">

<p>我在ul之前</p>

<p>我在ul之前</p>

<ul>

<li></li>

<li></li>

</ul>

<p>我在ul之后</p>

<p>我在ul之后</p>

<h3></h3>

<h3></h3>

<p>我在最后</p>

</div>

$("ul~p").css("background-color","pink");2.3CSS3选择器

案例2：后续兄弟选择器(ul~p)01页面效果1、~符号：匹配目标元素之后所有同层级的指定元素(不局限于紧邻的下一个元素)2、与相邻选择器+的区别：ul+p(+)：仅选择ul紧邻的下一个pul~p(~)：选择ul之后所有符合条件的p(无论中间是否有其他元素)02关键知识点所有ul之后的所有p标签都变为粉色2.3CSS3选择器

案例2：后续兄弟选择器(ul~p)2.3CSS3选择器

案例3：属性存在选择器(a[href])属性选择器中“判断属性是否存在”的用法：仅选择带有href属性的<a>标签a[href]选择器作用0102HTML结构03jQuery代码<ahref="">

我有href属性</a><ahref="">

我有href属性</a><a>我没有href属性</a>

$("a[href]").css("background-color","pink");页面效果前两个带有href属性的<a>标签背景变为粉色第三个没有href属性的<a>标签未被选中所有父级是div的p标签变为粉色2.3CSS3选择器

案例3：属性存在选择器(a[href])关键知识点选择器a[href]的逻辑：只要<a>标签存在href属性(无论属性值是什么)，就会被选中扩展场景：可通过类似语法判断其他属性是否存在(如input[type]选择所有带type属性的输入框)是属性选择器中最基础的用法，后续可结合^(开头)、$(结尾)、*(包含)等符号实现更精确的匹配2.3CSS3选择器

案例3：属性存在选择器(a[href])根据元素在父容器中的序号选择元素，包括首个、指定序号、倒数指定序号、最后一个元素​选择器作用：0102HTML结构：2.3CSS3选择器

案例4：序号选择器(:first-child/:nth-child)

<div>

<p>我是第2个p元素</p>​

<p>我是第3个p元素</p>​

<p>我是第4个p元素</p>​

<p>我是第5个p元素</p>​

<p>我是第6个p元素</p>​

<p>我是第7个p元素</p>​

</div>2.3CSS3选择器

案例4：序号选择器(:first-child/:nth-child)03jQuery代码

//选择第1个子元素​

$("p:first-child").css("background-color","pink");​

//选择第3个子元素​

$("p:nth-child(3)").css("background-color","pink");​

//选择倒数第2个子元素​

$("p:nth-last-child(2)").css("background-color","pink");​

//选择最后1个子元素​

$("p:last-child").css("background-color","pink");​01运行效果:first-child匹配父元素的第一个子元素​:nth-child(n)匹配父元素的第n个子元素​:nth-last-child(n)匹配父元素的倒数第n个子元素​:last-child匹配父元素的最后一个子元素​所有序号类选择器均从1开始计数​02关键知识点：指定序号的元素都变为粉色2.3CSS3选择器

案例4：序号选择器(:first-child/:nth-child)2.4jQuery自创选择器

2.4.1:eq()选择器:eq()表示“等于”(equal的缩写)，根据指定下标选择元素选择器作用：0102HTML结构03<ul>​<li></li>​

<li></li>​……(省略一些li元素)

<li></li>​

<li></li>​</ul>注：需通过CSS设置li元素可见、浮动，初始背景颜色为灰色初始网页效果运行效果下标为2的盒子变红​​//选择下标为2的li元素，背景设为红色​$("li:eq(2)").css("background-color","red");​​效果：下标为2的li元素变为红色(如图所示)2.4jQuery自创选择器

2.4.1:eq()选择器jQuery程序示例1：图(a)

下标为2的盒子变红2.4jQuery自创选择器

2.4.1:eq()选择器jQuery程序示例3jQuery程序示例2//eq()作为单独方法使用，选择下标为2的li元素如图(a)所示)$("li").eq(2).css("background-color","red");​​//参数为负数，选择倒数第3个li元素如图(b)所示​$("li:eq(-3)").css("background-color","red");​​图(b)倒数第3个盒子变红关键知识点：:eq()选择器下标从0开始计数​与CSS3选择器:nth-child()的区别：:nth-child()从1开始，:eq()从0开始​eq()可作为单独方法使用($("li").eq(n))​参数为负数时，表示选择序列中倒数第几个元素，从-1开始计数(最后一个元素下标为-1)​写法类似CSS伪类2.4jQuery自创选择器

2.4.1:eq()选择器用于快速选择第一个和最后一个元素，分别等价于:eq(0)和:eq(-1)​选择器作用：0102jQuery

程序示例1(选择器形式)：​​

//选择第一个li元素，背景设为红色​

$("li:first").css("background-color","red");​

//选择最后一个li元素，背景设为红色​

$("li:last").css("background-color","red");​​第一个和最后一个元素变红效果：第一个和最后一个li元素变为红色(如图所示)2.4jQuery自创选择器

2.4.2:first和:last选择器jQuery程序示例2(方法形式)：​​​(效果同上)2.4jQuery自创选择器

2.4.2:first和:last选择器

第一个和最后一个元素变红和eq()方法一样，first()和last()也可以作为单独的方法来使用：//first()方法选择第一个li元素​$("li").first().css("background-color","red");​//last()方法选择最后一个li元素​$("li").last().css("background-color","red");​​​​2.4jQuery自创选择器

2.4.2:first和:last选择器jQuery示例1(:first-child选择器)：​​​jQuery示例2(:first选择器)：​​想一想，会有怎样不同的效果呢？<div>​<p>A</p>

<p>B</p>

<p>C</p>​</div>​<div>​<p>D</p>

<p>E</p><p>F</p>​</div>​​:first-child和:first、:eq(0)关键区别说明：

HTML结构：$("p:first-child").css("background-color","red");​$("p:first").css("background-color","red");​//等价于$("p:eq(0)").css("background-color","red");​​2.4jQuery自创选择器

2.4.2:first和:last选择器示例1(:first-child选择器)：​​示例2(:first选择器)：​​效果：A和D元素变红(如图(a)所示)​(A和D是各自父元素中的第一个子元素)(a):first-child选择器(b):first和:eq(0)选择器效果：仅A元素变红(如图(b)所示)​(A是所有p元素中的第一个)$("p:first-child").css("background-color","red");​$("p:first").css("background-color","red");​//等价于$("p:eq(0)").css("background-color","red");​​2.4jQuery自创选择器

2.4.2:first和:last选择器关键知识点：​:first等价于:eq(0)，last等价于:eq(-1)​可作为选择器(:first/:last)或方法(first()/last())使用​核心区别：​:first-child：选择每个父元素中的第一个子元素(“每个家庭的老大”)​:first/:eq(0)：选择所有匹配元素中的第一个(“全体中的老大”):gt()表示“大于”(greaterthan的缩写)，用于选择下标大于某值的元素；:lt()表示“小于”(lessthan的缩写)，用于选择下标小于某值的元素​选择器作用：0102HTML03CSS<div>

<ul>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

</ul></div>

ul{

list-style:none;

}

li{

width:40px;

height:40px;

background-color:#ccc;

float:left;

margin-right:10px;

}2.4jQuery自创选择器

2.4.3:gt()和:lt()选择器效果：jQuery程序示例1(:gt()选择器)​2.4jQuery自创选择器

2.4.3:gt()和:lt()选择器//选择下标大于2的li元素，背景设为红色​$("li:gt(2)").css("background-color","red");​下标大于2的元素变红下标大于2的li元素变为红色(如图所示)，下标从0开始计数效果：jQuery程序示例2(:lt()选择器)2.4jQuery自创选择器

2.4.3:gt()和:lt()选择器下标小于2的元素变红下标小于2的li元素变为红色(如图所示)，下标从0开始计数//选择下标小于2的li元素，背景设为红色​$("li:lt(2)").css("background-color","red");​2.4jQuery自创选择器

2.4.3:gt()和:lt()选择器关键知识点：​下标均从0开始计数​:gt(n)匹配下标大于n的元素，:lt(n)匹配下标小于n的元素​注意事项：gt()和lt()不能单独作为方法使用​正确写法：$("li:gt(2)")​错误写法：$("li").gt(2)(无此用法):odd表示“奇数”，用于选择下标为奇数的元素；:even表示“偶数”，用于选择下标为偶数的元素​选择器作用：0102HTML03CSS<div>

<ul>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

</ul></div>

ul{

list-style:none;

}

li{

width:40px;

height:40px;

background-color:#ccc;

float:left;

margin-right:10px;

}2.4jQuery自创选择器

2.4.4:odd和:even选择器基础结构：​基于ul无序列表及若干li标签(同前文结构，li元素初始为灰色、浮动显示)​jQuery程序示例1(:odd选择器)效果：所有下标为奇数的li元素变为红色(如图所示)，下标从0开始计数2.4jQuery自创选择器

2.4.4:odd和:even选择器//选择下标为奇数的li元素，背景设为红色​$("li:odd").css("background-color","red");​​下标为奇数的盒子变红jQuery程序示例

2(:even选择器)效果：所有下标为偶数的li元素变为红色(如图所示)，下标从0开始计数2.4jQuery自创选择器

2.4.4:odd和:even选择器下标为偶数的盒子变红//选择下标为偶数的li元素，背景设为红色​$("li:even").css("background-color","red");​2.4jQuery自创选择器

2.4.4:odd和:even选择器关键知识点：​下标均从0开始计数​:odd匹配下标为奇数(1、3、5…)的元素​:even匹配下标为偶数(0、2、4…)的元素​注意区分“元素位置”与“下标计数”的差异(如:even选中的是第1个、第3个等元素，因其下标为0、2…)​用于选择“不符合”指定选择器条件的元素​选择器作用：0102HTML03CSS<div>

<ul>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

</ul></div>

ul{

list-style:none;

}

li{

width:40px;

height:40px;

background-color:#ccc;

float:left;

margin-right:10px;

}基础结构：​基于ul无序列表及若干li标签(同前文结构，li元素初始为灰色、浮动显示)​2.4jQuery自创选择器

2.4.5:not()选择器jQuery程序示例

2效果：除下标为3的li元素外，其余均变为红色(如图所示)2.4jQuery自创选择器

2.4.5:not()选择器//选择除了下标为3的li元素之外的所有li元素，背景设为红色​$("li:not(:eq(3))").css("background-color","red");​除了下标为3的盒子之外的盒子变红2.4jQuery自创选择器

2.4.5:not()选择器关键知识点：​语法特点：圆括号内部需再次书写选择器(含冒号)，格式为:not(选择器)​作用逻辑：排除符合括号内选择器条件的元素，选中剩余元素​注意事项：括号内可嵌套其他选择器(如:eq()、:odd等)，需严格遵循语法

格式避免错误用于选择内部包含指定文本的元素，支持对元素内容进行精准筛选​​选择器作用：0102HTML2.4jQuery自创选择器

2.4.6:contains()选择器<p>北京旅游</p>​<p>北京高校介绍</p>​<p>北京天气</p>​<p>北京美食</p>​<p>上海旅游</p>​<p>上海高校介绍</p>​<p>上海天气</p>​<p>上海美食</p>​​2.4jQuery自创选择器

2.4.6:contains()选择器文本中包含文字“北京”的p标签都变为粉色效果：所有文本中包含"北京"的p标签背景变为粉色(如图所示)jQuery程序示例：//选择包含"北京"文本的p元素，背景设为粉色​$("p:contains('北京')").css("background-color",

"pink");​2.4jQuery自创选择器

2.4.6:contains()选择器关键知识点：​语法特点：括号内可填写文本内容，支持加引号(如'北京')或不加引

号两种写法​匹配规则：文本匹配区分大小写(英文等语言需严格匹配大小写)​匹配范围：可检测元素内部直接文本或子元素中的文本内容​注意事项：对于多语言内容，需确保搜索文本与目标内容的大小写完全一致​扩展说明：该选择器适用于动态内容筛选场景，例如在列表中快速定位包含

特定关键词的元素has表示“有”，用于选择包含特定子元素的父元素​选择器作用：0102HTML03jQuery2.4jQuery自创选择器

2.4.7:has()选择器<div>​

这个div中有p标签​

<p>我是p标签</p>​</div>​<div>​

这个div中没有p标签​</div>//选择包含p标签的div元素，背景设为粉色​$("div:has(p)").css("background-color",

"pink");内部有p标签的div变成了粉色效果：内部包含p标签的div变为粉色，无p标签的div不变色(如图所示)2.4jQuery自创选择器

2.4.7:has()选择器关键知识点：​语法格式：父元素:has(子元素选择器)​匹配逻辑：仅选中包含括号内指定子元素的父元素​适用场景：根据子元素存在性筛选父元素，常用于嵌套结构的元素筛选​注意：括号内可填写任意有效的子元素选择器(如标签、类、ID等)2.5节点关系方法核心概念jQuery提供了一系列用于获取节点关系的方法，本质是“关系选择器”作用：快速定位目标元素的父节点、子节点等关联元素，便于批量操作与原生JSDOM的对应关系原生JS相关API：childNodes、firstChild、lastChild、nextSibling等jQuery简化了这些操作，提供更直观的方法(如children()、parent())01022.5节点关系方法基础示例场景：选择节点后操作其关联节点核心特点方法特性：所有节点关系API均为“方法”(需带括号调用，如children()而非children)链式调用：返回jQuery对象，可直接继续调用其他方法(如.css()、.html())批量操作：一次性对选中的所有关联节点进行统一处理0304//获取#box的所有子节点，并设置背景为红色$("#box").children().css("background-color","red");//获取#box的父节点$("#box").parent();​获取指定元素的所有子节点，返回由子节点组成的jQuery对象，支持链式调用其他方法​方法作用：1HTML结构：​22.5节点关系方法

2.5.1子节点和后代查找——children()方法<divid="box">​<p></p>​

<p></p>​

<p></p>​

<p></p>​

<p></p>​</div>​2.5节点关系方法

2.5.1子节点和后代查找——children()方法01jQuery代码02效果说明​children()方法//选择#box的所有子节点并设置背景为红色​$("#box").children().css("background-color",

"red");​方法特性children()是方法(需带括号)，而非属性​​​​返回jQuery对象，支持链式调用(如直接调用css())​

等价写法​​(推荐使用children()，语义更清晰)2.5节点关系方法

2.5.1子节点和后代查找——children()方法$("#box").children().css()//正确写法(带括号)​$("#box").children.css()//错误写法(缺少括号)$("#box").children()//方法形式​$("#box>*")//选择器形式(等价效果)0201jQuery代码(过滤出.spec类的子节点)改进HTML结构带参数的过滤功能

场景：筛选符合特定条件的子节点​2.5节点关系方法

2.5.1子节点和后代查找——children()方法​<divid="box">​

<p></p>​

<p></p>​

<pclass="spec"></p>

<!--带spec类名-->​

<pclass="spec"></p>

<!--带spec类名-->​

<p></p>​</div>$("#box").children(".spec").css("background-color","red");2.5节点关系方法

2.5.1子节点和后代查找——children()方法​等价写法：​​​​只有加上spec类名的p标签的背景颜色会变为红色效果说明：​仅带spec类名的p标签背景变为红色(如图所示)0102$("#box").children(".spec")

//方法形式​$("#box>.spec")

//选择器形式(等价效果)示例1：选择第一个子元素​01示例2：选择最后一个子元素​022.5节点关系方法

2.5.1子节点和后代查找——children()方法$("#box").children(":first").css("background-color","red");​$("#box").children(":eq(0)").css("background-color","red");

//等价写法​$("#box").children(":last").css("background-color","red");​$("#box").children(":eq(-1)").css("background-color","red");

//等价写法​示例3：排除特定类的子元素​​032.5节点关系方法

2.5.1子节点和后代查找——children()方法//选择不带有spec类的子元素​$("#box").children(":not(.spec)").css("background-color","red");效果：

非.spec类的p标签背景变红(如图所示)not反选效果2.5节点关系方法

2.5.1子节点和后代查找——children()方法核心特性总结​节点类型：仅返回元素节点(排除文本节点、注释节点)​筛选逻辑：可通过参数(选择器)精准过滤子节点​链式优势：返回jQuery对象，支持连续调用方法​灵活性：与选择器写法功能等价，可根据可读性选择使用​在指定元素的所有后代节点(包括子节点、孙子节点等隔代节点)中查找符合条件的元素，返回由匹配元素组成的jQuery对象，支持链式调用其他方法​​方法作用：1HTML结构：​22.5节点关系方法

2.5.1子节点和后代查找——find()方法<divid="box">​

<ul>​

<li>没有类名</li>​

<liclass="spec">spec类</li>​

<liclass="spec">spec类</li>​

<li>没有类名</li>​

</ul>​</div>2.5节点关系方法

2.5.1子节点和后代查找——find()方法jQuery代码：​​​​find()方法0102效果说明：​#box内所有带spec类名的li元素背景变为红色(如图所示)//在#box的所有后代中寻找带.spec类的元素并设置背景为红色​$("#box").find(".spec").css("background-color","red");对比示例：​​​等价写法​​//此代码无效果，因为#box的直接子节点(ul)不含.spec类​$("#box").children(".spec").css("background-color","red");​​//此代码有效，因为find()会查找所有后代节点​$("#box").find(".spec").css("background-color","red");$("#box").find(".spec")//方法形式​$("#box.spec")//选择器形式(等价效果)​​(推荐使用find()方法，语义更清晰，尤其是在复杂DOM结构中)2.5节点关系方法

2.5.1子节点和后代查找——find()方法2.5节点关系方法

2.5.1子节点和后代查找——find()方法关键知识点​语法要求：​find()必须传入选择器参数，否则无法使用(与children()不同)​正确写法：错误写法：$("#box").find()(缺少选择器参数)​搜索特性：​会穿透所有层级的DOM节点进行查找​只返回元素节点(排除文本节点、注释节点)​匹配结果包含所有符合条件的后代元素，而非仅第一个​特性find()方法children()方法搜索范围所有后代节点(包括隔代)仅直接子节点参数要求必须传入选择器参数可不带参数(获取所有子节点)适用场景深层级节点查找直接子节点查找与children()方法的关键区别​$("#box").find("selector")​获取指定元素的直接父节点(即紧邻的上一级父元素)，返回由父节点组成的jQuery对象，支持链式调用样式或行为方法。方法作用0102HTML03jQuery2.5节点关系方法

2.5.2父节点和祖先查找——parent()方法<ul>​

<li>A</li>​

<liid="mm">B</li>​

<li>C</li>​</ul>//获取#mm的父节点并设置背景为红色​$("#mm").parent().css("background-color","red");​2.5节点关系方法

2.5.2父节点和祖先查找——parent()方法效果说明：​ul元素(#mm的直接父节点)背景变为红色(如图所示)，因ul是li标签的直接父容器。parent()方法2.5节点关系方法

2.5.2父节点和祖先查找——parent()方法关键知识点​查找范围：仅返回直接父节点(即DOM层级中紧邻的上一级元素)，不包含祖父节点及更上层祖先。​参数特性：可传入选择器参数对父节点进行筛选(语法：parent(selector))，但因任何元素的直接

父节点唯一，实际使用中较少需要筛选。​示例(筛选父节点为ul的情况)：​

返回结果：始终返回jQuery对象(即使父节点不存在，也返回空对象，不报错)。​

仅包含元素节点，排除文本节点、注释节点等非元素节点。//仅当#mm的父节点是ul时生效​$("#mm").parent("ul").css("background-color","red");​​获取指定元素的所有祖先元素(包括父元素、祖父元素、曾祖父元素等，直至根节点)，返回由匹配的祖先元素组成的jQuery对象，支持链式操作。方法名结尾的“s”体现“多个”含义，与parent()形成明显区分。​方法作用0102HTML<ul>​

<li>外层li</li>

<li>外层li</li>​

<li>​

<ul>​

<li>内层li</li>​

<liid="mm">内层li</li>​

<li>内层li</li>​

</ul>​

</li>​</ul>2.5节点关系方法

2.5.2父节点和祖先查找——parents()方法2.5节点关系方法

2.5.2父节点和祖先查找——parents()方法效果说明：jQuery代码(parents()方法)两层ul元素(#mm的直接父ul和外层祖父ul)背景均变为红色(如图

所示)。//获取#mm的所有祖先ul元素并设置背景为红色​$("#mm").parents("ul").css("background-color","red");parents()方法和parent()方法对比2.5节点关系方法

2.5.2父节点和祖先查找——parents()方法jQuery代码(parent()方法)：01jQuery代码(parents()方法)：​02//仅获取#mm的直接父ul元素并设置背景为红色​$("#mm").parent("ul").css("background-color","red");​//获取#mm的所有祖先ul元素并设置背景为红色​$("#mm").parents("ul").css("background-color","red");​parent()方法parents()方法2.5节点关系方法

2.5.2父节点和祖先查找——parents()方法关键知识点​核心区别(与parent())：​​特性​parents()方法​parent()方法​查找范围​所有祖先元素(多层级)​仅直接父元素(单层级)​返回数量​可能多个(符合条件的所有祖先)​最多1个(唯一直接父元素)​方法名标识​结尾带“s”，表复数​单数形式，表单个​​返回结果：​返回jQuery对象，包含所有匹配的祖先元素(按从近到远的顺序排列)。​仅包含元素节点，排除非元素节点(如文本、注释节点)。​适用场景：​需要操作目标元素的多层级祖先时(如多级嵌套的列表、菜单)。​需批量设置祖先元素样式或行为时，比多次调用parent()更高效。参数作用：​可传入选择器参数(如"ul")，筛选出符合条件的祖先元素(忽略不符合的)。​若不传入参数，将返回所有祖先元素(包括html、body等根节点)。获取指定元素的最内层符合条件的祖先(从元素自身开始遍历所有祖先节点，找到第一个匹配条件的节点后立即停止)。"closest"意为“最靠近的”，体现其“优先匹配最近祖先”的特性。​方法作用0102HTML2.5节点关系方法

2.5.2父节点和祖先查找——closest()方法<divclass="spec">

<div>

<divclass="spec">

<div>

<p></p>

</div>

</div>

</div></div>2.5节点关系方法

2.5.2父节点和祖先查找——closest()方法jQuery代码：​​​​closest()方法0102//从p元素开始查找带.spec类的最近祖先，找到即停止​$("p").closest(".spec").css("background-color",

"red");效果说明：​仅p元素最近的带.spec类的祖先div(内层那个)背景变为红色(如图所示)。​2.5节点关系方法

2.5.2父节点和祖先查找——closest()方法parents()方法和closest()方法对比jQuery代码(parents()方法)：01jQuery代码(closest()方法)：​02parents()方法closest()方法//查找p元素所有带.spec类的祖先，不停止遍历​$("p").parents(".spec").css("background-color","red");//从p元素开始查找带.spec类的最近祖先，找到即停止​$("p").closest(".spec").css("background-color","red");效果：​所有带.spec类的祖先div(内层和外层两个)背景均变为红色(如图所示)。2.5节点关系方法

2.5.3兄弟节点——siblings()方法获取指定元素的所有兄弟节点(即同一父元素下的其他同级元素，不包含自身)，返回由匹配的兄弟元素组成的jQuery对象，支持链式操作。方法作用0102HTML<div>​

<p></p>​

<p></p>​

<p></p>​

<pclass="spec">spec</p>​

<p></p>​

<p></p>​</div>​​2.5节点关系方法

2.5.3兄弟节点——siblings()方法jQuery代码：​​​​siblings()方法0102//选择.spec元素的所有兄弟节点并设置背景为红色​$(".spec").siblings().css("background-color",

"red");效果说明：​.spec元素(带“spec”文本的p标签)的所有同级p标签背景变为红色(自身保持灰色)，如图所示。​2.5节点关系方法

2.5.3兄弟节点——siblings()方法关键知识点​核心特性：​查找范围：同一父元素下的所有同级元素(不包含元素自身)。​无参数时：返回所有兄弟节点；有参数时：仅返回符合选择器条件的兄弟节点。​适用场景：​需要批量操作某元素的所有同级元素时(如导航菜单中高亮当前项的其他选项)。​配合选择器参数实现精准筛选(如排除特定类的兄弟节点)。2.5节点关系方法

2.5.3兄弟节点——prev()和next()方法prev()：获取指定元素的前一个紧邻的兄弟节点(同一父元素下，位于当前元素之前的第一个同级元素)​next()：获取指定元素的后一个紧邻的兄弟节点(同一父元素下，位于当前元素之后的第一个同级元素)两者均返回匹配的兄弟节点组成的jQuery对象，支持链式操作。​方法作用0102HTML(同前例)<div>​

<p></p>​

<p></p>​

<p></p>​

<pclass="spec">spec</p>​

<p></p>​

<p></p>​</div>​​2.5节点关系方法

2.5.3兄弟节点——prev()和next()方法jQuery代码：​​​​0102//设置.spec元素前一个兄弟节点的背景为红色​$(".spec").prev().css("background-color","red");​//设置.spec元素后一个兄弟节点的背景为红色​$(".spec").next().css("background-color","red");​效果说明：​.spec元素(带“spec”文本的p标签)的前一个紧邻p标签和后一个紧邻p标签背景变为红色(自身及其他兄弟节点保持灰色)，如图所示。​prev()方法和next()方法2.5节点关系方法

2.5.3兄弟节点——prev()和next()方法关键知识点​查找范围：仅匹配紧邻的一个兄弟节点(前序或后序)，非所有兄弟。​无参数限制：无需传入选择器(默认匹配紧邻的同级元素)。​返回结果：若存在对应兄弟节点，返回包含该节点的jQuery对象；若不存在，

返回空对象(不报错)。​与siblings()方法的区别：​方法​匹配范围​返回数量​适用场景​