JQuery2：節點選取與節點插入

#節點選取

• jQuery.parent(expr)
  找父親節點，可以傳入expr進行過濾，比如$("span").parent()或者$("span").parent(".class")
• jQuery.parents(expr),類似於jQuery.parents(expr),但是是查詢所有祖先元素，不限於父元素
• jQuery.children(expr).返回所有子節點，這個方法只會返回直接的孩子節點，不會返回所有的子孫節點
• jQuery.contents(),返回下面的所有內容，包括節點和文字。這個方法和children()的區別就在於，包括空白文字，也會被作為一個jQuery物件返回，children()則只會返回節點
• jQuery.prev()，返回上一個兄弟節點，不是所有的兄弟節點
• jQuery.prevAll()，返回所有之前的兄弟節點
• jQuery.next(),返回下一個兄弟節點，不是所有的兄弟節點
• jQuery.nextAll()，返回所有之後的兄弟節點
• jQuery.siblings(),返回兄弟姐妹節點，不分前後
• jQuery.find(expr),跟jQuery.filter(expr)完全不一樣。jQuery.filter()是從初始的jQuery物件集合中篩選出一部分，而jQuery.find()的返回結果，不會有初始集合中的內容，比如$("p"),find("span"),是從 p元素開始找,等同於$("p span")

#節點插入
###新增節點的jquery方法：

append()、prepend()、appendTo() 、prependTo()

###插入節點的jquery方法：

after() 、before() 、insertBefore() 、insertAfter()

舉個例子來說明以上幾種方法的用法：

html例子:
<nav>
    <ul>
        <li>序列號1</li>
        <li>序列號2</li>
        <li>序列號3</li>
    </ul>
</nav>

###新增節點

1、append()方法：

script:
var $div = '<div>append新增的節點</div>';
$('nav').append($div); //將新建立的div節點插入到nav容器的內容底部

html：
<nav>
    <ul>
        <li>序列號1</li>
        <li>序列號2</li>
        <li>序列號3</li>
    </ul>
    <div>append新增的節點</div>
</nav>

2、prepend()方法：

script:
var $div = '<div>append新增的節點</div>';
$('nav').append($div); //將新建立的div節點插入到nav容器的內容頂部

html：
<nav>
    <div>prepend新增的節點</div>
    <ul>
        <li>序列號1</li>
        <li>序列號2</li>
        <li>序列號3</li>
    </ul>
</nav>

3、appendTo()方法：

script:
var $div = '<div>append新增的節點</div>';
var nav = $('nav');
//$div.appendTo($nav);  //這樣寫是錯誤的

$('<div>append新增的節點</div>').appendTo($nav);//真理在這裡。。  將新建立的節點新增到nav的內容後面

html：
<nav>
    <ul>
        <li>序列號1</li>
        <li>序列號2</li>
        <li>序列號3</li>
    </ul>
    <div>appendTo新增的節點</div>
</nav>

4、prependTo()方法：

script:
var $div = '<div>append新增的節點</div>';
var nav = $('nav');
//$div.prependTo($nav);  //和前面同理，這樣寫是錯誤的 
$('<div>append新增的節點</div>').appendTo($nav);//真理在這裡。。  將新建立的節點新增到nav的內容的前面

html：
<nav>
    <div>prependTo新增的節點</div>
    <ul>
        <li>序列號1</li>
        <li>序列號2</li>
        <li>序列號3</li>
    </ul>
</nav>

###插入節點

5、after()方法：

script:
var $l_1 = $('ul>li:nth-of-type(1));
var $l_2 = $('ul>li:nth-of-type(2)); 
var nav = $('nav');
$l_2.after($l_1);  //這裡可以這麼理解，第2個li後面跟著第1個li。

html：
<nav>
    <ul>
        <li>序列號2</li>
        <li>序列號1</li>
        <li>序列號3</li>
    </ul>
</nav>

6、before()方法：

script:
var $l_1 = $('ul>li:nth-of-type(1));
var $l_2 = $('ul>li:nth-of-type(2)); 
var nav = $('nav');
$l_1.before($l_2);  //這裡可以這麼理解，第1個li前面是第2個li。

html：
<nav>
    <ul>
        <li>序列號2</li>
        <li>序列號1</li>
        <li>序列號3</li>
    </ul>
</nav>

7、insertBefore()方法：

script:
var $l_1 = $('ul>li:nth-of-type(1));
var $l_2 = $('ul>li:nth-of-type(2)); 
var nav = $('nav');
$l_2.insertBefore($l_1);  //將第2個li插入到第1個li前面

html：
<nav>
    <ul>
        <li>序列號2</li>
        <li>序列號1</li>
        <li>序列號3</li>
    </ul>
</nav>

8、insertAfter()方法：

script:
var $l_1 = $('ul>li:nth-of-type(1));
var $l_2 = $('ul>li:nth-of-type(2)); 
var nav = $('nav');
$l_1.insertAfter($l_2);  //將第1個li插入到第2個li後面

html：
<nav>
    <ul>
        <li>序列號2</li>
        <li>序列號1</li>
        <li>序列號3</li>
    </ul>
</nav>

容易出現問題的地方在 appendTo()和preappendTo()。

學院Go語言視訊主頁
https://edu.csdn.net/lecturer/1928

清華團隊帶你實戰區塊鏈開發
掃碼獲取海量視訊及原始碼 QQ群：721929980