三、（3）jQuery事件和动画

jQuery事件和动画

jQuery中的事件

文档和窗口加载事件

1、DOM加载完毕后执行的事件

js:
　　作用: 为了让js找到DOM,一般让DOM加载完成后,再加载js (加载完成的元素有: HTMLDOM,图片,视频,音频....第三方资源加载完成后,才执行js) 。

语法:

window.onload=function(){
　　//执行的js代码
}

jquery:

　　作用: 保证HTMLdom加载完成后,才执行js代码

语法:

//方式一:
$(document).ready(function{
    //执行js代码
});

//方式二:(推荐)
$(function(){
    //执行js代码
})

//方式三:
jQuery(function(){
    //执行js代码
})

注意:

1. window.onload 在同一个网页中只执行一次, $(function(){}),可以在同一个页面中出现多次
2. window.onload 必需在网页中所有资源加载完成后,才执行js代码, $(function(){}) 只要所有的HTMLDOM加载完成即可,执行js代码

案例1：（js）

    <script>
        // window.onload=function () {
        //     console.log(box);
        // }

        //一个事件只能绑定一个事件处理函数
        // window.onload=function () {
        //     alert(111);
        // }
        // window.onload=function () {
        //     alert(22);
        // }

        //解决方案：使用事件监听函数来注册事件
        window.addEventListener("load",function () {
            alert(111);
        });
        window.addEventListener("load",function () {
            alert(222);
        });
        
    </script>
</head>
<body>
<div id="box">盒子</div>
</body>

案例2：（jquery）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
</head>
<body>
<div id="box">盒子</div>
<script>
    //获取盒子
    //console.log($("#box")[0]);
    //方式一：
    $(function () {
        console.log($("#box")[0]);
    });

    //方式二：
    $(document).ready(function () {
       console.log($("#box")[0]);
    });
</script>
</body>
</html>

事件绑定bind()方法

事件四要素:

事件源: 事件发生在谁身上,谁就是事件源
事件类型: 事件发生时,发生的时哪类事件
事件处理函数(事件句柄); 事件发生时,执行的js的代码
事件对象: 是一个对象(旁观者),包括事件发生时的所有信息

1. 事件注册 bind() 和 on() 效果相同:

　　bind()和on()不同: bind()和on() 一个参数之差----面试题(扩展)

　　jq对象.bind('事件类型',function(){});===> jq对象.on('事件类型',function(){});

　　jq对象.on('事件类型','委派的子元素',function(){});

2.事件注册的分类:

1. 一对一 : 一个事件源绑定一个事件处理函数
2. 一对多 : 一个事件源绑定多个事件处理函数
3. 多对一 : 多个事件,绑定到一个事件处理函数上
4. 多对多 : 多个事件,绑定到多个事件处理函数上

（1）一对一 : 一个事件源绑定一个事件处理函数

语法:　　jq对象.on('事件类型',事件处理函数);

jq对象.on('click',function(){
    //执行的jq代码
});

<div id="box">这是盒子</div>
<script>
    //一对一：一个事件源绑定一个事件处理函数
    //on
    $("#box").on("mouseover",function () {
       $(this).css("background","#00f");
    });

    //bind
    $("#box").bind("mouseover",function () {
       $(this).css("background","#0f0");
    });
</script>

(2) 一对多: 一个事件源绑定多个事件处理函数（重点）

语法:　　jq对象.on('事件类型',事件处理函数).on('事件类型',事件处理函数).....;

jq对象.on('click',function(){
    //执行的jq代码
}).on('mouseover',function(){
    //执行的jq代码
});

<div id="box">这是盒子</div>
<script>
    //2. 一对多  :  一个事件源绑定多个事件处理函数
    $("#box").on("mouseover",function () {
        $(this).css("background","#00f");
    }).on("mouseout",function () {
        $(this).css("background","red");
    })
</script>

（3）多对一 : 多个事件,绑定到一个事件处理函数上

