尚硅谷教学课件jquery

入门与实战jQuery是一个轻量级的跨浏览器库，它极大地简化了文档操作和事jQuery JavaScriptHTML件处理，并在前端开发中被广泛应用本课程基于尚硅谷教学资料，为您提供系统Web的学习路径，从基础概念到实战应用，帮助您掌握这一强大的前端开发工具jQuery简介jQuery是由于年发布的一个快速、小巧、功能丰富的库它的核心设jQuery JohnResig2006JavaScript计理念是（写更少的代码，做更多的事情），通过提供简洁的大幅简化Write Less,Do MoreAPI了编程JavaScript最突出的特点是支持选择器，使开发者可以像使用选择器那样方便地选择和操作jQuery CSS3CSS元素同时，它提供了出色的跨浏览器兼容性，解决了不同浏览器之间的兼容问题，让开发者不DOM必为各种浏览器差异而烦恼的设计使得操作、事件处理、动画效果和通信变得异常简单，这些正是前端开jQuery DOMAjax Web发中最常用的功能它的出现极大地改变了开发的模式，提高了开发效率JavaScript核心特性jQuery简洁的选择器系统•链式调用风格•元素操作•DOM事件处理系统•丰富的动画效果•功能封装•Ajax跨浏览器兼容性•的优势jQuery简洁的语法与链式调用强大的跨浏览器兼容性提供了简洁优雅的选择器和链式调用方式，允许开发者用解决了不同浏览器之间的兼容性问题，开发者不需要编写jQuery jQuery一行代码完成多个操作，极大地减少了代码量并提高了可读性针对特定浏览器的代码使用编写的功能可在、jQuery IE例如、、等各种主流浏览器中一致运行，极大Firefox ChromeSafari$div.panel.addClassactive.show.findp.c地降低了开发复杂度sscolor,red;丰富的插件生态系统显著提高开发效率拥有庞大的插件生态系统，几乎可以满足所有开发需jQuery Web求，包括日期选择器、轮播图、表格排序、表单验证等这些高质量插件使开发者不必重复造轮子，可以直接集成现有解决方案的发展历程与版本jQuery版本

11.x支持等旧版浏览器，IE6/7/8文件体积相对较大最终版本为，适用于需要兼容老2版本

1.

12.

42.x旧浏览器的项目代表作放弃了对的支持，因此在很长一段时间内是使IE6-

81.

7.2文件体积更小，性能更优最用最广泛的版本之一，兼容性终版本为，适用于只需极佳

2.

2.4支持现代浏览器的项目，移除版本

33.x了大量兼容代码，运行效率更高针对现代浏览器进行了深度优化，添加了新的和特性，API移除了废弃的功能当前最新随着技术的演进，也经历了多次重要更新，每个主要版本都针对不同的Web jQuery版本为，支持

3.

6.0Promise浏览器环境和开发需求进行了优化选择合适的版本对于项目性能和兼容性jQuery对象、更好的模块化支持，并至关重要完全兼容语法ES6在选择版本时，应根据项目的浏览器兼容性要求和性能需求进行权衡对于新项目，建议使用版本以获得更好的性能和现代特性；而对于需要支持老旧浏览器的项目，jQuery

3.x可以考虑使用版本同时，针对移动端应用，可以使用或直接使用更轻量的现代框架

1.x jQueryMobile引入方式jQuery在线引入本地引入包管理工具CDN通过内容分发网络引入，无需下载文件，加载速度快，下载文件并保存到项目目录中，适合需要离线运行的通过或等包管理工具安装，适合现代化前端jQuery jQuerynpm yarnjQuery是推荐的使用方式项目工程script scriptsrc=js/jquery-

3.

6.

0.min.js/script npminstall jquery//或yarn addjquerysrc=https://cdn.bootcdn.net/ajax/libs/jquery/

3.

