第四章（jQuery中的事件和动画）（4.1 jQuery中的事件）（4.1.1~4.1.3）-白红宇

第四章（jQuery中的事件和动画）（4.1 jQuery中的事件）（4.1.1~4.1.3）

阅读量：4981 次

发布时间：2019-06-12

本文共 3620 字，大约阅读时间需要 12 分钟。

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

    
         Document            
             
      什么是jQuery?
        
      
                   我是小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本，小文本

点击标题显示文本效果。

（1）等待 DOM 装载完成

（2）找到“标题”所在元素，绑定 click 事件

（3）找到“内容”元素，将其显示

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") 定义为局部变量

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();            })        })

显示：