欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JQuery中DOM節(jié)點的操作與訪問方法實例分析

 更新時間：2019年12月23日 09:55:14   作者：theVicTory  
這篇文章主要介紹了JQuery中DOM節(jié)點的操作與訪問方法,結合實例形式分析了jquery操作dom節(jié)點與訪問dom節(jié)點相關實現(xiàn)技巧及操作注意事項,需要的朋友可以參考下

本文實例講述了JQuery中DOM節(jié)點的操作與訪問方法。分享給大家供大家參考，具體如下：

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

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

作為最后一個子元素添加

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

prepend（）/prependTo()

作為第一個子元素添加

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

在對象前面/后面添加新的元素，可用逗號分割添加多個元素

 

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

 

.empty()

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

.remove(“selector”)

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

.detach()

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

.clone()

克隆節(jié)點結構，選填參數(shù)true后會同時克隆節(jié)點的事件

old.replaceWith(new)

new.replaceAll(old)

用舊元素替換新的元素

.wrap(parent)

將每個元素包裹一個父元素

.unwrap()

去除外層包裹

.wrapAll()

將所有元素包裹一個父元素

.wrapInner()

將每個元素內部包裹一個子元素

 

//通過DOM方法創(chuàng)建2個div元素
var pdiv = document.createElement('div')
var cdiv = document.createElement("div");
//給2個div設置不同的屬性
pdiv.setAttribute('class', 'right')
cdiv.className = 'child'
cdiv.innerHTML = "動態(tài)創(chuàng)建DIV元素節(jié)點";
//將cdiv作為第一個子元素添加到pdiv內
pdiv.appendChild(cdiv)
//繪制到頁面body
var body = document.querySelector('body');
body.appendChild(pdiv)


//通過JQuery創(chuàng)建html元素 
var div = $("<div class='right'><div class='aaron'>動態(tài)創(chuàng)建DIV元素節(jié)點</div></div>");
$('body').append(div);


//刪除整個 class=test1的div節(jié)點
$(".test1").empty()
//刪除p標簽中class為test3的結點
$("p").remove(".test3");
//通過detach在頁面刪除元素，但是這個節(jié)點還是保存在內存中
var p = $("p").detach()


//給所有p元素增加一個div包裹
$('p').wrapAll('<div></div>')
//去除p的父層元素
$('p').unwrap();
//所有div增加一個內層元素
$('div').wrapInner('<p></p>')

JQuery結點訪問

.children()

選中直接子節(jié)點，括號內可填選擇器

.parent()

選中直接父節(jié)點，括號內可填選擇器

.parents（）

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

.closest(selector)

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

.find(selector)

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

.next()

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

.prev()

選中緊鄰前一個同輩節(jié)點，括號內可選填

.siblings()

選中所有同輩元素，括號內參數(shù)可選

.add()

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

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

對每個進行函數(shù)操作，提供三個參數(shù)

注：選擇器返回多個結果的可以通過括號內的選擇器進行篩選，例如$('.item-2').next(':first')，選中多個類名為item-2的下一個節(jié)點，但: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>
 <h2>each方法</h2>
 <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
  //修改偶數(shù)li內的字體顏色
  $("li").each(function(index, element) {
   if (index % 2) {//使用index參數(shù)
    $(this).css('color','blue')//this形參指的是正在遍歷的節(jié)點
   }
  })
 })
 </script>
</body>
</html>

更多關于jQuery相關內容還可查看本站專題：《jQuery操作DOM節(jié)點方法總結》、《jQuery遍歷算法與技巧總結》、《jQuery表格(table)操作技巧匯總》、《jQuery擴展技巧總結》、《jQuery常見經(jīng)典特效匯總》、《jquery選擇器用法總結》及《jQuery常用插件及用法總結》

希望本文所述對大家jQuery程序設計有所幫助。

相關文章

最新評論