6.0/jquery.js/script文件类型选择开发版本（未压缩，有注释）•jquery.js-常用提供商使用方式CDN生产版本（压缩后，体积小）•jquery.min.js-•BootCDNimport$from jquery;//或const$=官方•jQuery CDNrequirejquery;•Google CDN•Microsoft CDN在实际项目中，建议为引入添加本地备份方案，确保在不可用时网站仍能正常工作CDN CDNscriptsrc=https://cdn.bootcdn.net/ajax/libs/jquery/

3.

6.0/jquery.min.js/scriptscript window.jQuery||document.writescript src=js/jquery-

3.

6.

0.min.js\/script/script核心函数与对象jQuery核心函数或对象jQuery$jQuery jQuery核心函数是整个库的基础，它是一个多功能函数，根据传入参数的不同，可以对象是通过核心函数创建的对象，它封装了元素集合，并提供了丰富的jQuery jQuery DOM执行不同的操作核心函数通过符号或名称调用，两者完全等价方法来操作这些元素$jQuery核心函数的主要用途对象特性jQuery作为选择器$div.content-选择类为content的div元素•类数组结构，可以通过索引访问单个DOM元素创建DOM元素$divspan内容/span/div•拥有length属性，表示包含的DOM元素数量封装DOM对象$document.getElementByIdbox•提供丰富的方法链，允许链式调用在DOM加载完成后执行代码$function{...}•自动处理浏览器兼容性问题//示例代码var$divs=$div;//创建jQuery对象console.log$divs.length;//获取元素数量$divs.eq

0.csscolor,red;//操作第一个div$divs.eachfunctionindex{console.log第+index+个div;};理解核心函数和对象是掌握的基础核心函数是入口点，而对象则是实际操作的载体在实际开发中，区分对象和原生对象非jQuery jQuery jQuery jQuery DOM jQuery DOM常重要，因为它们提供的方法和属性完全不同对象与原生区别jQuery DOM本质区别对象是元素的伪数组集合，它通过方法包装了元素，并提供了丰富的操作方法而原生对象jQuery DOM jQuery DOMDOM则是由浏览器直接提供的元素对象，具有标准的属性和方法DOM主要特点对比对象原生对象jQueryDOM使用创建通过等方法获取$document.getElementById可以包含多个元素通常是单个元素使用方法如使用方法如jQuery.css,.html DOM.style,.innerHTML无法直接使用方法无法直接使用方法DOM jQuery对象转换方式转转DOM jQueryjQueryDOM//方法一直接使用$函数包装var domElement=//方法一使用索引访问var$element=$#myElement;vardocument.getElementByIdmyElement;var$jqElement=domElement=$element

[0];//方法二使用get方法var$domElement;//方法二在已有jQuery对象的上下文中查找var domElement=$element.get0;//方法三使用eq和get组合（适$newJq=$#container.finddomElement;用于选择特定索引元素）var domElement=$element.eq

