[jQuery]:jQuery的DOM元素操作方法

这篇博客详细介绍了jQuery的DOM元素操作,包括创建、添加、删除、复制、替换和包裹节点的方法,以及DOM元素的属性和文本操作。jQuery通过选择器简化了DOM操作,提供如append、prepend、clone、replaceWith等便捷的API。

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

jQuery的DOM操作:创建节点、添加节点、删除节点、复制节点、替换节点和包裹节点。也就是对文档中的元素节点、属性节点和文本节点进行增删改查,只不过在原生JS基础上进行封装和增加了许多方法,所以能够更方便的操作DOM。

获取元素节点

       jQuery获取DOM元素是使用选择器,至于选择器的使用这里就不介绍了,请戳jQuery选择器总结。 如果有时候为了提高运行效率,可以先用原生JS获取元素节点,之后再转成jQuery对象进行操作也是可行的。


创建DOM节点

        jQuery创建DOM节点是通过传入一个HTML格式字符串给构造函数,jQuery会返回包含该元素的jQuery对象。 传入的HTML格式需带有闭合标签或完整标签名。 这种创建节点形式是动态创建的,也可以将别的jQuery对象传入进来,相当于克隆。

      $("<div/>")   //无子元素或文本内容,写成闭合标签
      
      $("<div></div>") //完整格式,可嵌套子元素或文本

      //不加斜杠非闭合标签,会被解析成如下方式 
      $("<div>")  == $( document.createElement("div") )
      $("div")  //直接写元素名,相当于元素选择器,无效...

      
      $("<p>我是段落</p>")  //HTML内容,嵌套文本
     
      $("<p></p>").text("传入字符串内容");  //灵活一点,动态设置文本

      //方法连写
      $("<div><ul><li></li></ul></div>")
      .appendTo($('body'))  //添加进body元素中,这里返回的依然是原jQuery对象。
      .find("li").text("OK"); //后代元素中找<li>元素,设置它们的文本内容


jQuery创建节点支持HTML内容,所以无需创建多个元素节点。在上面实例中,还使用了jQuery方法的连写方式:链式操作方式。

链式操作方式

对发生在同一个jQuery对象上的一组动作,可以直接连接而无须重复获取对象。
      //链式操作
      $("div p").text("一段话").css("color", "red");
      $("div").append( $("<button>按钮</button>").css("color", "red") );
如果写多了就会明白,当方法返回某个值时,链式操作是没办法进行的,例如调用 text()、html()和val()方法,后续不能链式操作。个人简单理解:因为方法存在返回值,当返回的非jQuery对象时,后续自然无法调用jQuery方法,也就无法继续链式操作。


添加节点

  • append() :   给选取元素的内部尾部添加内容(元素、innerHTML、文本)。
  • prepend(): 给选取元素的内部开头处添加内容(元素、innerHTML、文本)。
  • appendTo() : 把选取元素添加到指定DOM元素内部的结尾处,和上面append()是一样的。
  • prependTo(): 给选取元素的内部开头处添加内容(元素、innerHTML、文本)。

操作同级节点

  • before() : 在选取元素之前添加内容。
  • after(): 在选取元素之后添加内容。
  • insertBefore():将选取元素插入到指定元素前面。
  • insertAfter():  将选取元素插入到指定元素之后。
     $("body").append("<div/>");  //给<body>元素尾部添加一个div元素
     $("body").append("<p>一段话</p>"); //等同于append( $("<p>一段话<p>") )
     $("body p").append("作为文本节点"); //给<body>中的所有<p>元素的尾部添加文本节点

     //appendTo()  将什么添加到什么的尾部位置
     $("<h1>可以</h1>").appendTo("body"); 
     $("<p>一段小文本</p>").appendTo("body");
     
     //prepend()   给div元素中的头部位置添加如下元素
     $("div").prepend("<p>第二位</p>");
     $("div").prepend("<p>第一位</p>");


     //prependTo()  将什么添加到什么的头部位置
     $("<button>按钮1</button>").prependTo("span");
     $("body").append("<div id='abc'>我是div#abc</div>");
     
     //在id为abc的div元素前面,添加如下元素
     $("div#abc").before("<p>在div前面</p>");
    
     //在id为abc的div元素后面,添加如下元素
     $("div#abc").after("<h5>在div后面</h5>");
     
     //把如下创建的元素 添加到id为abc的div元素之前
     $("<p/>").text("insertBefore").insertBefore("div#abc");

     //把如下创建的元素 添加到id为abc的div元素之后
     $("<div/>").text("insertAfter").insertAfter("div#abc");
这些DOM操作方法的参数都是以选择器作为参数,会进行匹配元素的操作,所以不需要$(selector)获取元素节点后再传入进来。


删除节点

  • remove( [selector] ) : 移除所有匹配的元素, 可根据可选的selector来筛选元素。 
  • remove()移除元素后,会返回被移除的jQuery对象,可以写成链式操作。可以将该元素移动到其他元素中,相当于appendTo()。
  • empty() : 删除所有的后代元素,相当于清空节点。 
    <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
    </ul>
    <script>
        //选取<ul>中所有<li>元素,对它们进行移除操作
        $("ul li").remove();

        //移除选取的<ul>元素
        $("ul").remove();

        //移除选取的<li>元素中第一个<li>元素
        $("ul li").remove(":eq(0)");    //$("ul li:eq(0)").remove();
        
        //find()查找后代元素,移除index > 3的<li>元素
        $("ul").find("li").remove(":gt(3)");

        //将移除的第一个<li>元素 插入到最后一个<li>元素的后面
        $("ul li:first").remove().insertAfter("ul li:last");
        
        //选取所有的li元素,然后清空它们的后代所有节点。所有<li>文本值都会清空
        $("ul li").empty();

        //移除ul中所有元素
        $("ul").empty();

        //使用html("")来完成此效果, 相当于innerHTML = "";
        $("ul li").html("");  $("ul").html("");
    </script>    


