标签：
1.$(document).ready()方法和window.onload方法，有相似的功能，但是在执行时机方面是有区别的，window.onload方法是在网页中所有的元素（包括所有的关联文件）完全加载到浏览器后才执行，即JavaScript此时才可以访问网页中的元素，而通过jquery中的$(document).ready()方法注册的处理程序，在dom完全就绪时就可以调用。举个例子，一个大型的图库网站，为网页中所有图片添加行为，单击图片让他隐藏或显示，如果使用window.onload来处理，那么用户必须等待每一张图片加载完毕后，才可以进行操作，如果用jquery中的$(document).ready()来处理，只要dom就绪时就可以操作了，不需要所有图片加载完毕。
2.多次使用，假设网页中俩个函数：
function one(){ alert("one"); } function two(){ alert("two"); } window.onload=one; window.onload=two;
运行后只会弹出"two",原因是JavaScript中的onload事件一次只能保存对一个函数的引用，他会自动用后面的函数覆盖前面的函数。为了达到俩个函数顺序触发的效果，只能创建一个新的JavaScript方法来实现：
window.onload=function(){ one(); tow(); }
这样确实能解决某些问题，但还是不能满足某些需求，例如有多个JavaScript文件，每个文件都要用到window.onload方法，这种情况用上面提到的方法会非常麻烦，而jquery中的$(document).ready()方法能很好处理类似情况：
function one(){ alert("one"); } function two(){ alert("two"); } $(document).ready(function(){ one(); }) $(document).ready(function(){ two(); })
运行后，先弹"one",后弹"two"。
3.简写方式：
$(document).ready(function(){ //编写代码 }) 可以简写为： $(function(){ //编写代码 }) 也可以简写为： $().ready(function(){ //编写代码 })
第三种方法因为$(document)可以写为$(),$()不带参数时，默认参数就是document。
4.1.事件绑定，在文档装载完成后，如果打算为元素绑定事件来完成某些操作，可以使用bind方法，格式为bind(type [, data],fn);
type就是事件的类型，常见有
blur(元素失去焦点)、focus(元素得到焦点)、load(元素已加载)、resize(调整浏览器窗口大小)、scroll(滚动指定元素)、unload(用户离开页面)、click(单击)、dblclick(双击)、mousedown(按下鼠标)、mouseup(松开鼠标)、mouseover(鼠标指针位于元素上方)、mouseout(鼠标指针离开元素)、mouseenter(鼠标指针穿过元素)、mouseleave(鼠标指针离开元素)、change(元素的值发生改变)、select(textarea 或文本类型的 input 元素中的文本被选择)、submit(提交表单)、keydown(按下按键)、keypress(keypress 事件与 keydown 事件类似。当按钮被按下时，会发生该事件。它发生在当前获得焦点的元素上。
不过，与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件)、keyup(按钮被松开)、error)()。
简单的例子：
$(".btn").bind(click,function(){
alert("点击啦~");
})
也可以简写：
$(.btn).click(function(){
alert("点击啦~");
})
4.2合成事件hover：语法结构是hover(enter,leave);光标移动到元素上时，触发指定的第一个函数（enter）,光标移出这个元素时，触发第二个函数（leave）,继续例子：
$(".btn").hover(function(){
alert("移动到上面了~");
},function(){
alert("离开了~");
})
5.事件冒泡：
<div class="content"> 外层元素 <span>内层元素</span> </div> <div class="msg"></div> 以上是结构，下面添加点击行为； $(document).ready(function(){ $(".content").click(function(){ var txt=$(".msg").html()+"<p>外层元素被单击</p>"; $(".msg").html(txt); }) $("span").click(function(){ var txt=$(".msg").html()+"<p>内层元素被单击</p>"; $(".msg").html(txt); }) $("body").click(function(){ var txt=$(".msg").html()+"<p>body元素被单击</p>"; $(".msg").html(txt); }) })
当点击内层元素时，一下输出三条，而我们原本是想输出"内层元素被单击"
引发的问题：事件冒泡可能会引起预料之外的效果，上例中，本来只想触发span元素的click事件，然而div元素和body元素的click事件也同时被触发了，因此，有必要对事件的作用范围作出限制，
停止事件冒泡：stoPropagation();代码如下：
$("span").click(function(event){
var txt=$(".msg").html()+"<p>内层元素被单击</p>";
$(".msg").html(txt);
event.stopPropagation(); //停止事件冒泡
})
6.阻止默认行为：网页中的元素有自己默认的行为，单击超链接会跳转，单击提交按钮后表单会提交，有时需要阻止表单的默认行为，jquery中用preventDefault()方法，以下例子验证输入框文字是否为空；
$(function(){ $("#btn").click(function(event){ var username=$("#username").val(); if(username==""){ alert("输入框不能为空值~"); event.preventDefault(); //阻止默认行为——表单提交 } }) }) <form> <input type="text" id="username" /><br> <input type="submit" id="btn" /> </form>
如果想同时阻止冒泡，和阻止默认行为，可以书写：return false,一种简写方式。
7、事件对象的属性。
7.1、event.type();获取到事件的类型。
7.2、event.preventDefault();阻止默认事件行为。
7.3、event.stopPropagation();阻止事件的冒泡。
7.4、event.target();获取到触发事件的元素。
7.5、event.relatedTarget();mouseover和mouseout所发生的元素是可以通过event.target()来获取，相关元素是通过event.relatedTarget();
7.6、event.pageX()和event.pageY()方法，作用是获取到光标相对于页面的x坐标和y坐标。
7.7、event.which();在鼠标单击事件中获取到鼠标的左中右键;1等于鼠标左键，2等于鼠标中键，3等于鼠标右键。
8、移除事件：unbind();例子说明
<script type="text/javascript"> $(function(){ $(".btn").click(function(){ $("#text").append("<p>我的绑定函数一</p>"); }).click(function(){ $("#text").append("<p>我的绑定函数二</p>"); }).click(function(){ $("#text").append("<p>我的绑定函数三</p>"); }); }) </script> <button class="btn">单击我</button> <div id="text"></div>
单击后，出现三个p段落，下面新创建一个按钮，单击移除单击事件。
<button id="delAll">移除</button> //新的移除按钮 $("#delAll").click(function(){ $(".btn").unbind("click"); //移除单击事件 }) 由于此按钮只有click事件，可以不加参数， $("#delAll").click(function(){ $(".btn").unbind(); //移除所有事件 }) unbind()语法为unbind([type][,data]); //第一参数是类型，第二个参数时要移除的函数，具体说明如下： 1.如果没有参数，移除所有事件。 2.如果提供了事件类型作为参数，则移除该类型的绑定事件。 3.如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的处理函数会被移除。
如果我们想删除同一个元素上绑定的同种类型函数其中一个呢，如下方法解决，为各个函数起一个变量：
<script type="text/javascript"> $(function(){ $(".btn").click(myFun1=function(){ $("#text").append("<p>我的绑定函数一</p>"); }).click(myFun2=function(){ $("#text").append("<p>我的绑定函数二</p>"); }).click(myFun3=function(){ $("#text").append("<p>我的绑定函数三</p>"); }); $("#delAll").click(function(){ $(".btn").unbind("click",myFun2); //移除变量为myFun2的 }) }) </script> <button class="btn">单击我</button> <div id="text"></div> <button id="delAll">移除事件</button>
one()方法，只触发一次，随后立即解除绑定。
$(document).ready(function(){ $("p").one("click",function(){ $(this).animate({fontSize:"+=6px"}); });
9.模拟操作：以上的例子是用户单击后触发事件，有时，需要通过模拟用户操作，来达到单击的效果，例如用户进入页面后，就发生单击事件，而不需要用户去主动单击。
$(".btn").trigger("click"); //trigger()方法完成模拟操作
可以简写为：
$(".btn").click();
trigger()方法可以触发自定义事件：
$(".btn").bind("myclick",function(){
$("#test").append("<p>我的自定义事件</p>");
})
想要触发这个事件，可以
$(".btn").trigger("myclick");
标签：
原文地址：http://www.cnblogs.com/xlj-code/p/5729605.html
