总结一下jQuery操作元素节点的方法（创建、选择、插入节点）

淩亂°似流年 2022-06-16 06:56 386阅读 0赞

我的个人博客开通了，地址：[https://timewentby.com][https_timewentby.com] 欢迎访问

知识点一：创建节点

注意：Jquery创建元素节点、属性节点、文本节点都使用$(html)
    
    1.创建元素节点：$("<li></li>");
    2.创建属性节点：$("<li id='test'></li>");
    3.创建文本节点：$("hello world !");
    4.下面是创建三者的结合：$("<li id='test'>hello world !</li>");
       
     解释：4是创建一个id属性为test，文本节点为hello world !的li节点

知识点二：获得节点

主要是jQuery的选择器：下面说下最基础的几个
    
    	  选择器           格式              举例
    	1.id选择器     $("#id的属性值")     $("#name");
    	2.class选择器  $(".class的属性值")  $(".name")
    	3.标签选择器    $("html标签")       $("p")
    	4.*选择器      $("*")             $("*")
    	5.群组选择器    $("选择器1,选择器二,...")  $("p,#name")

知识点三：插入节点

内部插入（当做子节点插入）：
    	append(content|fn)   向每个匹配的元素内部末尾追加内容。
    	appendTo(content)    把所有匹配的元素追加到另一个指定的元素元素集合末尾。
    	prepend(content|fn)  向每个匹配的元素内部头部内容。
    	prependTo(content)   把所有匹配的元素追加到另一个指定的元素元素集合头部
    外部插入（当做兄弟节点插入）：
    	after(content|fn)    向每个匹配元素的后面添加内容
    	before(content|fn)   向每个匹配元素的前面添加内容
    	insertAfter(content) 把所有匹配的元素插入到另一个、指定的元素元素集合的后
    	面。
    	insertBefore(content) 把所有匹配的元素插入到另一个、指定的元素元素集合的
    	前面。

内部插入（当做子节点插入）案例：

<div id="div1">
        <p id="one">我是第一个p标签</p>
        <p id="two">我是第二个p标签</p>
    </div>
    
     <p id="three">我是第三个p标签</p>
    
     <script>
           var p3 =  $("#three");
           var div = $("#div1");
    </script>

1.append()实例

div.append(p3)

执行完，结果网页结果为：

<div id="div1">
        <p id="one">我是第一个p标签</p>
        <p id="two">我是第二个p标签</p>
        <p id="three">我是第三个p标签</p>
    </div>

总结：

1.可以看出append()方法，可以将id=three的p标签添加进了div中
    2.这是我们也发现，原来位置上的id=three的p标签会被删除，等于是实际上是移动div里
    面去了，也就是说在使用append()的时候，如果被添加元素会被移动到要添加的元素里面
    了。

2.appendTo()实例：

p3.appendTo(div)

结果为：

<div id="div1">
               <p id="one">我是第一个p标签</p>
               <p id="two">我是第二个p标签</p>
               <p id="three">我是第三个p标签</p>
    </div>

总结：

1.结果和append()执行完是一样的，只是颠倒了一下位置而已

3.prepend()实例：

div.prepend(p3);

结果为：

<div id="div1">
    		<p id="three">我是第三个p标签</p>
             <p id="one">我是第一个p标签</p>
             <p id="two">我是第二个p标签</p>
    </div>

4.prependTo()实例：

p3.prependTo(div)

结果为：

<div id="div1">
    		<p id="three">我是第三个p标签</p>
             <p id="one">我是第一个p标签</p>
             <p id="two">我是第二个p标签</p>
    </div>

外部插入（当做子节点插入）案例：

<div id="div1">
        <p id="one">我是第一个p标签</p>
    </div>
        <p id="two">我是第二个p标签</p>
        <p id="three">我是第三个p标签</p>
    
        <script>
           var p1 =  $("#one");
           var div = $("#div1");
        </script>

1.after()

div.after(p1);

结果为；

<div id="div1"></div>
    <p id="one">我是第一个p标签</p>
    <p id="two">我是第二个p标签</p>
    <p id="three">我是第三个p标签</p>

总结：

1.第一个p标签插入到了div的后面
    2.第一个p标签在div中的移除
    3.插入的过程相当于将第一个p标签从div中移动到div的后面

div.before(p1) ;

结果：

<p id="one">我是第一个p标签</p>
    <div id="div1"></div>
    <p id="two">我是第二个p标签</p>
     <p id="three">我是第三个p标签</p>

3.insertAfter()案例：

p1.insertAfter(div);

结果：