animate 冒泡事件 事件委托 节点操作 jquery特殊效果

animate

$(selector).animate(styles,speed,easing,callback)

$('.div1').animate({'width':'+=500px'}, 2000, 'linear', function(){
	// body....
})

冒泡事件

知乎引用 – DOM模型是一个树形结构，在DOM模型中，HTML元素是有层次的。当一个HTML元素上产生一个事件时，该事件会在DOM树中元素节点与根节点之间按特定的顺序传播，路径所经过的节点都会收到该事件，这个传播过程就是DOM事件流。

事件委托

知乎引用 – 事件代理（Event Delegation），又称之为事件委托。是JavaScript中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定在子元素的响应事件（click、keydown…）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡

$(function(){
           $("#lists").delegate("li","click",function(event){
               var target = $(event.target);
               target.css("background-color","red");
     })

节点操作

$('div').append(node);     

$('div').prepend(node);   

$('div').append("<p>我是动态添加的元素</p>")

$('div').after(node); 
 
$('div').before(node); 

$('div').insertBefore(node);  

$('div').insertAfter(node); 

jquery特殊效果

fadeIn() 淡入

    $btn.click(function(){

        $('#div1').fadeIn(1000,'swing',function(){
            alert('done!');
        });

    });

fadeOut() 淡出
fadeToggle() 切换淡入淡出
hide() 隐藏元素
show() 显示元素
toggle() 切换元素的可见状态
slideDown() 向下展开
slideUp() 向上卷起
slideToggle() 依次展开或卷起某个元素