jquery常用方法总结

1、jquery 事件方法

（1）bind()方法。

​ bind() 方法向被选元素添加一个或多个事件处理程序，以及当事件发生时运行的函数。

语法

$(selector).bind(event,data,``function``,map)

例如;

这是测试段落1
这是测试段落2

（2）click()方法

​ 当单击元素时，发生 click 事件。click() 方法触发 click 事件，或规定当发生 click 事件时运行的函数。

语法：

$("selector").click(function)

例如：

$("#p1").click(function(){$(this).text("这是click事件。");
});

（3）dblclick() 方法

​ dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数。

​ 提示：dblclick 事件也会产生 click 事件。如果这两个事件都被应用于同一个元素，当双击元素时，会执行两次单击事件。所以应尽量避免在同一个元素上同时使用click()方法和dblclick()方法。

例如：

$("#p1").dblclick(function(){$(this).text("这是dblclick事件。");
});

（4）blur()方法、focus()方法

​ 当元素失去焦点时发生 blur 事件。blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数。

​ 当元素获得焦点时发生 focus 事件。focus () 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数。

​ 提示：该方法常与 focus() 方法一起使用。

例如：

输入框一：

（5）change()方法

​ 当元素的值改变时发生 change 事件（仅适用于表单字段）。change() 方法触发 change 事件，或规定当发生 change 事件时运行的函数。

​ 注意：当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，change 事件会在元素失去焦点时发生。

例如：

$("#txt1").change(function(){$("span").text("内容改变");
})

（6）keydown()方法、keypress()方法、keyup()方法

1. keydown - 键被按下
2. keypress - 完成一次按键
3. keyup - 键被松开

​ 当键盘键被按下时发生 keydown 事件。keydown() 方法触发 keydown 事件，或规定当发生 keydown 事件时运行的函数。

​ 提示：可以使用 event.which属性来返回哪个键盘键被按下。

例如：

				$("#txt1").keydown(function(e){$("span").text("按键被按下。");alert(e.which);});$("#txt1").keydown(function(){$("span").text("完成一次按键。");});$("#txt1").keydown(function(){$("span").text("按键被松开。");});

（7）mousedown()方法、mouseup()方法

​ 当鼠标指针移动到元素上方，并按下鼠标左键时，会发生 mousedown 事件。mousedown() 方法触发 mousedown 事件，或添加当发生 mousedown 事件时运行的函数。

​ 当鼠标指针移动到元素上方，并松开鼠标左键时，会发生 mouseup 事件。mouseup() 方法触发 mouseup 事件，或添加当发生 mouseup 事件时运行的函数。

​ 提示：mousedown() 方法通常与mouseup()方法一起使用。

（8）mouseenter()方法、mouseleave()方法、mouseover()方法、mouseout()方法

​ 当鼠标指针穿过（进入\离开）被选元素时，会发生 mouseenter\mouseleave 事件。mouseenter() 方法触发 mouseenter 事件，或添加当发生 mouseenter 事件时运行的函数。mouseleave() 方法触发 mouseleave 事件，或添加当发生 mouseleave 事件时运行的函数。

​ 注意：mouseenter 事件和mouseleave 事件只有在鼠标指针进入\离开被选元素时被触发，而mouseover 事件和mouseout 事件在鼠标指针进入\离开任意子元素时也会被触发。

​ **提示：**该事件通常与 mouseleave事件一起使用。

例如：

这是父级div
这是后代div

（9）mousemove()方法

​ 当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。mousemove() 方法触发 mousemove 事件，或添加当发生 mousemove 事件时运行的函数。

​ **注意：**用户把鼠标移动一个像素，就会发生一次 mousemove 事件。处理所有 mousemove 事件会耗费系统资源。请谨慎使用该事件。

例如：

$(document).mousemove(function(event){$("span").text("鼠标坐标："+event.pageX + ", " + event.pageY);
});

（10）hover()方法

​ hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。方法触发 mouseenter和mouseleave事件。

​ 注意: 如果只指定一个函数，则 mouseenter 和 mouseleave 都执行它。

例如：

$("#div1").hover(function(){$(this).css("background-color","lightgray");
},function(){$(this).css("background-color","darkcyan");
});

（11）toggle()方法

​ toggle()方法相当于show()方法和hide()方法的结合，执行toggle()方法时，会在隐藏和显示两种状态间进行切换。

例如：

$("div").click(function(){$(this).children().toggle();
})