4.1.1 加载 DOM
JS ：window.onload()
JQ：$(document).ready()
区别：
① window.onload() 是网页中所有元素加载后才执行
$() 是在DOM完全就绪时就可以被调用
$(window).load(function(){ //编写代码 }) //等价于 window.onload = function(){ //编写代码 }
② 应用多个方法时
window.onload = ont;
window.onload = two;
two 会替换 one的方法。只能执行 一个，如果需要2个都触发的话，需要新建一个方法
window.onload = function(){ one(); two(); }
而JQ 分别执行2个方法时候，2个方法会分别被执行
$(document).ready(function(){ one(); }) $(document).ready(function(){ two(); })
简写
$(document).ready(function(){ //编写代码 }) $(function(){ //编写代码 }) $().ready(function(){ //编写代码 })
4.1.2 事件绑定
使用 bind() 方法绑定事件格式为：
bind(type [,data] , fn);
第一个参数是事件类型（blur focus load scroll unload click mousedown ......）
第二个参数是可选参数，作为event.data 属性值传递给事件对象的额外数据对象
第三个参数是用来绑定的处理函数
*JQ中事件绑定类型比普通 JS 事件绑定类型少了 “on” 。比如“click” 在JS中为 “onclick”
1 基本效果
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #panel{ width: 400px;height: 100%;border: 1px solid #ddd;margin: 0;padding: 0px;margin-left: 200px;margin-top: 20px; } .head{ background: #aaa;padding: 10px;margin: 0;color: #000; } .content{ padding: 10px;text-align: left;text-indent: 2em;display: none; } </style> </head> <body> <div id="panel"> <h5 class="head">什么是jQuery?</h5> <div class="content"> 我是小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本 </div> </div> <script src="jQuery环境/jquery-1.12.4.js"></script> </body> </html>
点击标题显示文本效果。
（1）等待 DOM 装载完成
（2）找到“标题”所在元素，绑定 click 事件
（3）找到“内容”元素，将其显示
<script> $(function(){ $("#panel h5.head").bind("click",function(){ $(this).next("div.content").show(); }) }) </script>
2 加强效果
上面步骤只能只能在隐藏状态下单击显示，而不能再次单击隐藏。加强一个单击隐藏
（1）等待 DOM 装载完成
（2）找到“标题”所在元素，绑定 click 事件
（3）判断， 如果“内容”元素是显示的，则隐藏，否则显示
if(“内容” 显示){ 隐藏 }else{ 显示 }
$(function(){ $("#panel h5.head").bind("click",function(){ if($(this).next("div.content").is(":visible")){ $(this).next("div.content").hide(); }else{ $(this).next("div.content").show(); } }) })
可以将 $(this).next("div.content") 定义为局部变量
<script> $(function(){ $("#panel h5.head").bind("click",function(){ var $content = $(this).next("div.content"); //声明局部变量 if($content.is(":visible")){ $content.hide(); }else{ $content.show(); } }) }) </script>
3 改变绑定事件的类型
插入 mouseover 和 mouseout 事件。
$(function(){ $("#panel h5.head").bind("mouseover",function(){ $(this).next("div.content").show(); }); $("#panel h5.head").bind("mouseout",function(){ $(this).next("div.content").hide(); }) })
4 简写绑定事件
例如上述 3 事件简写
$(function(){ $("#panel h5.head").mouseover(function(){ $(this).next("div.content").show(); }); $("#panel h5.head").mouseout(function(){ $(this).next("div.content").hide(); }) })
4.1.3 合成事件
JQ 有2个合成事件 ： hover() 和 toggle() 方法。
1 hover() 方法
hover (enter , leave);
将上例改写：
$(function(){ $("#panel h5.head").hover(function(){ $(this).next("div.content").show(); }, function(){ $(this).next("div.content").hide(); }) })
* hover() 方法用来替代JQ中的 mouseenter 和 mouseleave ,因此如果需要触发 hover() 方法的第二个函数时，需要 trigger("mouseleave") 来触发，而不是trigger("mouseout")
2 toggle() 方法
toggle(fn1,fn2,fn3.....fnN);
toggle() 方法用于模拟鼠标单击事件。
第一次单击元素，触发指定的第一个函数，当再次点击同一元素时，触发指定的第二个函数，如果有更多函数，则依次触发。
上例可更改为：
$(function(){ $("#panel h5.head").toggle(function(){ $(this).next("div.content").show(); },function(){ $(this).next("div.content").hide(); }) })
toggle() 还有一个作用：切换元素的可见状态。
$(function(){ $("#panel h5.head").toggle(function(){ $(this).next("div.content").toggle(); },function(){ $(this).next("div.content").toggle(); }) })
3 再次加强效果
高亮显示标题，添加一个 clss 为 highlight 的样式
.highlight{ background: #f30; }
$(function(){ $("#panel h5.head").toggle(function(){ $(this).addClass("highlight"); $(this).next("div.content").show(); },function(){ $(this).removeClass("highlight"); $(this).next("div.content").hide(); }) })
显示：
闭合：
