jQuery框架-2.进阶系列

Posted 大仲马

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery框架-2.进阶系列相关的知识,希望对你有一定的参考价值。

一、操作DOM

内部插入操作:

append(content|fn):向每个匹配的元素内部追加内容。

prepend(content):向每个匹配的元素内部前置内容。

外部插入操作:

after(content|fn):在每个匹配的元素之后插入内容。

before(content|fn):在每个匹配的元素之前插入内容。

包裹操作:

wrap(html|element|fn):把所有匹配的元素用其他元素的结构化标记包裹起来。

unwrap():这个方法将移出元素的父元素。

wrapAll(html|ele):将所有匹配的元素用单个元素包裹起来。

wrapInner(htm|element|fnl):将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来。

替换操作:

replaceWith(content|fn):将所有匹配的元素替换成指定的HTML或DOM元素。

replaceAll(selector):用匹配的元素替换掉所有 selector匹配到的元素。

删除操作:

empty():删除匹配的元素集合中所有的子节点。

remove([expr]):从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外,其他的比如绑定的事件,附加的数据等都会被移除。

detach([expr]):从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来。

复制操作:

clone(Even]):克隆匹配的DOM元素并且选中这些克隆的副本。

even:一个布尔值(true 或者 false)指示事件处理函数是否会被复制。

二、动画

show([speed, [easing], [callback]]):显示隐藏的匹配元素。

hide([speed, [easing], [callback]]):隐藏显示的元素。

toggle([speed, [easing], [callback]]):如果元素是可见的,切换为隐藏的,如果元素是隐藏的,切换为可见的。

speed:三种预定速度的字符串(slow、normal、fast)或者动画时长的毫秒数值。

easing:指定切换效果,默认是swing,可用linear。

callback:在动画完成时执行的函数,每个元素执行一次。

运动过程中:改变width、height、margin、padding、opacity属性值,添加overflow:hidden属性。

 

slideDown([speed, [easing], [callback]]):通过高度变化(向下增大)来动态的显示所有匹配的元素,显示完成后可选的触发一个回调函数。

slideUp([speed, [easing], [callback]]):通过高度变化(向上减小)来动态的隐藏所有匹配的元素,隐藏完成后可选的触发一个回调函数。

slideToggle([speed, [easing], [callback]]):通过高度变化来切换所有匹配元素的可见性,切换完成后可选的触发一个回调函数。

speed:三种预定速度的字符串(slow、normal、fast)或者动画时长的毫秒数值。

easing:指定切换效果,默认是swing,可用linear。

callback:在动画完成时执行的函数,每个元素执行一次。

运动过程中:改变height、margin-top、margin-bottom、padding-top、padding-bottom属性值,添加overflow:hidden属性。

 

fadeIn([speed, [easing], [callback]]):通过不透明度的变化来实现所有匹配元素的淡入效果,动画完成后可选的触发一个回调函数。

fadeOut([speed, [easing], [callback]]):通过不透明度的变化来实现所有匹配元素的淡出效果,动画完成后可选的触发一个回调函数。

fadeTo([speed, opacity, [easing], [callback]]):把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,动画完成后可选的触发一个回调函数。opacity:一个0到1之间表示透明度的数字。

fadeToggle([speed, [easing], [callback]]):通过不透明度的变化来开关所有匹配元素的淡入淡出效果,动画完成后可选的触发一个回调函数。

speed:三种预定速度的字符串(slow、normal、fast)或者动画时长的毫秒数值。

easing:指定切换效果,默认是swing,可用linear。

callback:在动画完成时执行的函数,每个元素执行一次。

注:fadeIn、fadeout、fadeToggle,运动过程中修改opacity属性值,最终只修改display属性值。而fadeTo只修改opacity属性值。

 

animate(params, [speed], [easing], [fn]):用于创建自定义动画的函数。

params:一组包含作为动画属性和终值的样式属性和及其值的集合。

speed:三种预定速度的字符串(slow、normal、fast)或者动画时长的毫秒数值。

easing:指定切换效果,默认是swing,可用linear。

fn:在动画完成时执行的函数,每个元素执行一次。

 

stop(clearQueue, [jumpToEnd]):停止所有在指定元素上正在运行的动画。如果clearQueue没有设置为true,并且队列中有等待执行的动画,他们将马上执行。

clearQueue:如果同一元素调用多个动画方法,尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始,直到第一个完成。调用stop()的时候,队列中的下一个动画开始。如果clearQueue参数为true,那么在队列中的动画其余被删除并永远不会被执行。

jumpToEnd:当前动画将停止,但该元素上的CSS属性会被立刻修改成动画的目标值。

 

delay(duration [,queueName]):设置一个延时来推迟执行队列中之后的项目。

duration:延迟时间,单位:毫秒。

queueName:队列名次,默认是Fx,动画队列。

 

jQuery.fx.off:关闭页面上所有的动画。把这个属性设置为true可以立即关闭所有动画。把这个属性设置为false,可以重新开启所有动画。

jQuery.fx.interval:设置动画的显示帧速。

三、核心

对象访问:

each(callback):以每一个匹配的元素作为上下文来执行一个函数。回调函数有两个参数,第一个参数代表索引,第二个参数代表当前遍历到的DOM对象。return true则跳至下一个循环(就像在普通循环中使用continue),return false则终止循环(就像在普通循环中使用break)。

get([index]):取得其中一个匹配的元素。 num表示取得第几个匹配的元素。与$(this)[0]等价。

index([selector|element]):搜索匹配的元素,并返回相应元素的索引值,从0开始计数。如果参数是一组DOM元素或者jQuery对象,那么返回值就是传递的元素相对于原先集合的位置。如果不传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。

数据缓存:

data([key],[value]) :在元素上存放数据,返回jQuery对象。

removeData([name|list]):在元素上移除存放的数据。

 

以上是关于jQuery框架-2.进阶系列的主要内容,如果未能解决你的问题,请参考以下文章

JQuery学习系列篇

jQuery系列 第五章 jQuery框架动画特效

python进阶

前端基础进阶(11):详细图解jQuery对象,以及如何扩展jQuery插件

jQuery系列 第四章 jQuery框架的选择器

(进阶篇)jQuery+Ajax+PHP+Mysql实现分页显示数据