语法:　　jq对象.on('事件类型1 事件类型2 ..... ',function(){//执行的jq代码});

jq对象.on('click mouseover mouseout',function(){
    //执行的jq代码
})

<div id="box">这是盒子</div>
<script>
    // 3. 多对一  : 多个事件,绑定到一个事件处理函数上
    $("#box").on("mouseout click",function () {
        $(this).css("background","#00f");
    });
</script>

（4）多对多 : 多个事件,绑定到多个事件处理函数上

语法:

　　jq对象.on({
　　'事件类型1':事件处理函数1,
　　'事件类型2':事件处理函数2,
　　'事件类型3':事件处理函数3
　　});

jq对象.on({
    'click':function(){},
    'mouseover':function(){},
    'dblclick':function(){}
});

<div id="box">这是盒子</div>
<script>
    // 4. 多对多  : 多个事件,绑定到多个事件处理函数上
    $("#box").on({
        "click":function () {
            alert(111);
        },
        "mouseover":function () {
          alert(222);
        },
        "mouseout":function () {
            alert(333);
        }
    });
</script>

事件委派

1. 解决的问题:

1)在事件注册中,后来添加进行的元素也绑定上相关事件。没有上绑上的原因: 是由于绑定的元素在绑定事件时,还没有产生,所以绑定不上
2)提升js注册事件的性能(防止重复绑定)

2. 事件委派: 表示把事件委派给父级,让父级给到子元素

语法:　　jq对象的父级.on('事件类型','新加的子元素',事件处理函数);

<body>
<div id="box">
    <p>段落1</p>
</div>
<button id="btn">添加</button>
<script>

    //事件委派
    $("#box").on("click","p",function () {
       alert(111);
    });

    /*点击btn添加一个新的标签，不能绑定事件，
    主要是由于p标签在绑定事件时没有产生，必须使用事件委派
     */

    //添加新的一个p标签
    $("#btn").on("click",function () {
       $("<p>新加入的标签</p>").appendTo("#box");
    });
</script>
</body>

事件移除unbind()方法

注意:

1. 如果使用bind()注册的事件,需要使用unbind()来移除事件
2. 如果使用on()注册的事件,需要使用off()来移除事件

语法:（on）

$(‘选择器’).off() //移除对象上所有的事件
$(‘选择器’).off('事件类型') //移除对象上指定事件类型的事件
$(‘选择器’).off('事件类型',事件处理函数) //移除对象上指定类型的处理函数

注意: unbind()语法同上

1. 所有事件取消绑定
　　$(‘选择器’).unbind()

2. 取消指定的事件类型绑定
　　$(‘选择器’).unbind(‘click’);

3. 取消指定的事件类型对应的函数绑定
var foo = function () {
　　// 处理某个事件的代码
};

<div id="box">这是盒子</div>
<script>
   //事件绑定
    $("#box").on("mouseover",function () {
        $(this).css("background","#00f");
    }).on("mouseout",function () {
        $(this).css("background","red");
    }).on("click",a);

    function a() {
        alert(111);
    }
   //移出事件
   //$("#box").off();//移出所有事件
   // $("#box").off("mouseover");//移出指定事件

   //注意: 长像相同的两个匿名函数,并不是同一个函数   抽取成公用函数
    $("#box").off("click",a);//移出指定事件对应的函数
</script>

合成事件hover()方法

1. hover()方法

　　hover()方法相当于mouseenter与mouseleave事件的组合，用于模拟鼠标指针悬停事件。

<div id="box">这是盒子</div>
<script>
    //hover():相当于mouseenter与mouseleave的组合,一个方法有两个效果
    //事件绑定
    $("#box").hover(function () {
        alert(111);
    },function () {
        alert(222);
    })
</script>

2. toggle()方法 用于模拟鼠标连续click事件

//toggle方法在1.9版本时就已经删除了，不建议再使用。如果要使用，可以换jquery版本。
$("body").toggle(
    function () { }, //第一次点击触发
    function () { }, //第二次点击触发
    function () { } //第三次点击触发
);

同时toggle()方法还有一个作用：切换元素可见状态

$('input').toggle(
    function () {
        $('ul').toggle(); //是显示的则隐藏，是隐藏的则显示
    },
    function () {
        $('ul').toggle(); //是显示的则隐藏，是隐藏的则显示
    }
);

事件委派delegate()方法

语法:

$("外部已存在元素"). delegate(‘新增元素选择’,事件类型 ,事件处理函数);

例如:

$("table").delegate("tr a","click",function(){})

在新增的元素table的tr中的a标签上添加事件
　　table 是已存在的元素
　　tr a 是以table为父元素的选择器,但是tr可以是新添加的元素.

trigger()和triggerHandler()方法

.trigger('事件类型') 有浏览器默认行为--重点

.triggerHandler() 只会执行具体事件，没有浏览器默认动作--了解

语法:

先前触发事件执行：$(“form”).submit();
现在触发事件执行：$(“form”).trigger(‘submit’);
或 $(“form”).triggerHandler(‘submit’);(没有浏览器默认动作)
triggerHandler() 只会执行具体事件，没有浏览器默认动作

