jQueryday03课程介绍01学习目标LearningObjectives1.能够了解常见jQuery插件的使用套路2.能够了解插件的本质及实现方法3.能够掌握操纵表单的方法课程介绍总结总结1.插件+表单+3个案例课程介绍入口函数02入口函数jQuery中提供了更为简便的入口函数写法测试代码//原生写法window.onload=function(){}//jQ写法$(window).on('load',function(){})页面资源加载完毕执行(包括图片、css等等)逻辑代码入口函数jQuery中提供了更为简便的入口函数写法语法//完整写法$(document).ready(function(){})//简化写法$(function(){})DOM载入完毕就会执行总结总结1.window.onload和ready哪个先执行?ready2.window.onload和ready哪个可以获取图片尺寸?window.onload3.开发中用哪个?具体情况具体分析入口函数轮播图03轮播图插件03轮播图插件插件:为程序附加功能下包:把插件下载到本地导包:先导入jQuery,再导入插件,导入css(需要的话)用包:根据文档(说明书)使用轮播图插件jQuery的轮播图插件slick轮播图插件导包语法
轮播图插件用包语法轮播元素一
轮播元素二
轮播元素三
语法$('.your-class').slick()轮播图插件用包语法//调用插件方法初始化$('.your-class').slick({autoplay:true,arrows:true...})常用配置含义默认值备注autoplay轮播图效果自动执行falsetrue/falsearrows是否显示翻页按钮truetrue/falseprevArrow自定义上一页按钮无标签选择器nextArrow自定义下一页按钮无标签选择器dots是否显示指示器falsetrue/false轮播图插件用包常用配置含义默认值备注autoplay轮播图效果自动执行falsetrue/falsearrows是否显示翻页按钮truetrue/falseprevArrow自定义上一页按钮无标签选择器nextArrow自定义下一页按钮无标签选择器dots是否显示指示器falsetrue/false默认样式不符合需求直接添加CSS覆盖即可更多的配置参数可以查阅官方文档:https://github.com/kenwheeler/slick总结总结1.slick.js文件导入的位置是jQuery之前还是之后?之后2.是否需要把使用步骤和配置背下来?不需要轮...