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!");});