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

來源：本站原創(chuàng)|時(shí)間：2020-01-10|欄目：JavaScript|點(diǎn)擊：次

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

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è)子元素

//通過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)
//繪制到頁面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在頁面刪除元素，但是這個(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="/a1/uploads/allimg/200110/14394610M-0.jpg"></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>點(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>

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

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

上一篇：詳解vue-router 動(dòng)態(tài)路由下子頁面多頁共活的解決方案

欄目：JavaScript

下一篇：vue項(xiàng)目實(shí)現(xiàn)圖片上傳功能

本文標(biāo)題：JQuery中DOM節(jié)點(diǎn)的操作與訪問方法實(shí)例分析

本文地址：http://www.jygsgssxh.com/a1/JavaScript/9426.html

更多JavaScript

雷火电竞-中国电竞赛事及体育赛事平台

JavaScript

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

您可能感興趣的文章

閱讀排行

本欄相關(guān)

隨機(jī)閱讀