JQuery學習筆記（3）——節點操作 節點查詢
阿新 • • 發佈：2019-07-19
插入節點
內部插入
所謂的內部插入，就是指在節點裡面的插入，而外部插入，則是在節點外面插入。
- 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>"));替換節點
下面的兩個方法，效果一樣，只是呼叫物件和目標相反
- 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) //倒數第一個