jQuery--事件部分

**

(1)页面载入

**

ready(fn)

当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

要在DOM就绪时执行页面弹出框弹出"1"的操作,$(document).ready(function(){alert(1);})

**

(2)事件处理

**

on(events,[selector],[data],fn)	在选择元素上绑定一个或多个事件的事件处理函数。	给p标签添加一个点击事件，当点击的时候弹出其标签内容,$("p").on("click", function(){ alert( $(this).text() ); });
off(events,[selector],[fn])	在选择元素上移除一个或多个事件的事件处理函数。	将p标签的本身的事件清除,$("p").off()
bind(type,[data],fn)	为每个匹配元素的特定事件绑定事件处理函数。	给p标签添加一个点击事件，当点击的时候弹出其标签内容,$("p").bind("click", function(){ alert( $(this).text() ); });
one(type,[data],fn)	为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。	当所有段落被第一次点击的时候，显示所有其文本。$("p").one("click", function(){ alert( $(this).text() ); });
rigger(type,[data])	在每一个匹配的元素上触发某类事件	给一个事件传递参数,$("p").click( function (event, a, b) { // 一个普通的点击事件时，a和b是undefined类型 // 如果用下面的语句触发，那么a指向"foo",而b指向"bar" } ).trigger("click", ["foo", "bar"]);
triggerHandler(type, [data])	这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作，也不会产生事件冒泡。	如果你对一个focus事件执行了 .triggerHandler() ，浏览器默认动作将不会被触发，只会触发你绑定的动作。
unbind(type,[data|fn]])	bind()的反向操作，从每一个匹配的元素中删除绑定的事件。	将p标签的本身的事件清除,$("p").unbind()

**

(3)事件委派

**
v

delegate(selector,[type],[data],fn)

指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

当点击鼠标时，隐藏或显示 p 元素。$(“div”).delegate(“button”,“click”,function(){ KaTeX parse error: Expected 'EOF', got '}' at position 22: …slideToggle(); }̲);</td> </tr> …(“p”).undelegate();

**

(4)事件切换

**

hover([over,]out)

一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。

鼠标悬停的表格加上特定的类,$("td").hover( function () { $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); } );

**

(5)事件类型

**

