jQuery和Ajax实战教程（第2版）课件 第1章-初识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、本质：是一个

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

原生