jquery链式调用
jquery对象的方法会在执行完后返回这个jquery对象,所有jquery对象的方法可以连起来写:
$('#div1') // id为div1的元素.children('ul') //该元素下面的ul子元素.slideDown('fast') //高度从零变到实际高度来显示ul元素.parent() //跳到ul的父元素,也就是id为div1的元素.siblings() //跳到div1元素平级的所有兄弟元素.children('ul') //这些兄弟元素中的ul子元素.slideUp('fast'); //高度实际高度变换到零来隐藏ul元素
jquery动画
通过animate方法可以设置元素某属性值上的动画,可以设置一个或多个属性值,动画执行完成后会执行一个函数。
$('#div1').animate({ width:300, height:300},1000,swing,function(){ alert('done!');});
参数可以写成数字表达式:
$('#div1').animate({ width:'+=100', height:300},1000,swing,function(){ alert('done!');});
尺寸相关、滚动事件
1、获取和设置元素的尺寸
width()、height() 获取元素width和height innerWidth()、innerHeight() 包括padding的width和height outerWidth()、outerHeight() 包括padding和border的width和height outerWidth(true)、outerHeight(true) 包括padding和border以及margin的width和height
2、获取元素相对页面的绝对位置
offse()
3、获取可视区高度
$(window).height();
4、获取页面高度
$(document).height();
5、获取页面滚动距离
$(document).scrollTop(); $(document).scrollLeft();
6、页面滚动事件
$(window).scroll(function(){ ...... })
jquery事件
事件函数列表:
blur() 元素失去焦点focus() 元素获得焦点change() 表单元素的值发生变化click() 鼠标单击dblclick() 鼠标双击mouseover() 鼠标进入(进入子元素也触发)mouseout() 鼠标离开(离开子元素也触发)mouseenter() 鼠标进入(进入子元素不触发)mouseleave() 鼠标离开(离开子元素不触发)hover() 同时为mouseenter和mouseleave事件指定处理函数mouseup() 松开鼠标mousedown() 按下鼠标mousemove() 鼠标在元素内部移动keydown() 按下键盘keypress() 按下键盘keyup() 松开键盘load() 元素加载完毕ready() DOM加载完成resize() 浏览器窗口的大小发生改变scroll() 滚动条的位置发生变化select() 用户选中文本框中的内容submit() 用户递交表单toggle() 根据鼠标点击的次数,依次运行多个函数unload() 用户离开页面
绑定事件的其他方式
$(function(){ $('#div1').bind('mouseover click', function(event) { alert($(this).html()); });});
取消绑定事件
$(function(){ $('#div1').bind('mouseover click', function(event) { alert($(this).html()); // $(this).unbind(); $(this).unbind('mouseover'); });});