2.get0;在实际开发中，需要根据具体情况选择使用对象还是对象一般来说，对于简单的访问和操作，使用更方便；而对于某些特定的属性和方法（如表单元素的方法），可能需要转换为对象后操作了解两者的区别jQueryDOMDOMjQueryDOM focusDOM和转换方法，可以更灵活地处理各种开发场景选择器详解jQuery选择器系统是其最强大的特性之一，允许开发者使用类似的语法精确定位元素jQuery CSSDOM基础选择器层级选择器属性选择器ID选择器$#id子元素选择器$parentchild具有属性$[attribute]类选择器$.class后代选择器$ancestor descendant属性等于$[attribute=value]标签选择器$tag相邻兄弟选择器$prev+next属性不等于$[attribute!=value]通配符$*一般兄弟选择器$prev~siblings属性开头$[attribute^=value]组合选择器$selector1,selector2属性结尾$[attribute$=value]属性包含$[attribute*=value]过滤选择器选择器性能优化位置过滤:first,:last,:eqn,:gtn,:ltn选择器性能从高到低排序内容过滤:containstext,:empty,:parent ID选择器（$#id）-最快可见性过滤:visible,:hidden标签选择器（$tag）子元素过滤:nth-childn,:first-child,:only-child类选择器（$.class）表单过滤:input,:text,:checkbox,:checked,:selected属性选择器（$[attr=val]）伪类选择器（$li:first）-较慢优化技巧使用ID选择器缩小查询范围$#container.item避免过度使用通配符$div*使用find替代层级选择器$#parent.find.child//选择器组合示例//选择ID为main的元素内所有带有data-role属性且值为button的可见a标签$#main a[data-role=button]:visible;//选择所有偶数行的表格行并应用样式$table tr:even.addClasshighlight;掌握选择器是高效使用的关键合理使用选择器可以精确定位元素，同时通过了解选择器性能差异，可以优化代码提高页面性能jQueryjQuery操作基础DOM内容操作元素增删改DOM方法说明.text获取所有匹配元素的文本内容.text内容设置所有匹配元素的文本内容.html获取第一个匹配元素的HTML内容.htmlb内容/b设置所有匹配元素的HTML内容.val获取表单元素的值.val新值设置表单元素的值属性操作方法说明.attr属性获取指定属性的值.attr属性,值设置指定属性的值.removeAttr属性移除指定属性.prop属性获取元素属性（推荐用于布尔属性）.prop属性,值设置元素属性（如checked,disabled等）添加元素•.append内容-在被选元素内部末尾添加内容•.prepend内容-在被选元素内部开头添加内容•.after内容-在被选元素后面添加内容•.before内容-在被选元素前面添加内容•.appendTo目标-将选中元素添加到目标元素末尾•.prependTo目标-将选中元素添加到目标元素开头删除元素样式操作CSS基本样式操作类操作CSS提供了强大而灵活的样式操作功能，可以轻松读取和修改元素的样式属性无论是单个样式属性还是提供了多种方法来操作元素的类，这通常是处理样式的最佳实践，因为它将样式定义和行为逻辑分离jQuery CSSjQuery CSS多个样式属性的批量设置，都可以通过简洁的方法实现//读取样式var color=$#element.csscolor;var fontSize=$p.cssfont-方法说明示例size;//设置单个样式$h

