$(document).ready();就是获取文档就绪的时候。
$(document).ready(function(){ //在这里写代码 });还可以简写成：
$().ready(function(){ //在这里写代码 });在jQuery中，$(document).ready();方法代替传统的window.onload()方法，二者的主要区别是： 1、在一个页面上可以无限制的使用$(document).ready();方法，各个方法之间并不冲突，会按照在代码中的顺序依次执行，window.onload()方法在一个页面中只能使用一次。 2、在一个文档完全下载到浏览器(包括所有关联的文件)就会响应window.onload()方法。而$(document).ready();方法是在所有的DOM元素完全就绪以后就可以调用，不包括关联的文件。
在页面加载完毕以后，可以通过为元素绑定事件完成相应的操作。事件绑定通常分为元素绑定事件、移除绑定事件和绑定一次性事件处理。
为元素绑定事件可以使用bind()方法，语法结构为：
bind(type,[data],fn)1、type：事件类型 2、data:可选参数，作为event.data属性值传递给事件对象的额外数据对象。大多数情况下不使用该参数。 3、fn：绑定的事件处理程序。 【例】为h3元素绑定click事件
<style> #content{ text-indent: 2em; display: none; } </style> <div id="first"> <h3 class="title">什么是编程词典？</h3> <div id="content"> 明日编程词典系列软件是由近百位软件开发专业人士 联手打造；国内第一部为编程人员研制的编程专业软 件；聚集十几年软件开发经验和专业文档积累；提供 价值百万的超值源码；内置强大的智能搜索引擎编程 词典个人版，珍藏版现已震撼热卖！ </div> </div> <script type="text/javascript"> $(document).ready(function(){ $("#first h3.title").bind("click",function(){ $(this).next().show(); }) }); </script>实现效果：点击文字什么是编程词典？，可以看到隐藏在div中的内容。
为元素移除绑定事件可以用unbind()方法，语法结构如下：
unbind([type],[data])type:可选参数，用于指定事件类型 data:可选参数，用于指定要从每个匹配元素的事件中反绑定的事件处理函数。
<script type="text/javascript"> $(document).ready(function(){ $("#first h3.title").bind("click",function(){ $(this).next().show(); }).bind("mouseover",function(){ $(this).append("<p>我绑定了mouseover事件</p>"); }) }); </script>为元素绑定一次性事件可以使用one()方法。语法结构如下：
one(type,[data],fn)1、type：用于指定事件类型 2、data:可选参数，作为event.data属性值传递给事件对象的额外数据对象。 3、fn：绑定到每个匹配元素的事件上面的处理函数。
<script> $(document).ready(function(){ $("div").one("click",function(){ alert($(this).text()); }); }); </script>jQuery提供了模拟用户的操作触发事件、模拟悬停事件、模拟鼠标连续单击事件
trigger()方法和triggerHandler()方法来模拟用户的操作触发事件。 trigger()方法和triggerHandler()方法的相同点与不同点 相同点：语法格式相同 例如触发id为button的按钮的click事件
$("#button").trigger("click"); $("#button").triggerHandler("click");不同点：triggerHandler()方法不会导致浏览器同名的默认行为被执行，trigger()方法触发事件时会导致浏览器同名的默认行为被执行。 【例】在页面载入完成就执行按钮的click事件，但是并不需要用户自己操作。 在<body>标记中，添加一个button按钮
<input type="button" name="button" id="button" value="普通按钮"/>为按钮绑定click事件，弹出参数msg1和msg2连接到一起的字符串，再使用trigger()方法模拟click事件。
<script> $(document).ready(function(){ $("input:button").bind("click",function(event,msg1,msg2){ alert(msg1+msg2); //弹出提示对话框 }).TriggerHandler("click",["欢迎访问","明日科技"]); //页面加载触发单击事件 }); </script>模仿悬停事件是指模仿鼠标移动到一个对象上面又从该对象上面移出的事件。可以用hover(over,out)方法实现。 over:用于指定当鼠标在移动到匹配元素上时触发的函数。
out:用于指定当鼠标在移出匹配元素上时触发的函数。 【例】隐藏超链接地址
<div style="float: right;text-align: right;"> <a href="demo5.1.4.2.html">首页</a> | <a href="demo5.1.4.2.html" class="main">登录</a> | <a href="demo5.1.4.2.html" class="main">注册</a> | <a href="demo5.1.4.2.html" class="main">找回密码</a> </div> <script> $(document).ready(function(){ $("a.main").hover(function(){ window.status="http://www.mrbccd.com";return true;//设置状态栏文本 },function(){ window.status="完成";return true; //设定状态栏文本 }); }); </script>事件冒泡(由具体到一般) 事件捕获(由一般到具体)
事件对象提供了一个stopPropagation()方法，使用该方法可以阻止事件冒泡。
$(".test1").mouseover(function(event){ $(".test1").addClass("redBorder"); event.stopPropagation(); //阻止事件冒泡 });网页的元素有自己的默认行为，使用preventDefault()方法可以阻止浏览器的默认行为。
event.preventDefault() //阻止浏览器默认操作如果想同时停止事件冒泡和浏览器默认行为，可以在事件处理程序中返回false
return false;【例】阻止表单提交
<form action="demo5.1.5.4.html" method="post"> 用户名：<input type="text" id="username" /><br/> <input type="submit" value="注册" id="subbtn"/> </form> <script> $(document).ready(function(){ $("#subbtn").bind("click",function(){ var username=$("#username").val(); if(username==""){ alert("用户名不能为空！"); //弹出提示信息 $("#username").focus(); //将焦点移至文本框中 event.preventDefault(); } }) }); </script>【例】Event对象
<div id="ediv">Event对象</div> <script> $(document).ready(function(){ $("#ediv").mouseover(function(event){ //获取鼠标相对于页面的坐标 alert("当前鼠标的位置:"+event.pageX+","+event.pageY); }) }); </script>获取事件类型：event.type
$("a").click(function(){ alert(event.type); //获取事件类型 return false; //阻止链接跳转 })获取到触发事件的元素：event.target relatedTarget事件属性返回与事件的目标节点相关的节点：event.relatedTarget。
hide()方法可以隐藏匹配元素，相当于css样式中display设置为none，hide()方法的两种语法格式：
hide() //不带参数 hide(speed,[callback]) //用于以优雅的动画隐藏所有匹配的元素，并在隐藏完成后可选的触发一个回调函数speed:用于指定动画的时长。可以是数字(单位毫秒)，也可以是默认参数slow(600毫秒)，normal(400毫秒)，fast(200毫秒)。注意使用自定义参数不需要加引号，使用默认参数需要加引号。 callback:可选参数，用于指定隐藏完成后要触发的回调函数。
show()方法可以显示匹配(隐藏的被选元素)的元素，相当于css样式里的display设置为block或inline或除了none以外的值，show()方法的两种语法格式：
show() //用于实现不带任何效果的显示匹配元素 show(speed,[callback]) //用于以优雅的动画显示所有匹配的元素，并在显示完成后可选的触发一个回调函数【例】使用hide方法和show方法实现一个自动隐藏式菜单
<div id="menu"> <ul> <li><a href="www.mingribook.com">图书介绍</a></li> <li><a href="www.mingribook.com">新书预告</a></li> <li><a href="www.mingribook.com">图书销售</a></li> <li><a href="www.mingribook.com">勘误发布</a></li> <li><a href="www.mingribook.com">资料下载</a></li> <li><a href="www.mingribook.com">好书推荐</a></li> <li><a href="www.mingribook.com">技术支持</a></li> <li><a href="www.mingribook.com">联系我们</a></li> </ul> </div> <img src="../images/title.gif" width="30" height="80" id="flag"/> <style type="text/css"> #menu{ width: 70px; height: 300px; float: left; background-image: url(../images/menu_bg.gif); } ul{ font-size:12px ; list-style: none; margin:0px; padding:0px; } li{ line-height: 32px; } a{ text-decoration:none } a:hover{ color:#F00} </style> <script type="text/javascript"> $(document).ready(function(){ $("#flag").mouseover(function(){ if($("#menu").is(':hidden')){ // 判断菜单是否为隐藏状态 $("#menu").show(300); // 如果隐藏，则将菜单显示 } }); $("#menu").hover(null,function(){ $("#menu").hide(300); //隐藏菜单 }); }); </script>鼠标移出隐藏菜单的效果 鼠标移入隐藏菜单的效果
toggle()方法可以实现切换元素的可见状态，也就是如果元素是可见的，切换为隐藏；如果元素是隐藏的，切换为可见。 【例】通过单击普通按钮隐藏和显示全部<div>元素。
<div>明日科技</div> <div>明日图书</div> <input type="button" value="切换状态" /> <script type="text/javascript"> $(document).ready(function(){ $("input[type='button']").click(function(){ $("div").toggle(); //切换所有div元素的显示状态 }); }); </script>【例】承接上一个小例子，修改淡入淡出动画的隐藏菜单
<script type="text/javascript"> $(document).ready(function(){ $("#flag").mouseover(function(){ $("#menu").fadeIn(700); //淡入效果 }); $("#menu").hover(null,function(){ $("#menu").fadeOut(700); //淡出效果 }); $("flag").hover(null,function(){ $("menu").fadeTo(900,0.15); //不透明度以渐进的方式在0.9s将图片淡入淡出至15%不透明 }); $("#menu").hover(null,function(){ $("#menu").hide(300); //隐藏菜单 }); }); </script>1、slideDown()方法：可以向下增加元素高度动态显示匹配的元素。
slideDown(speed,[callback])【例】滑动显示id为ad的div元素
<div> <div id="ad" style="display: none;"> 吉林省明日科技有限公司 </div> 明日图书 </div> <script type="text/javascript"> $(document).ready(function(){ $("#ad").slideDown(600); }); </script>2、slideUp()方法：可以向上减少元素高度动态隐藏匹配的元素。
slideUp(speed,[callback])【例】滑动隐藏id为ad的div元素
<script type="text/javascript"> $(document).ready(function(){ $("ad").slideUp(10000); }); </script>3、slideToggle()方法：用于通过高度的变化动态切换元素的可见性。
slideToggle(speed,[callback])【例】通过改变单击图片控制菜单的显示与隐藏
<div id="menu"> <ul> <li><a href="www.mingribook.com">图书介绍</a></li> <li><a href="www.mingribook.com">新书预告</a></li> <li><a href="www.mingribook.com">图书销售</a></li> <li><a href="www.mingribook.com">勘误发布</a></li> <li><a href="www.mingribook.com">资料下载</a></li> <li><a href="www.mingribook.com">好书推荐</a></li> <li><a href="www.mingribook.com">技术支持</a></li> <li><a href="www.mingribook.com">联系我们</a></li> </ul> </div> <img src="../images/title.gif" width="30" height="80" id="flag"/> <style type="text/css"> #menu{ width: 70px; height: 300px; float: left; background-image: url(../images/menu_bg.gif); } ul{ font-size:12px ; list-style: none; margin:0px; padding:0px; } li{ line-height: 32px; } a{ text-decoration:none } a:hover{ color:#F00} </style> <script type="text/javascript"> $(document).ready(function(){ $("#flag").click(function(){ $("#menu").slideToggle(400);//显示或隐藏菜单 }); }); </script>animate()方法的基本语法格式：
animate(params,speed,callback)params:表示一个包含属性和值的映射，可以同时包含多个属性。 speed: 表示动画运行的速度，参数规则同其他动画效果的speed一致，是一个可选参数。 callback:表示一个回调函数，当动画效果运行完毕后执行该回调函数，是一个可选参数。 【例】将元素在页面移动一圈
<div id="fish"><img src="../images/fish.jpg"/></div> <style type="text/css"> #fish{ position: relative; } </style> <script type="text/javascript"> $(document).ready(function(){ $("#fish").animate({left:300},1000) .animate({top:200},1000) .animate({left:0},200) .animate({top:0},200); });stop()方法会停止匹配元素正在运行的动画，并立即执行动画队列中的下一个动画。语法格式如下：
stop(clearQueue,gotoEnd)clearQueue:表示是否清空尚未执行完的动画队列(值为true时表示清空动画队列)。 gotoEnd：表示是否让正在执行的动画直接到达动画结束时的状态。
<script type="text/javascript"> $(document).ready(function(){ $("#fish").animate({left:300},1000) .animate({top:200},1000) .animate({left:0},200) .animate({top:0},200); $("btn").click(function(){ $("#fish").stop(true,true); }); }); </script>delay()方法：对动画进行延迟操作 【例】延迟执行动画
<script type="text/javascript"> $(document).ready(function(){ $("#fish").animate({left:300},1000) .delay(300) .animate({top:200},1000) .delay(1500) .animate({left:0},200) .animate({top:0},200); $("btn").click(function(){ $("#fish").stop(true,true); //停止动画效果 }); }); </script>