jQuery进阶

jquery特效

$btn.click(function(){
        $('#div1').fadeIn(1000,'swing',function(){
            alert('done!');
        });
}); 
fadeIn() 淡入 
fadeOut() 淡出
fadeToggle() 切换淡入淡出
fadeTo(时间，透明度) 设置透明度 
hide() 隐藏元素 
show() 显示元素 
toggle() 切换元素的可见状态 
slideDown() 向下展开 
slideUp() 向上卷起 
slideToggle() 依次展开或卷起某个元素

链式调用

• jquery对象的方法会在执行完后返回这个jquery对象，所有jquery对象的方法可以连起来写

$('#div1') // id为div1的元素 
.slideDown('fast') //高度从零变到实际高度来显示ul元素 
.children('ul') //该元素下面的ul子元素
.parent()  //跳到ul的父元素，也就是id为div1的元素 
.siblings()  //跳到div1元素平级的所有兄弟元素 
.children('ul') //这些兄弟元素中的ul子元素 
.slideUp('fast') //高度实际高度变换到零来隐藏ul元素

循环

• 对jquery选择的对象集合分别进行操作，可用对象上的each方法

$(function(){
    // dw提示形参e sublime提示形参event
    // 形参指代的是索引值
    $('.list li').each(function(event){
        $(this).html(event);
    })
})
......
<ul class="list">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

事件

• 事件函数列表

blur() 元素失去焦点
focus() 元素获得焦点
resize() 当你的窗口尺寸发生变化的时候执行的命令
click() 鼠标单击
mouseover() 鼠标进入
mouseout() 鼠标离开
mouseenter() 鼠标进入
mouseleave() 鼠标离开
hover() 同时为mouseenter和mouseleave综合体
ready() DOM加载完成
submit() 用户递交表单
//默认提交行为：某些浏览器，谷歌特定版本或安卓系统的手机浏览器：只要有文本框，不管是否输入，默认自动向服务器发送提交信息
scroll() 网页滚动事件(scrollTop 检测网页滚动坐标值 $(document,window).scrollTop() (超出浏览器的部分))