jQuery-day02.pptxVIP免费

jQueryday02课程介绍01课程介绍学习目标LearningObjectives1.能够动态获取元素节点的位置、大小、滚动2.能够为元素设置动画效果3.能够操纵元素节点4.能够理解并使用事件委托获取位置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}总结总结1.offset和position哪个方法参考的是html?offset方法2.哪个方法会把margin作为外边界?position方法3.设置位置使用哪个方法?css方法获取位置滚动距离03滚动距离通过jQuery获取元素的滚动距离语法//取值$('选择器').scrollLeft()$('选择器').scrollTop()//赋值$('选择器').scrollLeft(值)$('选择器').scrollTop(值)总结总结1.scrollTop和scrollLeft哪个负责水平方向？scrollLeft2.获取页面的滚动距离使用哪个标签作为选择器?html3.设置滚动距离时是否有动画效果?没有滚动距离腾讯全端04腾讯全端顶部高亮返回顶部腾讯全端需求步骤腾讯全端顶部高亮需求：页面只要滚动为顶部添加高亮效果,在顶部时移除高亮分析：①：注册页面滚动事件window,scroll②：获取滚动距离html③：切换高亮效果切换类名(scrolled)