jQuery和Ajax实战教程（第2版） 课件 第4-10章 动画-Ajax 技术详解

第4章动画jQuery和Ajax实战教程本章内容4.1引言animate()方法的优势与特点4.2animate()方法基本使用、回调函数、实战案例4.3快捷动画方法slideUp、slideDown、fadeIn、fadeOut4.4多段动画的控制动画排队、stop()和delay()方法4.5CSS3transition过渡jQuery结合transition实现动画4.6-4.8实战案例豌豆射手、抽奖转盘、熊猫卡片等掌握jQuery动画核心技术·提升网页交互体验4.1引言-animate()方法的优势无需精确计算自动处理动画步长、定时器频率等数值轻松制作回调函数便捷处理动画结束后的后续操作方便制作复杂动画轻松实现多段动画、连续运动等效果缺点：animate()不支持transform、background-color等属性解决方案：结合CSS3transition实现4.2.1animate()基本使用基本语法$(选择器).animate(终点样式,总时长);代码示例$("#box").animate({"left":800,"top":300,"width":100,"height":100,"border-radius":"50%"},5000);动画效果盒子用5秒从(0,0)运动到(800,300)，并从方形变为圆形默认缓动两头慢，中间快线性匀速添加"linear"参数终点样式参数JSON格式定义元素最终状态动画总时长以毫秒为单位，控制动画持续时间4.2.2哪些属性可以参加animate()动画支持的属性widthheightlefttoprightbottomopacitypaddingmarginborder-radiusfont-size数值型属性不支持的属性background-color背景颜色无法参与动画background-position背景定位无法参与动画text-shadow/box-shadow阴影效果无法参与动画transformrotate/skew/scale无法参与动画解决方案：结合CSS3transition属性实现流畅动画4.2.3回调函数问题演示$("#box").animate({"left":800},1000);$("#box").css("background-color","green");错误代码问题分析animate()是异步函数不会阻塞后续代码执行css()立即执行，背景色瞬间变绿需要回调函数解决解决方案正确代码关键点回调函数作为animate()的第3个参数动画结束后自动执行$(this)表示执行动画的元素盒子运动结束后才变绿$("#box").animate({"left":800},1000,function(){$(this).css("background-color","green");});4.2.4实战案例：豌豆射手动画点击“豌豆射手”就会有“豌豆炮弹”射出，炮弹持续向右运动到屏幕边界外，如图4-5所示。动画机理很简单：当点击“豌豆射手”图片时，就使用jQuery“创建节点”API创建出一个“豌豆炮弹”HTML元素，并使用animate()方法让其实现运动。4.2.4实战案例：豌豆射手动画效果说明1点击豌豆射手图片2动态创建豌豆炮弹元素3豌豆炮弹匀速向右运动4动画结束后删除元素核心技术点动态创建节点animate()方法回调函数线性匀速动画关键代码创建节点$("<div>")匀速运动"linear"参数自动清理remove()删除$("#sheshou").click(function(){//创建豌豆炮弹div盒子var$wandou=$("<divclass='wandou'></div>");

//添加到body中$wandou.appendTo("body");

//进行匀速动画$wandou.animate({left:2000},10000,"linear",function(){//动画结束后删除元素$(this).remove();});});4.3快捷动画方法滑动效果slideDown()下滑展开元素slideUp()上滑隐藏元素淡入淡出fadeIn()淡入显示元素fadeOut()淡出隐藏元素显示隐藏show()平展淡入显示hide()收缩淡出隐藏速度参数说明"fast"200毫秒"normal"400毫秒（默认）"slow"600毫秒注意事项：调用前元素需设置display:none（slideDown/fadeIn）或可见状态（slideUp/fadeOut）4.3.4实战案例：水平菜单效果说明鼠标触碰栏目块，菜单动画展开；鼠标离开，菜单动画收起关键技术点1初始隐藏菜单设置display:none2滑动动画slideDown()展开/slideUp()收起3防止积累stop()停止旧动画再执行新动画4解决间隙多套一层盒子消除元素间隙核心代码事件监听mouseentermouseleave连续打点stop()slideDown()子元素children()方法//鼠标触碰li$(".navli").mouseenter(function(){//碰到的li的子元素.dropbox展开$(this).children(".dropbox").stop().slideDown();});//鼠标离开li$(".navli").mouseleave(function(){//碰到的li的子元素.dropbox收缩$(this).children(".dropbox").stop().slideUp();});4.4.1多段动画的实现同一元素→排队执行多个animate()方法会自动排队，按顺序执行$("#box").animate({"left":1000},1000);$("#box").animate({"top":400},1000);$("#box").animate({"left":0},1000);$("#box").animate({"top":0},1000);不同元素→同时执行不同元素的动画会同时开始，并行执行$("#box1").animate({"margin-left":1000},1000);$("#box2").animate({"margin-left":1000},1000);$("#box3").animate({"margin-left":1000},1000);链式调用（推荐写法）$("#box").animate({"left":1000},1000).animate({"top":400},1000).animate({"left":0},1000).animate({"top":0},1000);动画顺序盒子将按顺序运动：左→下→右→上总时长4段动画×1秒=总共4秒避免回调黑洞不要嵌套回调函数，代码难以维护4.4.2动画的停止和延迟stop()方法1停止当前动画立即中断元素正在执行的动画2防止动画积累避免频繁触发导致的动画混乱3连续打点语法与动画方法链式调用delay()方法1设置延迟时间延迟指定毫秒后执行动画2替代回调黑洞优雅实现不同元素排队动画3精确计算延迟根据前一个动画时长设置应用场景：stop()用于菜单动画、hover效果防止积累；delay()用于PPT动画、轮播图等需要精确控制时序的场景//常见用法$(this).stop().slideDown();$(this).stop().fadeOut();$(this).stop().animate({"left":500},1000);$("#box1").animate({},1000);$("#box2").delay(1000).animate({},1000);$("#box3").delay(2000).animate({},1000);$("#box4").delay(3000).animate({},1000);4.4.3实战案例：PPT动画效果说明多个元素依次闪烁出现，模拟PPT入场效果依次延迟每个元素延迟递增，形成顺序动画闪烁效果淡入→淡出→再淡入，共2次闪烁首尾衔接精确计算延迟时间，动画流畅衔接核心代码delay(i*600)延迟递增fadeIn(200)淡入动画fadeOut(200)淡出动画技术要点each()遍历简化循环代码精确延迟下标×间隔时间链式调用连续打点语法时间计算总时长=动画数×单个时长//遍历每一个img标签$(".bannerimg").each(function(i){//i就是img标签的下标$(this).delay(i*600).fadeIn(200).fadeOut(200).fadeIn(200);});4.5.1CSS3transition过渡属性基本语法1过渡属性指定参与过渡的CSS属性名，或使用all2过渡时长完成过渡效果需要的时间（秒），必须带单位s3速度曲线linear表示匀速，省略则为"两头慢中间快"4延迟时间过渡动画开始前的延迟时间，立即开始设为0s代码示例效果说明鼠标触碰盒子时，宽度和背景颜色都会平滑过渡变化浏览器兼容性从IE10开始兼容，现代浏览器广泛支持性能优势GPU加速，动画流畅细腻不卡顿支持属性几乎所有数值型属性，包括颜色和变形transition:width1slinear0s;.box{width:200px;height:200px;background-color:#1284BA;transition:all2slinear0s;}.box:hover{width:800px;background-color:#FF862F;}4.5.3jQuery结合transition属性实现动画策略说明CSS设置transition在CSS中定义过渡属性和时长jQuery改变样式使用css()方法动态改变属性值自动触发动画样式改变时自动产生平滑过渡效果代码示例/*CSS代码*///jQuery代码优势动画更加流畅细腻支持更多CSS属性（background-color、transform等）性能更好，GPU加速缺点动画时长定义在CSS中，影响编程连贯性css()方法没有回调函数难以处理动画结束后的逻辑#box{transition:all5slinear0s;}$("button").click(function(){$("#box").css({"left":800,"top":300,"background-color":"green"});});4.5.5实战案例：抽奖转盘效果说明点击指针用户点击转盘中心的指针随机旋转轮盘旋转10000~15000度随机角度平滑停止20秒平滑过渡后停止在随机位置关键技术transition:all20sMath.random()transform:rotate()css()方法核心代码//CSS样式#lunpan{transition:all20s;}//jQuery代码$("#zhizhen").click(function(){//随机生成10000~15000的数字varn=Math.random()*5000+10000;//设置轮盘旋转$("#lunpan").css("transform","rotate("+n+"deg)");});4.6实战案例：熊猫展示卡片效果说明鼠标触碰图片抽屉展开显示详情平滑过渡动画效果精确数学计算位置和尺寸尺寸变化规则默认状态120px×130px间隔触碰盒子400px宽其他盒子50px宽left值计算触碰盒子左侧：序号×60触碰盒子右侧：(序号-1)×60+410核心代码//jQuery代码$(".boxulli").mouseenter(function(){varn=$(this).index();

//触碰盒子宽度400px，left值n×60$(this).css({width:400,left:n*60});

//左侧盒子：序号×60，宽度50px$(".boxulli:lt("+n+")").each(function(){$(this).css({left:$(this).index()*60,width:50});});

//右侧盒子：(序号-1)×60+410，宽度50px$(".boxulli:gt("+n+")").each(function(){$(this).css({left:($(this).index()-1)*60+410,width:50});});});4.8实战案例：奥运会会徽感知遮罩层效果说明鼠标从不同方向移入遮罩层从对应方向进入鼠标移出时反向退出技术要点event.offsetX/offsetY计算四边距离Math.min()找最小值animate()实现动画方向判断公式min=Math.min(e.offsetY,e.offsetX,220-e.offsetY,164-e.offsetX)最小值对应的边即为鼠标进入方向核心代码$(".boxulli").mouseenter(function(e){//找最小值判断鼠标从哪条边进入varmin=Math.min(e.offsetY,e.offsetX,220-e.offsetY,164-e.offsetX);

//分类讨论if(min==e.offsetY){//上面进入$(this).find(".txt").css({left:0,top:"-220px"}).stop().animate({left:0,top:0},500);}elseif(min==220-e.offsetY){//下面进入$(this).find(".txt").css({left:0,top:"220px"}).stop().animate({left:0,top:0},500);}//...其他方向类似});第5章常见特效开发掌握万千网页特效背后的原理7个实战案例动画原理深度解析信号量编程模式本章学习目标系统学习常见网页特效开发掌握轮播、滚动、动画等核心特效技术掌握动画实现的核心原理理解"克隆+瞬移"等视觉欺骗技巧学会信号量编程模式多按钮协作，状态协调的核心方法理解"克隆+瞬移"魔术技巧揭秘无缝循环动画背后的实现机制实战案例1：无穷连续滚动动画无缝连续滚动特效是网页中用于信息展示的常用特效，如图5-1所示。一排图片连续从右向左运动，首尾相接从不间断、周而复始。当用户鼠标触碰它的时候，动画会暂时停止；用户鼠标移开，动画继续。实战案例1：无穷连续滚动动画CASE01核心原理01克隆图片队列形成"小火车"02运动到临界点瞬间移回原点03利用视觉欺骗实现"周而复始"视觉欺骗瞬间移动时展示内容与初始内容相同，用户察觉不到"乾坤大挪移"实战案例1：无穷连续滚动动画最核心算法：实战案例2：跑马灯轮播跑马灯轮播是最常见的轮播图形式，如图5-6所示。当点击左右按钮或者小圆点时，图片将通过左右水平运动进行切换，如图5-7所示。跑马灯轮播特效的原理和“无缝连续滚动动画”类似：多张图片排成一排，形成一队“小火车”，单击按钮或小圆点时调用animate()函数使“小火车”进行运动。而由于大盒子设置了overflow:hidden“溢出隐藏”，所以我们同一时间只能看见一张图片。就像从魔术师的帽子里变出的兔子实际上是提前准备好的，跑马灯轮播图布局中虽然只能看见一张图片，但是我们知道它只是一个“火车头”，它右侧还有多张图片，只不过被“溢出隐藏”了。“小火车”以大盒子为基准进行绝对定位，初始left值是0。left值减小，“小火车”将左移，从而显示出后面的“车厢”：假设每张图片宽度都是500px，如果“小火车”的left值变为-500px，那么将恰好显示1号图片；如果“小火车”的left值变为-1000px，那么将恰好显示2号图片，以此类推，如图58所示。实战案例2：跑马灯轮播实战案例2：跑马灯轮播idx信号量编程模式idx全局变量标识记录当前显示的图片编号多元素共享左右按钮、小圆点协同工作克隆首图实现无缝循环切换防止动画积累使用is(":animated")核心代码逻辑执行流程点击按钮idx++改变信号量移动小火车varidx=0;//克隆第一张图片if($("#unit").is(":animated"))return;idx++;$("#unit").animate({"left":idx*-500},400);实战案例3：上下滑动跑马灯双信号量编程模式idx当前显示的大图记录用户正在查看的大图编号，由触碰缩略图触发改变触碰缩略图改变大图small_idx当前打头的缩略图记录缩略图列表的"打头"位置，由上下按钮控制上下按钮移动缩略图两个信号量独立控制，互不干扰布局特点纵向布局大图和缩略图列表排成两列溢出隐藏overflow:hidden控制可见区域整体运动ul作为"组合体"整体移动性能优化top属性translateY使用transform代替传统定位，避免页面重排性能更好GPU加速流畅度更高60fps动画实战案例4：呼吸轮播呼吸轮播也称“交叉淡入淡出轮播”，也是网页中常见的动画轮播形式，如图519所示。当点击左右按钮或者小圆点时，图片通过淡出、淡入的动画进行切换，如图520所示，初始图片是“故宫角楼”，点击右按钮时，“故宫角楼”图片淡出，下一张图片“鸟巢”淡入。淡出淡入如同呼吸，“呼吸轮播”因此得名。实战案例4：呼吸轮播交叉淡入淡出效果图片如同呼吸般平滑过渡，一张淡出同时另一张淡入实现原理01图片"摞在一起"使用绝对定位，所有图片重叠在同一位置02动画同时进行fadeIn()和fadeOut()并发执行03信号量控制idx标识当前显示的图片核心代码示例动画机制由于idx在中间发生了变化，两次操作的元素下标相差1，实现不同图片的淡入淡出切换varidx=0;//信号量改变前的操作$("li").eq(idx).fadeOut("fast");//信号量自增idx++;if(idx>4)idx=0;//信号量改变后的操作$("li").eq(idx).fadeIn("fast");实战案例5：无限循环缩略图呼吸轮播业务拆分思想大图部分呼吸轮播机制fadeInfadeOut图片叠加缩略图部分无穷滚动动画克隆队列瞬移复位两个独立信号量idx大图索引small_idx缩略图索引关键代码索引处理原理克隆后图片索引变为0-6和7-13，通过%7运算将索引统一映射到0-6，确保正确匹配大图$(".small_nav_unitli").mouseenter(function(){//旧图淡出$(".big_img_listli").eq(idx).stop().fadeOut();//关键：取余处理克隆图片索引idx=$(this).index()%7;//新图淡入$(".big_img_listli").eq(idx).stop().fadeIn();});实战案例5：无限循环缩略图呼吸轮播本节学习制作带有缩略图的呼吸轮播，如图6-21所示。在上节“呼吸轮播”基础上增加了缩略图。由于一共有7张图片参与轮播展示，而同时只有5张缩略图可见，所以给缩略图配置了左右按钮，用户可以点击左右按钮移动缩略图队列。缩略图队列是周而复始、无穷滚动的。实战案例5：无限循环缩略图呼吸轮播web特效五花八门，但是它们都有基本的“原理模型”：大图部分是呼吸轮播机制，所以7张大图要“摞在一起”；缩略图部分，为实现“周而复始”、“源源不断”的图片运动，所有缩略图要排成一行，形成“小火车”，还要克隆图片队列，使用之前学习的“无穷连续滚动动画”原理进行“运动”和“瞬间移动”动画。布局如图5-25所示。实战案例5：无限循环缩略图呼吸轮播实战案例6：拼图轮播马赛克式逐步出现图片以随机小方格形式逐步拼合，营造炫酷视觉效果实现原理01100个div盒子10×10网格拼合完整图片02背景定位差异background-position值各不相同03随机延迟淡入Math.random()控制出现时机函数节流锁防止用户快速点击造成动画混乱800毫秒后才能触发下一次切换动画机理是：使用100个div盒子当做“小方格”，每个div都有相同的背景图片（比如都是向日葵），但是background-position（背景定位）值不同，像“CSS精灵”技术一样，让它们可以巧妙拼合成一张完整的图片，如图5-29所示。实战案例6：拼图轮播实战案例7：异形滚动图片错落有致、彼此交叠突破传统布局限制，创造动态立体视觉效果实现方式6六个位置系统A、B、C、D、E、Z不同布局属性类名封装属性位置、宽高、透明度通过类名控制点击切换序列按钮触发类名重新分配关键点：倒序遍历避免类名冲突，确保每个元素正确继承前一个兄弟的类名实战案例7：异形滚动实战案例7：异形滚动核心要点总结信号量是特效协调的核心全局变量idx标识状态，多元素共享协作克隆+瞬移实现无缝循环视觉欺骗创造"周而复始"的流畅体验业务拆分化繁为简复杂特效由多个独立模块组合而成视觉欺骗创造炫酷效果用户看到的往往只是"小把戏"的结果动画性能优化translateY替代top，避免页面重排第6章jQuery表单掌握表单操作与验证的核心技术文本框操作单选按钮复选框应用拖拽条表单校验引言表单的重要性网页与用户交互的主要途径，用户输入数据的入口，是Web应用的基础组件表单验证的意义确保数据质量，维护系统安全，提供良好的用户体验本章学习目标掌握文本框操作val()方法、input/change事件、focus/blur事件单选按钮与复选框选中状态判断、值获取与设置、change事件应用拖拽条应用range控件操作、实时交互效果实现表单校验技术正则表达式应用、实时验证、全局校验文本框操作val()方法获取值设置值focus()方法获得焦点focus/blur事件获得/失去焦点时触发input与change事件对比监听方式$("#txt").val()$("#txt").val("天天向上")$("#txt").focus()事件触发时机使用场景change失去焦点且值发生变化时触发用户完成输入后的验证、最终确认操作input值实时变化时立即触发实时预览、即时验证、搜索建议$("#txt").on("input",function(){/*实时监听*/})实战案例字数统计输入框功能特点：

最大输入140字，实时字数统计

超字数显示红色警告提示

超字数自动禁用发布按钮关键代码使用prop()方法控制按钮禁用状态多币种汇率计算器功能特点：

支持人民币、美元、加元、泰铢

任意币种输入，其他实时换算

使用data属性存储汇率数据关键代码not(this)排除当前输入框，避免循环单选按钮操作获取选中值使用:checked选择器注意：必须使用:checked选择器获取当前选中的单选按钮设置状态选中/取消选中禁用/启用change事件监听监听整组单选按钮重要说明

•单选按钮必须设置相同的name属性才能互斥

•监听整组单选按钮的change事件，而不是单个按钮

•在change事件中使用$(this).val()获取被选中的值被禁用的单选按钮会变灰且不可被选中实战案例城市高亮选择功能特点：

点击城市单选按钮高亮对应条目

使用contains选择器匹配文本

动态添加/移除高亮样式关键代码:contains()选择器匹配包含指定文本的元素老年人免费票自动选择功能特点：

输入年龄自动判断资格

年龄≥60自动勾选免费票

同时禁用其他票型选项关键代码使用Number()转换输入值为数字类型复选框操作检查选中状态方法一：is()方法二：prop()设置状态选中/取消禁用/启用获取所有选中值使用each遍历选中取消选中change事件监听复选框可以多选，不像单选按钮互斥实战案例同意协议注册功能特点：

复选框控制按钮状态

勾选后按钮可用，否则禁用关键代码使用取反运算符控制按钮状态复选框全选功能特点：

全选框控制所有选项

手动全选后自动勾选全选框关键代码选中金额计算功能特点：

勾选项实时计算总价

遍历已选复选框累加金额关键代码使用.next()获取兄弟元素拖拽条应用基本使用HTML标签获取值事件对比input事件拖拽过程中实时触发change事件拖拽结束后触发调色板实战案例功能特点：

RGB三原色调节（0-255）

实时预览颜色变化

动态设置背景颜色关键代码Red(0-255)Green(0-255)Blue(0-255)表单校验基础校验原理

使用正则表达式定义验证规则

监听input事件实时验证

提供即时反馈增强体验

提交前全局校验确保安全验证规则姓名校验邮箱校验基本校验示例HTML结构jQuery校验代码.test()方法检查字符串是否匹配正则表达式表单校验实战中文姓名校验正则表达式校验规则2-4个汉字邮箱校验正则表达式校验规则标准邮箱格式密码强度校验正则表达式校验规则6-16位，包含数字、大小写字母全局校验代码定义状态变量单项校验示例提交时全局校验实时反馈监听input事件即时显示错误双重保障客户端验证+服务器验证用户体验清晰的错误提示提升可用性本章总结核心知识点val()方法获取与设置表单值input/change事件实时监控与焦点变化prop()方法设置选中、禁用状态表单校验正则表达式验证本章作业结婚年龄判断根据性别和年龄判断是否达到法定结婚年龄日期选择器使用date控件获取年、月、日、星期火车票计算器勾选复选框计算总价国籍选择联动显示对应的证件号码输入框城市部门两级复选框实现分级选择功能愿望清单零花钱预算限制选择恭喜完成第6章学习！继续加油，掌握更多jQuery表单技巧！第7章jQuery插件扩展jQuery功能的利器插件开发交互增强效率提升jQuery插件生态系统插件下载地址/插件本质一个或多个JS文件使用方法①引入jQuery核心库②引入插件JS文件丰富的第三方插件生态jQueryUI-官方插件jQuery基金会维护的官方插件实现复杂的交互效果，只需1行代码draggable拖拽元素droppable拖放元素resizable缩放元素selectable框选元素sortable排序元素官方网站/下载即用支持选择性下载所需功能draggable拖拽功能核心功能基本语法$("#element").draggable();约束运动axis:"x"|"y"容器限制containment:".container"事件监听start拖拽开始drag拖拽中stop拖拽结束代码示例//简单拖拽$("#draggable").draggable();//限制垂直拖拽$("#draggable").draggable({axis:"y"});//限制水平拖拽$("#draggable2").draggable({axis:"x"});//容器限制$("p").draggable({containment:".stage"});//事件监听$("#draggable").draggable({start:function(){console.log("开始拖拽");},drag:function(){console.log("拖拽中...");},stop:function(){console.log("拖拽结束");}});resizable缩放功能核心功能基本语法$("#element").resizable();动画效果animate:true限制区域containment:"#container"尺寸限制maxHeight最大高度maxWidth最大宽度minHeight最小高度minWidth最小宽度代码示例//简单缩放$("#resizable").resizable();//动画效果$("#resizable").resizable({animate:true});//限制缩放区域$("#resizable").resizable({containment:"#container"});//尺寸限制$("#resizable").resizable({maxHeight:250,maxWidth:350,minHeight:150,minWidth:200});//宽度限制200~350//高度限制150~250sortable排序功能核心功能基本语法$("#element").sortable();连接列表connectWith:".className"网格显示CSS浮动布局+统一尺寸功能特点拖拽排序跨列表自动重排代码示例//简单排序$("#sortable").sortable();//连接列表$("#sortable1,#sortable2").sortable({connectWith:".xx"}).disableSelection();//网格布局CSS#sortableli{float:left;width:200px;height:200px;}//HTML结构<ulid="sortable"><li>序号1</li><li>序号2</li><li>序号3</li></ul>selectable选择功能核心功能基本语法$("#element").selectable();选择方式鼠标点击单选条目Ctrl+点击多选条目拖拽框选批量选择代码示例//基本选择功能$("#selectable").selectable();//HTML结构<ulid="selectable"><li>项目1</li><li>项目2</li><li>项目3</li><li>项目4</li><li>项目5</li><li>项目6</li><li>项目7</li></ul>实战案例：拖拽相册案例特点31张图片水平排列中间图片尺寸最大底部拖拽条切换图片大图始终居中显示核心技术点动态创建节点jQueryeach()拖拽事件draggabledrag动画效果animate()防止堆积stop(true,true)jQueryEasie-动画缓动核心功能调节动画节奏多种缓动效果渐慢至快/渐快至慢贝塞尔曲线控制可视化调整速度曲线常用参数easeInQuad渐快easeInQuart渐快加强easeInOutBack回弹贝塞尔曲线可视化工具http://jaukia.github.io/easie/拖动圆圈调整曲线形态，自动生成代码常用jQuery插件jQueryValidate强大的表单验证功能，支持自定义规则FancyBox灯箱效果插件，支持图片浏览和弹出框SlickSlider响应式轮播插件，多种滑动效果DataTables高级表格插件，支持分页搜索排序Masonry瀑布流布局库，优化空间利用Chosen下拉框增强，支持搜索和多选Moment.js日期时间处理库，丰富的API进行解析、验证和操作使用建议按需选择根据项目需求选择合适插件关注维护状态选择活跃维护的插件性能优化避免加载过多不必要的插件社区支持查看文档和社区活跃度快速开发利用插件提升开发效率插件生态展示jQuery的强大功能本章要点核心知识点jQuery插件扩展了jQuery功能第三方插件使jQuery更好用，提升开发效率jQueryUI提供丰富的交互功能draggable、resizable、sortable、selectable等核心方法jQueryEasie优化动画效果贝塞尔曲线控制动画节奏，提升用户体验合理使用插件提升开发效率按需选择、关注维护、性能优化本章作业1jQueryUI能够实现哪些功能？2jQueryEasie有什么功能？3利用jQueryUI开发"滑动解锁"特效4开发"高级拖拽条"，显示百分比进度提示完成作业前先复习各插件的使用方法和配置参数第8章PHP入门HypertextPreprocessor超文本预处理器服务器端脚本动态网页开发前端必备知识为什么要学习PHP理解服务器通信原理前端开发需要与服务器进行数据交互更好地协作与后台工程师高效沟通与配合简单易学流行的后端语言，语法友好为Ajax技术打基础掌握前后端数据交互的核心技能开发环境搭建XAMPP集成环境Apache服务器世界排名第一的Web服务器软件PHP解析器运行PHP程序的核心环境MySQL数据库数据存储与管理解决方案使用步骤1下载安装访问官网下载对应版本2启动Apache点击Start按钮开启服务器3放置文件将PHP文件放入htdocs目录4访问测试浏览器访问/关键路径C:\xampp\htdocs编写第一个PHP程序代码示例执行流程浏览器请求输入网址服务器预处理执行PHP代码返回HTML纯HTML页面访问方式/xx.php⚠️双击无法运行PHP程序运行结果喜迎共和国75年华诞查看源代码：只能看到纯HTML，看不见PHP代码<!DOCTYPEhtml><html><body><h1>

喜迎共和国<?phpecho2024-1949;?>年华诞</h1></body></html>PHP核心语法要点变量定义命名规范

•以$符号开头

•字母或下划线开始

•只能包含字母、数字、下划线

•区分大小写

代码示例数据类型常用类型

•数组array()

•字符串String

•整数Integer

•布尔Boolean

代码示例控制结构常用语句

•for循环

•foreach遍历

•if条件判断

•while循环

代码示例$sum=0;$name="小明";$count=100;$arr=array("A","B");$str="Hello";$num=42;for($i=1;$i<=100;$i++){echo$i;}PHP数组操作基础知识定义数组•array()或[]•自定义键名：'key'=>'value'常用函数•array_push()•array_pop()•count()•array_unique()遍历语法实例：国家信息表格运行结果$countries=[['name'=>'中国','population'=>'14亿'],['name'=>'美国','population'=>'3.31亿'],];echo"<table>";foreach($countriesas$c){echo"<tr><td>{$c['name']}</td>";echo"<td>{$c['population']}</td></tr>";}echo"</table>";foreach($arras$key=>$value){//处理逻辑}PHPMySQLAPI第9章结合PHP和MySQL开发网络接口网络应用开发实战指南GET&POSTMySQLRESTfulAPI本章学习重点GET与POST请求理解GET和POST请求的区别与应用场景MySQL数据库操作掌握MySQL数据库基本操作（增删改查）PHP操作数据库学会PHP连接和操作MySQL数据库前后端分离了解前后端分离开发模式JSON接口与RESTful掌握JSON接口开发与RESTful设计GET请求vsPOST请求GET请求数据在URL中传输参数直接显示在浏览器地址栏适合查询和搜索方便分享搜索结果链接URL长度有限制约2000字符，仅支持ASCII字符可被收藏和分享支持浏览器历史记录和书签示例URL/registration.php?name=李华&age=20POST请求数据在HTTP请求体中传输参数不在URL中显示适合提交表单和上传文件支持文件上传和大数据传输无数据长度限制可传输GB或TB级文件更安全可靠不会出现在URL和历史记录典型应用用户注册•登录验证•文件上传MySQL数据库基本操作数据库操作创建数据库CREATEDATABASEmyDB;使用数据库USEmyDB;数据表设计字段类型INT整数类型VARCHAR可变长字符串TEXT长文本主键设置唯一标识每条记录PRIMARYKEY自增字段自动递增编号AUTO_INCREMENTSQL核心语句INSERTINTO插入数据记录INSERTINTOstudents...SELECT查询数据记录SELECT*FROMstudentsUPDATE更新数据记录UPDATEstudentsSET...DELETE删除数据记录DELETEFROMstudents...PHP连接与操作数据库核心函数mysqli_connect()连接数据库服务器mysqli_query()执行SQL语句mysqli_fetch_assoc()获取查询结果mysqli_error()错误处理与调试实战功能

增加学生•INSERT语句•$_POST接收表单数据

查询学生•SELECT语句•while遍历结果集

删除学生•DELETE语句•$_GET获取参数

更新信息•UPDATE语句•WHERE条件定位实战要点通过连接数据库脚本db_inc.php，实现完整的增删改查功能前后端分离开发模式耦合模式HTML与PHP代码混合适合小型项目开发快速，成本低分离模式后端提供JSON接口前端独立渲染适合大型项目易于维护和扩展JSON格式示例关键要点使用json_encode()将PHP数组转换为JSON格式RESTful风格接口设计设计原则

资源命名使用名词表示资源studentteacherbook

HTTP动词GET查询数据POST创建数据PUT/PATCH更新数据DELETE删除数据URL示例GET/student列出所有学生POST/student增加学生GET/student/2查看id为2的学生DELETE/student/3删除id为3的学生设计优势结构清晰易于理解便于扩展关键要点回顾01GET请求适合查询，POST请求适合提交掌握两种请求方式的特点与应用场景02MySQL提供强大的数据存储能力学会数据库的创建、表设计及SQL操作03PHP通过mysqli扩展操作数据库掌握连接、查询、错误处理等核心函数04前后端分离提升项目可维护性理解JSON接口在分离模式中的作用05RESTful接口设计规范API开发遵循资源命名、HTTP动词、URL规范的标准化设计

掌握这些核心技能，开启网络应用开发之旅第10章AjaxAsynchronousJavaScriptAndXML异步JavaScript与XML技术详解WebDevelopmentClient-ServerCommunication章节内容学习路线本章将系统讲解Ajax技术，从基础概念到实际应用，从jQuery简化实现到原生JavaScript底层机制，最后解决跨域问题。核心要点•异步通信原理•jQueryAjax方法•原生XHR对象•跨域解决方案1什么是Ajax异步JavaScript与XML的核心概念与实际应用2jQuery实现Ajax$.get()$.post()$.ajax()3原生JavaScript实现AjaxXMLHttpRequest对象的底层工作机制4跨域问题JSONPCORS服务器代理5本章作业实践练习与综合应用Chapter10·AjaxTechnology10.1什么是Ajax核心概念Ajax=AsynchronousJavaScriptAndXML异步JavaScript与XML，基于JavaScript实现网页与服务器之间数据交换的技术核心特点网页在不刷新的情况下与服务器交换数据实现页面的局部更新，用户体验流畅异步执行，用户无感知的数据传输实际案例

网易邮箱注册：填写邮箱名后，自动检测是否被占用，无需刷新页面即可显示提示信息Ajax通信流程Chapter10·AjaxTechnology10.2.1jQuery的$.get()方法语法结构$.get(url,callback)1URL参数请求的服务器地址2回调函数处理服务器返回的数据应用场景从服务器获取数据列表查询数据库记录获取JSON格式数据代码示例重要提示Ajax是异步操作，写在$.get()后面的语句不会等待请求结束才执行，必须在回调函数中处理响应数据Chapter10·AjaxTechnology$("button").click(function(){//发出Ajax请求接口$.get("/api-list.php",function(data){//在h1中显示data值$("h1").html(JSON.stringify(data));});});10.2.2jQuery的$.post()方法语法结构$.post(url,data,callback)1URL参数数据提交的目标地址2数据对象要发送到服务器的数据3回调函数处理服务器响应结果应用场景表单数据提交新增数据记录用户注册/登录代码示例重要提示表单提交按钮的type应设置为button而非submit，避免使用默认表单提交方式Chapter10·AjaxTechnology$("#btn").click(function(){$.post("/api-registration.php",{"name":$("input[name=name]").val(),"age":$("input[name=age]").val(),"sex":$("input[name=sex]")