jQuery学习笔记第三天

最新推荐文章于 2026-01-07 17:24:30 发布

原创最新推荐文章于 2026-01-07 17:24:30 发布 · 339 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #html #javascript #jquery

本文全面介绍了jQuery的各种操作方法，包括属性、类、文本值、样式、尺寸、位置的控制，以及事件绑定、解绑、冒泡、自动触发等高级技巧。

jQuery属性操作

jQuery的attr方法和removeAttr方法

attr() 方法设置或返回被选元素的属性值。根据该方法不同的参数，其工作方式也有所差异。

$(selector).attr(attribute)
$(selector).attr(attribute,value)

可以传一个值，代表获取被选元素的属性值
也可以传两个值，代表设置被选元素的属性和值

注：

如果传一个值，无论找到多少个元素，只返回找到的第一个元素
如果传两个值，就是设置值，那么找到多少个就设置多少个

removeAttr()方法用于删除元素的属性，删除的话就是找到多少个就删除多少个

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery的attr方法</title>
    <script src="../jquery-3.5.1.js"></script>
</head>

<body>
    <span class="span1" name="a1"></span>
    <span class="span2" name="a2"></span>
</body>
<script>
    /*
    1.$(selector).attr(attribute),$(selector).attr(attribute,value)
        可以传一个值，代表获取被选元素的属性值
        也可以传两个值，代表修改被选元素的属性和值
    
    
    */

    console.log($("span").attr("name"))
    // 注：无论找到多少个元素，只返回找到的第一个元素
    $("span").attr("class", "box")
    //注：如果是设置值的话，那么找到多少个就设置多少个

    $("span").removeAttr("name")
    //注：删除的话就是找到多少个就删除多少个
</script>

</html>

jQuery的prop方法和removeprop方法

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery的prop方法和removeprop方法</title>
    <script src="../jquery-3.5.1.js"></script>
</head>

<body>
    <span class="span1" name="a1"></span>
    <span class="span2" name="a2"></span>
</body>
<script>
    /*
    1.prop方法
    特点和attr方法一致
    2.removeProp方法
    特点和removeAttr方法一致
    */


    $("span").eq(0).prop("demo", "aaa") //设置原型中demo
    $("span").eq(1).prop("demo", "bbb")
    $("span").prop("demo")

    $("span").removeProp("demo")

    /*
    注：prop不仅能操作属性，还能操作属性节点
    */
    $("span").prop("class", "box") //操作属性节点，修改class变成box
</script>

</html>

jQuery操作类相关方法

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery操作类相关方法</title>
    <script src="../jquery-3.5.1.js"></script>
    <style>
        .class1 {
            width: 20px;
            height: 20px;
            background-color: red;
        }

        .class2 {
            border: 5px solid black;
        }
    </style>
</head>

<body>
    <button>添加类</button>
    <button>删除类</button>
    <button>修改类</button>
    <div></div>
</body>
<script>
    /*
    1.addClass(class,fn)
        作用:给元素添加一个类，如果要添加多个的话，就写在同一个“”里用空格隔开
    2.removeClass(class,fn)
        作用：删除一个类
    3.toggleClass(class,fn)
        作用：切换类，有就删除，没有就添加
    */

    $(function () {
        var btns = document.getElementsByTagName("button")
        btns[0].onclick = function () {
            // $("div").addClass("class1") //给元素添加类名的操作
            $("div").addClass("class1 class2")
        }
        btns[1].onclick = function () {
            $("div").removeClass("class2")
        }
        btns[2].onclick = function () {
            $("div").toggleClass("class2")
        }
    })
</script>

</html>

jQuery文本值相关方法

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery文本值相关方法</title>
    <script src="../jquery-3.5.1.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <button>设置html</button>
    <button>获取html</button>
    <button>设置text</button>
    <button>获取text</button>
    <button>设置value</button>
    <button>获取value</button>
    <div></div>
    <input type="text">
</body>
<script>
    $(function () {
        var btns = document.getElementsByTagName("button")
        btns[0].onclick = function () {
            $("div").html("<p>我是p</p>")
            //和原生js中innerHTML一样
        }
        btns[1].onclick = function () {
            console.log($("div").html())
        }
        btns[2].onclick = function () {
            $("div").text("<p>我是p</p>")
            //和原生js的innerText一样
        }
        btns[3].onclick = function () {
            console.log($("div").text())
        }
        btns[4].onclick = function () {
            $("input").val("请输入：")
            //类比原生js的value属性
        }
        btns[5].onclick = function () {
            console.log($("input").val())
        }
    })
</script>

</html>

jQuery操作html样式的方法

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery操作html样式的方法</title>
    <script src="../jquery-3.5.1.js"></script>
</head>

<body>
    <div></div>
