jQuery學習心得----第三集：jQuery中的DOM操作總結

阿新 • • 發佈：2019-01-13

首先先解釋下什麼是DOM，翻譯過來就是文件物件模型。嗯，是不是更不明白了，我也不懂。。。。。

不過沒關係，我們暫時懂這個就行了：每一張網頁都能用DOM來表示，怎麼表示呢？

下面這個是一張網頁HTML程式碼：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="http://localhost:63342/untitled1/bp/jquery/jquery-3.1.0.min.js"></script>
    <title>Title</title>
</head>
<body>
<p title="選擇你最喜歡的水果">你最喜歡的水果是？</p>
<ul>
    <li title="蘋果">蘋果</li>
    <li title="橘子">橘子</li>
    <li title="菠蘿">菠蘿</li>
</ul>
</body>
</html>

這張網頁的DOM結構如下：

現在懂了吧，其實DOM結構就是這網頁上面的元素節點的層次結構。父節點和子節點：比如li是ul的子節點，ul是li的父節點。ul、p、li這些是body的後代元素（後代節點）。知道了這些概念之後，我們就來總結一下DOM操作有哪些：

var $li=$("ul li:eq(1)") //選擇ul裡的第2個li元素節點。

1.text()方法獲取元素節點文字內容

$li.text() //獲取文字內容

2.attr()獲取元素節點的屬性值

$("p").attr("title") //獲取p元素節點的屬性title

3.$()方法建立元素節點,append()方法新增元素節點

var $li_1=$("<li title='芒果'>芒果</li>") //建立一個li元素節點$li_1，文字內容是“芒果”，屬性title是“芒果”

$("ul").append($li_1) //把建立的$li_1元素節點新增到ul節點中

把建立的元素新增到DOM中有很多方法，除了append(),還有prepend()、appendTo()等，有興趣大家可以去找找資料看看。

4.remove()方法刪除節點

$("ul").remove() //刪除ul元素節點，包括ul所有的後代元素節點。

其實，刪除節點和插入節點結合使用，能夠達到移動元素節點的目的，因為你在這裡把這個元素節點刪除掉，在用append把這個元素節點插入到其他地方，相當於是移動了這個元素節點。

5.clone()方法複製節點

一般複製一個節點之後，相應的要把這個節點插入到某個地方,不然複製下來也沒意義，就像你要複製就必須找個地方貼上是一樣的道理。

$("ul li:eq(1)").clone().appendTo("ul") //把ul元素下的第2個li節點複製出來，插入到ul中。

6.replaceWith()方法替換節點

將匹配的元素替換成指定的元素。

$("p").replaceWith($("ul li:eq(1)")) //把p元素節點替換成ul元素下的第2個li節點

7.wrapAll()方法，用匹配的元素節點包裹指定的元素節點

$("p").wrapAll($("ul li:eq(1)")) //用p元素節點包裹ul元素下的第2個li節點，包裹的意思就是說在節點外，套一層元素節點。

8.removeAttr()方法刪除屬性

顧名思義，就是說去掉元素節點的某個屬性。

$("p").removeAttr("title") //去掉p元素節點的title屬性

9.addClass()方法給元素節點新增樣式類，removeClass()方法給元素節點去掉樣式類。這個很常見，就不舉例了，()引數裡寫樣式類名就行了。

10.toggle()方法切換樣式,主要是用來控制行為上的重複切換。

$("#btn1").click(function(){
$("p").toggle();
}); //點選btn1按鈕，控制p元素節點顯示與否

11.hasClass()方法用來判斷是否有某個樣式類，有為true。

12.html()方法讀取文字內容。html()與text()方法有什麼不同呢？舉個例子

同樣是：123 alert($("p").html() ) //會打印出“123” alert( $("p").text() ) // 會打印出“123”

13.val()方法用來設定和返回元素的值，如果元素是多選，則返回一個包含所有值的陣列。

14.focus()和blur()方法分別是獲得焦點時事件和失去焦點時事件。

比如：<input type="text" id="addrees"/>

