JQ操作元素的方法 - js篇

目录

  • 获取元素节点
  • 添加元素
    • appendChild()
    • append()
    • prepend()
    • appendTo()
    • prependTo()
  • 操作同级节点
    • before()
    • after()
    • insertBefore()
    • insertAfter()
  • 删除元素
    • removeChid()
    • remove( [selector] )
    • remove()
    • empty()
  • 复制节点
    • clone()
  • 替换节点
  • $(selector).replaceWith(content)
    • $(content).replaceAll(selector)
  • 包裹节点
    • wrap()
    • wrapAll()
    • wrapInner()
  • DOM元素的属性操作
    • attr()
    • removeAttr()
  • DOM元素的文本操作
    • html()
    • text()
    • val()
  • 创建DOM节点
  • 链式操作方式

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

获取元素节点

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

添加元素

appendChild()

该方法添加的元素位于父元素的末尾,使用方法:

parentNode.appenChild(NewNode) // parentNode是需要添加元素的容器,NewNode是新添加的元素

创建一个li元素并添加到ul的末尾:

const ulNode = document.querySelectorAll('.list')[0],
	  liNode = document.createElement('li');
liNode.className = 'liItem';
liNode.innerHTML = '新 - 4';
ulNode.appendChild(liNode);

效果:JQ操作元素的方法 - js篇_第1张图片

append()

给选取元素的内部尾部添加内容(元素、innerHTML、文本)。

prepend()

给选取元素的内部开头处添加内容(元素、innerHTML、文本)。

appendTo()

把选取元素添加到指定DOM元素内部的结尾处,和上面append()是一样的。

prependTo()

给选取元素的内部开头处添加内容(元素、innerHTML、文本)。

操作同级节点

before()

在选取元素之前添加内容。

after()

在选取元素之后添加内容。

insertBefore()

该方法可以将元素添加到指定位置,使用方法:

// parentNode是需要添加元素的容器,NewNode是新添加的元素, beforeNode是添加在哪个元素之前
parentNode.insertBefore(newNode, beforeNode) 

创建一个li元素并添加在第二个li元素之前:

const ulNode = document.querySelectorAll('.list')[0],
	  liNodes = document.querySelectorAll('.item'),
	  liNode = document.createElement('li');
liNode.className = 'item';
liNode.innerHTML = 4;
ulNode.insertBefore(liNode, liNodes[1]);

预览:
JQ操作元素的方法 - js篇_第2张图片

insertAfter()

将选取元素插入到指定元素之后。

     $("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");

删除元素

removeChid()

该方法用于删除指定元素,使用方法:

parentNode.removeChild(removeNode) // parentNode是需要删除元素的容器,removeNode是要删除的元素

删除第二个li元素:

const ulNode = document.querySelectorAll('.list')[0],
	  liNodes = document.querySelectorAll('.item');
ulNode.removeChild(liNodes[1]);

预览:
JQ操作元素的方法 - js篇_第3张图片

remove( [selector] )

移除所有匹配的元素, 可根据可选的selector来筛选元素。

remove()

移除元素后,会返回被移除的jQuery对象,可以写成链式操作。可以将该元素移动到其他元素中,相当于appendTo()。

empty()

删除所有的后代元素,相当于清空节点。

    <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
    </ul>
    <script>
        //选取
    中所有
  • 元素,对它们进行移除操作 $("ul li").remove(); //移除选取的
      元素 $("ul").remove(); //移除选取的
    • 元素中第一个
    • 元素 $("ul li").remove(":eq(0)"); //$("ul li:eq(0)").remove(); //find()查找后代元素,移除index > 3的
    • 元素 $("ul").find("li").remove(":gt(3)"); //将移除的第一个
    • 元素 插入到最后一个
    • 元素的后面 $("ul li:first").remove().insertAfter("ul li:last"); //选取所有的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_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>
    //选取所有

元素,用如下HTML代码来替换 $("p").replaceWith("

替换掉P标签
"
); //创建div元素,用于代替所有的
元素 $("
").replaceAll("h6"); //使用闭合标签形式替换相应元素后,也会消失,即不存在。 $("
"
).replaceAll("h6"); //标签元素会存在。

要注意,闭合标签形式替换相应元素后,也会不存在,例如上面实例中的。 要使用完整形式创建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>
        //把选取的元素 用指定HTML代码包裹起来 
        $("span").wrap("
wrap测试:
"
); //把所有

元素都包裹到一个

元素中 $("p").wrapAll("
"
); //选取
元素, 内部内容被如下的HTML内容包裹起来 $("h5").wrapInner("wrapInner:"); </script>

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

元素中的

元素都被移除了。

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文本");
 
       //获取第一个
元素中所有文本内容 var $allText = $("div:eq(0)").text(); console.log($allText); //选取第二个
元素中的

元素,设置相关文本 $("div:eq(1) p").text("设置一下文本内容咯"); //选取type = button 的元素的value $(":button").val(); $(":button").val("设置按钮值");

创建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方法,也就无法继续链式操作。

    参考文章:
    [1]https://blog.csdn.net/fengwei4618/article/details/78116330

    总结,留下足迹!!!

    你可能感兴趣的:(js,js,jquery)