JQuery學習筆記（3）——節點操做 節點查找

插入節點

內部插入

所謂的內部插入，就是指在節點裏面的插入，而外部插入，則是在節點外面插入。

• append()
• prepend()
• appendTo()
• prependTo()

append和prepend是相反的
後面以To結尾的，參數爲被插入內容的節點

append能夠理解爲尾部插入，prepend爲頭部插入

//在div裏面的內容，末尾再追加一個p標籤，插入的p標籤在div全部子元素的末尾
$("#mydiv").append($("<p>末尾插入</p>"));

//在div裏面的內容，頭部追加一個p標籤，插入的p標籤位於div的全部子元素的首位
$("#mydiv").prepend($("<p>頭部插入</p>"));

//下面兩種魚上面的效果是同樣的，只是調用的對象和參數這二者換了位置
$("<p>末尾插入</p>").appendTo($("#mydiv"));

$("<p>頭部插入</p>").prependTo($("#mydiv"));

外部插入

• after()
• before()
• insertAfter()
• insertBefore()

這裏，使用方法與以前的內部插入相似

//div以後插入一個p標籤，p標籤和div是同級關係
$("#mydiv").after($("<p>末尾插入</p>"));
//div以前插入一個p標籤，p標籤和div是同級關係
$("#mydiv").before($("<p>頭部插入</p>"));
//把p標籤插入到div以後，同級
$("<p>末尾插入</p>").insertAfter($("#mydiv"));
//把p標籤插入到div以前，同級
$("<p>末尾插入</p>").insertBefore($("#mydiv"));

替換節點

下面的兩個方法，效果同樣，只是調用對象和目標相反

• replaceWith(content|fn)

$('div.second').replaceWith('<h2>New heading</h2>');

• replaceAll(selector)

$('<h2>New heading</h2>').replaceAll('.inner');

刪除節點 克隆節點

刪除節點

• empty()
  刪除節點下面的全部元素，只保留節點
• remove([selector])
  刪除節點，包括節點自己，能夠添加選擇器進行過濾
• detach([selector])
  刪除節點，但保留節點屬性，能夠添加選擇器進行過濾

克隆節點

clone()

var btn = $('#mybutton').clone();
//在添加到某個節點以前能夠修改屬性
btn.css({background:red});
btn.appendTo($('#mydiv'));

查找節點

咱們得到一個節點，想要獲取它的子節點或者父節點，都是屬於查找節點

下列的方法，未標明返回類型的，都是返回一個JQuery對象

過濾

• first() 得到第一個節點
• last() 得到最後一個節點
• boolean hasClass() 得到包含有某個樣式的節點

<div id="mydiv" class="foo bar"></div>

上面的div有兩個樣式，使用hasClass，參數爲兩個的樣式中的一個，都會返回true

$('#mydiv').hasClass('foo') 返回true
$('#mydiv').hasClass('bar') 返回true

• has(selector) 得到包含某個元素的節點

<ul>
<li></li>
</ul>
<ul></ul>

$('ul').has('li').css(); ul中包含有li的ul的css會被修改

查找

• find(selector) 查找後代元素
• children(selector) 只查找子元素
• eq(index) 得到節點裏指定索引的子元素（調用的jQuery對象包含多個元素）

$('tbody').eq(2)  //0開始，索引爲
$('tbody').eq(-1) //倒數第一個