2021-08-04 jQuery基础整理 17-30 代码复制即可运行

最新推荐文章于 2024-05-21 19:09:41 发布

blackkerword

最新推荐文章于 2024-05-21 19:09:41 发布

阅读量118

点赞数

文章标签： jquery javascript

本文链接：https://blog.csdn.net/blackkerword/article/details/119378481

版权

17. jQuery 操作样式方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<script>
    $(function () {
        //1.逐个设置
        $("div").css("width" , "100px");
        $("div").css("height" , "100px");
        $("div").css("background" , "red");

        //2.链式设置
        //注意点：链式操作如果大于三步建议分开
        $("div").css("width" , "100px")
                .css("height" , "100px")
                .css("background" , "blue");

        //3.批量设置
        //推荐
        $("div").css({
            width : "100px",
            height : "100px",
            background : "yellow"
        });

        //4.获取CSS样式值
        console.log($("div").css("width"));
    });
</script>
<body>
    <div></div>
</body>
</html>

18. jQuery的尺寸和位置操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .father{
        width: 200px;
        height: 200px;
        background: red;
        border: 50px solid #000;
        margin-left: 50px;
        position: relative;
    }
    .son{
        width: 100px;
        height: 100px;
        background: blue;
        left: 50px;
        top: 50px;
        position:absolute;
    }
</style>
<script>
    $(function () {
        var btn = document.getElementsByTagName("button");
        //监听获取
        btn[0].onclick = function () {
            //获取元素的宽度
            alert($(".father").width());
            //获取元素距离窗口的偏移位
            // offset([coordinates])
            alert($(".son").offset().left);
            //获取元素距离地位元素的偏移位
            //注意：position()只能获取，不能设置
            // position()
            alert($(".son").position().left);
        }
        //监听设置
        btn[1].onclick = function () {
            //设置元素的宽度
            //$(".father").width("500px")
            $(".son").offset({
                left:10
            });
        }
    });
</script>
<body>
    <div class="father">
        <div class="son">

        </div>
    </div>
    <button>获取</button>
    <button>设置</button>
</body>
</html>

19.jQuery 的scrollTob方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .scroll{
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        overflow: auto;
    }
</style>
<script>
    $(function () {
        var btn = document.getElementsByTagName("button");
        //监听获取
        btn[0].onclick = function () {
            //获取滚动的偏移位
            //alert($(".scroll").scrollTop());
            //获取网页滚动的偏移位
            //注意点：为了保证浏览器的兼容，需要按照如下写法
            alert($("html").scrollTop()+$("body").scrollTop());
        }
        btn[1].onclick = function () {
            //设置滚动的偏移位
            //$(".scroll").scrollTop(50);
            //设置网页滚动的偏移位
            //注意点：为了保证浏览器的兼容，需要按照如下写法
            alert($("html,body").scrollTop(500));
        }
    });
</script>
<body>
    <div class="scroll">我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
    </div>
    <button>获取</button>
    <button>设置</button>
    <br>
    <br>
    <br>
    <br>
    <br>
</body>
</html>

20. jQuery事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<script>
    $(function () {
        /*
        jquery中有两种绑定事件方式
        1.eventName（fn）
        编码效率略高 部分事件jQuery没有实现 所以不能添加
        2.on（eventName，fn）
        编码效率略低 所有js事件都可以添加

        注意点
        可以添加多个相同或不同类型的事件，不会覆盖
         */
        // $("button").click(function () {
        //     alert("hello")
        // })
        // $("button").click(function () {
        //     alert("0000")
        // })
        // $("button").mouseleave(function () {
        //     alert("1111")
        // })
        // $("button").mouseenter(function () {
        //     alert("2222")
        // })
        $("button").on("click",function () {
            alert("hello")
        })
        $("button").on("click",function () {
            alert("hello333")
        })
        $("button").on("mouseleave",function () {
            alert("hello4444")
        })
        $("button").on("mouseenter",function () {
            alert("hello66666")
        })
    });
</script>
<body>
    <button>我是按钮</button>
</body>
</html>