$("#address").focus(function(){ //程式碼}) //當address文字框獲得焦點時，執行的function

$("#address").blur(function(){ //程式碼}) //當address文字框失去焦點時，執行的function

15.children()方法可以遍歷匹配節點的所有子節點（僅是子節點，不包括其他後代節點）

$("ul").children() //表示獲取ul節點的所有子元素，是一個數組

$("ul").children()[2] //獲取ul的第三個子元素

jQuery學習心得----第三集：jQuery中的DOM操作總結

首先先解釋下什麼是DOM，翻譯過來就是文件物件模型。嗯，是不是更不明白了，我也不懂。。。。。不過沒關係，我們暫時懂這個就行了：每一張網頁都能用DOM來表示，怎麼表示呢？下面這個是一張網頁HTML程式碼： <html lang="en"> <head&g

第三次：jQuery （Ajax三級聯動）

1. jackson Jackson是一個簡單基於Java應用庫，Jackson可以輕鬆的將Java物件轉換成json物件和xml文件，同樣也可以將json、xml轉換成Java物件核心程式碼： ObjectMapper mapper = new Object

學習 WebService 第三步：一個簡單的實例（SoapUI測試REST項目）

方法資源 ima .com required tle margin 導出 ont 原文地址：SOAPUI測試REST項目（六）——REST服務和WADL ↑↑↑ 原文用的SoapUI，2018-3-19時，這個軟件已經更名為ReadyAPI（集成了SoapUI），因此下文

（轉）Django學習之第三章：動態Web頁面基礎

只有一個即使 typeerror 方法對象傳遞 power int() 擔心意圖上一章我們解釋了怎樣開始一個Django項目和運行Django服務器當然了，這個站點實際上什麽也沒有做------除了顯示了"It worked"這條信息以外。這一章我們介紹怎樣使用

《生命》第三集：Mammals （哺乳動物）

　　南極零下四十度的情況下，威德爾海豹能深潛到冰下捕食，並且教自己的小寶寶如何下水，看了這個才知道，海豹居然是哺乳動物，小海豹看著挺萌的。　　　　長鼻鼩是一種很活躍的生物，而且會自己設計路線，建立迷宮，幫助自己捕食、躲避天敵的追捕。長指狐猴能夠利用敏銳的聽力，通過敲擊判斷樹幹中藏蟲的位

第三集：Solidity面向物件

面向物件：OO程式設計，針對面向過程而言的。特點：封裝、繼承、多型繼承：在solidity中，繼承就是合約與合約之間一種特殊的傳遞關係。通過”is”關鍵字實現繼承。子合約(派生合約)可以訪問父合約中所有非private的狀態變數與函式。繼承

asp+SqlServer2008開發【第三集：win2winSSH遠端連線—像連線Linux一樣操作】

1，參考：https://blog.csdn.net/flyingshuai/article/details/72897692 　　　　和https://blog.csdn.net/nijiayy/article/details/51147475 2，補充說明：　　　　powershell serve

數值計算·第三集：求解方程（組）的根（Matlab版）

本集的數值案例如下： Example 1: syms p x r solve(p*sin(x) == r) %chooses 'x' as the unknown and returns ans =

鬱金香驅動學習>第三課：新增裝置物件

#include <ntddk.h> //定義個INITCODE巨集，這個巨集表示初始化的時候載入記憶體，然後可以從記憶體中解除安裝掉 #define INITCODE code_seg("INIT") //;注意這裡是不能加分號的 #define PAGECODE code_

Java開發學習心得（三）：專案結構

3 專案結構經過前面一系列學習，差不多對Java的開發過程有了一定的瞭解，為了能保持一個良好的專案結構，考慮到接下來要進行開發，還需要學習一下Java的專案結構下面以兩個專案結構為參照圖1 圖2 第一個是我自己學習時的Demo，一邊學一邊建檔案，應該有些錯誤的地方，第二張是從網上看到的

Java開發學習心得（三）：項目結構

dao 有一個界面 sin 後綴說過所有保持工程 3 項目結構經過前面一系列學習，差不多對Java的開發過程有了一定的了解，為了能保持一個良好的項目結構，考慮到接下來要進行開發，還需要學習一下Java的項目結構下面以兩個項目結構為參照圖1 圖2 第一個是

【Effective java 學習】第三章：對於所有物件都通用的方法

第八條：覆蓋equals是請遵守通用約定滿足下列四個條件之一，就不需要覆蓋equals方法：類的每個例項本質上都已唯一的。不包括代表值的類，如：Integer，String等，Object提供的equals方法就夠用了不關心是否提供了“邏輯相等”的測試功能。對

C++ Primer學習筆記- 第三章：標準庫型別之四

四、標準庫bitset型別標準庫中bitset型別用來處理二進位制位的有序集，bitset型別簡化了位集的處理，使用bitset時需要包含標頭檔案#include<bitset> bitset物件的定義和初始化 bitset也是類模板，不過bits

初步學習Django-第三篇：URLS.PY文件詳解

列表 name 關於初步表達 rom 就是什麽解析該文章轉至博科：https://www.cnblogs.com/luchuangao/p/7113667.html urls.py:URL分發器（路由配置文件）URL配置（URLconf）就像是Django所支撐

第三篇：開發中的問題及解決方式

.text cat 彈窗 ret 如何配置中項新的顯示 1.texarea 如何保存空格、換行？答：var content1= $("#content").val(); var content =content1.replace(/\n|\r\n/g,"&

MySQL數據庫學習【第三篇】增刪改查操作

自增id 命令位置參數 modify 刪除一行 style 主鍵客戶端 drop 註意：1.如果你在cmd中書命令的時候，輸入錯了就用\c跳出 2.\s查看配置信息一、操作文件夾（庫）增：create database db1 charset utf8;

加密與解密第三章：IDA的基本操作

substr line for src 用法標準庫 set poi 調用更改數據為結構體和枚舉類型查看輸入和輸出的idc腳本 //Imports.idc ?г??????????????? //(c) www.PEDIY.com 2000-2008 #includ

C#程式設計基礎第三課：C#中的運算子和分支語句

知識點：運算子、if結構、if-else語句一、運算子運算子用於執行程式程式碼運算，會針對一個以上運算元專案來進行運算。例如：2+3，其運算元是2和3，而運算子則是“+”。在vb2005中運算子大致可以分為5種類型：算術運算子、連線運算子、關係運算符、賦值運算子和邏輯運算子。。

網路是怎樣連線的學習筆記-第三章-交換機的包轉發操作

3.2.1 交換機根據地址表進行轉發交換機的設計是將網路包原樣轉發到目的地，圖 3.7 就是它的內部結構。交換機的PHY接收到達網線介面的訊號首先，訊號到達網線介面，並由 PHY 模組進行接收，這一部分和集線器是相同的。也就是說，它的介面和 PHY 模組也是以MDI-X 模式進行連線的，當

網絡是怎樣連接的學習筆記-第三章-路由器的包轉發操作

相同 col 數字 spc 技術 ima 這一同時個數 3.3 路由器的包轉發操作 3.3.1 路由器的基本知識路由器通過查表判斷轉發目標網絡包經過集線器和交換機之後到達了路由器，並在此被轉發到下一個路由器。這一步轉發的工作原理和交換機類似，不過在具體的操作過程上

jQuery學習心得----第三集：jQuery中的DOM操作總結

相關推薦