jQuery 操作DOM节点

Posted 2021-01-17 cocoomg

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery 操作DOM节点相关的知识，希望对你有一定的参考价值。

html 内容！

<body >
    <p>你最喜欢的名人是？</p>
    <ul>
        <li title="这是乔布斯"><font color="green">乔布斯</font></li>
        <li title="这是比尔盖茨" class="lc">比尔盖茨</li>
        <li title="这是詹姆斯高斯林">詹姆斯高斯林</li>
    </ul>
    <input type="text" id="userName"/>
    <input type="button" value="获取数据" onclick="getUserName()"/>
    <input type="button" value="设置数据" onclick="setUserName()"/>

    <p id="jq" style="color: red">Jquery掉渣天</p>
</body>

1. Jquery 操作 DOM 节点

查找节点
创建节点 append()

删除节点 remove()

<script type="text/javascript">
    $(document).ready(function(){
        // 1，查找节点
        var li2=$("ul li:eq(1)"); // 获取节点 "1"代表第二个元素
        var li2_txt=li2.text();   // 获取文本 比尔盖茨
        alert(li2_txt); 
        
        // 2，创建节点 append()
        var li1=$("<li title=‘这是马化腾‘>马化腾</li>");
        var li2=$("<li title=‘这是李彦宏‘>李彦宏</li>");
        var li22=$("ul li:eq(1)");
        $("ul").append(li1);    //自动添加到最末尾
        li2.insertAfter(li22);  //在指定的节点后面添加，添加在"比尔盖茨"之后
        
        // 3，删除节点 remove()
        $("ul li:eq(1)").remove();
        
    });
</script>

2. Jquery 操作 DOM 节点属性

查找属性
设置属性

删除属性

<script type="text/javascript">
    $(document).ready(function(){
        // 获取属性
        var li2=$("ul li:eq(1)");
        var li2_attr=li2.attr("title"); //attr 查找 title 属性的值
        alert(li2_attr); 
        
        // 设置属性
        $("ul li:eq(1)").attr("title","哈哈哈"); //attr 修改 title 属性的值
        
        // 删除属性
        $("ul li:eq(1)").removeAttr("title"); //removeAttr 删除 title 属性
</script>

3. Jquery 操作 DOM 节点样式

获取样式
设置样式
追加样式

移除样式

<script type="text/javascript">
    $(document).ready(function(){

        // 获取样式
        var li2=$("ul li:eq(1)");
        var li2_class=li2.attr("class"); //class样式为 lc
        alert(li2_class); 
        
        // 设置样式
        $("ul li:eq(1)").attr("class","lc2");
        
        // 追加样式
        $("ul li:eq(1)").addClass("lc3");
        
        // 移除样式
        $("ul li:eq(1)").removeClass("lc");
</script>

4. 设置和获取 HTML，文本和值

获取 html，设置 html
获取文本，设置文本

获取值，设置值

<script type="text/javascript">
    $(document).ready(function(){
        // 获取html
        var l1_html=$("ul li:eq(0)").html();
        alert(l1_html); 
        
        // 设置html
        $("ul li:eq(0)").html("<font color=red>哈哈</font>");
        
        // 获取文本
        var l1_text=$("ul li:eq(0)").text();
        alert(l1_text); 
        
        // 设置文本
        $("ul li:eq(0)").text("呵呵");
    });
    
    //获取值
    function getUserName(){
        var userName=$("#userName").val();
        alert(userName);
    }
    
    //设置值
    function setUserName(){
        $("#userName").val("Cocoomg");
    }
</script>

5. 遍历节点操作

获取所有子节点 children()
获取邻近的下一个兄弟节点 next()

获取邻近的上一个兄弟节点 prev()

<script type="text/javascript">
    $(document).ready(function(){        
        //获取所有子节点children()
        var b=$("body").children();
        alert(b.length);
        var u=$("ul").children();
        alert(u.length);
        for(var i=0;i<u.length;i++){
            // alert((u[i]).html());  //不可以，(u[i])取出的是原生（未由jQuery包装过）的DOM节点，没有这些功能
            // alert($(u[i]).html()); //可以，用$ 包装
            alert(u[i].innerHTML);    //可以
        } 
        
        //获取邻近的下一个兄弟节点next()
        var l=$("ul li:eq(1)").next();
        alert(l.html()); 
        
        //获取邻近的上一个兄弟节点prev()
        var l=$("ul li:eq(1)").prev();
        alert(l.html()); 
    });
</script>

6. Jquery 操作 DOM 节点 CSS

获取 DOM 节点 CSS 样式

设置 DOM 节点 CSS 样式

<script type="text/javascript">
    $(document).ready(function(){
        // 获取css样式
        var c=$("#jq").css("color");
        alert(c); 
        
        // 设置css样式
        $("#jq").css("color","blue");
    });
</script>

以上是关于jQuery 操作DOM节点的主要内容，如果未能解决你的问题，请参考以下文章

使用 JQuery ajax 在 DOM 操作后附加事件

JQuery---选择器DOM节点操作练习