jQuery操作节点

jQuery操作节点

jQuery对象中提供了很多方法方便开发者操作节点。

内容操作

  • value
    • 获取函数: val();
    • 修改函数: val(“值”);
  • text
    • 获取函数: text();
    • 修改函数: text(“值”);
  • html
    • 获取函数:html();
    • 修改函数:html(“值”);

示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <input id="username" type="text" value="张三"/><br/>
    <div id="myDiv">
        <p>
            <a href="http://www.monkey1024.com">小猴子1024</a>
        </p>
    </div>
</body>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script>
    $(function () {
        // 获取input 的value值
        let username = $("#username").val();
        console.log(username);
        //修改input的值
        $("#username").val("李四");

        // 获取myDiv的标签体内容
        let contentHtml = $("#myDiv").html();
        console.log(contentHtml);
        //修改myDiv的标签体内容
        $("#myDiv").html("<p>aaaa</p>");

        // 获取myDiv文本内容
        let contentText = $("#myDiv").text();
        console.log(contentText);
        $("#myDiv").text("bbb");

    });
</script>
</html>

属性操作

  • attr(): 获取/设置元素的属性
  • removeAttr():删除属性
  • prop():获取/设置元素的属性
  • removeProp():删除属性

上面的attr和prop在使用起来基本是一样的,他们的适用场景如下:

  1. 如果操作的是元素的固有属性,在设置disabled、selected、checked等这些Boolean类型自带属性时,则建议使用prop
  2. 如果操作的是元素自定义的属性,则建议使用attr

示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script  src="js/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $(function () {
            //获取兔子节点的name属性值
            let name = $("#rabbit").attr("name");
            console.log(name);
            //设置兔子节点的name属性的值为xiaobaitu
            $("#rabbit").attr("name","xiaobaitu");

            //新增兔子节点的food属性 属性值是carrot
            $("#rabbit").attr("food","carrot");
            //删除兔子节点的name属性
            $("#rabbit").removeAttr("name");

            //获得hobby的的选中状态
            let checked1 = $("#hobby").prop("checked");
            console.log(checked1);

            //let checked2 = $("#hobby").attr("checked"); //获取不到,弹出undefined

        });

    </script>
</head>
<body>
    <ul>
        <li id="rabbit" name="tuzi" color="white">兔子</li>
    </ul>
    <input type="checkbox" id="hobby"/>

</body>
</html>

添加操作

  • append()
  • appendTo()

两个使用的方式正好是相反的。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script  src="js/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $(function () {
            let op1 = '<option value="guangzhou">广州</option>';
            //使用append将广州添加到下拉框中
            $("#city").append(op1);

            //使用appendTo将深圳添加到下拉框中
            let op2 = '<option value="shenzhen">深圳</option>';
            $(op2).appendTo($("#city"));
        });

    </script>
</head>
<body>
    <select id="city">
        <option value="beijing">北京</option>
        <option value="tianjin">天津</option>
        <option value="shanghai">上海</option>
    </select>

</body>
</html>

删除和清空操作

  • empty()删除指定节点的后代节点及文本,但是不删除当前节点。
  • remove(),删除指定节点,及其包含的所有文本及子节点。
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <script  src="js/jquery-3.4.1.js"></script>
        <script type="text/javascript">
            $(function () {
                // 删除北京
                $("#b1").click(function () {
                    $("#bj").remove();
                });
    
                // 删除所有节点
                $("#b2").click(function () {
                    $("#city").empty();
                });
            });
    
        </script>
    </head>
    <body>
        <input type="button" value="删除北京"  id="b1"/>
        <input type="button" value="删除所有的子节点"  id="b2"/>
    
        <ul id="city">
            <li id="bj">北京</li>
            <li id="tj">天津</li>
            <li id="sh">上海</li>
        </ul>
    
    </body>
    </html>