1.csscolor,red;$p.cssfont-size,16px;//设添加一个或多个类置多个样式$#box.css{color:white,backgroundColor:#000,fontSize:.addClass$p.addClasshighlight18px,padding:10px15px,border:1px solid#ccc};big移除一个或多个类.removeClass$div.removeClasserror切换类的添加移除.toggleClass/$li.toggleClassselected检查是否有指定类.hasClass if$div.hasClassactive{...}尺寸和位置操作获取设置元素内容区域的宽高•.width,.height-/包含内边距的宽高•.innerWidth,.innerHeight-注意属性名可以使用连字符格式（如）或驼峰式写法（如）如果值是数字，CSS font-size fontSize包含内边距和边框的宽高•.outerWidth,.outerHeight-会自动添加适当的单位（如）；如果需要指定其他单位，应当以字符串形式提供完整值jQuery px包含内边距、边框和外边距•.outerWidthtrue,.outerHeighttrue-获取元素相对于最近的定位祖先元素的位置•.position-获取元素相对于文档的位置•.offset-在实际开发中，应当尽量使用类操作而非直接设置属性这样不仅可以保持代码的清晰和可维护性，还能提高性能，因为浏览器对类选择器的渲染优化通常比内联样式更好同时，将样式定义放在文件中，可以更好地实现CSS CSS响应式设计和主题切换等高级功能事件绑定与处理事件绑定方法事件委托简写事件方法事件委托是一种高效的事件处理模式，特别适合动态添加的元素jQuery为常用事件提供了简写方法，使用简单直观//使用事件委托$#list.onclick,li,function{alert$this.text;};//即使后来添加的li元素也会触发事件$#list.append//点击事件$#button.clickfunction{alert按钮被点击了！;};//鼠标悬停事件$a.hover function{$this.addClasshover;},//鼠标进入function{$this.removeClasshover;}//鼠标离开;•新项目;事件对象方法onjQuery事件处理函数会接收一个事件对象参数，包含了事件的详细信息推荐使用.on方法绑定事件，功能更强大灵活$a.clickfunctionevent{//阻止默认行为（如链接跳转）event.preventDefault;//阻止事件冒泡event.stopPropagation;//基本事件绑定$#button.onclick,function{console.log按钮被点击了！;};//绑定多个事件$input.on{focus://获取事件相关数据console.log鼠标位置:,event.pageX,event.pageY;console.log点击的元素:,event.target;};function{$this.cssbackground,#eee;},blur:function{$this.cssbackground,;},change:function{console.log值改变了;}};常用事件列表鼠标事件键盘事件•click-鼠标单击•keydown-键盘按下•dblclick-鼠标双击•keypress-键盘按下（字符键）•mousedown/mouseup-鼠标按下/释放•keyup-键盘释放•mouseover/mouseout-鼠标移入/移出•mousemove-鼠标移动•hover-组合事件（移入和移出）链式调用与回调函数链式调用回调函数jQuery的方法链是其最具特色的语法特性之一，允许开发者在一个语句中连续调用多个方法，从而创建简洁、流畅的代码这种链式调用风格得益于jQuery几乎回调函数是传递给另一个函数的函数，在特定事件发生或条件满足时被调用在jQuery中，回调函数广泛应用于事件处理、动画效果和Ajax请求中所有方法都返回jQuery对象本身（除了显式需要返回其他值的方法）常见回调函数使用场景链式调用的优势•事件触发时执行的处理函数•减少代码量，提高可读性•动画完成后执行的函数•避免重复选择相同的元素•Ajax请求成功或失败后的处理函数•创造更直观的代码流程•遍历元素时的处理函数•提高代码执行效率//动画完成后的回调函数$#panel.slideDown500,function{//动画完成后执行$this.addClassactive;console.log面板//不使用链式调用var$div=$#content;$div.addClassactive;$div.csscolor,已显示;};//each方法的回调函数$li.eachfunctionindex,element{console.log第+index+个列表项+blue;$div.fadeIn1000;$div.findp.text新内容;//使用链式调用$#content.addClassactive.csscolor,$element.text;};blue.fadeIn

1000.findp.text新内容.end//返回到上一级选择.append添加的内容;链式调用结合回调函数的实例//综合示例链式调用与回调函数结合使用$#loginForm.onsubmit,functionevent{event.preventDefault;//阻止表单默认提交var$this=$this;var username=$this.findinput[name=username].val;//简单验证if!username{$this.find.error.text用户名不能为空.fadeIn;return;}//显示加载状态$this.findbutton.propdisabled,true.text处理中...;//模拟表单提交setTimeoutfunction{$this.findbutton.propdisabled,false.text登录成功.addClasssuccess;//两秒后隐藏表单，显示欢迎信息setTimeoutfunction{$this.fadeOutfunction{$#welcome.fadeIn;};},2000;},1500;};动画效果jQuery基础显示隐藏动画滑动动画/方法说明方法说明show显示匹配元素slideDown向下滑动显示hide隐藏匹配元素slideUp向上滑动隐藏toggle切换显示/隐藏状态slideToggle切换滑动显示/隐藏状态这些方法可以接受三个参数自定义动画•速度可以是slow、normal、fast或毫秒值使用animate方法可以创建自定义的动画效果，允许同时改变多个CSS属性•缓动函数如swing、linear（默认为swing）•完成回调动画完成后执行的函数$#box.animate{width:300px,height:200px,opacity:

0.8,marginLeft:50px},1000,swing,function{console.log动画完成;};//示例$#element.show1000,function{console.log显示完成;};渐变动画动画控制方法说明•delay-延迟动画执行fadeIn淡入显示•stop-停止正在运行的动画fadeOut淡出隐藏•finish-立即完成动画•jQuery.fx.off=true-全局禁用所有动画fadeToggle切换淡入/淡出状态fadeTo渐变到指定的不透明度动画链与队列jQuery动画默认使用队列系统，依次执行链式调用中的动画效果$#box.slideDown

