锋利的Jquery【读书笔记】 -- 第四章 jQuery中的事件和动画_锋利的jq 第四章里面视频滚动效果-CSDN博客

本文链接：https://blog.csdn.net/CherishLyf/article/details/48440695

- 锋利的Jquery读书笔记第三章 jQuery中的DOM操作
  - jQuery中的事件
  - jQuery中的动画

锋利的Jquery【读书笔记】 – 第三章 jQuery中的DOM操作

jQuery中的事件

$(document).ready()方法
可以多次使用；

$(document).ready(function(){
    //编写代码
})

也可以简写成：

$(function(){
    //编写代码
})

事件绑定

bind()方法

bind(event,date,function)

第一个参数为事件类型：
blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和error。
第二个参数为可选参数：
作为 event.date 属性值传递给事件对象额外数据对象。
第三个参数是用来绑定的处理函数
比如：

$(function(){
    $("#panel h5.head").bind("click",function(){
        $(this).next().show();     
    })
})

判断元素是否显示，用 is()方法来完成：

$(function(){
    $("panel h5.head").bind("click",function(){
        if($(this).next().is(":visible")){     //如果内容显示
            $(this).next().hide();
        } else {
            $(this).next().show();
        }
    })
})

发现 $(this).next() 多次使用，可以定义一个局部变量：

var $content = $(this).next();

简写绑定事件：

$(function(){
    $("panel h5.head").mouseover(function{
        $(this).next.show();
    }).mouseout(function(){
        $(this).next.hide();
    })
});

合成事件

hover()方法

hover(enter,leave);

hover()方法用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第1个函数(enter);当光标移出这个元素，会触发第2个元素(leave)。
上面的例子可以改写成：

$(function(){
    $("#panel h5.head").hover(function(){
        $(this).next().show;
    },function(){
        $(this).next().hidden;
    })
})

toggle()方法

toggle(fn1,fn2,fn3 ....)

toggle()方法用于模拟鼠标连续点击事件。
第1次点击元素，触发指定的第1个函数(fn1)；
点击第2此，触发第2个函数；
如果有更多的函数，依次触发，直到最后一个。随后的每次单击都重复对这几个函数轮番调用。

比如这个函数：

$(function(){
    $("panel h5.head").bind("click",function(){
        if($(this).next().is(":visible")){     //如果内容显示
            $(this).next().hide();
        } else {
            $(this).next().show();
        }
    })
})

上面这个例子适合使用 toggle()方法，原理是：

$(标题).toggle(function(){
    //内容显示
},function(){
    //内容隐藏
})

使用toggle()方法来改写上面的例子：

$(function(){
    $("#panel h5.head").toggle(function(){
        $(this).next().show();
    },function(){
        $(this).next().hide();
    })
})

toggle()方法在jQuery中还有另外一个作用：切换元素的可见状态。
如果元素可见，切换后隐藏；如果隐藏，切换为可见的

事件冒泡

事件对象

在程序中使用事件对象非常简单，只需为函数添加一个参数，

$("element").bind("click",function(event){     //event:事件对象
    //...
})

停止事件冒泡

停止事件冒泡可以阻止事件中其它对象的事件处理函数被执行，jQuery中提供了 stopPropagation()方法来停止事件冒泡。

$("span").bind("click",function(event){            //event：事件对象
    var txt = $('#msg').html() + "<p>内层span元素被单击</p>";
    $('#msg').html(txt);
    event.stopPropagation();          //停止事件冒泡  
})

阻止默认行为

jQuery中，提供了 preventDefault()方法来阻止元素的默认行为。

<script>
    $("#sub").bind("click",function(event){
        var username = $("#username").val();      //获取元素
        if(username == ""){                       //判断值是否为空
            $("#msg").html("<p>本文框的值不能为空</p>");       //提示信息
            preventDefault();                     //阻止默认行为（表单提交）
        }
    })
</script>
<form action="test.html">
用户名：<input type="text" id="username" />
<br/>
<input type="submit" value="提交" id="sub"/>
</form>

<div id="msg"></div>

当用户名为空，提交时，会提示表单不能提交
如果想同时对事件对象停止冒泡和默认行为，可以在事件处理函数中返回 false。
表单中的例子可以把：

event.preventDefault();         //阻止默认行为

改写为：