21. jQuery事件解绑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<script>
    $(function () {
        function text1() {
            alert("hello")
        }
        function text2() {
            alert("0000")
        }
        $("button").click(text1);
        $("button").click(text2);
        $("button").mouseleave(function () {
            alert("1111")
        })
        $("button").mouseenter(function () {
            alert("2222")
        })
        //off方法如果不传递参数，会移除所有事件
        //$("button").off();
        //off方法如果传递一个参数，会移除所有指定类型的事件
        //$("button").off("click");
        //off方法如果传递两个参数，会移除指定类型的指定事件
        $("button").off("click",text1);

    });
</script>
<body>
    <button>我是按钮</button>
</body>
</html>

22. jQuery事件冒泡和默认行为

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .father{
        width: 200px;
        height: 200px;
        background: red;
    }
    .son{
        width: 100px;
        height: 100px;
        background: blue;
    }
</style>
<script>
    $(function () {
        /*
        1.什么是事件冒泡
        2.如何阻止事件冒泡
        3.什么是默认行为
        4.如何阻止默认行为
         */
        // $(".son").click(function (event) {
        //     alert("son");
        //     //return false;
        //     event.stopPropagation();
        // })
        // $(".father").click(function () {
        //     alert("father")
        // })
        $("a").click(function (event) {
            alert("弹出注册框");
            // return false;
            event.preventDefault();
        })
    });
</script>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <a href="http://www.baidu.com">注册</a>
    <form action="http://www.taobao.com">
        <input type="text">
        <input type="submit">
    </form>
</body>
</html>

23. jQuery自动事件触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .father{
        width: 200px;
        height: 200px;
        background: red;
    }
    .son{
        width: 100px;
        height: 100px;
        background: blue;
    }
</style>
<script>
    $(function () {
        $(".son").click(function (event) {
            alert("son");
        })
        $(".father").click(function () {
            alert("father")
        })
        // $(".father").trigger("click");
        //$(".father").triggerHandler("click");
        /*
        如果利用trigger自动触发事件，会触发事件冒泡
         */
        //$(".son").trigger("click");
        /*
        如果利用triggerHandler自动触发事件，不会触发事件冒泡
         */
        //$(".son").triggerHandler("click");
        $("input[type='submit']").click(function () {
            alert("submit")
        })
        /*
        如果利用trigger自动触发事件，会触发默认行为
         */
        // $("input[type='submit']").trigger("click");

        /*
        如果利用triggerHandler自动触发事件，不会触发默认行为
         */
         //$("input[type='submit']").triggerHandler("click");

        //注意：要想触发a标签的默认行为 需要在a标签里在加一个标签
        $("span").click(function () {
            alert("a")
        })
        $("span").trigger("click");
    });
</script>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <a href="http://www.baidu.com"><span>注册</span></a>
    <form action="http://www.taobao.com">
        <input type="text">
        <input type="submit">
    </form>
</body>
</html>

24. jQuery自定义事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .father{
        width: 200px;
        height: 200px;
        background: red;
    }
    .son{
        width: 100px;
        height: 100px;
        background: blue;
    }
</style>
<script>
    $(function () {
        // $(".son").click(function (event) {
        //     alert("son");
        // })

        /*
        想要自定义事件必须满足两个条件
        1.事件必须是通过on来绑定的
        2.事件必须通过trigger来触发
         */
        $(".son").on("myClick",function () {
            alert("aaa")
        })
        $(".son").trigger("myClick");
    });
</script>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <a href="http://www.baidu.com"><span>注册</span></a>
    <form action="http://www.taobao.com">
        <input type="text">
        <input type="submit">
    </form>
</body>
</html>

25. jQuery事件命名空间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .father{
        width: 200px;
        height: 200px;
        background: red;
    }
    .son{
        width: 100px;
        height: 100px;
        background: blue;
    }
</style>
<script>
    $(function () {
        /*
        想要事件的命名空间有效，必须满足两个条件
        1.事件是通过on绑定的
        2.通过trigger触发事件
         */
        $(".son").on("click.zs",function () {
            alert("aaa")
        })
        $(".son").on("click.ls",function () {
            alert("bbb")
        })
        $(".son").trigger("click.zs");
    });
