jQuery学习:事件移除、解绑/阻止冒泡、默认行为/each方

作者: Merbng | 来源:发表于2019-05-08 18:38 被阅读0次

移除事件绑定

触发事件
触发p的点击事件
$("p").click();
$("p").trigger("click");
解绑事件
解绑匹配元素的所有事件
$(selector).off();
解绑匹配元素的所有click事件
$(selector).off("click");

阻止冒泡和阻止浏览器的默认行为

阻止浏览器默认行为
e.preventDefault();
阻止事件冒泡
e.stopPropagation();
既能阻止事件冒泡，也能阻止浏览器默认行为
return false

<a href="http://www.baidu.com" id="link">百度</a>
    $(function () {
        $("#link").on("click", function (e) {
            //    阻止默认行为
            // e.preventDefault();
            //阻止事件冒泡
            e.stopPropagation();
            alert("测试");
            //既能阻止事件冒泡，也能阻止浏览器默认行为
            // return false;
        });
        $("body").on("click", function () {
            alert("点击body");
        })
    });

each方法

jquery的隐式迭代会对所有的DOM对象设置相同的值，但是如果我们需要给每个对象设置不同的值，就需要自己进行迭代，

作用：变量jQuery对象集合，为每个匹配的元素执行一个函数

方式1：

for (i = 0; i < $("li").length; i++) {
   $("li").eq(i).css("opacity", (i + 1) / 10);
}

方式2：(推荐)

        $("li").each(function (index, element) {
            $(element).css("opacity", (index + 1) / 10);
        })

$冲突

jQuery使用$作为标识符，但是如果与其他框架中的$冲突时，jQuery可以释放$符控制权

    console.log($);
    //jquery释放控制权
    // $.noConflict();
    var $$ = $.noConflict();//释放
    console.log($$);

案例：键盘钢琴导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .nav {
            width: 900px;
            height: 60px;
            background-color: black;
            margin: 0 auto;
        }

        .nav li {
            width: 100px;
            height: 60px;
            /*border: 1px solid yellow;*/
            float: left;
            position: relative;
            overflow: hidden;
        }

        .nav a {
            position: absolute;
            width: 100%;
            height: 100%;
            font-size: 24px;
            color: blue;
            text-align: center;
            line-height: 60px;
            text-decoration: none;
            z-index: 2;
        }

        .nav span {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: yellow;
            top: 60px;
        }
    </style>

</head>
<body>
<div class="nav">
    <ul>
        <li>
            <a href="javascript:void(0);">导航1</a>
            <span></span>
        </li>
        <li><a href="javascript:void(0);">导航2</a><span></span></li>
        <li><a href="javascript:void(0);">导航3</a><span></span></li>
        <li><a href="javascript:void(0);">导航4</a><span></span></li>
        <li><a href="javascript:void(0);">导航5</a><span></span></li>
        <li><a href="javascript:void(0);">导航6</a><span></span></li>
        <li><a href="javascript:void(0);">导航7</a><span></span></li>
        <li><a href="javascript:void(0);">导航8</a><span></span></li>
        <li><a href="javascript:void(0);">导航9</a><span></span></li>
    </ul>

    <div>
        <audio src="mp3/1.ogg"></audio>
        <audio src="mp3/2.ogg"></audio>
        <audio src="mp3/3.ogg"></audio>
        <audio src="mp3/4.ogg"></audio>
        <audio src="mp3/5.ogg"></audio>
        <audio src="mp3/6.ogg"></audio>
        <audio src="mp3/7.ogg"></audio>
        <audio src="mp3/8.ogg"></audio>
        <audio src="mp3/9.ogg"></audio>
    </div>
</div>
<script src="../jquery-1.12.4.js"></script>
<script>
    $(function () {
        //    给li注册鼠标进入事件，让li下面的span top：0  播放音乐
        $(".nav li").mouseenter(function () {
            $(this).children("span").stop().animate({top: 0});
            //    播放音乐
            var idx = $(this).index();
            $(".nav audio").get(idx).load();
            $(".nav audio").get(idx).play();
        }).mouseleave(function () {
            $(this).children("span").stop().animate({top: 60});
        });
        //    节流阀：按下的时候触发，如果没弹起，不让触发下一次
        var flag = true;
        //    按下1-9这几个数字键，能触发对应的mouseenter事件
        $(document).on("keydown", function (e) {
            if (flag) {
                flag = false;
                //    获取按下的键
                var code = e.keyCode;
                if (code >= 49 && code <= 57) {
                    $(".nav li").eq(code - 49).mouseenter();
                }
            }
        });
        //弹起的时候，触发mouseleave事件
        $(document).on("keyup", function (e) {
            flag = true;
            //    获取按下的键
            var code = e.keyCode;
            if (code >= 49 && code <= 57) {
                //    触发对应的mouseleave事件
                $(".nav li").eq(code - 49).mouseleave();
            }
        })
    });
