JQ中的节点与动画

一 节点创建

节点、标签、元素、标记、DOM标签....指的都是HTML标签。

01在JQ中可以通过 $() 直接创建新的标签

$( "<li></li>" );--->此处就相当于得到了一个新的 li 标签

02 append(): 利用这个方法可以向某一个元素的内部后方添加一个新标签

$( 'ul' ).append( 新节点 )---》 将新节点添加在ul的内部

append方法是将新节点做为子元素添加,同时是添加在父元系的最后

二 节点的清空和删除

01 .remove() :直接将某个节点从页面中删除。

02 .empty():将某个节点里的子元素删除,但是当前元素还在

03 .trim() :去除字符串前后两边空格

三 document语法和回调函数

01 $(' ').click( function(){} ): 这种语法结构只能给已经存在的元素添加事件,如果想要给"未来元素"绑定事件就用用下面的语法

$( document ).on( '事件名称','触发元素',function(){

    // 事件处理函数

} );

是将某一个元素身上的某一个事件委托到document身上进行触发

02 在 slideDown() slideUp() slideToggle() hide() show() toggle() 这几个函数的小括号中都可以设置第二个参数,这个参数都是一个回调函数( cb callback ),所谓回调函数就是不用管它什么时候执行,只需要定义即可,在前面操作完成之后会自动调用的函数。

03 .prepend( 新节点 ): 可以将节点插入到某一个元素中,且每次总是插在最上方

四 透明度动画

01 fadeOut() fadeIn() fadeToggle() : 这三个为一组,用来做元素的透明度动画,小括号中都可以设置一个时间参数,单位是毫秒。

02 fadeTo(时间,目标值): 这个函数可以设置当前元素的透明度需要变化到某个值

五 JQ自定义动画语法

$( 'div' ).animate( CSS属性,时间,形式,回调 );

1 第一个参数的格式和CSS多属性操作完全一致,用来设置哪些属性需要做动画,同时设置值。

2 时间单位是毫秒表示当前动画运动的总时长

3 形式默认为 swing 表示慢快慢,还有一个 linear 表示匀速,如果设置需要加引号【 除此之后JQ官方还有一些运动形式插件包 】

4 回调同样是在前面运动结束之后自动调用的一个函数,在这个里面可以设置链式运动。但是这种看起来的链式动画JQ会认是同一个物体的同一次动画。

六 JQ动画的停止和延时

01 .stop() : 这个函数用来停止动画,它里面如果不设置参数默认值是 false 表示将正在进行的动画停止,后续动画继续。设置为 true 表示将当前元素身上所有的动画都停止。

02 .delay(): 这个函数用来做动画的延时,接收一个单位为毫秒的时间,表示动画过了多久之后才会执行。

七 三目运算符

语法:

条件语句 ? 条件成立时执行 : 条件不成立时执行

例如:

If( a > b ){ alert( 1 ); }else{ alert(2); }--> a>b ? 1 : 2

yang, xiaoyun

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: