溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下JQuery中DOM節點的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
具體如下：
Jquery中DOM節點的操作
已有對象.append(要添加的對象) | 作為最后一個子元素添加 |
要添加的對象.appendTo(已有對象) | |
prepend（）/prependTo() | 作為第一個子元素添加 |
已有元素.before(要添加的元素)/after() | 在對象前面/后面添加新的元素，可用逗號分割添加多個元素
|
要添加的元素.insertBefore(已有元素)/insertAfter() |
|
.empty() | 刪除元素所有子節點 |
.remove(“selector”) | 刪除自身整個元素，可以添加篩選參數 |
.detach() | 刪除節點，并將其保存在返回對象中，之后可以再次調用添加 |
.clone() | 克隆節點結構，選填參數true后會同時克隆節點的事件 |
old.replaceWith(new) new.replaceAll(old) | 用舊元素替換新的元素 |
.wrap(parent) | 將每個元素包裹一個父元素 |
.unwrap() | 去除外層包裹 |
.wrapAll() | 將所有元素包裹一個父元素 |
.wrapInner() | 將每個元素內部包裹一個子元素 |
//通過DOM方法創建2個div元素
var pdiv = document.createElement('div')
var cdiv = document.createElement("div");
//給2個div設置不同的屬性
pdiv.setAttribute('class', 'right')
cdiv.className = 'child'
cdiv.innerHTML = "動態創建DIV元素節點";
//將cdiv作為第一個子元素添加到pdiv內
pdiv.appendChild(cdiv)
//繪制到頁面body
var body = document.querySelector('body');
body.appendChild(pdiv)//通過JQuery創建html元素
var div = $("<div class='right'><div class='aaron'>動態創建DIV元素節點</div></div>");
$('body').append(div);//刪除整個 class=test1的div節點
$(".test1").empty()
//刪除p標簽中class為test3的結點
$("p").remove(".test3");
//通過detach在頁面刪除元素，但是這個節點還是保存在內存中
var p = $("p").detach()//給所有p元素增加一個div包裹
$('p').wrapAll('<div></div>')
//去除p的父層元素
$('p').unwrap();
//所有div增加一個內層元素
$('div').wrapInner('<p></p>')JQuery結點訪問
.children() | 選中直接子節點，括號內可填選擇器 |
.parent() | 選中直接父節點，括號內可填選擇器 |
.parents（） | 選中所有的祖先節點 |
.closest(selector) | 向上查找最近的滿足條件的祖輩元素 |
.find(selector) | 選中所有滿足條件的后代元素 |
.next() | 選中緊鄰下一個同輩節點，可選填選擇器 |
.prev() | 選中緊鄰前一個同輩節點，括號內可選填 |
.siblings() | 選中所有同輩元素，括號內參數可選 |
.add() | 添加新的元素加入到選中集合 |
.each(function(index,element){this}) | 對每個進行函數操作，提供三個參數 |
注：選擇器返回多個結果的可以通過括號內的選擇器進行篩選，例如$('.item-2').next(':first')，選中多個類名為item-2的下一個節點，但:first只篩選了第一個。若括號內不填選擇器，則默認選中所有的結果。
//選中class=div的子代的最后一個元素，添加邊框
$('.div').children(':last').css('border', '3px solid blue')
//選中class=item-2的兄弟元素的最后一個，添加邊框
$('.item-2').siblings(':last').css('border', '2px solid blue')例2、each的使用：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
.left {
width: auto;
height: 150px;
}
.left div {
width: 150px;
height: 120px;
padding: 5px;
margin: 5px;
float: left;
background: #bbffaa;
border: 1px solid #ccc;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h3>each方法</h3>
<div class="left first-div">
<div class="div">
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
</div>
<div class="div">
<ul>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
</div>
</div>
<br/>
<button>點擊：each方法遍歷元素</button>
<button>點擊：each方法回調判斷</button>
<script type="text/javascript">
$("button:first").click(function() {
//遍歷所有的li
//修改每個li內的字體顏色
$("li").each(function(index, element) {
$(this).css('color','red')
})
})
$("button:last").click(function() {
//遍歷所有的li
//修改偶數li內的字體顏色
$("li").each(function(index, element) {
if (index % 2) {//使用index參數
$(this).css('color','blue')//this形參指的是正在遍歷的節點
}
})
})
</script>
</body>
</html>以上是“JQuery中DOM節點的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
