jQuery和Ajax实战教程（第2版）课件 第1-3章-初识jQuery -jQuery内置方法

第一章

初识jQueryjQuery简介备受赞誉、应用广泛的JavaScript库核心价值：高效简化原生JavaScript的DOM开发jQuery

与JavaScript

的关系并非全新语言，底层仍为JavaScript核心差异：提供新API，简化原生开发流程01021.1jQuery简介

1.1.1jQuery——一款优秀的JavaScript库“库（Library）”的本质预先封装复杂功能，便于后续调用通过简单API即可完成复杂任务与“不要重复造车轮”准则的契合准则核心：利用现有成熟方案，避免重复开发带来的价值：节省时间与精力减少错误风险保证质量与稳定

03041.1jQuery简介

1.1.1jQuery——一款优秀的JavaScript库1.1jQuery简介

1.1.2原生JavaScript的DOM开发“痛点”痛点1：元素选择不便1、原生方法有限：getElementById()、getElementsByTagName()功能单一，仅支持id、标签名选择querySelectorAll()兼容性差，不支持CSS3高级选择器2、短板：功能覆盖不足，无法灵活适配复杂选择场景痛点2：批量操作繁琐1、必须依赖循环（如for循环）实现批量处理（例：批量修改元素样式)2、问题：操作步骤多、易错，开发效率低1.1jQuery简介

1.1.2原生JavaScript的DOM开发“痛点”痛点3：运动实现复杂依赖setInterval()定时器，需手动计算步长、时间间隔实现简单运动已繁琐，复杂动效开发成本更高痛点4：浏览器兼容成本高DOM功能在不同浏览器表现差异大

额外工作：需编写大量兼容代码，增加开发工作量1.创始人人物：程序员JohnResig。发布时间：2006年，22岁的JohnResig发布了jQuery1.0版本名称由来：“j”既代表“JavaScript”，也象征创始人“John”；“Query”（查询）体现其突出功能，即方便地查询、选择DOM元素1.1jQuery简介

1.1.3jQuery创始人、特点和官网2.特点持续版本更新：jQuery团队积极收集用户反馈，不断推出新版本，满足开发者需求广泛社区支持：开发者群体活跃，社区资源丰富资源涵盖各种文档、教程、博客、论坛、社交媒体和开源项目，助力开发者快速解决bug、了解新API丰富插件资源：提供大量可免费下载使用的插件，扩展了jQuery的功能，提高开发效率01023.官网链接：/。功能：用户可在官网下载jQuery、查看API文档、下载插件等4.Logo及口号jQuerylogo含口号

“writeless,domore”

中文意译：写更少代码，做更多事，体现了jQuery提升开发效率的核心优势03041.1jQuery简介

1.1.3jQuery创始人、特点和官网1.1jQuery简介

1.1.3jQuery创始人、特点和官网jQuery官方网站首页jQuery的logo网址：1.2jQuery的版本和下载

1.2.1jQuery的三代版本jQuery版本情况版本迭代：共发布三代版本，本书出版时最新为3.7版核心差异：各版本兼容性不同，版本升级伴随旧版浏览器支持逐步停止补充说明：详细兼容性可参考下表jQuery三代版本的兼容性版本发布时间兼容性1.x版本2006年8月兼容IE6、IE7、IE82.x版本2013年4月只兼容IE9及以上版本3.x版本2016年6月增加了HTML5的相关特性，仅兼容IE10及以上版本注：我们讲解的是jQuery3.7版，若项目需兼容某些旧版浏览器，只需使用jQuery1.x版或2.x版即可低版本jQuery的语法与高版本完全相同，只是某些高级函数不可使用1.2jQuery的版本和下载

1.2.2jQuery下载jQuery下载入口官方下载地址：/download/可选子版本压缩版（compressed）未压缩版（uncompressed）压缩版本和未压缩版本下载链接1.2jQuery的版本和下载

1.2.2jQuery下载下载步骤找到链接：“Downloadthecompressed,productionjQuery3.7.1”右键点击该链接

