jQuery DOM操作详解-优快云博客

本文介绍使用jQuery进行DOM操作的方法，包括查找、创建、删除节点，以及操作DOM属性和样式等。并通过实例展示了如何设置和获取HTML、文本和值，遍历节点及CSS-DOM操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天讲一下jquery如何操作DOM节点。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.lc {
    background-color: red;
}

.lc2 {
    background-color: blue;
}

.lc3 {
    font-weight: bold;
}
</style>
<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        //操作DOM节点
        //1、查找节点
        var li2 = $("ul li:eq(1)");
        var li2_txt = li2.text();
        alert(li2_txt);

        //2、创建节点
        var li1=$("<li title='这是abc'>abc</li>");
        var li2=$("<li title='这是efg'>efg</li>");
        var li22 = $("ul li:eq(1)");
        $("ul").append(li1);
        li2.insertAfter(li22);

        //3、删除节点
        $("ul li:eq(1)").remove();

        //操作DOM属性
        //获取属性
        var li2 = $("ul li:eq(1)");
        var li2_attr=li2.attr("title");
        alert(li2_attr);

        //设置属性
        $("ul li:eq(1)").attr("title", "DDD");

        //删除属性
        $("ul li:eq(1)").removeAttr("title");

        //操作DOM节点样式
        //获取样式
        var li2 = $("ul li:eq(1)");
        var li2_class=li2.attr("class");
        alert(li2_class);

        //设置样式
        $("ul li:eq(1)").attr("class","lc2");

        //追加样式
        $("ul li:eq(1)").addClass("lc3");

        //移除样式
        $("ul li:eq(1)").removeClass("lc");
    });
</script>
</head>
<body>
    <p>你最喜欢的名人是？</p>
    <ul>
        <li title="这是AAA"><font color="green">AAA</font></li>
        <li title="这是BBB" class="lc">BBB</li>
        <li title="这是CCC">CCC</li>
    </ul>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.lc {
    background-color: red;
}

.lc2 {
    background-color: blue;
}

.lc3 {
    font-weight: bold;
}
</style>
<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        //设置和获取HTML，文本和值
        //获取HTML
        var li1_html=$("ul li:eq(0)").html();
        alert(li1_html);

        //设置HTML
        $("ul li:eq(0)").html("<font color='red'>haha</font>");

        //获取文本
        var li1_txt=$("ul li:eq(0)").text();
        alert(li1_txt);

        //设置文本
        $("ul li:eq(0)").text("EEE");

        //遍历节点
        //childern()
        var b=$("body").children();
        alert(b.length);
        var ul=$("ul").children();//取出的是原声DOM节点
        alert(ul.length);
        for(var i=0;i<ul.length;i++){
            alert($(ul[i]).html());
        }

        //next()
        var l = $("ul li:eq(1)").next();
        alert(l.html());

        //prev()
        var lp = $("ul li:eq(1)").prev();
        alert(lp.html());

        //CSS-DOM操作
        //获取样式
        var c=$("#jq").css("color");
        alert(c);

        //设置样式
        $("#jq").css("color","blue");
    });
</script>
</head>
<body>
    <p>你最喜欢的名人是？</p>
    <ul>
        <li title="这是乔布斯"><font color="green">乔布斯</font></li>
        <li title="这是比尔盖茨" class="lc">比尔盖茨</li>
        <li title="这是詹姆斯高斯林">詹姆斯高斯林</li>
    </ul>
</body>
</html>

JQuery之操作DOM