</body>
<script>
    $(function () {
        //逐个设置css属性
        $("div").css("width", "100px")
        $("div").css("height", "100px")
        $("div").css("background", "red")
        //链式设置
        $("div").css("width", "100px").css("height", "100px").css("background", "blue")
        //批量设置（直接传个对象）
        $("div").css({
            width: "100px",
            height: "100px",
            background: "yellow"
        })
        //获取样式
        console.log($("div").css("width"))
    })
</script>

</html>

jQuery操作尺寸和位置方法

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery操作尺寸和位置方法</title>
    <script src="../jquery-3.5.1.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .father {
            width: 200px;
            height: 200px;
            background: red;
            border: 50px solid black;
            margin-left: 50px;
            position: relative;
        }

        .son {
            height: 100px;
            width: 100px;
            background: blue;
            position: absolute;
            left: 50px;
            top: 50px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <button>获取</button>
    <button>设置</button>
</body>
<script>
    $(function () {
        var btns = document.getElementsByTagName("button")
        btns[0].onclick = function () {
            console.log($(".father").width()) //获取宽度
            console.log($(".son").offset().left)
            console.log($(".son").position().left)
            //offset是获取或者设置元素距离屏幕的偏移量
        } //监听获取
        btns[1].onclick = function () {
            $(".father").width("200px") //设置元素的宽度

            $(".son").offset({
                left: 10
            })
            // $(".son").position({
            //     left: 10
            // })//此步不生效，position只能获取，不能设置
        } //监听设置
    })
</script>

</html>

jQuery的scrollTop方法

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery的scrollTop方法</title>
    <script src="../jquery-3.5.1.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .scroll {
            width: 100px;
            height: 200px;
            border: 1px solid black;
            overflow: auto;
        }
    </style>
</head>

<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>
    <button>获取</button>
    <button>设置</button>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
</body>
<script>
    var btns = document.getElementsByTagName("button")
    btns[0].onclick = function () {
        console.log($(".scroll").scrollTop()) //获取元素内部滚动条的位置
        console.log($("html").scrollTop()) //获取网页的滚动条的位置
    }
    btns[1].onclick = function () {
        $(".scroll").scrollTop(300) //设置元素内部滚动条的位置
        $("html").scrollTop(300) //设置网页的滚动条位置
    }
</script>

</html>

jQuery事件绑定与解绑

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery事件绑定</title>
    <script src="../jquery-3.5.1.js"></script>
</head>

<body>
    <button>我是按钮</button>
</body>
<script>
    $(function () {
        /*
        两种事件绑定方式：
        1.通过eventName(fn)
        2.on(eventName,fn)
        */

        $("button").click(function () {
            alert("hello")
        })
        $("button").on("click", function () {
            alert("hello2")
        })

        // $("button").off() //没有参数就是直接解绑全部
        $("button").off("click") //传递一个参数就会移除所有这个类型的事件

    })
</script>

</html>

jQuery事件冒泡

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery事件冒泡</title>
    <script src="../jquery-3.5.1.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .father {
            width: 200px;
            height: 200px;
            background: red;
        }

        .son {
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
</head>

<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" value="">
    </form>
</body>
<script>
    $(function () {
        /*
        1.事件冒泡
        2.如何阻止事件冒泡
        3.什么是默认行为
        4.如何阻止默认行为
        */
        $(".father").click(function () {
            alert("father")
        })
        $(".son").click(function () {
            alert("son")
            return false //在子级中写这个就可以阻止事件冒泡
            // event.stopPropagation()//也可以阻止事件冒泡
        })
        //当父级和子级都绑定事件时，执行子级后会自动执行父级的事件，这就是事件冒泡
        //一般情况下，我们需要点谁就是谁，所以要阻止事件冒泡


        //当点击a标签或提交按钮时，会自动的跳转到网页，这就是默认行为
        //接下来要阻止a标签的默认跳转行为
        $("a").click(function (event) {
            alert("注册")
            return false //此步为阻止a标签默认行为
            // event.preventDefault() //阻止默认行为
        })
    })
</script>

</html>

jQuery事件自动触发

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery事件自动触发</title>
    <script src="../jquery-3.5.1.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .father {
            width: 200px;
            height: 200px;
            background: red;
        }

        .son {
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
</head>

<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" value="">
    </form>
</body>
<script>
    $(function () {
        $(".son").click(function () {
            alert("son")
        })
        $(".father").click(function () {
            alert("father")
        })
        // $(".son").trigger("click") //如果自动触发用trigger的话，那么会带有事件冒泡的问题
        // $(".father").trigger("click") //使自动触发指定事件
        $(".son").triggerHandler("click") //triggerHandler自动触发是没有时间冒泡的问题的
        $(".father").triggerHandler("click") //也是自动触发事件
    })
</script>

</html>