→

选择“链接另存为”，将JS文件下载到计算机默认文件名及标识压缩版默认文件名：jquery-3.7.1.min.js“min”含义：表示压缩后的最小化版本1.2jQuery的版本和下载

1.2.2jQuery下载下表列出了jQuery压缩版和未压缩版的特点和区别:版本选择建议仅学习使用jQuery→

优先选

压缩版需改动/优化jQuery源码

→

选择

未压缩版版本文件大小特点使用场景压缩版85KB源码中去掉了所有换行和注释、缩短了变量名，仅保留代码执行所必需的部分用于项目上线使用，由于代码压缩了，有效提高了性能并减少了加载时间未压缩版266KB注释清晰，代码可读性强，但文件尺寸较大，加载时间长用于高级的研发模式，即允许开发者改动、优化jQuery源码1.3引入jQueryjQuery使用前提：需遵循“先引包、再使用”原则。引入步骤：1、创建HTML网页文件2、通过<script>标签引入，其src属性指定jQuery文件路径库文件管理：提前创建jslib文件夹（表示JavaScriptLibrary）,将下载的jquery-3.7.1.min.js保存至此建议：所有JavaScript库文件统一放入jslib，便于管理0102<scripttype="text/javascript"src="jslib/jquery-3.7.1.min.js"></script>1.3引入jQueryjQuery引入验证方法使用代码：alert($)（用警告框显示$函数），$是jQuery中非常重要的函数（后续章节详解）原理：引入jQuery后，$函数会被全局定义03<scripttype="text/javascript">

alert($);</script>1.3引入jQuery验证结果若弹出警告框并显示函数（下图所示），则jQuery引用正确04jQuery被正确引入1.3引入jQuery引入失败表现无警告框弹出控制台报错：“$没有被定义”（下图所示）可能原因script标签的src路径错误（如遗漏“jslib/”、文件名拼写错误）混淆引入外部库的script标签与编程用script标签0506jQuery未被正确引入的报错信息错误的正确的1.3引入jQuery<scripttype="text/javascript"src="jslib/jquery-3.7.1.min.js">

//在这里书写程序是错误的</script><scripttype="text/javascript"src="jslib/jquery-3.7.1.min.js"></script><scripttype="text/javascript">

//在这里书写程序是正确的</script>1.4感受jQuery的魔力

1.4.1高效选择元素创建html网页文件，编写如下HTML结构引入jQuery并书写JavaScript程序<p></p><p></p><p></p><p></p><p></p><scriptsrc="jslib/jquery-3.7.1.min.js"></script><script>

$("p:even").text("你好");