</script>
</body>
</html>

案例：jquery ui插件实现新闻模块（拖拽）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="jquery-ui.css">
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .drag-wrapper {
            width: 400px;
            margin: 50px auto 0;
            /*border: 10px solid #000;*/
        }

        .drag-bar {
            height: 40px;
            font-size: 20px;
            font-weight: bold;
            line-height: 40px;
            text-align: center;
            background-color: #E6E6E6;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            cursor: move;
        }

        .resize-item {
            height: 212px;
            border: 1px solid #e6e6e6;
        }

        .sort-wrapper {
            height: 100%;
            overflow: hidden;
        }

        .sort-item {
            list-style: none;
            padding-top: 10px;
        }

        .sort-item li {
            height: 40px;
            line-height: 40px;
            padding-left: 20px;
            cursor: pointer;
        }

        .sort-item li:hover {
            background-color: #e6e6e6;
        }
    </style>

</head>
<body>
<div class="drag-wrapper">
    <div class="drag-bar">可拖动、排序、变形的新闻模块</div>
    <div class="resize-item">
        <div class="sort-wrapper">
            <ul class="sort-item">
                <li>这是第1条新闻!</li>
                <li>这是第2条新闻!</li>
                <li>这是第3条新闻!</li>
                <li>这是第4条新闻!</li>
                <li>这是第5条新闻!</li>
                <li>这是第6条新闻!</li>
                <li>这是第7条新闻!</li>
                <li>这是第8条新闻!</li>
                <li>这是第9条新闻!</li>
                <li>这是第10条新闻!</li>
            </ul>
        </div>
    </div>
</div>
<script src="jquery-1.12.4.js"></script>
<script src="jquery-ui.js"></script>
<script>
    $(function () {
        $(".drag-wrapper").draggable({
            handle: ".drag-bar"
        });
        $(".sort-item").sortable({
            opacity: 0.3
        });
        $(".resize-item").resizable({
            handles: "e"
        });
    });
</script>

</body>
</html>

插件：背景色渐变
query不支持颜色的渐变，颜色最好用十六进制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            background-color: red;
        }
    </style>

</head>
<body>
<div></div>

<script src="jquery-1.12.4.js"></script>
<script src="jquery.color.js"></script>
<script>
    $(function () {
        //jquery不支持颜色的渐变，颜色最好用十六进制
        $("div").animate({backgroundColor: "#ffc0cb"}, 2000, function () {
            alert("测试");
        });
    });
</script>
</body>
</html>

插件：图片懒加载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            height: 4000px;
        }
    </style>

</head>
<body>
<div></div>
<img class="lazy" data-original="imgs/lazyimg.gif" alt="">

<script src="jquery-1.12.4.js"></script>
<script src="jquery.lazyload.js"></script>
<script>
    $(function () {
        $("img.lazy").lazyload();
    });
</script>

</body>
</html>

插件封装：手风琴效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        div {
            width: 1200px;
            height: 400px;
            border: 2px solid #000;
            margin: 100px auto;
        }

        li {
            width: 240px;
            height: 400px;
            float: left;
        }

        li:nth-child(1) {
            background-image: url(images/1.jpg);
        }

        li:nth-child(2) {
            background-image: url(images/2.jpg);
        }

        li:nth-child(3) {
            background-image: url(images/3.jpg);
        }

        li:nth-child(4) {
            background-image: url(images/4.jpg);
        }

        li:nth-child(5) {
            background-image: url(images/5.jpg);
        }
    </style>

</head>
<body>
<div id="box">

    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

</div>
<script src="../jquery-1.12.4.js"></script>
<script src="jquery.accordion.js"></script>
<script>
    $(function () {
        var colors = ["red", "yellow", "green", "cyan", "pink", "hotpink", "blue", "yellowgreen", "greenyellow", "skyblue"];
        $("#box").accordion(colors, 100);
    });
</script>
</body>
</html>

jquery.accordion.js

$.fn.accordion = function (colors, width) {
    colors = colors || [];
    width = width || 0;
    var $li = this.find("li");
    var boxLength = this.width();
    var maxLength = boxLength - ($li.length - 1) * width;
    var avgLength = boxLength / $li.length;
//    更改li的颜色
    $li.each(function (i, e) {
        $(e).css("backgroundColor", colors[i]);
    });
//    给li注册鼠标经过事件
    $li.on("mouseenter", function () {
        $(this).stop().animate({width: maxLength}).siblings().stop().animate({width: width});
    })
    $li.on("mouseleave", function () {
        $li.stop().animate({width: avgLength});
    })
};

附链接:
Demo地址

jQuery学习:事件移除、解绑/阻止冒泡、默认行为/each方

移除事件绑定

阻止冒泡和阻止浏览器的默认行为

each方法

$冲突

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

H5^Study