blur([[data],fn])	当元素失去焦点时触发 blur 事件。	input标签失去焦点时触发函数,$("input").blur( function () { alert("Hello World!"); } );
change([[data],fn])	当元素的值发生改变时，会发生 change 事件。该事件仅适用于文本域（text field），以及 textarea 和 select 元素。当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生。	给所有的文本框增加输入验证,$("input[type='text']").change( function() {// 这里可以写些验证代码});
click([[data],fn])	触发每一个匹配元素的click事件。	将页面内所有p标签点击后隐藏。$("p").click( function () { $(this).hide(); });
dblclick([[data],fn])	当双击元素时，会发生 dblclick 事件。	给页面上每个段落的双击事件绑上 "Hello World!", 警告框$("p").dblclick( function () { alert("Hello World!"); });
error([[data],fn])	当元素遇到错误（没有正确载入）时，发生 error 事件。	给你IE的用户隐藏无效的图像:$("img").error(function(){ $(this).hide(); });
focus([[data],fn])	当元素获得焦点时，触发 focus 事件。	使人无法使用文本框:$("input[type=text]").focus(function(){ this.blur();});
focusin([data],fn)	当元素获得焦点时，触发 focusin 事件。focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。	获得焦点后会触发动画:$("p").focusin(function() { $(this).find("span").css('display','inline').fadeOut(1000); });这个之中p是父元素,span是子元素
focusout([data],fn)	当元素失去焦点时触发 focusout 事件。focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。	获得焦点后会触发动画:$("p").focusout(function() { $(this).find("span").css('display','inline').fadeOut(1000); });这个之中p是父元素,span是子元素

**

(6)键盘事件部分

**

keydown([[data],fn])	在每一个匹配元素的keydown事件中绑定的处理函数	在页面内对键盘按键做出回应，可以使用如下代码:$(window).keydown(function(event){ switch(event.keyCode) { // ... // 不同的按键可以做不同的事情 // 不同的浏览器的keycode不同 } });
keypress([[data],fn])	当键盘或按钮被按下时，发生 keypress 事件。keypress 事件与 keydown 事件类似。当按钮被按下时，会发生该事件。它发生在当前获得焦点的元素上。 不过，与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件。注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。	计算在输入域中的按键次数：$("input").keydown(function(){ $("span").text(i+=1); });
keyup([[data],fn])	当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。	当按键松开时输出"松开"字样：$(window).keyup(function(event){console.log("松开")；})

**

(7)鼠标事件部分

**

mousedown([[data],fn])	当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。	当按下鼠标按钮时，隐藏或显示元素：$("button").mousedown(function(){ $("p").slideToggle(); });
mouseenter([[data],fn])	当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。	当鼠标指针进入（穿过）元素时，改变元素的背景色：$("p").mouseenter(function(){ $("p").css("background-color","yellow"); });
mouseleave([[data],fn])	当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。 与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。 参数	当鼠标指针离开元素时，改变元素的背景色：$("p").mouseleave(function(){ $("p").css("background-color","#E9E9E4"); });
mousemove([[data],fn])	当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。 mousemove事件处理函数会被传递一个变量——事件对象，其.clientX 和 .clientY 属性代表鼠标的坐标	鼠标在指定区域移动时输出当前位置：$("p").mousemove(function(e){console.log(e.clientX+','+e.clientY);}
mouseout([[data],fn])	当鼠标指针从元素上移开时，发生 mouseout 事件。 该事件大多数时候会与 mouseover 事件一起使用。注释：与 mouseleave 事件不同，不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。	当鼠标从元素上移开时，改变元素的背景色：$("p").mouseout(function(){ $("p").css("background-color","#E9E9E4"); });
mouseover([[data],fn])	当鼠标指针位于元素上方时，会发生 mouseover 事件。 该事件大多数时候会与 mouseout 事件一起使用。 注释：与 mouseenter 事件不同，不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。	当鼠标指针位于p标签元素上方时时，改变元素的背景色：$("p").mouseover(function(){ $("p").css("background-color","yellow"); });
mouseup([[data],fn])	当在元素上放松鼠标按钮时，会发生 mouseup 事件。 与 click 事件不同，mouseup 事件仅需要放松按钮。当鼠标指针位于元素上方时，放松鼠标按钮就会触发该事件。	当松开鼠标按钮时，隐藏或显示元素：$("button").mouseup(function(){ $("p").slideToggle(); });

**

(8)其他事件

**

resize([[data],fn])	当调整浏览器窗口的大小时，发生 resize 事件。	让人每次改变页面窗口的大小时很郁闷的方法:$(window).resize(function(){ alert("Stop it!"); });
scroll([[data],fn])	当用户滚动指定的元素时，会发生 scroll 事件。 scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。	当页面滚动条变化时，执行的函数:$(window).scroll( function() { /* ...do something... */ } );
select([[data],fn])	当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。这个函数会调用执行绑定到select事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。	当文本框中文本被选中时执行的函数:$(":text").select( function () { /* ...do something... */ } );对于文本框而言，双击相当于选中
submit([[data],fn])	当提交表单时，会发生 submit 事件。该事件只适用于表单元素。	表单提交时弹出提交成功警示框：$("form").submit(function(){alert("提交成功");})
unload([[data],fn])	在当用户离开页面时，会发生 unload 事件。 具体来说，当发生以下情况时，会发出 unload 事件： 点击某个离开页面的链接 在地址栏中键入了新的 URL 使用前进或后退按钮 关闭浏览器 重新加载页面	页面卸载的时候弹出一个警告框:$(window).unload( function () { alert("Bye now!"); } );