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>