谁看谁会简单易懂的jQuery(二)

最新推荐文章于 2024-07-30 10:56:44 发布

dimingda

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量65

点赞数

分类专栏： js 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/dimingda/article/details/122353203

版权

js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1.jQuery事件

当我们绑定事件事，只能一个一个去绑定，类似下面

    <script>
        $(function() {
            // 单个事件绑定
            $("div").click(function() {
                $(this).css("backgroundColor", "skyblue");
            });
            $("div").mouseover(function() {
                $(this).css("backgroundColor", "red");
            })
            // 
        })
    </script>

1.当我们想对同一个对象绑定多个事件时，可以利用事件处理on(),来绑定

    <script>
        $(function() {
            // 单个事件绑定
            // $("div").click(function() {
            //     $(this).css("backgroundColor", "skyblue");
            // });
            // $("div").mouseover(function() {
            //     $(this).css("backgroundColor", "red");
            // })
            // 事件处理on()
            $("div").on({
                click: function(){
                    $(this).css("backgroundColor", "skyblue");
                },
                mouseover: function() {
                    $(this).css("backgroundColor", "red");
                }
            });
        })
    </script>

    <script>
        $(function() {
            // 多个事件做同一处理时
            $("div").on("mouseover mouseout", function() {
                $(this).toggleClass("current");
            });
        })
    </script>

on可以实现事件的委托

            // 实现事件委托
            // 给ul绑定事件，但是点击li才会触发，会发生冒泡。li一定是ul的孩子
            $("ul").on("click", "li", function(){
                alert(222);
            })

// 实现动态绑定
// 如果不用on，比如当我们先ul下的li元素绑定事件，然后在ul里新加li标签就不会被添加事件，因为是后创建的
// 但是用了on，就不会出现上面的情况

来个案例，发布微博的案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        li {
            list-style: none;
        }
        .big {
            width: 600px;
            margin: 100px auto;
            border: 1px solid #000;
            padding: 20px;
        }
        .txt {
            width: 450px;
            height: 160px;
            outline: 8px ridge rgba(170, 50, 220, .1);
            border-radius: 2rem;
            resize: none;
            padding: 10px;
        }
        ul {
            width: 450px;
            padding-left: 70px;
        }
        ul li {
            line-height: 25px;
            border-bottom: 1px dashed #cccccc;
            display: none;
        }
        ul li a {
            color: black;
            font-size: 12px;
            float: right;
        }
    </style>
    <script src="../jQuery/jquery.min.js"></script>
    <script>
        $(function() {
            $(".btn").on("click", function() {
                var li = $("<li></li>");
                li.html($(".txt").val() + "<a href='javascript:;'>删除</a>");
                $("ul").prepend(li);
                li.slideDown();
                $("textarea").val("");
            });
            $("ul").on("click", "a", function() {
                $(this).parent().slideUp(function() {
                    $(this).remove();
                });
            })
        });
    </script>
</head>
<body>
    <div class="big">
        <span>微博发布</span>
        <textarea  class="txt" cols="30" rows="10"></textarea>
        <button class="btn">发布</button>
        <ul>
        </ul>
    </div>
</body>
</html>

4.事件解绑
off()

    <script>
        $(function() {
            // 事件解绑off()
            $("div").on({
                click: function(){
                    $(this).css("backgroundColor", "skyblue");
                },
                mouseover: function() {
                    $(this).css("backgroundColor", "red");
                }
            });
            // 全部解绑
            // $("div").off();
            // 解绑点击
            $("div").off("click");
        })
    </script>

5.自动触发事件
trigger

<script>
            $("div").on("click", function() {
                alert(11);
            });
            // 自动触发
            // 1.
            // $("div").click();
            // 2. 
            $("div").trigger("click");
            // 下面的不会触发元素的默认行为
            $("div").triggerHandler("click");

        })
        </script>

2.jQuery拷贝对象

$.extend(深浅拷贝，目标对象，要拷贝的对象);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery.min.js"></script>
    <script>
        $(function() {
            // 1.
            // var target = {};
            // var obj = {
            //     id: 2,
            //     name: "dada"
            // };
            // $.extend(target, obj);
            // console.log(target);
            // 2. 原来有数据，会替换
            // var target = {
            //     id: 0
            // };
            // var obj = {
            //     id: 2,
            //     name: "dada"
            // };
            // $.extend(target, obj);
            // console.log(target);
            // 3.默认浅拷贝时，复杂数据类拷贝的是地址，所以拷贝前后指向的是同一个数据，修改其中一个另一个会改变
            var target = {
                id: 0,
                msg: {
                    sex: "nv"
                }
            };
            var obj = {
                id: 2,
                name: "dada",
                msg: {
                    age: 19
                }
            };
            // $.extend(target, obj);
            // console.log(target);
            // 4.深拷贝会重新开辟空间存放数据
            $.extend(true, target, obj);
            console.log(target);
        })
    </script>
</head>
<body>
    
</body>
</html>

3.jQuery多库共存

什么是多库共存呢？就是我们的jQuery的$符号可能和我们代码其他的这个符号冲突，所以jQuery就允许我们改变，可以用jQuery替换这个$符号，也可以通过var xx = $noConflict()来使用xx替换$.

4.jQuery插件

推荐网址jQuery之家。使用插件的方法网站都有。
bootstrap的插件等等

4.jQuery大小及位置

盒子大小在这里插入图片描述
位置
offset() 获取盒子距离文档位置的偏移
position() 获取带有定位父亲的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .r {
            width: 300px;
            height: 300px;
            padding: 20px;
            margin: 50px;
            border: 10px solid red;
            background-color: sandybrown;
            position: relative;
        }
        .s {
            width: 50px;
            height: 50px;
            background-color: springgreen;
        }
    </style>
    <script src="./jquery.min.js"></script>
</head>
<body>
    <div class="r">
        <div class="s"></div>
    </div>
    <script>
        // 盒子的宽度
        console.log($(".r").width());
        // 盒子算上padding的宽度
        console.log($(".r").innerWidth());
        // 盒子算上boder的宽度
        console.log($(".r").outerWidth());
        // 盒子算上margin的宽度
        console.log($(".r").outerWidth(true));
        // 盒子相对于文档的距离
        console.log($(".r").offset());
        // 获取父亲带定位的偏移
        console.log($(".r").position());
        // 被卷起的长度scrollTop();
    </script>
</body>
</html>

dimingda

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
谁看谁会简单易懂的jQuery(二)

1.jQuery事件当我们绑定事件事，只能一个一个去绑定，类似下面 <script> $(function() { // 单个事件绑定 $("div").click(function() { $(this).css("backgroundColor", "skyblue"); }); $("div").mouseover(function()
复制链接

扫一扫

专栏目录