JQuery中DOM節(jié)點(diǎn)的示例分析-創(chuàng)新互聯(lián)

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

成都創(chuàng)新互聯(lián)是專業(yè)的柴桑網(wǎng)站建設(shè)公司，柴桑接單;提供成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè),網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行柴桑網(wǎng)站開發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

具體如下：

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

已有對(duì)象.append(要添加的對(duì)象)	作為最后一個(gè)子元素添加
要添加的對(duì)象.appendTo(已有對(duì)象)	作為最后一個(gè)子元素添加
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è)子元素

//通過(guò)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)

//通過(guò)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");
//通過(guò)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)訪問(wè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é)果的可以通過(guò)括號(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)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章名稱：JQuery中DOM節(jié)點(diǎn)的示例分析-創(chuàng)新互聯(lián)
本文URL：http://chinadenli.net/article28/hhicp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、做網(wǎng)站、網(wǎng)站制作、App設(shè)計(jì)、服務(wù)器托管、用戶體驗(yàn)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

JQuery中DOM節(jié)點(diǎn)的示例分析-創(chuàng)新互聯(lián)