</script>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <a href="http://www.baidu.com"><span>注册</span></a>
    <form action="http://www.taobao.com">
        <input type="text">
        <input type="submit">
    </form>
</body>
</html>

26. jQuery事件命名空间面试题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .father{
        width: 200px;
        height: 200px;
        background: red;
    }
    .son{
        width: 100px;
        height: 100px;
        background: blue;
    }
</style>
<script>
    $(function () {
        $(".father").on("click.ls",function () {
            alert("aaa")
        })
        $(".father").on("click",function () {
            alert("ccc")
        })
        $(".son").on("click.ls",function () {
            alert("bbb")
        })
        /*
        利用trigger触发了元素带命名空间的事件
        那么父元素带相同命名空间的事件也会被触发
        而父元素没有没有命名空间的元素不会被触发
         */
        //$(".son").trigger("click.ls")
        /*
        利用trigger触发子元素不带命名空间的事件
        那么子元素所有相同类型的事件和父元素所有相同类型的事件都会被触发
         */
        $(".son").trigger("click")
    });
</script>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <a href="http://www.baidu.com"><span>注册</span></a>
    <form action="http://www.taobao.com">
        <input type="text">
        <input type="submit">
    </form>
</body>
</html>

27. jQuery事件委托

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<style>
</style>
<script>
    $(function () {
       /*
       1.什么是事件委托
       请别人帮忙做事情，然后将做完的结果反馈给我们
        */
       $("button").click(function () {
           $("ul").append("<li>我是新增li</li>")
       })

        /*
        在jQuery中，如果通过核心函数找到的元素不止一个
        那么在添加事件的时候，jQuery会遍历所有找到的元素
        给所有找到的元素添加事件
         */
       // $("ul>li").click(function () {
       //     alert($(this).html())
       // })
        /*
        以下代码的含义，让ul帮li监听click事件
        之所以能够监听，是因为入口函数执行的时候ul就已经存在了，所以能够添加事件
        之所以this是li，是因为我们点击的是li，而li没有click事件
        所以事件冒泡传递给了ul，ul响应了事件，既然事件是从li传递过来的
        所以ul必然指定this是谁
        */
        $("ul").delegate("li","click",function () {
            alert($(this).html())
        })
    });
</script>
<body>
<ul>
    <li>我是第一个li</li>
    <li>我是第二个li</li>
    <li>我是第三个li</li>
</ul>
<button>新增li</button>
</body>
</html>

28. jQuery移入移出事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .father{
        width: 200px;
        height: 200px;
        background: red;
    }
    .son{
        width: 100px;
        height: 100px;
        background: blue;
    }
</style>
<script>
    $(function () {
        /*
        mouseover/mouseout 子元素被移入移除也会触发父元素的事件
         */
        // $(".father").mouseover(function () {
        //     console.log("father移入了");
        // })
        // $(".father").mouseout(function () {
        //     console.log("father移出了");
        // })

        /*
        mouseenter/mouseleave 子元素被移入移除不会触发父元素的事件
        推荐使用
         */
        // $(".father").mouseenter(function () {
        //     console.log("father移入了");
        // })
        // $(".father").mouseleave(function () {
        //     console.log("father移出了");
        // })

        // $(".father").hover(function () {
        //     console.log("father移入了");
        // },function () {
        //     console.log("father移出了");
        // })

        $(".father").hover(function () {
            console.log("father移入yichu了");
        })

    });
</script>
<body>
<div class="father">
    <div class="son">

    </div>
</div>
</body>
</html>

29. 电影排行榜（移入移出事件练习）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 300px;
        height: 450px;
        margin: 50px auto;
        border: 1px solid #000;
    }
    .box>h1{
        font-size: 20px;
        line-height: 35px;
        color: deeppink;
        padding-left: 10px;
        border-bottom: 1px dashed #ccc;
    }
    ul>li{
        list-style: none;
        padding: 5px 10px;
        border: 1px dashed #ccc;
    }
    ul>li:nth-child(-n+3) span{
        background: deeppink;
    }
    ul>li>span{
        display: inline-block;
        width: 20px;
        height: 20px;
        background: #ccc;
        text-align: center;
        line-height: 20px;
        margin-right: 10px;
    }
    .content{
        overflow: hidden;
        margin-top: 5px;
        display: none;
    }
    .content>img{
        width: 80px;
        height: 120px;
        float: left;
    }
    .content>p{
        width: 180px;
        height: 120px;
        float: right;
        font-size: 12px;
        line-height: 20px;
    }
    .current .content{
        display: block;
    }
