jQuery-day02.pptx

jQuery,day02,课程介绍,01,课程介绍,能够动态获取元素节点的位置、大小、滚动能够为元素设置动画效果能够操纵元素节点能够理解并使用事件委托,获取位置,02,获取位置,通过jQuery直接获取元素的位置,参照物不同margin,/取值$(选择器).offset()/取值$(选择器).position()/返回值 top:126,left:58,获取位置,通过jQuery直接获取元素的位置,语法,/取值$(选择器).offset()/取值$(选择器).position()/返回值 top:126,left:58,参照物不同offset参照html标签position参照离他最近有定位的祖先元素margin,获取位置,通过jQuery直接获取元素的位置,参照物不同offset参照html标签position参照离他最近有定位的祖先元素marginoffset会把外边距margin计算进去position以外边距margin为边界,不计算margin,语法,/取值$(选择器).offset()/取值$(选择器).position()/返回值 top:126,left:58,offset和position哪个方法参考的是html?offset方法哪个方法会把margin作为外边界?position方法设置位置使用哪个方法?css方法,获取位置,滚动距离,03,滚动距离,通过jQuery获取元素的滚动距离,语法,/取值$(选择器).scrollLeft()$(选择器).scrollTop()/赋值$(选择器).scrollLeft(值)$(选择器).scrollTop(值),scrollTop和scrollLeft哪个负责水平方向？scrollLeft获取页面的滚动距离使用哪个标签作为选择器?html设置滚动距离时是否有动画效果?没有,滚动距离,腾讯全端,04,腾讯全端,顶部高亮返回顶部,腾讯全端,需求,腾讯全端,顶部高亮,需求：页面只要滚动为顶部添加高亮效果,在顶部时移除高亮分析：注册页面滚动事件window,scroll：获取滚动距离html：切换高亮效果切换类名(scrolled),顶部高亮返回顶部,腾讯全端,需求,腾讯全端,返回顶部,需求：滚动距离超过200显示返回顶部,小于则隐藏.点击让页面滚回顶部分析：注册页面滚动事件并获取滚动距离：切换显示隐藏css方法,display样式：点击返回顶部click事件,scrollTop方法,返回顶部,腾讯全端,返回顶部,需求：滚动距离超过200显示返回顶部,小于则隐藏.点击让页面滚回顶部分析：注册页面滚动事件并获取滚动距离：切换显示隐藏show方法,hide方法：点击返回顶部click事件,scrollTop方法,返回顶部,如何注册页面滚动事件?$(window).scroll()如何获取网页垂直方向的滚动距离?$(html).scrollTop(),腾讯全端,显示&隐藏动画,05,语法优化案例,显示&隐藏动画,通过jQuery以动画的方式切换元素的显示&隐藏,语法,/显示$(选择器).show()/隐藏$(选择器).hide()/显示&隐藏$(选择器).toggle(),显示&隐藏动画,通过jQuery以动画的方式切换元素的显示&隐藏,毫秒为单位,语法,/显示$(选择器).show(持续时间)/隐藏$(选择器).hide(持续时间)/显示&隐藏$(选择器).toggle(持续时间),语法优化案例,显示&隐藏动画,返回顶部,需求：滚动距离超过200显示返回顶部,小于则隐藏.点击让页面滚回顶部分析：注册页面滚动事件并获取滚动距离：切换显示隐藏css方法,display样式：点击返回顶部click事件,scrollTop方法,返回顶部,显示&隐藏动画,返回顶部,需求：滚动距离超过200显示返回顶部,小于则隐藏.点击让页面滚回顶部分析：注册页面滚动事件并获取滚动距离：切换显示隐藏show方法,hide方法：点击返回顶部click事件,scrollTop方法,返回顶部,显示用show,隐藏用hide,切换显示隐藏的那个方法是?toggle方法不设置时间是否有动画效果?没有,显示&隐藏动画,淡入&淡出动画,06,语法调整案例,淡入&淡出动画,通过jQuery以淡入&淡出的方式切换元素的显示隐藏,语法,$(选择器).fadeIn()$(选择器).fadeOut()$(选择器).fadeToggle(),淡入&淡出动画,通过jQuery以淡入&淡出的方式切换元素的显示隐藏,语法,/淡入$(选择器).fadeIn()/淡出$(选择器).fadeOut()/淡入&淡出$(选择器).fadeToggle(),淡入&淡出动画,通过jQuery以淡入&淡出的方式切换元素的显示隐藏,语法,/淡入$(选择器).fadeIn(持续时间)/淡出$(选择器).fadeOut(持续时间)/淡入&淡出$(选择器).fadeToggle(持续时间),毫秒为单位,语法调整案例,淡入&淡出动画,返回顶部,需求：滚动距离超过200显示返回顶部,小于则隐藏.点击让页面滚回顶部分析：注册页面滚动事件并获取滚动距离：切换显示隐藏show方法,hide方法：点击返回顶部click事件,scrollTop方法,返回顶部,淡入&淡出动画,返回顶部,需求：滚动距离超过200显示返回顶部,小于则隐藏.点击让页面滚回顶部分析：注册页面滚动事件并获取滚动距离：切换显示隐藏fadeIn方法,fadeOut方法：点击返回顶部click事件,scrollTop方法,返回顶部,淡入淡出效果是通过修改元素的哪个样式实现?opactity元素的尺寸是否会在淡入淡出的动画过程中一起改变?不会,淡入&淡出动画,展开&收起动画,07,语法调整案例,展开&收起动画,通过jQuery以展开&收起的方式切换元素的显示隐藏,展开&收起动画,通过jQuery以展开(高度增大)&收起(高度减小)的方式切换元素的显示隐藏,展开&收起动画,通过jQuery以展开(高度增大-显示)&收起(高度减小-隐藏)的方式切换元素的显示隐藏,语法,$(选择器).slideDown()$(选择器).slideUp()$(选择器).slideToggle(),展开&收起动画,语法,/展开$(选择器).slideDown()/收起$(选择器).slideUp()/展开&收起$(选择器).slideToggle(),通过jQuery以展开(高度增大-显示)&收起(高度减小-隐藏)的方式切换元素的显示隐藏,展开&收起动画,语法,/展开$(选择器).slideDown(持续时间)/收起$(选择器).slideUp(持续时间)/展开&收起$(选择器).slideToggle(持续时间),毫秒为单位,通过jQuery以展开(高度增大-显示)&收起(高度减小-隐藏)的方式切换元素的显示隐藏,语法调整案例,展开&收起动画,返回顶部,需求：滚动距离超过200显示返回顶部,小于则隐藏.点击让页面滚回顶部分析：注册页面滚动事件并获取滚动距离：切换显示隐藏fadeIn方法,fadeOut方法：点击返回顶部click事件,scrollTop方法,返回顶部,展开&收起动画,返回顶部,需求：滚动距离超过200显示返回顶部,小于则隐藏.点击让页面滚回顶部分析：注册页面滚动事件并获取滚动距离：切换显示隐藏slideDown方法,slideUp方法：点击返回顶部click事件,scrollTop方法,返回顶部,slideDown和slideUp哪一个用来把元素显示出来?slideDown展开在垂直方向上调整的样式除了高度、margin、还有?padding,展开&收起动画,动画队列及停止方法,08,动画队列及停止方法,通过jQuery为元素设置的多个动画会依次添加到动画队列中,并根据添加的顺序依次播放,/动画队列,动画队列及停止方法,通过jQuery为元素设置的多个动画会依次添加到动画队列中,并根据添加的顺序依次播放,/动画队列动画1,动画队列及停止方法,通过jQuery为元素设置的多个动画会依次添加到动画队列中,并根据添加的顺序依次播放,/动画队列动画1,动画2,动画队列及停止方法,通过jQuery为元素设置的多个动画会依次添加到动画队列中,并根据添加的顺序依次播放,/动画队列动画1,动画2,动画3,动画队列及停止方法,通过jQuery为元素设置的多个动画会依次添加到动画队列中,并根据添加的顺序依次播放,/动画队列动画2,动画3,动画队列及停止方法,通过jQuery为元素设置的多个动画会依次添加到动画队列中,并根据添加的顺序依次播放,/动画队列动画3,动画队列及停止方法,通过jQuery为元素设置的多个动画会依次添加到动画队列中,并根据添加的顺序依次播放,/动画队列,动画队列及停止方法,通过jQuery为元素设置的多个动画会依次添加到动画队列中,并根据添加的顺序依次播放,/动画队列动画1,动画2,动画3,动画队列及停止方法,通过jQuery为元素设置的多个动画会依次添加到动画队列中,并根据添加的顺序依次播放,语法,/停止当前动画$(选择器).stop()/清空队列 在动画当前状态停止$(选择器).stop(true)/清空队列 直接到当前动画的结束状态$(选择器).stop(true,true),动画方法和stop方法返回的是同一个jQuery对象,动画队列及停止方法,通过jQuery为元素设置的多个动画会依次添加到动画队列中,并根据添加的顺序依次播放,语法,/停止当前动画$(选择器).stop()/清空队列 在动画当前状态停止$(选择器).stop(true)/清空队列 直接到当前动画的结束状态$(选择器).stop(true,true),动画方法和stop方法返回的是同一个jQuery对象(链式编程),队列中动画的播放顺序和添加顺序是否有关系？有stop方法要清空队列需要传递什么参数?true传递1个true和传递2个true的区别是?1个:动画停止在执行stop方法的瞬间2个:直接到当前播放动画的结束状态,动画队列及停止方法,自定义动画,09,自定义动画,09,自定义动画,jQuery提供了animate方法来实现更为复杂的动画效果,$(选择器).animate(动画属性),数值类样式支持动画,支持多个,自定义动画,jQuery提供了animate方法来实现更为复杂的动画效果,$(选择器).animate(width:100,height:100,margin:100,.),数值类样式支持动画,支持多个默认单位是px,自定义动画,jQuery提供了animate方法来实现更为复杂的动画效果,数值类样式支持动画,支持多个默认单位是px支持非样式的特殊属性,$(选择器).animate(width:100,height:100%,margin:100px,.),