return false;

可以把事件冒泡例子：

event.topPropagation();         //停止事件冒泡

改写为：

return false;

事件捕获

jQuery不支持事件捕获，使用事件捕获，直接使用原生的JavaScript。

事件对象的属性

event.type

该方法的作用可以获取到事件的类型。

$("a").click(function(event){
    alert(event.type);      //获取事件类型
    return false;          //阻止链接跳转
})

代码会输出     // click

event.preventDefault()方法

阻止默认的事件行为。

event.stopPropagation()方法

阻止事件冒泡

event.target

作用是获取到触发事件的元素。

$("a[href='http://google.com']").click(funciton(event){
    var tg = event.target;           //获取事件对象
    alert(tg.href);
    return false;                   //阻止事件跳转
})

以上代码输出：

"http://google.com"

event.relatedTarget

在标准的DOM中，mouseover 和 mouseout所发生的元素可以通过event.target 来访问，相关元素通过event.relatedTarget 来访问。

event.pageX 和 event.pageY

该方法的作用是获取到光标相对于页面的x坐标和y坐标。如果没有使用jQuery，那么IE中是用 event.x/event.y，而在Firefox中是用 event.pageX 和 event.pageY。如果还有滚动条，还要加上滚动条的宽度和高度。

$("a").click(function(event){
    //获取鼠标相对页面的坐标
    alert("Current mouse position :" + event.pageX + "," + event.pageY);
    return false;      //阻止链接跳转
})

event.which

该方法的作用是在鼠标单击事件中获取到鼠标的左，中，右键；在键盘中获取键盘的按键。
比如，获取鼠标的左、中、右键：

$("a").mousedown(function(e){
    alert(e.which);       //1 = 鼠标左键;  2 = 鼠标中键; 3 = 鼠标右键
})

代码加载到页面中后，用鼠标单击页面时，单击左、中、右键分别返回1、2、3.
获取键盘按键：

$("input").keyup(function(e){
    alert(e.which);
})

event.metaKey

为键盘事件中获取<ctrl> 按键。

移除事件

在绑定事件的过程中，不仅可以为同一个元素绑定多个事件，也可以为多个元素绑定同一个事件。

<script>
    $(function(){
        $("#btn").bind("click",function(){
            $("#test").append("<p>我的绑定函数1</p>");
        }).bind("click",function(){
            $("#test").append("<p>我的绑定函数2</p>");
        }).bind("click",function(){
            $("#test").append("<p>我的绑定函数3</p>");
        })
    })
</script>
<button id="btn">单击我</button>
<div id="test"></div>

移除按钮元素上以前注册的事件

先添加一个移除事件的按钮：

<button id="#delAll">删除所有事件</button>

给按钮绑定一个删除所有click事件的函数：

$("#delAll").click(function(){
    $("#btn").unbind("click");
})

因为元素绑定的都是 click事件，所以不写参数能够达到同样的效果：

$("#delAll").click(function(){
    $("#btn").unbind();
})

unbind()方法

unbind()方法的语法结构：

unbind([type],[data]);

第一个参数是事件类型，第2个参数是将要删除的函数

如果没有参数，删除所有绑定事件
如果提供了事件类型作为参数，则只删除该类型的绑定事件
如果把绑定时传递的处理函数作为第2个参数，则只有这个特定的事件处理函数会被删除

移除元素的其中一个事件

$(function(){
    $('#btn').bind("click",myFun1 = function(){
        $('#test').append("<p>我的绑定函数1</p>")
    })
})

然后单独删除某一事件：

$('#delOne').click(function(){
    $("#btn").unbind("click",myFun1);      //删除 绑定事件1
})

one()方法

对于只需触发一次，随后就要立即解除绑定的情况，jQuery提供了一种简写方法 — one()方法。
One()方法可以为元素绑定处理函数、当处理函数只执行一次后，立即删除。即在每个对象上面，事件处理函数只会被执行一次。

one()方法结构和 bind()方法类似，使用方法相同：

<script>
    $(function(){
        $("#btn").one("click",function(){
            $("#test").append("<p>我的绑定函数1</p>");
        }).bind("click",function(){
            $("#test").append("<p>我的绑定函数2</p>");
        }).bind("click",function(){
            $("#test").append("<p>我的绑定函数3</p>");
        })
    })