</style>
<script>
    $(function () {
        /*
        //1.监听li的移入事件
        $("li").mouseenter(function () {
            $(this).addClass("current")
        })
        //2.监听li的移出事件
        $("li").mouseleave(function () {
            $(this).removeClass("current")
        })
         */
        $("li").hover(function () {
            $(this).addClass("current")
        },function () {
            $(this).removeClass("current")
        })
    });
</script>
<body>
<div class="box">
    <h1>电影排行榜</h1>
    <ul>
        <li><span>1</span>电影名称
            <div class="content">
                <img src="https://img0.baidu.com/it/u=3643222036,2137679457&fm=26&fmt=auto&gp=0.jpg">
                <p>痞性十足的冷锋（吴京饰）屡屡惹祸，有人说他是流氓，是痞子， 也有人说他是英雄，是传奇，在一次行动中冷锋违抗军令打死了恐怖分子，要被开除出队，却意外得到了神秘部队战狼的接纳，但本想换个地方继续惹祸的他却跳进了另外一个深渊，冷傲的战狼副队长，擦出暧昧火花的性感女队长（余男饰），心计颇深腹黑的毒枭，枉死的队友，雇佣兵跨过边境线入侵中国，一切都使他陷入了麻烦中。一切都在考验这个团队的毒瘤冷锋，他不知该何去何从。</p>
            </div>
        </li>
        <li><span>2</span>电影名称
            <div class="content">
                <img src="https://img0.baidu.com/it/u=3643222036,2137679457&fm=26&fmt=auto&gp=0.jpg">
                <p>痞性十足的冷锋（吴京饰）屡屡惹祸，有人说他是流氓，是痞子， 也有人说他是英雄，是传奇，在一次行动中冷锋违抗军令打死了恐怖分子，要被开除出队，却意外得到了神秘部队战狼的接纳，但本想换个地方继续惹祸的他却跳进了另外一个深渊，冷傲的战狼副队长，擦出暧昧火花的性感女队长（余男饰），心计颇深腹黑的毒枭，枉死的队友，雇佣兵跨过边境线入侵中国，一切都使他陷入了麻烦中。一切都在考验这个团队的毒瘤冷锋，他不知该何去何从。</p>
            </div>
        </li>
        <li><span>3</span>电影名称
            <div class="content">
                <img src="https://img0.baidu.com/it/u=3643222036,2137679457&fm=26&fmt=auto&gp=0.jpg">
                <p>痞性十足的冷锋（吴京饰）屡屡惹祸，有人说他是流氓，是痞子， 也有人说他是英雄，是传奇，在一次行动中冷锋违抗军令打死了恐怖分子，要被开除出队，却意外得到了神秘部队战狼的接纳，但本想换个地方继续惹祸的他却跳进了另外一个深渊，冷傲的战狼副队长，擦出暧昧火花的性感女队长（余男饰），心计颇深腹黑的毒枭，枉死的队友，雇佣兵跨过边境线入侵中国，一切都使他陷入了麻烦中。一切都在考验这个团队的毒瘤冷锋，他不知该何去何从。</p>
            </div>
        </li>
        <li><span>4</span>电影名称
            <div class="content">
                <img src="https://img0.baidu.com/it/u=3643222036,2137679457&fm=26&fmt=auto&gp=0.jpg">
                <p>痞性十足的冷锋（吴京饰）屡屡惹祸，有人说他是流氓，是痞子， 也有人说他是英雄，是传奇，在一次行动中冷锋违抗军令打死了恐怖分子，要被开除出队，却意外得到了神秘部队战狼的接纳，但本想换个地方继续惹祸的他却跳进了另外一个深渊，冷傲的战狼副队长，擦出暧昧火花的性感女队长（余男饰），心计颇深腹黑的毒枭，枉死的队友，雇佣兵跨过边境线入侵中国，一切都使他陷入了麻烦中。一切都在考验这个团队的毒瘤冷锋，他不知该何去何从。</p>
            </div>
        </li>
        <li><span>5</span>电影名称
            <div class="content">
                <img src="https://img0.baidu.com/it/u=3643222036,2137679457&fm=26&fmt=auto&gp=0.jpg">
                <p>痞性十足的冷锋（吴京饰）屡屡惹祸，有人说他是流氓，是痞子， 也有人说他是英雄，是传奇，在一次行动中冷锋违抗军令打死了恐怖分子，要被开除出队，却意外得到了神秘部队战狼的接纳，但本想换个地方继续惹祸的他却跳进了另外一个深渊，冷傲的战狼副队长，擦出暧昧火花的性感女队长（余男饰），心计颇深腹黑的毒枭，枉死的队友，雇佣兵跨过边境线入侵中国，一切都使他陷入了麻烦中。一切都在考验这个团队的毒瘤冷锋，他不知该何去何从。</p>
            </div>
        </li>
    </ul>
