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

jQuery · 發表 2018-11-11 17:11:27

摘要：節點選取 jQuery.parent(expr) 找父親節點，可以傳入expr進行過濾，比如 $("span").parent() 或者 $("span").parent(".class") jQuery.par...

節點選取

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語言視訊主頁
ofollow,noindex" target="_blank">https://edu.csdn.net/lecturer/1928
清華團隊帶你實戰區塊鏈開發
掃碼獲取海量視訊及原始碼 QQ群：721929980