總結一下jQuery操作元素節點的方法（建立、選擇、插入節點）

我的個人部落格開通了，位址：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);
           

結果：

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

總結：

1。結果跟after()一樣，隻是颠倒了位置
           

4.insertBefore()案例：

p1.insertBefore(div);
           

結果：

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

總結：

1。結果跟before()一樣，隻是颠倒了位置