1.19 JQuery2:節點插入與節點選取

尹成發表於2018-11-11

節點選取

  • 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()。

 

 

 

 

 

 

 

 

 

 

 

 

相關文章