<body>
<form action="" id="box">
    <p>账号：<input type="text" name="user" value="张三"/></p>
    <p>密码：<input type="password" name="pad" value="123123"/></p>
    <input type="submit" value="提交"/>
</form>
<script>
    //手动提交
    $("#box").on("submit",function () {
        alert("提交成功！");
    });

    //自动提交  三秒后自动提交,定时器
    setInterval(function () {
        $("#box").trigger("submit");//自动提交
        //只产生行为，不提交
        // $("#box").triggerHandler("submit");

    },3000);
</script>
</body>

事件对象Event及常用属性

　　概念: 事件发生,事件对象作为一个参数传处理函数中(相当于占位 event e )，事件对象包含了事件发生时所有相关信息(后期用于获取相关参数如: 事件源,事件类型,事件处理函数....)。

语法:

$("选择器").on('事件类型',function(event/e){
    //获取事件对象:
    //event / e;
});

常见属性：

event.type：获取事件的类型
event.target：获取触发事件的元素
event.pageX 和 event.pageY：获取鼠标当前相对于页面的坐标
event.preventDefault() 方法：阻止默认行为
event.which：获取在鼠标单击时，单击的是鼠标的哪个键

示例：

<body>
<div id="box"></div>
<script>
    $("#box").on("click",function (event) {
       console.log(event.type);//事件类型
       console.log(event.target);//事件源
       console.log(event.pageX);//获取鼠标x坐标
       console.log(event.pageY);//获取鼠标y的坐标
    });

    $("body").on("keydown",function (e) {
        console.log(e.which);//获取按键的值
    })
</script>

阻止浏览器默认行为preventDefault()

浏览器默认动作：

点击表单提交按钮: 默认提交表单
点击超链接: 默认打开页面链接

利用提交事件可以实现表单域验证，当验证失败时阻止提交表单.
在超链接a标签上添加事件,仅仅让事件生效从而阻止打开链接.

e.preventDefault(); //相当于是一个 return false

事件冒泡stopPropagation()方法

所有触发的事件现在会冒泡到DOM树上了. 举例来说，如果你在一个段落p上触发一个事件，他首先会在这个元素上触发，其次到父元素，在到父元素的父元素，直到触发到document对象。阻止冒泡e.stopPropagation();

<body>
<div id="box1">
    盒子1
    <div id="box2">
        盒子2
        <div id="box3">
            盒子3
        </div>
    </div>
</div>
<script>
    $("#box1").on("click",function (e) {
        alert("盒子1");
        e.stopPropagation();
    });
    $("#box2").on("click",function (e) {
        alert("盒子2");
        e.stopPropagation();
    });
    $("#box3").on("click",function (e) {
        alert("盒子3");
        e.stopPropagation();
    });
</script>

事件应用实例

表单事件应用

1. 表单有2个基本组成部分

表单域：包含处理表单数据所用的服务器端程序URL以及数据提交到服务器端的方法。
表单元素：包含文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框、和文件上传框等。
表单按钮：包括提交按钮、复位按钮和一般按钮，用于将数据传送到服务器上或者取消传送，还可以用来控制其他定义了处理脚本的处理工作。

2. 单行文本框应用

文本框是表单域中最基本的元素，基于文本框的应用有很多。设置添加和失去焦点事件：

$(funciton(){
    $(":input").focus(function(){//获取焦点
$(this).addClass("focus");
    }).blur(function(){//失去焦点
$(this).removeClass("focus");
　　});
});

3. 复选框应用

1）当使用全选功能时可以使用prop（）方法设置属性checked的值使复选框选中：

$("#checkedAll").click(function(){
    $("[name=items]:checkbox").prop("checked",true);
});

如果是不选操作设置为false就可以了。

2）反选操作稍微复杂一些，可以使用非运算符！

$("#checkedRev").click(fucntion(){
    $('[name=items]:checkbox').each(function(){
        $(this).attr("checked",$!(this).prop("checked"));
    });
});

表格样式应用

1、表格奇数行和偶数行变色效果

$("tr :odd").addClass("odd");//给奇数行添加样式
$("tr:even").addClass("even");//给偶数行添加样式

odd和even选择器索引是从0开始的所以第1行是偶数。

以上代码将表头也算进去，因此需要排除表格头部<thead>中的<tr>
$("tbody>tr:odd").addClass("odd");
如果还需要将某一行变为高亮显示状态，那么可以是哦你contains选择器来实现。

例如：“123”这行，代码如下：

$("tr:contains('123')").addClass("selected");

2、为表格内单击行进行操作

$('tbody>tr').click(funcition(){
    $(this).addClass('selected')
    .siblings().removeClass('selected');
    .find(':radio').prop('checked',true);
});

