jQuery 源码解析(三十) 动画模块 $.animate()详解

【jQuery 源码解析(三十) 动画模块 $.animate()详解】的更多相关文章

jQuery 源码解析(三十) 动画模块 $.animate()详解

jQuery的动画模块提供了包括隐藏显示动画.渐显渐隐动画.滑入划出动画,同时还支持构造复杂自定义动画,动画模块用到了之前讲解过的很多其它很多模块,例如队列.事件等等, $.animate()的用法如下:animate(prop,speed,easing,callback),参数如下: prop ;对象, ;包含将要动画的样式 speed ;字符串或数字 ;动画运行持续时间,单位毫秒,可以设置为"slow"."normal".&qu…

jQuery 源码解析(三十一) 动画模块便捷动画详解

jquery在$.animate()这个接口上又封装了几个API,用于进行匹配元素的便捷动画,如下: $(selector).show(speed,easing,callback) ;如果被选元素已被隐藏,则显示这些元素 $(selector).hide(speed,easing,callback) ;如果被选的元素已被显示,则隐藏该元素 $(selector).toggle(speed,easing,callback) ;切换元素的可见状态,如果被选元素可…

jQuery 源码解析(二十五) DOM操作模块 html和text方法的区别

html和text都可以获取和修改DOM节点里的内容,方法如下: html(value) ;获取匹配元素集合中的一个元素的innerHTML内容,或者设置每个元素的innerHTML内容, ;value可选,可以是html代码或返回html代码的函数,如果没有参数则获取匹配元素集合中第一个元素的innerHTML内容 text(text) ;获取匹配元素集合中所有元素合并后的文本内容,或者设置每个元素的文本内容,封装了createTextNo…

jQuery 源码解析(二十六) 样式操作模块样式详解

样式操作模块可用于管理DOM元素的样式.坐标和尺寸,本节讲解一下样式相关,样式操作通过jQuery实例的css方法来实现,该方法有很多的执行方法,如下: css(obj) ;参数1是一个对象时,表示一次性设置多个css样式 css(name,func) ;参数2是函数时,设置的是函数返回值 css(name,'') ;参数2是空字符串时,表示删除该样式(删除style属性上的) css(name) ;如果忽略第二个…

jQuery 源码解析(三) pushStack方法详解

该函数用于创建一个新的jQuery对象,然后将一个DOM元素集合加入到jQuery栈中,最后返回该jQuery对象,有三个参数,如下: elems Array类型将要压入 jQuery 栈的数组元素,用于生成一个新的 jQuery 对象 name 可选. String类型生成数组元素的 jQuery 方法名 selector 可选. Array类型传递给 Query 方法的参数(用于序列化) 参数2和参数3可选的,用于设置返回的新的jQuery对象的selector属性调用pushSta…

jQuery 源码解析(二十九) 样式操作模块尺寸详解

样式操作模块可用于管理DOM元素的样式.坐标和尺寸,本节讲解一下尺寸这一块 jQuery通过样式操作模块里的尺寸相关的API可以很方便的获取一个元素的宽度.高度,而且可以很方便的区分padding.border. margin等,主要有六个API,如下: heihgt(size).width(size) ;获取第一个匹配元素的高度.宽度,或者通过调用.css(name,value)方法来设置高度.宽度. size可以是字符串或者数值 innerHeight().innerWidth() ;获…

JQuery源码解析（十）

默认回调对象设计不传入任何参数,调用add的时候将函数add到内部的list中,调用fire的时候顺序触发list中的回调函数: function fn1(val) { console.log('fn1 says:' + val); } function fn2(val) { console.log('fn2 says ' + val); } var cbs = $.Callbacks(); cbs.add(fn1); cbs.fire('foo'); console.log('.......…

jQuery 源码解析(二十八) 样式操作模块 scrollLeft和scrollTop详解

scrollLeft和scrollTop用于获取/设置滚动条的,如下: scrollLeft(val) ;读取或设置整个页面的水平滚动条距离 scrollTop(val) ;读取或设置整个页面的垂直滚动条距离如果没有传入val值则获取滚动条距离,如果有设置val则标识设置滚动条距离,还是举个栗子,以scrollTop为例,如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu…

jQuery 源码解析(二十四) DOM操作模块包裹元素详解

本节说一下DOM操作模块里的包裹元素子模块,该模块可将当前匹配的元素替换指定的DOM元素,有如下方法: wrap(html) ;在每个匹配元素的外层添加一层DOM元素 ;该方法会遍历匹配元素集合,在每个元素上调用.wrapAll()方法 ;不同于wrapAll()的是该方法会在每个匹配元素外面都套一层html元素. wrapAll(html) ;会将html转化为一个DO…

jQuery 源码解析(二十二) DOM操作模块复制元素详解

本节说一下DOM操作模块里的复制元素子模块,该模块可以复制一个DOM节点,并且可选择的设置是否复制其数据缓存对象(包含事件信息)和是否深度复制(子孙节点等),API如下: $.clone(elem, dataAndEvents, deepDataAndEvents) ;jQuery底层方法,返回DOM引用 ;elem是要复制的DOM元素,dataAndEvents和deepDataAndEvents分别表示是否复制克隆元素的数据和事件和是否复制深度复制数据和事件 $.fn.clo…