JQuery基礎課程：JQuery中的DOM作業介紹

    一種與瀏覽器，平台，語言無關的介面。使用此介面可以輕鬆存取頁面中所有的標準元件。

         DOM Core：DOM Core 並非專屬於 JavaScript，任何一種支援 DOM 的程式設計語言都可以使用它。它的用途並非僅限於處理網頁，也可以用來處理任何一種是用標記語言編寫出來的文檔，例如：XML。

HTML DOM：使用 JavaScript 和 DOM 為 HTML 檔案編寫腳本時，有許多專屬於HTML-DOM的屬性。

CSS-DOM：針對於CSS操作，在JavaScript中，CSS-DOM 主要用於取得和設定 style 物件的各種屬性。

        

1.請參閱下點的「

基本選擇器

」。  

2.建立節點

         使用JQuery的工廠函數，建立新節點：var $newNode = $(「

你好

 

3.插入節點

         將新建立的節點，或已插入的節點插入指定的位置。

         “$node.append($newNode)”，到每個符合的元素內部的結尾處追加結尾處。如，「$("p").append("Hello");」將"Hello"加到"p"內部的結尾處。

         “$newNode.appendTo($node)”，將新元素追加到每個符合元素內部的結尾處。

         “$node.prepend($newNode)”，在每個符合的元素內部的結尾處追加開始處。如，「$("p").prepend("Hello");」將"Hello"加到"p"內部的起始處。

         “$newNode.prependTo($node)”， 將新元素追加到每個符合元素內部的開始處。

         “$node.after($newNode)”，將內容插入每個符合的元素的之後，是並列兄弟。如，「$("p").after("Hello");」將"Hello"插入到"p"的後邊。它們是兄弟關係。

         “$newNode.insertAfter($node)”，將新元素插入每個符合元素之後。

         “$newNode.before($node)”，內容插入每個符合的元素的先前。如，「$("p").before("Hello");」將"Hello"插入到"p"的前面，它們是兄弟關係。

         “$node.insertBefore($newNode)”，將新元素插入到每個符合元素之前。

         則以注意：如果插入的節點是不是新建立的，則插入將變成移動作業。所以，在插入這樣的節點之前應該要使用clone的節點。

 

4.刪除節點

         從DOM移除所有符合的元素。如，「$("p").remove(".hello");」刪除所為class屬性值為hello的p元素，還有它下面的所有元素。

 

         從DOM清除所有符合的元素。如，「$("p").empty();」清除所有p元素，還有它下面的所有元素。

 

5.複製節點

         複製相符的DOM元素。如，「$("p").clone();」傳回複製後的副本，但不具有任何行為。如果要將DOM的事件一起克隆，則應該使用「$("p").clone(true);」。

 

6.替換節點

         將所有符合的元素替換為指定的 HTML 或 DOM 元素。如，$("p").replaceWith("Paragraph. ");，將所有p元素，替換為"Paragraph. "。

        

##

         與replaceWith相回：$("Paragraph. ").replaceAll("p");。

 

7.包裹節點

         wrap()：將指定節點用其他標記包起來。此方法對於需要在文件中插入額外的結構化標記非常有用， 而且不會破壞原始文件的語意。如，「$("p").wrap("

");」。每個p元素被包裹到

中。

wrapAll()：將所有符合的元素用一個元素來包裹。而wrap()方法是將所有的元素進行單獨包裹。如，“$("p").wrapAll("

");”，將所有p元素包裹到

中。

wrapInner()：將每一個符合的元素的子內容(包括文字節點)用其他結構化標記包裹起來。如，“$("p").wrapInner("");”， 被每一個p元素包裹。

 

8.屬性設定

         attr()：取得屬性與設定屬性。

當為此方法傳遞一個參數時，即為某元素的取得指定屬性。如，“$("img").attr("src");”，取得img元素的src屬性值。

當為此方法傳遞兩個參數時，即為某元素設定指定屬性的值。如，“$("img").attr("src","test.jpg");”，設定img元素的src屬性值為test.jsp。

jQuery 中有很多方法都是一個函數實作取得和設定。如：attr()，html()，text()，val()，height()，width()，css()等。

removeAttr()：刪除指定元素的指定屬性。

 

9.樣式操作

         可透過「attr()」設定或取得css樣式。

         追加樣式：addClass() 。如，“$("p").addClass("selected");”，在所有P元素中追加“selected”樣式。

移除樣式：removeClass() --- 從符合的元素中刪除全部或指定的class。如，“$("p").removeClass("selected");”，刪除所有P元素中的“selected”。

切換樣式：toggleClass() --- 控制樣式上的重複切換。如果類別名稱存在則刪除它，如果類別名稱不存在則新增它。如，“$("p").toggleClass("selected");”，所有的P元素中，如果存在“selected”樣式就刪除“selected”樣式，否則就添加“selected”樣式。

判斷是否含有某個樣式：hasClass() --- 判斷元素中是否含有某個 class，有回傳 true； 否則回傳 false。如，“$(this).hasClass("protected")”，判斷目前節點是否有“protected”樣式。

 

10.設定或取得HTML、文字和值

#讀取並設定某個元素中的 HTML 內容： html()，此方法可用於 XHTML ，但不能用於 XML 文件。

讀取並設定某個元素中的文字內容：text()，此方法既可用於 XHTML 也可用於 XML 文件。

讀取並設定某個元素中的值：val()，此方法類似 JavaScript 中的 value 屬性。對於文字框，下拉列錶框，單選框該方法可傳回元素的值(多選框只能傳回第一個值)。如果為多重選取下拉列錶框，則傳回包含所有選取值的陣列。

 

11.常用遍歷節點的方法

         所獲得所有符合元素的子元素所組成的集合：children()。此方法只考慮第一層子元素而不考慮任何後代元素。

取得符合元素後面緊鄰的兄弟元素的集合(但集合中只有一個元素)：next()。

取得符合元素前面緊鄰的兄弟元素的集合(但集合中只有一個元素)：prev()。

取得匹配元素前後所有的兄弟元素: siblings()。

 

12.CSS-DOM操作

         則以取得與設定元素的樣式屬性：css()。

取得並設定元素透明度：opacity()屬性。

取得並設定元素高度，寬度：height()，width()。在設定值時，若只傳遞數字，則預設單位是px。如需要使用其他單位則需傳遞一個字串，例如 “$(“p:first”).height(“2em”)”；

在目前視窗中取得元素的相對位移：offset()。它傳回的物件包含了兩個屬性：top，left。此方法只對可見元素有效。

以上是JQuery基礎課程：JQuery中的DOM作業介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

顯示更多

熱門文章

如何修復KB5055523無法在Windows 11中安裝？

4 週前 By DDD

如何修復KB5055518無法在Windows 10中安裝？

4 週前 By DDD

<🎜>：種植花園 - 完整的突變指南

2 週前 By DDD

<🎜>：泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙

3 週前 By 尊渡假赌尊渡假赌尊渡假赌

如何修復KB5055612無法在Windows 10中安裝？

3 週前 By DDD

顯示更多

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

顯示更多

熱門話題

Java教學

1663

14

CakePHP 教程

1420

52

Laravel 教程

1313

25

PHP教程

1266

29

C# 教程

1238

24

顯示更多