jQuery-day01.pptx

jQuery,day01,课程介绍,01,使用jQuery开发常见的网页应用,第一天:认识 jQuery,基本使用第二天:动画,节点第三天:表单,插件,课程介绍,这个阶段的学习目标是什么?使用 jQuery 开发常见的网页应用,课程介绍,认识jQuery,02,认识jQuery,JavaScript 类库(js文件)封装了很多简单易用的方法(浏览器兼容)绝大多数用来简化 DOM 操作提升开发效率,jQuery 是JavaScript类库使用它封装的方法可以极大的提升开发效率,认识jQuery,使用准备,03,使用准备,下包：把 jQuery 下载到本地导包：在希望使用的页面中导入下载好的 jQuery下载地址:https:/,使用准备,就两步,使用 jQuery 的准备工作是哪两步？下包,导包完整版本和压缩版本的 jQuery 功能上有区别吗?没有文件名中有 mini 的是压缩版本还是完整版本?压缩版本,使用准备,版本区别,04,版本区别,目前最新版本是:3.5.1,3：大版本,和上一个版本相比有很多功能x：bug修复或者新增小功能,版本区别,可以看成:3.x,1.x：兼容低版本的ie 2.x：不兼容低版本的ie,并且不再更新3.x:不兼容低版本的ie,更新中,版本区别,目前有 3 个大版本,兼容信息查看:https:/https:/,下载地址,有几个大版本,他们分别是什么?1.x,2.x,3.x如果不考虑兼容低版本的ie,使用哪个版本?3.x,版本区别,选择器,04,选择器,jQuery 中通过选择器来获取 DOM 节点，功能类似于原生的 querySelectorAll 方法，支持的选择器与 CSS 的选择器几乎一致。,语法,/语法$(选择器)/修改背景色$(选择器).css(backgroundColor,yellowgreen),jQuery 的选择器如何使用?$(选择器),选择器,jQuery对象,05,jQuery对象,jQuery 中利用选择器获取到的并非原生的 DOM 对象，而是 jQuery 对象,示例代码,/jQuery获取p标签$(p),jQuery对象,jQuery 中利用选择器获取到的并非原生的 DOM 对象，而是 jQuery 对象,示例代码,/jQuery获取p标签改变背景色为粉色$(p).css(backgroundColor,pink),jQuery对象,jQuery 中利用选择器获取到的并非原生的 DOM 对象，而是 jQuery 对象,示例代码,/jQuery获取p标签改变背景色为粉色$(p).css(backgroundColor,pink)/dom获取p标签改变背景色为粉色document.querySelector(p).style.backgroundColor=pink,jQuery对象 和 DOM对象 的语法不能混用,jQuery对象,jQuery 中利用选择器获取到的并非原生的 DOM 对象，而是 jQuery 对象,示例代码,/jQuery获取p标签改变背景色为粉色$(p).style.backgroundColor=pink/dom获取p标签改变背景色为粉色document.querySelector(p).css(backgroundColor,pink),jQuery对象 和 DOM对象 的语法不能混用,jQuery对象,jQuery 中利用选择器获取到的并非原生的 DOM 对象，而是 jQuery 对象,jQuery对象 和 DOM对象 的语法不能混用,语法,/选择器获取$(选择器)/dom对象转换$(dom对象),调用$方法传入选择器或dom元素获取到的是什么对象?jQuery对象jQuery对象的方法,比如css方法放在什么位置?原型,jQuery对象,事件绑定,06,事件绑定,在 jQuery 中以原生事件类型的名称为依据,封装了相对应的事件处理方法,语法,$(选择器),事件绑定,在 jQuery 中以原生事件类型的名称为依据,封装了相对应的事件处理方法,语法,$(选择器).事件名(),事件绑定,在 jQuery 中以原生事件类型的名称为依据,封装了相对应的事件处理方法,语法,$(选择器).事件名(function()/逻辑.),事件绑定,在 jQuery 中以原生事件类型的名称为依据,封装了相对应的事件处理方法,语法,$(选择器).click(function()/逻辑.),事件绑定,在 jQuery 中以原生事件类型的名称为依据,封装了相对应的事件处理方法,语法,$(选择器).dblclick(function()/逻辑.),事件名开头不需要写 on回调函数中的 this 就是触发事件的 dom 元素,为 jQuery对象 绑定点击事件，方法名是onclick吗?click如何获取触发事件的 dom 元素?this,事件绑定,链式编程,07,链式编程,链式编程 通过点(.)把多个操作(方法)连续的写下去,形成和 链子 一样的结构,语法,$(.text).focus(function()console.log(获取焦点)$(.text).blur(function()console.log(失去焦点),链式编程,链式编程 通过点(.)把多个操作(方法)连续的写下去,形成和 链子 一样的结构,语法,$(.text).focus(function()console.log(获取焦点).blur(function()console.log(失去焦点),链式编程,链式编程 通过点(.)把多个操作(方法)连续的写下去,形成和 链子 一样的结构,语法,$(.text).focus(回调函数).blur(回调函数),链式编程,链式编程 通过点(.)把多个操作(方法)连续的写下去,形成和 链子 一样的结构,语法,$(.text).focus(回调函数).blur(回调函数).change(回调函数),大部分 jQ对象 方法的返回值还是同一个 jQ对象,链式编程的含义?通过 点 把多个操作连续的写下去,形成和 链子 一样的结构有没有特殊情况?有,链式编程,内容操纵,08,内容操纵,jQuery 中封装了设置和读取网页元素文本内容的方法,语法,/设置$(选择器).html(内容)$(选择器).text(内容)/读取$(选择器).html()$(选择器).text(),设置时:html 方法解析标签,text 不解析标签取值时:html 方法获取标签,text 只获取文本有一种使用方式支持链式编程,哪个方法设置的标签会被正常解析？html方法只获取元素的文本使用哪个方法?text方法设置还是取值支持链式编程?设置,内容操纵,计数器,09,计数器,累加递减,计数器,需求,计数器,累加&递减,需求：点击 加号 累加数字一直到10,点击 减号 递减数字一直到0,到达临界值继续操作则提示用户分析：绑定点击事件click,first-child,last-child：修改文本text方法：判断并提示用户0 到 10,-0+,last-child 和 first-child叫做什么选择器?伪类选择器span里面的文本设置和取值用的是什么方法?text,计数器,过滤方法,10,过滤方法,jQuery 中封装了过滤方法,对 jQuery 对象中的 dom 元素再次筛选,/匹配的第一个元素.first()/匹配的最后一个元素.last()/根据索引匹配元素.eq(索引),eq 方法的索引从0开始返回的是 jQuery 对象,first方法和last方法筛选出来的分别是第几个元素?第一个和最后一个eq方法的索引从几开始?0这三个方法的返回值是什么对象jQuery对象,过滤方法,样式操纵,11,样式操纵,jQuery 中对样式的操作进行封装,可以设置或者获取样式,/1.键值对设置.css(样式名,值).css(backgroundColor,pink).css(color,red).css(width,200px).css(height,200),数值类的样式省略单位,默认会使用 px,样式操纵,jQuery 中对样式的操作进行封装,可以设置或者获取样式,语法,/2.对象方式设置.css(对象).css(backgroundColor:pink,color:red,width:200px,height:200),数值类的样式省略单位,默认会使用 px,样式操纵,jQuery 中对样式的操作进行封装,可以设置或者获取样式,语法,/3.样式获取.css(样式名).css(width),数值类的样式省略单位,默认会使用 px获取样式需要传递样式名,设置数值类的样式时省略单位,默认值是什么？pxcss方法设置的样式在元素什么位置?行内css方法取值时是否需要传递参数?需要,样式操纵,属性操纵,12,属性操纵,jQuery 中对属性的操作进行封装,可以设置、获取和删除属性,黑马程序员,属性操纵,jQuery 中对属性的操作进行封装,可以设置、获取和删除属性,/1.赋值.attr(属性名,值)/2.取值.attr(属性名)/3.删除属性.removeAttr(属性名),attr方法赋值操作时需要传递几个参数？2个参数attr方法传递一个参数的作用是什么?属性取值删除属性用什么方法?removeAttr,属性操纵,如何通过jQuery中改变页面结构?()如何知道动画播放完毕?()如何让动画延迟播放?如何获取元素高度?,爱旅行,图片切换,13,图片切换,箭头缩放图片切换,需求,图片切换,图片切换,箭头缩放,需求：两侧箭头鼠标移入之后变大，鼠标移出之后还原分析：鼠标移入和移出事件mouseenter,mouseleave：更改箭头缩放transform，scale,箭头缩放图片切换,需求,图片切换,图片切换,图片切换,需求：点击左右箭头分别切换上一张和下一张图片，第一张时隐藏左箭头，最后一张时隐藏右箭头分析：默认隐藏左箭头display：绑定点击事件：更改图片显示src属性,索引：更改箭头显示状态判断,display,为transform设置什么属性可以调整元素缩放？scale使用什么方法修改元素属性?attr使用什么方法修改元素样式?css,图片切换,操纵value,14,操纵value,jQuery 中封装了操纵表单元素value属性的方法，可以取值和赋值,