</script>
<button id="btn">单击我</button>
<div id="test"></div>

使用 one()方法绑定事件，只有用户第一次单击按钮，处理才会执行，之后的单击毫无用处。

模拟操作

常用模拟

jQuery中可以使用，trigger()方法来模拟操作。
可以用下面代码触发ID为 btn的按钮 click事件：

$('btn').trigger("click");

触发自定义事件

trigger()方法不仅能触发浏览器支持的具有相同名称的事件，也可以触发自定义事件。

$("btn").bind("myClick",function(){
    $('test').append("<p>我的自定义事件</p>")
})

//触发这个事件
$('#btn').trigger("myClick");

传递数据

trigger(type,[data])方法由两个参数，第一个是要触发的事件类型，第二个是要传递给事件处理函数的附加数据，以数组的形式传递。
下面是传递数据的例子：

$('btn').bind("myClick",function(event,message1,message2){     //获取数据
    $("test").append("<p>"+message1+message2+"</p>");
});

$("btn").trigger("myClick",["我的自定义事件","事件"]);      //传递两个数据

其他用法

绑定多个事件

bind()方法可以为元素一次性绑定多个事件类型。

$(function(){
    $("div").bind("mouseover mouseout",function(){
        $(this).toggleClass("over");
    })
});

当光标划入时，class切换为 “over”；当光标划出时，class切换为先前的值。

添加事件命名空间，便于管理

$(function(){
    $("div").bind("click.plugin",function(){
        $("body").append("<p>click事件</p>");
    })
    $("div").bind("mouseover,plugin",function(){
        $("body").append("<p>mouseover事件</p>");
    })
    $("div").bind("dbclick",function(){
        $("body").append("<p>dbclick事件</p>");
    })
    $("btn").click(function(){
        $("div").unbind(".plugin");
    })
})

在所绑定的事件类型后面添加命名空间，这样在删除事件时只需指定命名空间即可。

相同事件名称，不同命名空间执行方法

$(function(){
    $("div").bind("click",function(){
        $("body").append("<p>click事件</p>");
    })
    $("div").bind("click.plugin",function(){
        $("body").append("<p>click.plugin事件</p>");
    })
    $("#btn").click(function(){
        $("div").trigger("click!")          //注意后面的叹号
    })
})

单击div元素后，会触发click事件和click.plugin事件。
只单击button元素，则触发click事件，而不触发click.plugin事件。

注意： trigger(“click!”)后面的叹号作用是匹配所有不包含在命名空间中的click方法。

如果两者都要触发：

$("div").trigger("click");         //去掉感叹号

jQuery中的动画

show()方法和 hide()方法

隐藏element元素：

$("element").hide();           //使用hide()方法

等同于：

$("element").css("display","none");            //使用css()方法

show()方法和 hide()方法让元素动起来

show()方法和 hide()方法不加参数时，作用是立即显示或者隐藏元素。
如果想让元素慢慢显示出来，可以为 show()方法指定一个速度函数：

$("element").show("slow");

slow,元素会在600毫秒内慢慢显示出来。其他的速度关键字海油”normal”和”fast”（长度分别是400毫秒和200毫秒）。
不仅如此，还可以为显示速度指定一个数字，单位是毫秒。
例如：让元素在1秒内显示、隐藏（1000毫秒）

$("element").show(1000);   //1秒内显示
$("element").hide(1000);   //1秒内隐藏

fadeIn()方法和 fadeOut()方法

与show()方法不相同的是，fadeIn()方法和 fadeOut()方法只改变元素的不透明度。fadeOut()方法会在指定的一段时间内降低元素的不透明度，直到元素消失。fadeIn()与之相反。

上个例子，如果只想改变 “内容”的不透明度，可以使用 fadeOut()方法

$("#panel h5.head").toggle(function(){
    $(this).next().fadeOut();  
},function(){
    $(this).next().fadeIn();
})

第1次单击链接，”内容”慢慢消失(淡出)，再次单击，内容又慢慢地显示(淡入)。

slideUp()方法和 slideDown()方法

slideUp()方法和 slideDown()方法只会改变元素的高度。如果一个元素的display的属性值为”none”，当调用slideDown()方法时，这个元素将由上至下延伸显示。
slideUp()方法，将元素由下及上缩短隐藏。

