jQuery-day03-事件注册、事件处理on、事件解绑off、自动触发事件、事件对象、jQuery对象拷贝、多库共存、插件网站

最新推荐文章于 2024-05-05 23:58:22 发布

Lo、

最新推荐文章于 2024-05-05 23:58:22 发布

阅读量123

点赞数

分类专栏： Javascript&jQuery 文章标签： jquery 前端

本文链接：https://blog.csdn.net/weixin_44764873/article/details/104266714

版权

Javascript&jQuery 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

事件注册

element.事件(function() { … });
eg：$(“div”).click(function() { … });

事件处理on

element.on(events, [selector] , fn )
events: 1个或者多个事件类型（空格）
selector: 元素的子元素选择器


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        
        .current {
            background-color: purple;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div></div>
    <ul>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
    </ul>
    <ol>

    </ol>
    <script>
        $(function() {
            // 1. 单个事件注册
            // $("div").click(function() {
            //     $(this).css("background", "purple");
            // });
            // $("div").mouseenter(function() {
            //     $(this).css("background", "skyblue");
            // });

            // 2. 事件处理on
            // (1) on可以绑定1个或者多个事件处理程序
            // $("div").on({
            //     mouseenter: function() {
            //         $(this).css("background", "skyblue");
            //     },
            //     click: function() {
            //         $(this).css("background", "purple");
            //     },
            //     mouseleave: function() {
            //         $(this).css("background", "blue");
            //     }
            // });
            $("div").on("mouseenter mouseleave", function() {
                $(this).toggleClass("current");
            });
            // (2) on可以实现事件委托（委派）
            // $("ul li").click();
            $("ul").on("click", "li", function() {
                alert(11);
            });
            // click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li
            // (3) on可以给未来动态创建的元素绑定事件
            // $("ol li").click(function() {
            //     alert(11);
            // })
            $("ol").on("click", "li", function() {
                alert(11);
            })
            var li = $("<li>我是后来创建的</li>");
            $("ol").append(li);
        })
    </script>
</body>

</html>

事件解绑off

事件解绑 off
$(“div”).off(); // 这个是解除了div身上的所有事件
$(“div”).off(“click”); // 这个是解除了div身上的点击事件
$(“ul”).off(“click”, “li”); //解绑事件委托
one() 但是它只能触发事件一次
$(“p”).one(“click”, function() {
alert(11);
})

自动触发事件

$(function() {
$(“div”).on(“click”, function() {
alert(11);
});

元素.事件()
$(“div”).click();会触发元素的默认行为
元素.trigger(“事件”)
$(“div”).trigger(“click”);会触发元素的默认行为
$(“input”).trigger(“focus”);
元素.triggerHandler(“事件”) 就是不会触发元素的默认行为
$(“div”).triggerHandler(“click”);
$(“input”).on(“focus”, function() {
$(this).val(“你好吗”);
});
$(“input”).triggerHandler(“focus”);

事件对象

element.on(events, [selector] , function(event){…} )
阻止冒泡： event.stopPropagation();
阻止默认行为：event.preventDefault(); / return false;

jQuery对象拷贝

$.extend( [deep], target, obj);
deep: true深拷贝，false浅拷贝
target: 拷贝目标（空的或有东西）

    <script>
        $(function() {
            // var targetObj = {};
            // var obj = {
            //     id: 1,
            //     name: "andy"
            // };
            // // $.extend(target, obj);
            // $.extend(targetObj, obj);
            // console.log(targetObj);
            // var targetObj = {
            //     id: 0
            // };
            // var obj = {
            //     id: 1,
            //     name: "andy"
            // };
            // // $.extend(target, obj);
            // $.extend(targetObj, obj);
            // console.log(targetObj); // 会覆盖targetObj 里面原来的数据
            var targetObj = {
                id: 0,
                msg: {
                    sex: '男'
                }
            };
            var obj = {
                id: 1,
                name: "andy",
                msg: {
                    age: 18
                }
            };
            // // $.extend(target, obj);
            // $.extend(targetObj, obj);
            // console.log(targetObj); // 会覆盖targetObj 里面原来的数据
            // // 1. 浅拷贝把原来对象里面的复杂数据类型地址拷贝给目标对象
            // targetObj.msg.age = 20;
            // console.log(targetObj);
            // console.log(obj);
            // 2. 深拷贝把里面的数据完全复制一份给目标对象 如果里面有不冲突的属性,会合并到一起 
            $.extend(true, targetObj, obj);
            // console.log(targetObj); // 会覆盖targetObj 里面原来的数据
            targetObj.msg.age = 20;
            console.log(targetObj); // msg :{sex: "男", age: 20}
            console.log(obj);
        })
    </script>

多库共存

jQuery 与$冲突
$ .noConflict(); 自定义

<script>
        $(function() {
            function $(ele) {
                return document.querySelector(ele);
            }
            console.log($("div"));
            // 1. 如果$ 符号冲突 我们就使用 jQuery
            jQuery.each();
            // 2. 让jquery 释放对$ 控制权 让用自己决定
            var suibian = jQuery.noConflict();
            console.log(suibian("span"));
            suibian.each();
        })
    </script>

插件网站

jQuery插件库：http://www.jq22.com/ --EasyLazyload图片懒加载
jQuery之家：http://www.htmleaf.com/
全屏滚动：fullpage.js gitHub网址

Lo、

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery-day03-事件注册、事件处理on、事件解绑off、自动触发事件、事件对象、jQuery对象拷贝、多库共存、插件网站

事件注册element.事件(function() { … });eg：$(“div”).click(function() { … });事件处理onelement.on(events, [selector] , fn )events: 1个或者多个事件类型（空格）selector: 元素的子元素选择器<!DOCTYPE html><html lang="en"...
复制链接

扫一扫