首页问答社区 web技术正文

jQuery操作节点

2021-02-06 16:43:14 179 0

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在使用起来基本是一样的，他们的适用场景如下：

如果操作的是元素的固有属性，在设置disabled、selected、checked等这些Boolean类型自带属性时，则建议使用prop
如果操作的是元素自定义的属性，则建议使用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>

喜欢 0