复制节点

  • clone():创建调用该方法的jQuery对象副本(即选取的元素副本),然后返回该对象,完成复制。
    <div id="div_1" style="width:80px; height:50px; font-size: 15px; background-color: pink;">
        点一下复制一下
    </div>
<script>
    //单击该<div>元素,会复制一份,然后被<body>元素添加到尾部
    $("#div_1").on("click", function(){
        $("body").append( $("#div_1").clone() );
    });
</script>  


替换节点

  • $(selector).replaceWith(content) : content是DOM元素 或者是 HTML代码。
  • $(content).replaceAll(selector): 将内容替换匹配到的所有元素。
replaceWith() 和 replaceAll() 两个方法都是用于替换内容,作用相同,只是颠倒一下语法, 和之前的append() appendTo() prepend()和prependTo() 差不多。 翻译成中文就一目了然了,replaceWith:用什么来替换; replaceAll():替换全部。
    <p>1</p>
    <p>2</p>
<script>
    //选取所有<p>元素,用如下HTML代码来替换
    $("p").replaceWith("<h6>替换掉P标签</h6>");
     
    //创建div元素,用于代替所有的<h6>元素
    $("</div>").replaceAll("h6"); //使用闭合标签形式替换相应元素后,也会消失,即不存在。
    $("<div></div>").replaceAll("h6"); //标签元素会存在。
要注意,闭合标签形式替换相应元素后,也会不存在,例如上面实例中的</div>。 要使用完整形式创建DOM元素才不会消失。 还有,如果将已有的元素作为替换元素,那么原来的元素就会被移除。


包裹节点

当需要对文档中某些DOM元素插入额外的结构化标记非常有用,而且不会破坏原始文档的语义。使用起来就像动态代理一样,不会影响原始代码,使用时才会做相关操作。
  • wrap()  : 把匹配的元素用指定的元素或HTML内容包裹起来。
  • wrapAll():所有的匹配元素都只用一个元素来包裹。即只有一个父元素。
  • wrapInner():把匹配元素的内部(子元素、文本)用其他结构化的标记包裹起来。
    <span>span标签</span>
    <p>P1</p>
    <p>P2</p>
    <h5>H5标签</h5>
    <div>
        <p>内部p1</p>
        <p>内部p2</p>
        <p>内部p3</p>
    </div>
    <script>
        //把选取的<span>元素 用指定HTML代码包裹起来 
        $("span").wrap("<div>wrap测试:</div>");

        //把所有<p>元素都包裹到一个<div>元素中
        $("p").wrapAll("<div id='all_wrap'></div>");
        
        //选取<h5>元素, 内部内容被如下的HTML内容包裹起来
        $("h5").wrapInner("<span style='color:red;'>wrapInner:</span>");
    </script>

wrapAll() 会把所有的匹配元素都聚集在一起,如果匹配的元素处于其他元素中,会被移除,然后转移。所以上面<div>元素中的<p>元素都被移除了。


DOM元素的属性操作

attr():设置或者获取相关属性, 相当于综合了setAttribute()和getAttribute()用法。

            语法:$(selector).attr("key", "value")、$(selector).attr("key")

removeAttr():删除指定属性。

            语法:$(selector).attr("attrName")

    <div id="d1">123456</div>
    <p id="d1">一段文本</p>
    <script>
        //设置style属性和class属性
        $("#d1").attr("style", "color:red;");
        $("#d1").attr("class", "test");
        
        //获取style属性的值
        $("#d1").attr("style");

        //删除class属性
        $("#d1").removeAttr("class");

批量设置属性

        //使用json对象来作为属性参数,批量设置属性
        $(selector).attr({
            key : value,
            key : value,
            ...
        });


DOM元素的文本操作

  • html():获取和设置匹配元素的HTML内容,相当于innerHTML。
  • text():获取和设置匹配元素的文本内容,相当于innerText。
  • val():获取和设置匹配元素的value值,一般用于表单元素。
    <div>
        <p id="p1">第一段文本</p>
        <div>
            <p>内部文本1</p>
            <p>内部文本2</p>
        </div>
    </div>
    <input type="button" value="简单按钮"/>
    <script>
       //获取id=p1的元素中的HTML内容 
       $("#p1").html();

       //设置id=p1的元素中由如下内容来填充。
       $("#p1").html("<strong>strong文本<strong>");

       //获取第一个<div>元素中所有文本内容
       var $allText = $("div:eq(0)").text();
       console.log($allText);
       
       //选取第二个<div>元素中的<p>元素,设置相关文本
       $("div:eq(1) p").text("设置一下文本内容咯");
       
       //选取type = button 的<input>元素的value
       $(":button").val();
       $(":button").val("设置按钮值");

关于jQuery操作DOM的方法就介绍到这里,如果想了解更多的细节,可以去查询jQuery教程。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值