jQuery事件

jQuery JavaScript 动态操作dom,事件 操作的是谁 选择器 ID class 元素
JQuery的特点
1.化繁为简
2.兼容性
jQuery对象和dom对象之间的相互转换
dom对象
var userid = document.getElementById("userid");
dom对象==》jQuery对象
var userid = $(dom2);
jQuery对象==》dom对象
var userid =$("input[name'userid']")[1];
-----------------------------------------------------------------------------------------
添加、删除一(多)个事件
1.bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。
$("button").bind("click",function(){ $("p").slideToggle();});
unbind() 方法移除被选元素的事件处理程序。
该方法能够移除所有的或被选的事件处理程序,或者当事件发生时终止指定函数的运行。
ubind() 适用于任何通过 jQuery 附加的事件处理程序。
移除所有 p 元素的事件处理器:
$("button").click(function(){ $("p").unbind();});
2.delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
 
-----------------------------------------------------------------------------------------
使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)
当点击鼠标时,隐藏或显示 p 元素:
$("div").delegate("button","click",function(){ $("p").slideToggle();});
 
undelegate() 方法删除由 delegate() 方法添加的一个或多个事件处理程序。
从所有元素删除由 delegate() 方法添加的所有事件处理器:
$("body").undelegate();
 
3.live() 方法为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素)。
$("button").live("click",function(){ $("p").slideToggle();});
4.die() 方法移除所有通过 live() 方法向指定元素添加的一个或多个事件处理程序
移除所有通过 live() 方法向 p 元素添加的事件处理程序:
$("p").die();
-----------------------------------------------------------------------------------------
获得失去焦点
1.当元素获得焦点时,发生 focus 事件。
当通过鼠标点击选中元素或通过 tab 键定位到元素时,该元素就会获得焦点。
focus() 方法触发 focus 事件,或规定当发生 focus 事件时运行的函数。
$("input").focus(function(){ $("input").css("background-color","#FFFFCC");});
 
2.当元素失去焦点时发生 blur 事件。
blur() 函数触发 blur 事件,或者如果设置了 function 参数,该函数也可规定当发生 blur 事件时执行的代码。
delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
$("input").blur(function(){ $("input").css("background-color","#D6D6FF");});
 
3.当元素的值发生改变时,会发生 change 事件。
该事件仅适用于文本域(text field),以及 textarea 和 select 元素。
change() 函数触发 change 事件,或规定当发生 change 事件时运行的函数。此事件是在改变后失去焦点时触发
$(".field").change(function(){ $(this).css("background-color","#FFFFCC");});
-------------------------------------------------------------------------------------------
 
mouse事件
1.当鼠标指针位于元素上方时,会发生 mouseover 事件。
该事件大多数时候会与 mouseout 事件一起使用。
当鼠标指针位于元素上方时时,改变元素的背景色:
$("p").mouseover(function(){ $("p").css("background-color","yellow");});
2.当鼠标指针从元素上移开时,发生 mouseout 事件。
该事件大多数时候会与 mouseover 事件一起使用。
当鼠标从元素上移开时,改变元素的背景色:
$("p").mouseout(function(){ $("p").css("background-color","#E9E9E4");});
mouseover与mouseenter
不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。
只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。
mouseout与mouseleave
不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。
只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。
3.当鼠标指针穿过元素时,会发生 mouseenter 事件。
该事件大多数时候会与 mouseleave 事件一起使用。
当鼠标指针进入(穿过)元素时,改变元素的背景色:
$("p").mouseenter(function(){ $("p").css("background-color","yellow");});
4.当鼠标指针离开元素时,会发生 mouseleave 事件。
该事件大多数时候会与 mouseenter 事件一起使用。
当鼠标指针离开元素时,改变元素的背景色:
$("p").mouseleave(function(){ $("p").css("background-color","#E9E9E4");});
 
-------------------------------------------------------------------------------------------
 
key事件
 
2.完整的 key press 过程分为两个部分:1. 按键被按下;2. 按键被松开。
当按钮被按下时,发生 keydown 事件。
keydown() 方法触发 keydown 事件,或规定当发生 keydown 事件时运行的函数。
$("input").keydown(function(){ $("input").css("background-color","#FFFFCC");});
3.当按钮被松开时,发生 keyup 事件。它发生在当前获得焦点的元素上。
keyup() 方法触发 keyup 事件,或规定当发生 keyup 事件时运行的函数。
$("input").keyup(function(){ $("input").css("background-color","#D6D6FF");});
4.keypress 事件与 keydown 事件类似。当按钮被按下时,会发生该事件。它发生在当前获得焦点的元素上。
不过,与 keydown 事件不同,每插入一个字符,就会发生 keypress 事件。不接受汉字 只接受 字母数字 符号
keypress() 方法触发 keypress 事件,或规定当发生 keypress 事件时运行的函数。与keydown的区别
$("input").keydown(function(){ $("span").text(i+=1);});
 
-------------------------------------------------------------------------------------------
加载 离开页面
当指定的元素(及子元素)已加载时,会发生 load() 事件。
该事件适用于任何带有 URL 的元素(比如图像、脚本、框架、内联框架)。
根据不同的浏览器(Firefox 和 IE),如果图像已被缓存,则也许不会触发 load 事件。
当图像加载时,改变 div 元素的文本:
$("img").load(function(){ $("div").text("Image loaded");});
 
当用户离开页面时,会发生 unload 事件。
具体来说,当发生以下情况时,会发出 unload 事件:
  • 点击某个离开页面的链接
  • 在地址栏中键入了新的 URL
  • 使用前进或后退按钮
  • 关闭浏览器
  • 重新加载页面
unload() 方法将事件0处理程序绑定到 unload 事件。
unload() 方法只应用于 window 对象。
 
当用户点击链接离开本页时,弹出一个消息框:
$(window).unload(function(){ alert("Goodbye!");});
 
 
posted @ 2018-06-28 13:06  H丶  阅读(96)  评论(0编辑  收藏  举报