注意：jQuery中任何动画效果，都可以指定3种速度参数，即”slow”，”normal”，”fast（时间分别为0.6秒，0.4秒和0.2秒）。当使用速度关键字时，要加引号；如果用数字作为参数就不需要加引号，例如show(1000)。

自定义动画方法 animate()

animate()方法用来自定义动画。其语法结构为：

animate(params, speed, callback);

参数说明：

params：一个包含属性样式及值的映射，比如 {property1 : “value”, property2 : “value” }.
speed：速度参数，可选
callback：在动画完成执行的函数，可选

自定义简单动画

首先给 div元素添加 CSS：

    <style type="text/css">
        #panel{
            position: relative;
            width:100px;
            height:100px;
            border:1px solid #0050D0;
            background:#96E555;
            cursor:pointer;
        }
    </style>

调整元素的left值，使元素动起来：

        $(function(){
            $("#panel").click(function(){
                $(this).animate({left : "500px"},3000);
            })
        })

累加、累减动画

如果在500px前面加上”+=”或者”-=”符号表示当前位置累加或者累减。

        $(function(){
            $("#panel").click(function(){
                $(this).animate({left : "+=500px"},3000);
            })
        })

多重动画

同时执行多个动画

$(function(){
    $("#myImg").click(function(){
        $(this).animate({left : "500px" , height : "200px"},3000);
    })
})

按顺序执行多个动画
上例中动画效果是同时发生的，如果想让按顺序执行，需要拆开写：

$(this).animate({left : "500px"},3000);
$(this).animate({height : "200px"},3000);

因为是对同一个jQuery对象操作，可以改为链式的写法：

$(this).animate({left : "500px"},3000)
       .animate({height : "200px"},3000);

综合动画

$(function(){
    $("#panel").css("opacity","0.5");        //设置透明度
    $("#panel").click(function(){
        $(this).animate({left : "400px", height : "200px", opacity : "1"},3000)
               .animate({top : "200px", width : "200px"},3000)
               .fadeOut("slow");
    })
})

动画回调函数

在上例中，如果想在最后一步切换元素的CSS样式，而不是隐藏元素：

css("border","5px solid blue");

这样并不能得到预期效果，岗开始执行动画的时候，css()方法就被执行了。
因为，css()方法并不会加入到动画队列中，而是立即执行。
可以使用回调函数(callback)对非动画方法实现排队，只要把css()方法写在最后一个动画的回调函数里即可。

$(function(){
    $("#panel").click(function(){
        $(this).animate({left : "400px", height : "200px", opacity : "1"},3000)
               .animate({top : "200px", width : "200px"}, 3000 ,function(){
                    $(this).css("border","5px solid blue");
                })
    })
})

注意：callback 回调函数适用于所有的动画效果，例如：

$("#element").slideDown("normal",function(){
    // 效果完成时做其它的事情
})

这段代码表示id=”element”的元素在0.4秒内向下展开，当动画完成后，执行回调函数体内的代码。

停止动画和判断是否处于动画状态

停止元素的动画

很多时候需要停止匹配元素正在进行的动画，需要使用stop()方法。其语法结构为：

stop([clearQueue],[gotoEnd]);

参数clearQueue 和gotoEnd都是可选的参数，为Boolean值。
clearQueue代表是否要清空未执行完的动画列表，
gotoEnd代表是否直接将正在执行的动画跳转到末状态。
如果直接使用stop()方法，会立即停止当前正在进行的动画。

        $("#panel").hover(function(){
            $(this).stop()
                      .animate({height : "150px"},200)        //如果在此时触发了光标移除的事件
                                                              //将执行下面的动画
                                                              //而非光标移出事件的动画
                      .animate({width : "300px"},300);
        },function(){
            $(this).stop(true)
                      .animate({height:"22px"},200)
                      .animate({width:"30px"},300);
        })
    })

如果把第1个参数（clearQueue）设置为 true，此时程序会把当前元素接下来尚未执行完成的动画序列都清空。

        $("#panel").hover(function(){
            $(this).stop(true)
                      .animate({height : "150px"},200)        //如果在此时触发了光标移除的事件
                                                              //直接跳过后面的动画序列
                      .animate({width : "300px"},300);
        },function(){
            $(this).stop(true)
                      .animate({height:"22px"},200)
                      .animate({width:"30px"},300);
        })
    })

