jQuery-day03.pptx

jQuery,day03,课程介绍,01,能够了解常见 jQuery 插件的使用套路能够了解插件的本质及实现方法能够掌握操纵表单的方法,课程介绍,插件+表单+3个案例,课程介绍,入口函数,02,入口函数,jQuery 中提供了更为简便的入口函数写法,测试代码,/原生写法window.onload=function()/jQ写法$(window).on(load,function(),页面资源加载完毕执行(包括图片、css等等)逻辑代码,入口函数,jQuery 中提供了更为简便的入口函数写法,语法,/完整写法$(document).ready(function()/简化写法$(function(),DOM载入完毕就会执行,window.onload 和 ready哪个先执行？readywindow.onload 和 ready哪个可以获取图片尺寸?window.onload开发中用哪个?具体情况具体分析,入口函数,轮播图,03,轮播图插件,03,轮播图插件,插件:为程序附加功能,下包：把插件下载到本地导包：先导入 jQuery,再导入插件,导入css(需要的话)用包：根据文档(说明书)使用,轮播图插件,jQuery 的轮播图插件 slick,轮播图插件,导包,语法,轮播图插件,用包,轮播图插件,用包,轮播图插件,用包,默认样式不符合需求直接添加 CSS 覆盖即可更多的配置参数可以查阅官方文档:https:/,slick.js文件导入的位置是 jQuery 之前还是之后？之后是否需要把使用步骤和配置背下来?不需要,轮播图插件,懒加载插件,04,懒加载：图片用到了再去加载，常见于有大量图片的网页，比如电商,懒加载插件,jQuery 的懒加载插件 lazyload,下包：把插件下载到本地导包：先导入 jQuery,再导入插件,导入css(需要的话)用包：根据文档(说明书)使用,懒加载插件,jQuery 的懒加载插件 lazyload,懒加载插件,导包,语法,懒加载插件,用包,语法,懒加载插件,用包,语法,图片地址设置给 data-original,懒加载插件,用包,语法,语法,/找到希望懒加载的图片并调用lazyload方法$(.lazyload).lazyload(),官方文档:https:/,使用懒加载插件之后，看不到的图片会不会加载?不会图片较多的网页可以用这个提升加载速度吗?可以,懒加载插件,小兔鲜儿,05,小兔鲜儿,轮播图图片懒加载,小兔鲜儿,需求,小兔鲜儿,轮播图,需求：项目中整合轮播图效果，使用自定义的左右箭头，开启自动轮播，显示指示点并且居中分析：整合轮播图插件(slick)下包，导包：调用插件方法slick方法：调整配置或样式随用随查，审查元素,.略,轮播图图片懒加载,小兔鲜儿,需求,小兔鲜儿,图片懒加载,需求：轮播图下方的图片全部通过懒加载的方式载入分析：整合懒加载插件(lazyload)下包，导包：调整图片地址data-original：调用插件方法lazyload,工作中所有的功能都需要自己手写吗?不需要插件的使用方法，配置需要背下来吗?不需要,小兔鲜儿,全屏滚动,06,全屏滚动,jQuery 的全屏滚动插件 fullpage,下包：把插件下载到本地导包：先导入 jQuery,再导入插件,导入css(需要的话)用包：根据文档(说明书)使用,全屏滚动,jQuery 的全屏滚动插件 fullpage,全屏滚动,导包,语法,全屏滚动,用包,每个区域必须有 section 这个类名,语法,第一屏第二屏第三屏,全屏滚动,用包,$(#fullpage).fullpage(.),语法,更多的配置参数可以查阅官方文档:https:/,fullpage插件在使用的时候一定要传入配置吗?不需要fullpage插件的区域容器必须要有什么类名?section,全屏滚动,安全导航,07,安全导航,全屏滚动,安全导航,需求,安全导航,全屏滚动,需求：整合全屏滚动效果，每次切屏完毕播放动画，支持来回滚动分析：整合fullpage插件下包，导包：调用方法整合全屏滚动fullpage：切屏完毕播放动画afterLoad，current类，addClass：来回滚动current类，removeClass,使用的回调函数叫什么名字?afterLoad回调函数的第二个参数是什么?索引,安全导航,提交事件,08,提交事件,form 标签本身具有提交数据的能力，但是现在基本不这么用,测试结构,提交,点击提交按钮，输入区域点击回车都会触发表单提交表单中的 button 默认就是提交按钮,提交事件,现在比较流行在表单的 submit 事件中阻止默认行为，自己获取数据并提交,测试结构,$(form).submit(function(event)/阻止默认行为event.preventDefault()/阻止默认行为returnfalse),返回false 或者 preventDefault 都可以阻止默认行为,点击提交按钮或者在输入区域按回车会触发表单的什么事件？submit事件中return什么值可以阻止默认行为?false,提交事件,日期选择器,09,日期选择器,jQuery 的日期选择器插件 datepicker,让用户在不同的浏览器下可以用一致的方式来选择日期,下包：把插件下载到本地导包：先导入 jQuery,再导入插件,导入css(需要的话)用包：根据文档(说明书)使用,日期选择器,导包,语法,默认显示的是英文，需要导入 中文语言包,日期选择器,用包,更多的配置参数可以查阅官方文档:https:/,语法,/调用插件方法$(.datapicker).datepicker(),插件默认显示的语言是中文还是英文?英文为了设置插件的语言为中文，需要导入什么?中文语言包,日期选择器,表单验证,10,表单验证,jQuery 的表单验证插件 validate,验证用户在表单中输入的内容,下包：把插件下载到本地导包：先导入 jQuery,再导入插件,导入css(需要的话)用包：根据文档(说明书)使用,表单验证,导包,语法,表单验证,用包,语法,$(form).validate(/配置),表单验证,用包,语法,表单元素要放在 form 里面,表单验证,用包,语法,