jQuery事件执行 写在前面，jquery代码执行时机对比：$(docuemnt).ready(function(){xxx 代码}); 与window.onload()=function(){
jQuery事件执行
写在前面，jquery代码执行时机对比：$(docuemnt).ready(function(){xxx 代码}); 与window.onload()=function(){xxx 代码}的区别。
window.onload()程序是等所有文件都下载完成，而$(docuemnt).ready(）是dom元素都可以操作时就执行，不必等所有的关联文件都下载成功。所以如果要对关联文件的高度和宽度下载时，用$(docuemnt).ready(）就可能出错，因为该文件还没有成功下载，实际的高度和宽度是无法拿到的。所以css文件的引用最好卸载js文件之前，这样肯定会先下载。
两者之间的区别：window.onload()只能指定其中一个函数，$(docuemnt).ready(）可以重复定义，而且都会执行。按照位置的顺序进行执行。
$(document).ready(function(){ alert("chen");});$(document).ready(function(){ alert("de");});$(document).ready(function(){ alert("kai");});jquery的一些简单的使用技巧：入口函数，作用都是一致的。
$(document).ready(function(){});$().ready(function(){});$(function(){});正片开始，简单的事件（bind()函数的用法）
$(document).ready(function(){ $('#pBtn').bind('click',function(){ $('p').css("background-color","#CCCCCC"); }); $('#hBtn').bind('click',function(){ $('h1').css("background-color","#F0F8FF"); }); });//html页面<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery.js" ></script> <script type="text/javascript" src="js/event.js" ></script> </head> <body> <p>this is a button event!</p> <h1>this is a button event!</h1> <input type="button" id="pBtn" value="change_p"/> <input type="button" id="hBtn" value="change_h"/> </body></html>有一部分事件简写方法，不用为每一个事件进行绑定。
$(document).ready(function(){ sampleEvent(); $('#hBtn').bind('click',function(){ $('h1').css("background-color","#F0F8FF"); }); });function sampleEvent(){ $('#pBtn').click(function(){ $('p').css("background-color","#CCCCCC"); }); /*$('#pBtn').bind('click',function(){ $('p').css("background-color","#CCCCCC"); }); */确实少写了一些单词，但对称性来讲注释掉的代码其实更加优雅，简写事件的所有方法在下面的表格中。}| 方法 | 描述 |
|---|---|
| bind() | 向匹配元素附加一个或更多事件处理器 |
| blur() | 触发、或将函数绑定到指定元素的 blur 事件 |
| change() | 触发、或将函数绑定到指定元素的 change 事件 |
| click() | 触发、或将函数绑定到指定元素的 click 事件 |
| dblclick() | 触发、或将函数绑定到指定元素的 double click 事件 |
| delegate() | 向匹配元素的当前或未来的子元素附加一个或多个事件处理器 |
| die() | 移除所有通过 live() 函数添加的事件处理程序。 |
| error() | 触发、或将函数绑定到指定元素的 error 事件 |
| event.isDefaultPrevented() | 返回 event 对象上是否调用了 event.preventDefault()。 |
| event.pageX | 相对于文档左边缘的鼠标位置。 |
| event.pageY | 相对于文档上边缘的鼠标位置。 |
| event.preventDefault() | 阻止事件的默认动作。 |
| event.result | 包含由被指定事件触发的事件处理器返回的最后一个值。 |
| event.target | 触发该事件的 DOM 元素。 |
| event.timeStamp | 该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。 |
| event.type | 描述事件的类型。 |
| event.which | 指示按了哪个键或按钮。 |
| focus() | 触发、或将函数绑定到指定元素的 focus 事件 |
| keydown() | 触发、或将函数绑定到指定元素的 key down 事件 |
| keypress() | 触发、或将函数绑定到指定元素的 key press 事件 |
| keyup() | 触发、或将函数绑定到指定元素的 key up 事件 |
| live() | 为当前或未来的匹配元素添加一个或多个事件处理器 |
| load() | 触发、或将函数绑定到指定元素的 load 事件 |
| mousedown() | 触发、或将函数绑定到指定元素的 mouse down 事件 |
| mouseenter() | 触发、或将函数绑定到指定元素的 mouse enter 事件 |
| mouseleave() | 触发、或将函数绑定到指定元素的 mouse leave 事件 |
| mousemove() | 触发、或将函数绑定到指定元素的 mouse move 事件 |
| mouseout() | 触发、或将函数绑定到指定元素的 mouse out 事件 |
| mouseover() | 触发、或将函数绑定到指定元素的 mouse over 事件 |
| mouseup() | 触发、或将函数绑定到指定元素的 mouse up 事件 |
| one() | 向匹配元素添加事件处理器。每个元素只能触发一次该处理器。 |
| ready() | 文档就绪事件（当 HTML 文档就绪可用时） |
| resize() | 触发、或将函数绑定到指定元素的 resize 事件 |
| scroll() | 触发、或将函数绑定到指定元素的 scroll 事件 |
| select() | 触发、或将函数绑定到指定元素的 select 事件 |
| submit() | 触发、或将函数绑定到指定元素的 submit 事件 |
| toggle() | 绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。 |
| trigger() | 所有匹配元素的指定事件 |
| triggerHandler() | 第一个被匹配元素的指定事件 |
| unbind() | 从匹配元素移除一个被添加的事件处理器 |
| undelegate() | 从匹配元素移除一个被添加的事件处理器，现在或将来 |
| unload() | 触发、或将函数绑定到指定元素的 unload 事件 |
复合事件：对于一个事件想要交替执行多个function的复合事件，可以使用jquery .toggle()和.hover()这两个自定义事件处理程序。
toggle()是对点击事件的自定义； .hover()是对鼠标在上或在下事件进行自定义。
//css内容.hide { display: none;}.heighlight { background-color: chartreuse; }//jquery$(document).ready(function(){ sampleEvent(); sampleEvent1(); });function sampleEvent(){ $('#pBtn').toggle(function(){ $('p').addClass('hide'); },function(){ $('p').removeClass('hide'); });}function sampleEvent1(){ $('#hBtn').hover(function(){ $('h1').addClass('heighlight'); },function(){ $('h1').removeClass('heighlight'); }); }//html<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/event.css" /> <script type="text/javascript" src="js/jquery.js" ></script> <script type="text/javascript" src="js/event.js" ></script> </head> <body> <p>this is a button event!</p> <h1>this is a button event!</h1> <input type="button" id="pBtn" value="change_p"/> <input type="button" id="hBtn" value="change_h"/> </body></html>
