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

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

获取元素节点

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


创建DOM节点

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

      $("
") //无子元素或文本内容,写成闭合标签 $("
") //完整格式,可嵌套子元素或文本 //不加斜杠非闭合标签,会被解析成如下方式 $("
") == $( document.createElement("div") ) $("div") //直接写元素名,相当于元素选择器,无效... $("

我是段落

") //HTML内容,嵌套文本 $("

").text("传入字符串内容"); //灵活一点,动态设置文本 //方法连写 $("
") .appendTo($('body')) //添加进body元素中,这里返回的依然是原jQuery对象。 .find("li").text("OK"); //后代元素中找
  • 元素,设置它们的文本内容


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

    链式操作方式

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


    添加节点

    操作同级节点

         $("body").append("
    "); //给元素尾部添加一个div元素 $("body").append("

    一段话

    "); //等同于append( $("

    一段话

    ") ) $("body p").append("作为文本节点"); //给中的所有

    元素的尾部添加文本节点 //appendTo() 将什么添加到什么的尾部位置 $("

    可以

    ").appendTo("body"); $("

    一段小文本

    ").appendTo("body"); //prepend() 给div元素中的头部位置添加如下元素 $("div").prepend("

    第二位

    "); $("div").prepend("

    第一位

    "); //prependTo() 将什么添加到什么的头部位置 $("").prependTo("span"); $("body").append("
    我是div#abc
    "); //在id为abc的div元素前面,添加如下元素 $("div#abc").before("

    在div前面

    "); //在id为abc的div元素后面,添加如下元素 $("div#abc").after("
    在div后面
    "); //把如下创建的元素 添加到id为abc的div元素之前 $("

    ").text("insertBefore").insertBefore("div#abc"); //把如下创建的元素 添加到id为abc的div元素之后 $("

    ").text("insertAfter").insertAfter("div#abc");
    这些DOM操作方法的参数都是以选择器作为参数,会进行匹配元素的操作,所以不需要$(selector)获取元素节点后再传入进来。


    删除节点

        
            


    复制节点

    • clone():创建调用该方法的jQuery对象副本(即选取的元素副本),然后返回该对象,完成复制。
        
    点一下复制一下


    替换节点

    • $(selector).replaceWith(content) : content是DOM元素 或者是 HTML代码。
    • $(content).replaceAll(selector): 将内容替换匹配到的所有元素。
    replaceWith() 和 replaceAll() 两个方法都是用于替换内容,作用相同,只是颠倒一下语法, 和之前的append() appendTo() prepend()和prependTo() 差不多。 翻译成中文就一目了然了,replaceWith:用什么来替换; replaceAll():替换全部。
        

    1

    2

    [jQuery]:jQuery的DOM元素操作方法_第1张图片
    wrapAll() 会把所有的匹配元素都聚集在一起,如果匹配的元素处于其他元素中,会被移除,然后转移。所以上面
    元素中的

    元素都被移除了。


    DOM元素的属性操作

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

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

    removeAttr():删除指定属性。

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

        
    123456

    一段文本

    你可能感兴趣的:([jQuery]:jQuery的DOM元素操作方法)