【jQuery】学习笔记（三）

欢迎转载，请注明作者和出处。

本文链接： https://blog.csdn.net/weixin_43217942/article/details/102593805

jQuery事件

jQuery绑定事件的方式

1. eventName（）
2. on（eventName，fn）

二者的区别：
通过第一种方式可以调用jQuery中内部定义好的事件。二如果代用原生JS的某些jQuery没有实现的方法时则不能调用。而on（）这种方法刚好不上了这个短板，是jQuery绑定事件有更多方式。
jQuery事件的特点：

1. 可以添加多个事件，事件不会覆盖
2. 可以为通过元素添加多个相同的事件
3. 可以使用自定义的事件
4. 可以自动触发事件

jQuery事件的移除

off（），用来移除事件，可以传递参数用来移除指定的

注册事件

    //第一种注册事件的方法
    $("button").click(function(){
            console.log("click");
        });

    //第二种注册事件的方式，比较灵活使用性更强，可以注册费jQuery事件
    $("button").on("click",function () {
        console.log("click");
    });

jQuery时间冒泡

若干个标签嵌套，子元素触发事件后会触发父元素的事件，这种现象称为事件冒泡。
去除冒泡的方法： 在子元素的事件回调函数中return false即可解决。

功能标签的默认行为 a、button

a标签默认会进行跳转、button默认会跳转到提交数据的页面。为了改变这种行为可在事件的回调函数中返回一个false。

自动触发事件

使用trigger（“事件名称”）。

trigger（）、triggerHander（）的区别

利用trigger（）触发事件会触发一些功能的默认行为，而triggerHander（）则不会触发。

jQuery事件命名空间

在触发事件的名称后面加“.name”, 使用触发事件的方法时可以触发指定的方法。

什么是事件委托？

事件委托就是请别人做事情。
当jQuery核心函数找到不止一个元素添加事件时，jQuery底层会遍历找到的元素，然后依次为它们注册事件。

事件委托使用的方法delegate（“selector”,“eventType”,fn）

用来实现一个元素对另一个元素的监听。
代码示例：
通过点击按钮弹出登陆框，然后在登陆框点击后关闭登陆框。

扫描二维码关注公众号，回复： 7566450 查看本文章

    <style>
        .mask{
            width: 100%;
            height:100%;
            position: fixed;
            background: rgba(0,0,0,0.4);
            left: 0;
            top:0;
        }
        .box{
            width: 400px;
            height: 300px;

            background: whitesmoke;

            position:relative;
            left: 50%;
            margin-left: -200px;
            top:50%;
            margin-top: -150px;
        }
    </style>
    
    <button class="login-btn">登陆按钮</button>
<p>段落 段落 段落 段落 段落 段落 段落 段落 段落 段落 段落 段落 段落 段落
    段落 段落 段落 段落 段落 段落</p>
<p>段落 段落 段落 段落 段落 段落 段落 段落 段落 段落 段落 段落 段落 段落
    段落 段落 段落 段落 段落 段落</p>
<p>段落 段落 段落 段落 段落 段落 段落 段落 段落 段落 段落 段落 段落 段落
    段落 段落 段落 段落 段落 段落</p>
<p>段落 段落 段落 段落 段落 段落 段落 段落 段落 段落 段落 段落 段落 段落
    段落 段落 段落 段落 段落 段落</p>
<p>段落 段落 段落 段落 段落 段落 段落 段落 段落 段落 段落 段落 段落 段落
    段落 段落 段落 段落 段落 段落</p>
<p>段落 段落 段落 段落 段落 段落 段落 段落 段落 段落 段落 段落 段落 段落
    段落 段落 段落 段落 段落 段落</p>

<script>
        var $mask = $("<div class=\"mask\">\n" +
                    "    <div class=\"box\">\n" +
                    "       <button>关闭</button>\n" +
                    "    </div>\n" +
                    "</div>");
            console.log($mask);
            
        $(".login-btn").click(function () {
            $("body").append($mask);
            $("body").delegate(".mask>.box>button","click",function () {
                // alert("test delegate()")
                $mask.remove();
            })
        })
</script>

jQuery事件

• mouseover（）移入
• mouseout（）移出
  注意：子元素移入移移出也会触发父类的事件
• mouseenter（）移出
• mouseleave（）移出
  这个方法不会触发父类的事件

jQuery动画

