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) //倒數第一個