jQuery中的动画方法

基本动画函数show()和hide()

概念: 在jq中,已经定义好的动画效果,不需再次定义,直接即可。

分类:

show() 和 hide() 显示/隐藏
toggle(): 表示相到换切效果
fadeIn() fadeOut() 淡入/淡出
slideUp() slideDown() 滑上 /滑下

Show()显示隐藏匹配元素。
例如：显示所有段落，$("p").show()

show(speed,[callback])
例如：用缓慢的动画将隐藏的段落显示出来，历时600毫秒，$("p").show(600);

hide() 隐藏显示元素。

例如：隐藏所有段落，$("p").hide()

hide(speed,[callback])
例如：用600ms的时间将段落缓慢的隐藏，$("p").hide("slow");

toggle
切换元素的可见状态。如果元素时可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
例如：切换所有段落的可见状态，$("p").toggle();

toggle(switch）
例如：切换所有段落的可见状态，varflip=0;$("button").click(function(){$("p").toggle(flip++%2==0);});

toggle(speed,[callback])
例如：用200ms将段落迅速切换显示状态，之后弹出一个对话框，$("p").toggle("fast",function(){alert("hello!");});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <style>
        #box{width: 200px;height: 200px;background: red;}
    </style>
</head>
<body>
<button id="btn1">隐藏</button>
<button id="btn2">显示</button>
<button id="btn3">显示/隐藏</button>
<div id="box"></div>

<script>
    //隐藏
    $("#btn1").on("click",function () {
        // $("#box").hide();
        // $("#box").slideUp("slow");
        $("#box").fadeOut(300);

    });
    //显示
    $("#btn2").on("click",function () {
        // $("#box").show();
        // $("#box").show("fast");
        // $("#box").slideDown(300);
        $("#box").fadeIn(300);
    });

    //显示和隐藏
    $("#btn3").on("click",function () {
        $("#box").toggle();
    });
</script>
</body>
</html>

淡入淡出函数fadeIn()、fadeOut()、fadeTo()

fadeIn(speed,[callback])
　　通过透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选的调用一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
例如：用600ms缓慢的将段落淡入，$("p").fadeIn("slow");

fadeOut(speed,[callback])

　　通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选择的触发一个回调函数。

例如：用600ms缓慢的将段落淡出，$("p").fadeOut("slow");

fadeTo(speed,opacity,[callback])

　　把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选的出发一个回调函数。
例如：用600ms缓慢将段落的透明度调整到0.66，大约2/3的可见度，$("p").fadeTo("slow",0.66)

滑动动画函数slideUp()和slideDown()

slideUp(speed,[callback])

　　通过高度变化（向上减小）来动态的隐藏所有匹配的元素，在隐藏完成后可选的触发一个回调函数。

例如：600ms缓慢的将段落滑上，$("p").slideUp("slow");

slideDown(speed,[callback])
　　通过高度变化（向下增大）来动态的显示所有匹配的元素，在显示完成后可选择的触发一个回调函数。这个动画效果只调整元素的高度，可以是匹配的元素以“滑动”的方式显示出来。

例如：用600ms缓慢的将段落滑下，$("p").slideDown("slow");

slideToggle(speed,[callback])

　　通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选的触发一个回调函数。

例如：600ms缓慢的将段落滑上或滑下，$("p").slideTogggle("slow");

自定义动画animate()

作用：当上面的方法实现的动画无法满足我们时，可以使用animate()来自定义动画。
　　animate(params,[duration],[easing],[callback])用于创建自定义动画的函数。这个函数的关键在于制定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如height、top或opacity)。

注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <style>
        #box{width:200px;height:100px;background: red;}
    </style>
</head>
<body>
<button id="mstart">开始运动</button>
<button id="mstop">停止运动</button>
<div id="box"></div>
<script>
/*需求：点击开始让盒子变长*/
    $("#mstart").on("click",function () {
       //让盒子动起来
        //1000表示毫秒。后面可以不需要
    //    $("#box").animate({"width":"1000px"},1000,"swing",function () {
    //       alert("执行完毕！");
    //    });
    // });

        $("#box").animate({"width": "1000px"}, 1000).animate({"height":"500px"},1000);
    });

    //停止动画
    $("#mstop").on("click",function () {
       // $("#box").stop();//只停止当前动画，继续执行后面的动画
       // $("#box").stop(true,false);//只停止当前动画，停止后面的动画
       // $("#box").stop(true,true);//停止当前动画，并直接跳到当前动画的最后位置
    });
</script>
</body>
</html>

动画缓动效果easing