第2个参数（gotoEnd）可以用于让正在执行的动画直接达到结束时刻的状态，通常用于后一个动画需要基于前一个动画的末状态的情况，可以通过 stop(false,true)这种方式来让当前动画直接到达末状态

当然两者可以结合使用，stop(true,true)，即停止当前动画并直接到达当前动画的末状态，并清除动画序列。

判断元素是否处于动画状态

if(! $(element).is(":animated")){      //判断元素是否处于动画状态
    // 如果当前没有动画，则添加动画
}

延迟动画

在动画执行过程中，如果想对动画进行延迟操作，使用 delay()方法：

$(this).animate({left : "400px", height : "200px", opacity : "1"},3000)
       .delay(1000)
       .animate({top : "200px",width : "200px"},3000)
       .delay(2000)
       fadeOut("slow");

其他动画方法

toggle(speed,[callback])
slideToggle(speed,[easing],[callback])
fadeTo(speed,opacity,[callback])
fadeToggle(speed,[easing],[callback])

toggle()方法

toggle()方法可以切换元素的可见状态。如果元素可见，则切换为隐藏；如果隐藏，切换为可见。
给内容添加toggle()事件：

$("#panel h5.head").click(function(){
    $(this).next().toggle;
})

单击标题链接后，“内容”会在可见和隐藏状态之间切换。
相当于：

$("#panel h5.head").toggle(function(){
    $(this).next().hide();
},function(){
    $(this).next().show();
})

slideToggle()方法

slideToggle()方法通过高度变化来切换匹配元素的可见性。这个动画效果只调整元素的高度。
给“内容”添加 slideToggle()事件：

$("#panel h5.head").click(function(){
    $(this).next().slideToggle();
})

单击元素后，内容会在可见和隐藏中切换，不过是通过改变元素的高度实现的。
相当于：

$("#panel h5.head").toggle(function(){
    $(this).next().slideUp();
},function(){
    $(this).next().slideDown();
})

fadeTo()方法

fadeTo()方法可以把元素的不透明度以渐进的方式调整到指定的值。这个动画只调整元素的不透明度，即匹配的元素的高度和宽度不会改变。

$("panel h5.head").click(function(){
    $(this).next().fadeTo(600,0.2);
})

当链接被点击，内容会渐渐调整到指定透明度(20%)。

fadeToggle()方法

该方法通过不透明度变化来切换匹配元素的可见性。

$("panel h5.head").click(function(){
    $(this).next().fadeToggle();
})

相当于：

$("panel h5.head").toggle(function(){
    $(this).next().fadeOut();
},function(){
    $(this).next().fadeIn();
})

锋利的Jquery【读书笔记】 -- 第四章 jQuery中的事件和动画

锋利的Jquery【读书笔记】 – 第三章 jQuery中的DOM操作

jQuery中的事件

事件绑定

bind()方法

合成事件

hover()方法

toggle()方法

事件冒泡

事件对象

停止事件冒泡

阻止默认行为

事件捕获

事件对象的属性

event.type

event.preventDefault()方法

event.stopPropagation()方法

event.target

event.relatedTarget

event.pageX 和 event.pageY

event.which

event.metaKey

移除事件

移除按钮元素上以前注册的事件

unbind()方法

移除元素的其中一个事件

one()方法

模拟操作

常用模拟

触发自定义事件

传递数据

其他用法

绑定多个事件

添加事件命名空间，便于管理

相同事件名称，不同命名空间执行方法

jQuery中的动画

show()方法 和 hide()方法

show()方法 和 hide()方法

show()方法 和 hide()方法 让元素动起来

fadeIn()方法 和 fadeOut()方法

slideUp()方法 和 slideDown()方法

自定义动画方法 animate()

自定义简单动画

累加、累减动画

多重动画

综合动画

动画回调函数

停止动画和判断是否处于动画状态

停止元素的动画

判断元素是否处于动画状态

延迟动画

其他动画方法

toggle()方法

slideToggle()方法

fadeTo()方法

fadeToggle()方法

show()方法和 hide()方法

show()方法和 hide()方法

show()方法和 hide()方法让元素动起来

fadeIn()方法和 fadeOut()方法

slideUp()方法和 slideDown()方法