• show([s,[e],[fn]]) 显示元素，改变的是display属性，可以传递一个值来控制切换的时间（slow、normal，fast）
• hide([s,[e],[fn]]) 显示元素，改变的是display属性
• toggle([s],[e],[fn]) 切换显示/隐藏

滑动：

• slideDown([s],[e],[fn]) 展开元素
• slideUp([s,[e],[fn]]) 收起元素
• slideToggle([s],[e],[fn]) 切换展开收起

jQuery动画队列

jQuery中所有触发的动画都会放到这个队列中，然后依次执行。在极段的时间内多次触发动画效果会导致用户不触发事件之后动画依然在执行。
解决办法是在执行动画前将该元素的动画都停止掉，该元素调用stop（）方法即可。

<script>
$("button").stop().fadeIn();
</script>

jQuery淡入淡出动画

• fadeIn([s],[e],[fn]) 淡入
• fadeOut([s],[e],[fn]) 淡出
• fadeTo([[s],o,[e],[fn]]) 淡入到
• fadeToggle([s,[e],[fn]]) 淡入淡出切换

    <style>
        .box{
            width: 100px;
            height: 100px;
            background: red;
            display: none;
        }
    </style>
    <script>
        $(function () {
            var $btns = $("button");

            $btns.eq(0).click(function () {
                $(".box").stop();//清除之前动画队列中的动画
                $(".box").fadeIn(1000,function () {
                    alert("淡入");
                })
            });
            $btns.eq(1).click(function () {
                $(".box").fadeOut(1000,function () {
                    alert("淡出");
                })
            });
            $btns.eq(2).click(function () {
                $(".box").fadeToggle(1000,function () {
                    alert("切换");
                })
            });
            $btns.eq(3).click(function () {
                $(".box").fadeTo(500,0.5,function () {
                    alert("淡入到");
                })
            });
            
        });
    </script>
<body>
<button>淡入</button>
<button>淡出</button>
<button>切换</button>
<button>淡入到</button>

<div class="box"></div>
</body>

jQuery自定义动画

使用animate（）方法。
第一个参数：接受一个对象，各个CSS属性以伪数组形式保存
第二个参数：指定动画的时长
第三个参数：指定动画的运动速率，默swing
第四个参数：动画执行完毕后的回调callBack

$("selector").animate({
	width:500,
	height:500
},1000,"linear",function(){
	alert("自定义动画执行完毕，执行了回调函数");
});

在原来CSS属性值基础上累加属性

代码示例：

    <style>
        div{
            width: 100px;
            height: 100px;
            margin-top: 20px;
            position: relative;
        }

        .box1{
            background: red;
        }
        
        .box2{
            background:blue;
        }
    </style>
    <script>

        $(function () {
            $("button").click(function () {
                $("div").animate({
                    left:"+=100px"//属性的累加！

                },1000,"linear",function () {
                    alert(this.toString()+"animate");
                })
            });
        });
    </script>
    
<button>start</button>
<div class="box1"></div>
<div class="box2"></div>

综合滚动轮播Demo

    <style>
        *{
            padding:0;
            margin:0;
        }
        .content{
            width: 600px;
            height: 150px;
            margin:100px auto;
            background: black;
            overflow: hidden;
        }

        ul{
            width: 3600px;
            height: 100%;

            position: relative;
            left:0px;
        }
        ul>li{
            width: 300px;
            height: 150px;
            list-style: none;
            float: left;
        }
        ul>li:nth-child(1){
            background: red;
        }
        ul>li:nth-child(2){
            background: blue;
        }
        ul>li:nth-child(3){
            background: yellow;
        }
        ul>li:nth-child(4){
            background: #00ff00;
        }
        ul>li:nth-child(5){
            background: red;
        }
        ul>li:nth-child(6){
            background: blue;
        }
    </style>
    <script>
        $(function () {

            //定义偏移量
            var offset = 0;

            //计时函数
            var timer;
            function startScroll(){
                timer = setInterval(function () {
                    offset+=-10;
                    if(offset<=-1200){
                        offset = 0;
                    }
                    $(".content>ul").css("marginLeft",offset);
                },50);
            }

            startScroll();

            //注册鼠标移入移出事件
            $(".content>ul>li").hover(function () {
                clearInterval(timer);
                $(this).siblings().fadeTo(100,0.5);
            },function () {
                $(this).siblings().fadeTo(100,1);
                startScroll();
            });
        })
    </script>
<body>
    <div class="content">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>

---

PS：希望对你有帮助，欢迎评论，求点赞，你的认可是我坚持写作的最大动力~~