$("p:odd").text("欢迎学习jQuery");</script>jQuery核心函数$()的作用：用于选择DOM元素，是jQuery操作元素的基础入口示例解析：$("p:even")：选取下标序号为偶数的<p>标签（下标从0开始）$("p:odd")：选取下标序号为奇数的<p>标签配合.text()方法：分别为选中的元素设置内部文字(“你好”“欢迎学习jQuery”），效果如下页图所示1.4感受jQuery的魔力

1.4.1高效选择元素感受jQuery选择元素的能力与原生JavaScript的对比原生实现：需用querySelectorAll()或getElementsByTagName()选元素+手动编写循环语句jQuery优势：仅需两行代码，无需手动循环，凸显$()选择函数的高效性1.4感受jQuery的魔力

1.4.1高效选择元素新建HTML文件，书写若干个<p>标签（数量不限，例如）1.4感受jQuery的魔力

1.4.2批量操控元素——案例1准备工作<p></p><p></p><p></p><p></p><p></p>（为演示“内置循环”做准备）编写CSS样式，确保<p>标签在页面中可见引入jQuery库文件编写JavaScript代码，体验批量操作效果后续操作<scriptsrc="jslib/jquery-3.7.1.min.js"></script><script>

$("p").css("background-color","red");</script>1.4感受jQuery的魔力

1.4.2批量操控元素——案例1案例效果展示页面效果参考下图(b)：所有<p>标签均被设置为红色背景(a)初始布局(b)添加jQuery代码后1.4感受jQuery的魔力

1.4.2批量操控元素——案例1css()方法为选中的所有元素批量设置background-color:red使用css()方法：专门用于设置元素的CSS样式，$("p").css("background-color","red")$("p")选中所有<p>标签020103核心代码解析1.4感受jQuery的魔力

1.4.2批量操控元素——案例1……新建HTML文件：添加若干<button>标签<button>按钮</button><button>按钮</button><button>按钮</button><button>按钮</button>1.4感受jQuery的魔力

1.4.2批量操控元素——案例2$('button')：选择页面中所有<button>元素.click()：jQuery事件绑定方法，参数为点击时触发的函数内置循环特性：.click()自动遍历所有选中的按钮，逐个绑定事件引入jQuery：选择所有按钮，批量绑定点击事件<scriptsrc="jslib/jquery-3.7.1.min.js"></script><script>

$('button').click(function(){

alert('你好，欢迎学习jQuery');

});</script>代码解读：1.4感受jQuery的魔力

1.4.2批量操控元素——案例2最终的页面效果：点击任何一个按钮，都可以弹出警告框，显示“你好，欢迎学习jQuery”我们没有使用循环语句，就轻松地给所有按钮添加了事件监听。

所有按钮都被添加了单击事件监听1.4感受jQuery的魔力

1.4.2批量操控元素——案例21.4感受jQuery的魔力

1.4.2批量操控元素——总结jQuery与原生JavaScript的API对比（核心差异）操作类型原生JavaScript实现jQuery实现方式设置内部文字元素.innerHTML="内容"元素.text("内容")设置CSS样式元素.style.属性名="属性值"元素.css("属性名","属性值")绑定点击事件元素.onclick=事件处理函数元素.click(事件处理函数)差异的本质：jQuery对API的“升级”核心改进所有方法内置循环逻辑,选中多个元素时,自动批量执行操作,无需手动编写循环。举例原生JS需遍历每个元素逐个设置样式;jQuery只需$("p").css(...)一行代码,自动应用到所有选中元素。1.4感受jQuery的魔力

1.4.2批量操控元素——总结1.4感受jQuery的魔力

1.4.3轻松实现动画原生JS痛点：实现动画需用setInterval()定时器，手动控制元素位移、处理时间逻辑，代码复杂且易出错1jQuery优势：通过animate()方法优雅简化动画实现，无需关心底层定时器细节2jQuery解决原生JS动画难题01HTML结构：创建一个div元素02CSS样式：设置盒子基础样式与定位动画案例：让div盒子运动<div></div>div{

width:100px;

height:100px;

background-color:orange;

position:absolute;

top:0;

left:0;}1.4感受jQuery的魔力

1.4.3轻松实现动画3.jQuery动画实现代码代码解读：animate()作用：jQuery动画核心方法，用于实现元素样式的平滑过渡参数说明：1、第一个参数

{"left":800}：目标样式（盒子最终left值为800px）2、第二个参数

3000：动画时长（3000毫秒=3秒）<scripttype="text/javascript"src="jslib/jquery-3.7.1.min.js"></script><scripttype="text/javascript">

$("div").animate({"left":800},3000);</script>1.4感受jQuery的魔力

1.4.3轻松实现动画效果：盒子从初始位置（left:0）平滑运动到left:800px使用animate()函数实现运动1.4感受jQuery的魔力

1.4.3轻松实现动画1.5在DOM加载后运行jQuery代码执行的前提：确保DOM完全加载核心原则：jQuery操作DOM元素（如选择、修改）前，必须保证网页的DOM结构已加载完成，否则可能找不到元素，导致代码失效完整代码如下：<!DOCTYPEhtml><htmllang="en"><head>

<metacharset="UTF-8">

<title>Document</title></head><body>

<p></p>

<p></p>

<p></p>

<p></p>

<p></p>

<scriptsrc="jslib/jquery-3.7.1.min.js"></script>

<script>

$("p:even").html("你好");

$("p:odd").html("欢迎学习jQuery");

</script></body></html>将代码放在所有DOM标签之后（推荐简单场景）<script>标签放在<body>内所有DOM元素的末尾用$(document).ready()包裹代码（适合代码需放在<head>中）01021.5在DOM加载后运行确保DOM加载的两种写法1.5在DOM加载后运行<!DOCTYPEhtml><htmllang="en">

<head>

<metacharset="UTF-8">

<title>Document</title>

</head>

<body>

<p></p>

<p></p>

<p></p>

<p></p>

<p></p>

<!--修正jQuery路径中的空格-->

<scriptsrc="jslib/jquery-3.7.1.min.js"></script>

<script>

//格式化JS代码缩进，增强可读性

$("p:even").html("你好");

$("p:odd").html("欢迎学习jQuery");

</script>

</body></html>方法一：将代码放在所有DOM标签之后（推荐简单场景）<script>标签放在<body>内所有DOM元素的末尾1.5在DOM加载后运行

写法二：用$(document).ready()包裹代码（适合代码需放在<head>中）<!DOCTYPEhtml><htmllang="en">

<head>

<metacharset="UTF-8">

<scriptsrc="jslib/jquery-3.7.1.min.js"></script>

<script>

$(document).ready(function(){

$("p:even").html("你好");

$("p:odd").html("欢迎学习jQuery");

});

</script>

</head>

<body>

<p></p>

<p></p>

<p></p>

<p></p>

<p></p>

</body></html>代码解读：$(document).ready()监听DOM加载完成的“就绪事件”，事件触发后才执行内部代码，避免操作未加载的元素1.5在DOM加载后运行代码简化：$(document).ready()事件监听也可以简化为运行效果展示$(function(){

//这里书写程序

//这里书写程序});解析：将一个函数传入$()内作为参数时，jQuery会自动将其理解为$(document).ready()的简化写法1.6认识jQuery对象一、什么是jQuery对象？1、定义：$()函数（核心函数）通过选择器获取元素后，返回的对象称为“jQuery对象”2、使用语法：通过$(选择器).方法()调用jQuery提供的方法（如text()css()等）例如：$("p").css("background-color","red");01二、jQuery对象的本质1、本质：是一个

类数组对象，内部存储着被选中的

原生JavaScriptDOM对象2、类数组特征：属性名是自然数（0、1、2……），对应选中的每个DOM元素；例如$("p")中，$("p")[0]是第1个<p>元素，$("p")[1]是第2个<p>元素，以此类推（如下页图所示）021.6认识jQuery对象jQuery对象是一个类数组对象<scriptsrc="jslib/jquery-3.7.1.min.js"></script><script>$('p').css('background-color','red')//输出jQuery对象console.log($('p'))</script>分析：$("p")就是“jQuery对象”，如左图所示，控制台打印的便是jQuery对象，可见，$("p")就是一个类数组对象1.6认识jQuery对象只能调用jQuery方法:如text()css()click()等,不能直接使用原生JS的属性/方法1错误示例:$("p").style.backgroundColor="red";(jQuery对象不能用原生style属性)2正确示例:$("p").css("background-color","red");(调用jQuery的css()方法)3jQuery对象的使用规则1.6认识jQuery对象转换方向方法示例jQuery对象→原生DOM通过下标取值（类数组特性）$("p")[0]

→得到第1个

<p>

原生元素原生DOM→jQuery对象将原生对象传入

$()

函数$(oBox)

→把原生

oBox

转为jQuery对象（oBox

是通过

getElementById

等获取的DOM元素）转换意义：原生DOM转jQuery对象后，可使用jQuery的批量操作方法（如css()text())jQuery对象转原生DOM后，可使用原生JS的属性/方法（如styleinnerHTML）jQuery对象与原生DOM对象的转换第二章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").cs