</div>
</body>
</html>

30. tab选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 440px;
        height: 298px;
        border: 1px solid #000;
        margin: 50px auto;
    }
    .nav>li{
        list-style: none;
        width: 110px;
        height: 50px;
        background: orange;
        text-align: center;
        line-height: 50px;
        float: left;
    }
    .nav>.current{
        background: #ccc;
    }
    .content>li{
        list-style: none;
        display: none;
    }
    .content .show{
        display: block;
    }
    .content>li>img{
        width: 440px;
        height: 248px;
    }
</style>
<script>
    $(function () {
        /*
       //1.监听选项卡的移入事件
        $(".nav>li").mouseenter(function () {
            //1.1 修改被移入的选项卡的颜色
            $(this).addClass("current");
            //1.2获取当前移入选项卡的索引
            var index = $(this).index();
            //1.3根据索引找到对应的图片
            var li = $(".content>li").eq(index);
            //1.4显示找到的图片
            li.addClass("show")
        })
        //2.监听选项卡的移出事件
        $(".nav>li").mouseleave(function () {
            //1.1 修改被移入的选项卡的颜色
            $(this).removeClass("current");
            //1.2获取当前移出选项卡的索引
            var index = $(this).index();
            //1.3根据索引找到对应的图片
            var li = $(".content>li").eq(index);
            //1.4隐藏找到的图片
            li.removeClass("show")
        })
        */
        $(".nav>li").mouseenter(function () {
            //1.1 修改被移入的选项卡的颜色
            $(this).addClass("current");
            //1.2还原其他兄弟选项卡的背景颜色
            $(this).siblings().removeClass("current");
            //1.3获取当前移入选项卡的索引
            var index = $(this).index();
            //1.4根据索引找到对应的图片
            var li = $(".content>li").eq(index);
            //隐藏非当前的其它图片
            li.siblings().removeClass("show");
            //1.5显示对应的图片
            li.addClass("show");
        })
    });
</script>
<body>
<div class="box">
    <ul class="nav">
        <li class="current">Css</li>
        <li>jQuery</li>
        <li>java</li>
        <li>C++</li>
    </ul>
    <ul class="content">
        <li class="show"><img src="https://img1.baidu.com/it/u=253337507,2981296721&fm=26&fmt=auto&gp=0.jpg"></li>
        <li><img src="https://img1.baidu.com/it/u=3694053003,1912698683&fm=26&fmt=auto&gp=0.jpg"></li>
        <li><img src="https://img1.baidu.com/it/u=4268324981,3384091170&fm=26&fmt=auto&gp=0.jpg"></li>
        <li><img src="https://img1.baidu.com/it/u=1977046168,368269341&fm=26&fmt=auto&gp=0.jpg"></li>
    </ul>
</div>
</body>
</html>

blackkerword

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-08-04 jQuery基础整理 17-30 代码复制即可运行

17. jQuery 操作样式方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery</title></head><script src="public/jquery-1.9.1.min.js"></script><script> $(function ()
复制链接

扫一扫