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() (超出浏览器的部分))