500.delay

500.fadeOut

500.fadeIn

500.animate{width:+=100px},

500.animate{height:+=50px},500,function{$this.cssbackground-color,green;};基础Ajax概述jQuery AjaxjQuery大大简化了Ajax（Asynchronous JavaScriptand XML）操作，使得与服务器进行异步通信变得简单易用通过Ajax，网页可以在不刷新整个页面的情况下更新部分内容，提供更流畅的用户体验基本方法Ajax方法说明$.ajax执行Ajax请求的核心方法$.get使用GET方法加载数据$.post使用POST方法提交数据$.getJSON使用GET方法获取JSON数据load从服务器加载HTML并插入DOM常用示例Ajax//基本GET请求$.getapi/users,functiondata{console.log获取的数据:,data;};//带参数的POST请求$.postapi/login,{username:admin,password:123456},functionresponse{ifresponse.success{alert登录成功！;}else{alert登录失败+response.message;}};//加载HTML片段到DOM元素$#result.loadcontent.html#main;插件机制jQuery插件概述常用插件jQueryjQuery插件是扩展jQuery功能的方式，它允许开发者创建可重用的组件，并以一致的方式集成到jQuery中通过插件机制，jQuery的核心保持精简，同时可以1UI组件类根据需要添加各种功能•jQuery UI-提供丰富的用户界面组件和交互效果插件的优势•jQueryUI Datepicker-日期选择器•代码复用性高，减少重复开发•Select2-增强的下拉选择框•模块化设计，便于维护•Colorbox-轻量级弹出层/灯箱效果•统一的接口和使用方式•DataTables-增强的表格组件•丰富的社区支持和生态系统2表单增强类创建插件jQuery•Validation-表单验证创建jQuery插件非常简单，主要通过扩展jQuery.fn对象（即jQuery原型）实现•Masked Input-输入格式化//基本插件结构function${$.fn.myPlugin=functionoptions{//合并默认选项和用户提供的选项var settings=•Chosen-增强的选择框$.extend{color:#556b2f,backgroundColor:white},options;//返回this以支持链式调用return•Form-表单序列化和提交this.eachfunction{//对每个匹配元素执行操作$this.css{color:settings.color,backgroundColor:•jQuery FileUpload-文件上传settings.backgroundColor};};};}jQuery;3视觉效果类•Slick-响应式轮播图•Animate.css-CSS动画库•CountUp.js-数字动画•fullPage.js-全屏滚动•Isotope-过滤和排序布局模式jQuery noConflict为什么需要模式？创建自定义命名空间noConflict在某些情况下，网页可能需要同时使用多个JavaScript库，而这些库可能都使用$符号作为简写例如，jQuery使用$，Prototype.js也使用$，这就会导致命名//创建自定义命名空间var myApp={};myApp.$=jQuery.noConflict;//使用自定义命名空间myApp.$div.hide;冲突noConflict模式可以解决这个问题，让多个库和谐共存基本用法//释放$的控制权jQuery.noConflict;//现在只能使用jQuery而不能使用$jQuerydiv.hide;//$可能被其他库使用console.log$;立即执行函数中使用$//在立即执行函数中安全使用$jQuery.noConflict;function${//在这个函数范围内，$指向jQuery$div.hide;//可以安全地使用jQuery的所有功能$function{$body.addClassloaded;};}jQuery;保存引用jQuery//将jQuery对象赋给一个新变量var$j=jQuery.noConflict;//使用新变量调用jQuery方法$jdiv.hide;极端模式noConflict//完全放弃jQuery和$命名空间var jQ=jQuery.noConflicttrue;//jQuery和$都不可用//jQ可用于调用jQuery功能jQdiv.hide;。