jquery显隐特效 动画 事件

显隐特效

$btn.click(function(){

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

});

$('#div1').fadeIn()      淡入

.fadeOut()    淡出

.fadeToggle() 淡入/淡出  切换

.show()      显示      慢   隐藏后执行函数

.hide()       隐藏hide("slow",function(){alert("藏了");});

.toggle()      显示/隐藏  切换

.slideDown() 展开

.slideUp()     卷起

.slideToggle() 展开/卷起  切换

$(this).next().slideToggle(); 点击菜单 子元素展开/关闭

动画

        样式（部分支持）   时间 速度(始,终慢 默认)

$('#div1').animate({300,height:300}, 1000, ‘swing’, function(){

alert('动画结束执行函数');

$(this).animate({height:'+=100'},1000,linear,function(){...}) 执行动画

});                宽=宽+100px      匀速

$('#div1').stop();  停止动画

$('.list li').html('111');    数组元素 内容都为'111'

$('.list li').each(  function(i){ $(this).html(i); }  )

数组元素 每一个         内容为 其索引

获取元素的尺寸  设置用.css

.width()           .height()         获取元素 宽 高  

.innerWidth()      .innerHeight()       包括padding  

.outerWidth()      .outerHeight()       包括padding、border  

.outerWidth(true)   .outerHeight(true)   包括padding、border、margin

$('div').offse()     获取元素相对页面的绝对位置

$('div').offse().left  

$('div').offse().top

$(window).height();       获取浏览器窗口高度

$(document).height();     获取页面高度

$(window).scroll(function(){ ... })  页面滚动时 执行函数

$(document).scrollTop();  从顶端 总共滚动多少距离

$(document).scrollLeft();  获取当前页面滚动位置到左端距离

$(window).scroll(function(){

        if($(window).scrollTop() > 200){ //滚动大于200显示

            $('.top').slideDown();

        }else{

            $('.top').slideUp();//hide()也行

        }

    });

事件 触发 动画

$('div').click( function(){  $(this).stop().animate({marginTop:100})   })

.blur()        元素失去焦点

.focus()       元素获得焦点

.change()     表单元素的值发生变化

.click()       鼠标单击

.dblclick()    鼠标双击

.mouseover() 鼠标进入 向外冒泡（子元素也触发）

.mouseout()  鼠标离开 冒泡

.mouseenter() 鼠标进入 不冒泡

.mouseleave() 鼠标离开 不冒泡

.hover( function(){...}, function(){...})  (鼠标进入函数, 鼠标离开函数)

.mouseup()   松开鼠标

.mousedown() 按下鼠标

.mousemove() 鼠标在元素内部移动

.keydown() 按下键盘

.keypress() 按下键盘

.keyup()   松开键盘          检查用户名已存在

.load()    元素加载完毕       $(window).load(function(){ ... })

.ready()   DOM加载完成      $(document).ready(function(){...})

.resize()   浏览器窗口改变尺寸 $(window).resize(function(){ ... })

.scroll()   滚动条的位置发生变化

.select()   用户选中文本框中的内容

.submit()  用户递交表单

.toggle()  根据鼠标点击的次数，依次运行多个函数

.unload() 用户离开页面

自定义事件

element.bind("hello",function(){ alert("hello!"); });   绑定hello事件

element.trigger("hello");                        触发hello事件

element.bind("click",function(){ alert("click"); });    绑定click事件

element.trigger("click");                       触发事件

阻止事件

$('div').click( function(event){  alert(1);  event.stopPropagation()  })

                                          阻止事件冒泡

$(document).contextmenu(function(event) {event.preventDefault();});

            右键菜单                      阻止右键

$(document).contextmenu(function(event) {return false;});

            右键菜单               阻止 默认行为(弹出右键菜单)

$('div').click( function(event){  alert(1);  return false;  })

                                阻止 默认行为(冒泡—点击上层元素)

事件委托 （提高性能）

传统写法                                <ul id="list">

$('#list li').click(function(event) {             <li>1</li>

        $(this).css({background:'red'});          <li>2</li>

});                                     <li>3</li>

</ul>

事件委托

    $('#list').delegate('li', 'click', function(event) {  //click绑了list 冒泡给li

        $(this).css({background:'red'});

$('#list').undelegate();     取消事件委托

});

插入节点

var $span = $('<span>这是一个span元素</span>');    jq元素

$('div').append($span);    $span.appendTo('#div1');

.append()           .appendTo()：  添加子元素  从后面插入

.prepend()          .prependTo()：  添加子元素  从前面插入

.after()             .insertAfter()：  添加弟元素  从后面插入

.before()           .insertBefore()： 添加兄元素  从前面插入

删除节点

$('#div1').remove();