溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

JQuery中DOM節(jié)點(diǎn)的示例分析

發(fā)布時(shí)間：2021-08-03 09:33:52 來源：億速云 閱讀：95 作者：小新 欄目：web開發(fā)

小編給大家分享一下JQuery中DOM節(jié)點(diǎn)的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

具體如下：

Jquery中DOM節(jié)點(diǎn)的操作

已有對(duì)象.append(要添加的對(duì)象)

作為最后一個(gè)子元素添加

要添加的對(duì)象.appendTo(已有對(duì)象)

prepend（）/prependTo()

作為第一個(gè)子元素添加

已有元素.before(要添加的元素)/after()

在對(duì)象前面/后面添加新的元素，可用逗號(hào)分割添加多個(gè)元素

 

要添加的元素.insertBefore(已有元素)/insertAfter()

 

.empty()

刪除元素所有子節(jié)點(diǎn)

.remove(“selector”)

刪除自身整個(gè)元素，可以添加篩選參數(shù)

.detach()

刪除節(jié)點(diǎn)，并將其保存在返回對(duì)象中，之后可以再次調(diào)用添加

.clone()

克隆節(jié)點(diǎn)結(jié)構(gòu)，選填參數(shù)true后會(huì)同時(shí)克隆節(jié)點(diǎn)的事件

old.replaceWith(new)

new.replaceAll(old)

用舊元素替換新的元素

.wrap(parent)

將每個(gè)元素包裹一個(gè)父元素

.unwrap()

去除外層包裹

.wrapAll()

將所有元素包裹一個(gè)父元素

.wrapInner()

將每個(gè)元素內(nèi)部包裹一個(gè)子元素

//通過DOM方法創(chuàng)建2個(gè)div元素
var pdiv = document.createElement('div')
var cdiv = document.createElement("div");
//給2個(gè)div設(shè)置不同的屬性
pdiv.setAttribute('class', 'right')
cdiv.className = 'child'
cdiv.innerHTML = "動(dòng)態(tài)創(chuàng)建DIV元素節(jié)點(diǎn)";
//將cdiv作為第一個(gè)子元素添加到pdiv內(nèi)
pdiv.appendChild(cdiv)
//繪制到頁(yè)面body
var body = document.querySelector('body');
body.appendChild(pdiv)
//通過JQuery創(chuàng)建html元素 
var div = $("<div class='right'><div class='aaron'>動(dòng)態(tài)創(chuàng)建DIV元素節(jié)點(diǎn)</div></div>");
$('body').append(div);
//刪除整個(gè) class=test1的div節(jié)點(diǎn)
$(".test1").empty()
//刪除p標(biāo)簽中class為test3的結(jié)點(diǎn)
$("p").remove(".test3");
//通過detach在頁(yè)面刪除元素，但是這個(gè)節(jié)點(diǎn)還是保存在內(nèi)存中
var p = $("p").detach()
//給所有p元素增加一個(gè)div包裹
$('p').wrapAll('<div></div>')
//去除p的父層元素
$('p').unwrap();
//所有div增加一個(gè)內(nèi)層元素
$('div').wrapInner('<p></p>')

JQuery結(jié)點(diǎn)訪問

.children()

選中直接子節(jié)點(diǎn)，括號(hào)內(nèi)可填選擇器

.parent()

選中直接父節(jié)點(diǎn)，括號(hào)內(nèi)可填選擇器

.parents（）

選中所有的祖先節(jié)點(diǎn)

.closest(selector)

向上查找最近的滿足條件的祖輩元素

.find(selector)

選中所有滿足條件的后代元素

.next()

選中緊鄰下一個(gè)同輩節(jié)點(diǎn)，可選填選擇器

.prev()

選中緊鄰前一個(gè)同輩節(jié)點(diǎn)，括號(hào)內(nèi)可選填

.siblings()

選中所有同輩元素，括號(hào)內(nèi)參數(shù)可選

.add()

添加新的元素加入到選中集合

.each(function(index,element){this})

對(duì)每個(gè)進(jìn)行函數(shù)操作，提供三個(gè)參數(shù)

注：選擇器返回多個(gè)結(jié)果的可以通過括號(hào)內(nèi)的選擇器進(jìn)行篩選，例如$('.item-2').next(':first')，選中多個(gè)類名為item-2的下一個(gè)節(jié)點(diǎn)，但:first只篩選了第一個(gè)。若括號(hào)內(nèi)不填選擇器，則默認(rèn)選中所有的結(jié)果。

//選中class=div的子代的最后一個(gè)元素，添加邊框
$('.div').children(':last').css('border', '3px solid blue')
//選中class=item-2的兄弟元素的最后一個(gè)，添加邊框
$('.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>點(diǎn)擊：each方法遍歷元素</button>
 <button>點(diǎn)擊：each方法回調(diào)判斷</button>
 <script type="text/javascript">
 $("button:first").click(function() {
  //遍歷所有的li
  //修改每個(gè)li內(nèi)的字體顏色
  $("li").each(function(index, element) {
   $(this).css('color','red')
  })
 })
 $("button:last").click(function() {
  //遍歷所有的li
  //修改偶數(shù)li內(nèi)的字體顏色
  $("li").each(function(index, element) {
   if (index % 2) {//使用index參數(shù)
    $(this).css('color','blue')//this形參指的是正在遍歷的節(jié)點(diǎn)
   }
  })
 })
 </script>
</body>
</html>

以上是“JQuery中DOM節(jié)點(diǎn)的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手