　　jQuery效果函数(slideUp()、fadeIn()等)和animation()函数都接收另一个用来控制动画过程的速度的参数，这就是缓动(easing)，它确定了动画过程不同时刻的速度。

方法：swing和linear。

Linear:

　　提供了一个稳定的动画，以使得动画的每个步骤都是相同的(例如，如果要让一个元素以逐渐变化的方式穿过屏幕，每一步的距离和前一步都是相同的)。

Swing:

　　要更加动态一些，随着动画的开始变得更加快一些，然后再慢下来。swing是一个常用设置，因此，如果没有指定任何缓动，jQuery会使用swing方法。

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

stop([clearQueue],[gotoEnd])

.stop() // 停止当前动画
.stop(true) // 停止所有动画
.stop(true,true) // 停止所有动画，到达动画终点

is(":animated"). 判断元素是否处于动画状态，可用于防止动画累积。

例：

<script>
if(!$("selector").is(":animated")){
    //判断元素是否正处于动画状态 //如果当前没有进行动画，则添加新动画
    }
</script>

延迟执行动画delay()

delay() 延迟执行动画　　

当一个动画stop()了之后还能够用delay()来延迟执行。从停止位置继续执行。当然用原来的方法继续执行也不可，不过没有延时效果。
　　delay(duration,[queueName])　　设置一个延迟值来执行动画　　Integer,String
$("#div1").delay(3000).hide(3000);　　//表示在3000毫秒后执行hide(3000);

其他动画方法

toggle()显示与隐藏
slideToggle()改变高度的显示与隐藏。
fadeTo(time,op)通过指定时间将元素的不透明度变为o
fadeToggle()改变不透明度的显示与隐藏。

动画案例：Tab滑动菜单

效果图：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <style>
        *{margin: 0 auto;padding: 0;}
        #tab{
            width: 300px;
            height: 400px;
            background: #cccccc;
        }
        #tab ul{list-style: none;height: 50px;}
        #tab ul li{
            width: 100px;
            line-height: 50px;
            text-align: center;
            float: left;
        }
        .a{background: red;color: #ffffff;}
        .content p{
            width: 300px;
            height: 350px;
            background: #00aa00;
            display: none;
        }
        .content p.on{
            display: block;
        }
    </style>
</head>
<body>
<div id="tab">
    <ul>
        <li class="a">企业文化</li>
        <li>团队介绍</li>
        <li>大事记</li>
    </ul>
    <div class="content">
        <p class="on">内容1</p>
        <p>内容2</p>
        <p>内容3</p>
    </div>
</div>

<script>
    $("#tab ul li").on("mouseover",function () {
        //鼠标移动到上面添加a标签，并删除其他li的a标签
        $(this).addClass("a").siblings().removeClass("a");
        //获取li当前的索引值
        var index = $(this).index();
        //给对应的p标签加上on
        $(".content p").eq(index).addClass("on").siblings().removeClass("on");
    })
</script>
</body>
</html>

课后练习

1、点击一级类别显示二级类别。
2、展开一个类别的同时，关闭其他类别。
3、一级类别展开和关闭的时候，对应的图标也要跟着改变。

4、用jquery实现网易首页女人、情感、亲自模块的页签切换效果。
要求：
　　1）、鼠标移动到女人上面的时候，显示女人栏目的内容。
　　2）、鼠标移动到情感上面的时候，显示情感栏目的内容。
　　3）、鼠标移动到亲子上面的时候、显示亲自栏目的内容。
　　4）、每个盒子里面的文章内容可以随便加，布局合理即可，主要练习jquery。

5、用jquery实现京东导航的效果。

面试题

1. $(function(){}) 与 $(window).load(function(){})的区别。
2. 如何解决动画的堆砌问题？

posted @ 2021-02-28 22:52 全村的希望、阅读(147) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

不负青春，不负代码

三、（3）jQuery事件和动画

jQuery中的事件

文档和窗口加载事件

事件绑定bind()方法

事件委派

事件移除unbind()方法

合成事件hover()方法

事件委派delegate()方法

trigger()和triggerHandler()方法

事件对象Event及常用属性

阻止浏览器默认行为preventDefault()

事件冒泡stopPropagation()方法

事件应用实例

表单事件应用

表格样式应用

jQuery中的动画方法

基本动画函数show()和hide()

淡入淡出函数fadeIn()、fadeOut()、fadeTo()

滑动动画函数slideUp()和slideDown()

自定义动画animate()

动画缓动效果easing

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

延迟执行动画delay()

其他动画方法

动画案例：Tab滑动菜单

课后练习

面试题

公告