當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jQuery就业课系列之.jQueryDOM

發布時間：2024/1/23 编程问答 22 豆豆

生活随笔收集整理的這篇文章主要介紹了 jQuery就业课系列之.jQueryDOM 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

概念：DOM 文檔對象模型（必考），jQuery Dom應該是之前的DOM加了個jQuery的封裝。

分類：DOM操作分為三類： DOM Core：任何一種支持DOM的編程語言都可以使用它，如getElementById()，js。 HTML-DOM：用于處理HTML文檔，如document.forms CSS-DOM：用于操作CSS，如element.style.color="green"

jQuery對JavaScript中的DOM操作進行了封裝。

jQuery中的DOM操作

4.1 樣式操作

之前的樣式設置：選擇器對象.css('屬性','值') 比如：

$("p").css("color",'red')

增加樣式：

$("p").addClass('bgStyle')

toggle:模擬連續點擊;

toggleClass:如果存在就刪除一個類,如果不存在，則添加這個樣式。

4.2 追加節點

語法功能

append(content)	$(A).append(B)表示將子元素B追加到A中
prepend(content)	$(A). prepend (B)表示將子元素B前置插入到A中
before(content)	$(A). before (B)表示將B插入至A之前
after(content)	$(A).after (B)表示將B插入到A之后

<!DOCTYPE html><html><head><meta charset="utf-8"><title>追加節點</title><style>@import url("css/games.css")</style><script src="js/jquery-1.12.4.min.js"></script><script>$(function(){//在按鈕上單擊的時候，進行操作;$("#app").click(function(){//操作的選擇器對象是ul無序列表;//后置：$(".gameList").append("<li>王者范.</li>")//加到了ul的子元素li列表的后面；//$(".gameList").prepend("<li>雨鑫戰神</li>")//before after//before:在當前節點之前，增加一個元素，不屬于當前節點。//$(".gameList").before("<ul><li>海文澤拉斯</li></ul>")$(".gameList").after("<ul><li>海文澤拉斯</li></ul>")})})</script></head><body><div class="cont"><ul class="gameList"><li>三星老船長</li><li>艾澤拉斯</li><li>起拉希姆</li></ul></div><button id="app">追加</button> </body></html> ?

4.3 節點操作函數

選取的是比較重要的節點操作函數。

語法功能

remove()	刪除節點
empty()	清空節點內容
replaceWith()	替換節點
clone()	復制節點

<!DOCTYPE html><html><head><meta charset="utf-8"><title>操作節點</title><style>@import url("css/games.css")</style><script src="js/jquery-1.12.4.min.js"></script><script>$(function(){//在按鈕上單擊的時候，進行操作;$("#app").click(function(){//1.刪除節點的操作;刪除某個節點：現在要刪除艾澤拉斯;//$(".gameList li:eq(1)").remove();//2.清空節點內容：是刪除嗎？？？相當于設置了html('')// $(".gameList li:eq(1)").empty();//3.replaceWith：需要注意一下;如果不成可以加$("<li>四星小船長</li>")// $(".gameList li:eq(1)").replaceWith("<li>四星小船長</li>")//4.克隆：clone(),我們使用的時候就不加參數了.//首先$(".gameList li:eq(1)").clone()：克隆;//第二步：追加到$(".gameList")最后；$(".gameList").prepend($(".gameList li:eq(1)").clone()); }) })</script></head><body><div class="cont"><ul class="gameList"><li>三星老船長</li><li><a href='#'>艾澤拉斯</a></li><li>起拉希姆</li></ul></div><button id="app">克隆</button> </body></html> ?

4.4屬性節點

首先要了解什么是屬性節點。

<img src='圖片路徑' title='超級炫圖片'/

src，title就是img的屬性，在DOM里面就是屬性節點。

語法功能

attr()	獲取屬性節點
attr({name1:value1，..n,nameN:valueN})	設置屬性節點的多個屬性的值
removeAttr(屬性名)	刪除指定的屬性節點

<!DOCTYPE html><html><head><meta charset="utf-8"><title>操作節點</title><style>@import url("css/games.css")</style><script src="js/jquery-1.12.4.min.js"></script><script>$(function(){//在按鈕上單擊的時候，進行操作;$("#app").click(function(){//來獲取一下src,這個圖片的路徑信息;好處：可以得到路徑信息，//將來可以修改.alert($("img").attr('src'));//設置圖片的路徑信息;attr('屬性','值')//$("img").attr('src','img/2aa.jpg');//升級：男變女了，加樣式:$("img").attr('src','img/2aa.jpg').addClass('mm');//刪除樣式：這個需要在查看器來看一下。$("img").removeAttr('title');}) })</script></head><body><div class="cont"><img src="img/men.jpg" title="純爺們"/><ul class="gameList"><li>三星老船長</li><li><a href='#'>艾澤拉斯</a></li><li>起拉希姆</li></ul></div><button id="app">屬性節點的操作</button> </body></html> ?

4.5 遍歷函數

實際它屬性節點的查找：

復習：first() last() sibings()都是查找；

語法功能

each()

遍歷節點

<!DOCTYPE html><html><head><meta charset="utf-8"><title>追加節點</title><style>@import url("css/games.css")</style><script src="js/jquery-1.12.4.min.js"></script><script>$(function(){//在按鈕上單擊的時候，進行操作;/* $("#app").click(function(){//當我們在這個按鈕上進行單擊的時候，逐個獲取li的信息內容//然后打印輸出;//each的前面是需要逐個遍歷的選擇器對象；當前是li,所以：$("li")$("li").each(function(){let str=$(this).text();//text（）注意;//alert(str);//變了：追加到span$("span").append(str);})}) *///each前面的選擇器一定是有好幾個的元素對象； $("#app").click(function(){//下面要遍歷+-* /四個按鈕，得到其內容;$(".calc").each(function(){alert($(this).text());//就可以根據得到+-*/來完善之前的計算器了;// let op=$(this).text();// switch(op){// case '+':加操作;break;}})})})</script></head><body><div class="cont"><ul class="gameList"><li>三星老船長</li><li>艾澤拉斯</li><li>起拉希姆</li></ul></div><span></span><button id="app">遍歷按鈕</button> <button class="calc">+</button class="calc"><button>-</button><button class="calc">*</button><button class="calc">/</button></body></html>?

總結：

1.toggleClass():有樣式，則刪除，沒有則增加樣式；

2.追加節點有4個，2個子元素街邊；2個兄弟元素級別；

3.節點操作就是刪除、清空、復制、替換（刪改）

4.屬性節點：attr() attr('name','name)

5.節點的遍歷，注意使用：$("選擇器").each()

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的jQuery就业课系列之.jQueryDOM的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。