Jquery基礎之DOM操作

来源:http://www.cnblogs.com/hq233/archive/2017/05/16/6863692.html
-Advertisement-
Play Games

Dom是Document Object Model的縮寫，意思是文檔對象模型。DOM是一種與瀏覽器、平臺、語言無關的介面，使用該介面可以輕鬆訪問頁面中所有的標準組件。DOM操作可以分為三個方面即DOM Core(核心)、HTM-DOM和CSS-DOM。 每一個網頁都可以用DOM表示出來，每個DOM都 ...


　Dom是Document Object Model的縮寫，意思是文檔對象模型。DOM是一種與瀏覽器、平臺、語言無關的介面，使用該介面可以輕鬆訪問頁面中所有的標準組件。DOM操作可以分為三個方面即DOM Core(核心)、HTM-DOM和CSS-DOM。

　　每一個網頁都可以用DOM表示出來，每個DOM都可以看作是一棵DOM樹。下麵的html頁面結構可以構建出一棵DOM樹，代碼：

　　

View Code

  　構建出的DOM樹如下：

　　

　　JQuery中的DOM操作主要對包括：建【新建】、增【添加】、刪【刪除】、改【修改】、查【查找】【像資料庫操作】。下麵的DOM操作將圍繞上面的DOM樹進行學習JQueryDOM操作。

　　一、查--查找DOM節點

　　　　查找節點非常容易，使用選擇器就能輕鬆完成各種查找工作。例：查找元素節點p返回p內的文本內容$("p").text();例：查找元素節點p的屬性返回屬性名稱對應的屬性值$("p").attr("title"),返回p的屬性title的值。

　　二、建--新建DOM節點

　　　　1、創建元素節點

　　　　　　創建元素節點並且把節點作為<ul>元素的子節點添加到DOM節點樹上。先創建元素點，創建元素節點使用Jquery的工廠函數$()來完成，格式如下：$(html),該方法會根據傳入的html字元串返回一個DOM對象，並將DOM對象包裝成一個JQuery對象後返回。創建一個元素節點JQuery代碼如下：

　　　　　　$li1=$("<li></li>")

　　　　　　代碼返回$li1就是一個由DOM對象包裝成的JQuery對象。把新建節點添加到DOM樹中JQuery代碼如下：

　　　　　　$("ul").append($li1); 

　　　　　　添加後頁面中只能看到<li>元素預設的"·",由於沒有為節點添加文本所以只顯示預設符號，下麵創建文本節點。

　　　　　　PS:append()方法是添加DOM節點方法詳見增--添加DOM節點。 

　　　　2、創建文本節點

　　　　　　使用JQuery的工廠函數$()同樣能夠創建文本節點，創建文本節點的JQuery代碼如下：

　　　　　　$li2=$("<li>蘋果</li>");

　　　　　　代碼返回$li2就是一個由DOM對象包裝成JQuery對象，把新建的文本節點添加到DOM樹中JQuery代碼如下：

　　　　　　$("ul").append($li2);

　　　　　　添加後頁面中能看到"·蘋果"，右鍵查看頁面源碼發現新加的文本節點沒有title屬性。下麵方法創建帶屬性的節點。

　　　　3、創建屬性節點

　　　　　　創建屬性節點同元素節點、文本節點一樣使用JQuery的工廠函數完成。創建屬性節點的JQuery代碼如下：

　　　　　　$li3=$("<li title='榴蓮'>榴蓮</li>");　　　　　　　

　　　　  　代碼返回$li3也是一個由DOM對象包裝成JQuery對象，把新建的屬性節點添加到DOM樹中JQuery代碼如下：

　　　　　　$("ul").append($li3);

　　　　　　添加後頁面中能看到"·榴蓮"，右鍵查看頁面源碼發現新加的屬性節點有title='榴蓮'屬性。

　　　三、增--添加DOM節點

　　　　　　動態新建元素不添加到文檔中沒有實際意義，將新建的節點插入到文檔中有多個方法，如下：append()、appendTo()、prepend()、prependTo()、after()、insertAfter()、before()、insertBefore()。

　　　　1、append()方法

　　　　　　append()方法向匹配的元素內部追加內容，　方法如下：$("target").append(element);例：

　　　　　　$("ul").append("<li title='香蕉'>香蕉</li>");

　　　　　　該方法查找ul元素，然後向ul中添加新建的li元素。

　　　　2、appendTo()方法

　　　　　　appendTo()方法將所有匹配的元素追加到指定的元素中，該方法是append()方法的顛倒[操作主題的顛倒並非操作結果]操作。方法如下：$(element).appendTo(target);例：

　　　　　　 $("<li title='荔枝'>荔枝<li>").appendTo("ul");

　　　　　　該方法新建元素li，然後把li添加到查找到的ul元素中。

　　　　3、prepend()方法

　　　　　　prepend()方法將每匹配的元素內部前置要添加的元素，方法如下：$(target).prepend(element);例：

　　　　　　$("ul").prepend("<li title='芒果'>芒果</li>")

　　　　　　該方法將查找元素ul然後將新建的li元素作為ul子節點，且作為ul的第一個子節點插入到ul中。

　　　　4、prependTo()方法

　　　　　　prependTo()方法將元素添加到每一個匹配的元素內部前置，方法如下：$(element).prependTo();例：

　　　　　　$("<li title='西瓜’>西瓜</li>").prependTo("ul");

　　　　　　該方法將新建的元素li插入到查找到的ul元素中作為ul的第一個子節元素。

　　　　5、after()方法

　　　　　　after()方法向匹配的元素後面添加元素，新添加的元素做為目標元素後的緊鄰的兄弟元素。方法如下：$(target).after(element);例:

　　　　　　$("p").after("<span>新加段新加段新加段新加段新加段</span>");

　　　　　　方法將查找節點p，然後把新建的元素添加到span節點後面做為p的兄弟節點。

　　　　6、insertAfter()方法

　　　　　　insertAfter()方法將新建的元素插入到查找到的目標元素後，做為目標元素的兄弟節點。方法如下：$(element).insertAfter(target);例:

　　　　　　$("<p>insertAfter操作</p>").insertAfter("span");

　　　　　　方法將新建的p元素添加到查找到目標元素span後面，做為目標元素後面的第一個兄弟節點。

　　　　7、before()方法

　　　　　　before()方法在每一個匹配的元素之前插入，做為匹配元素的前一個兄弟節點。方法如下:$(target).before(element);例：

　　　　　　$("p").before("<span>下麵是個段落</span>");

　　　　　　before方法查找每個元素p，將新建的span元素插入到元素p之前做為p的前一個兄弟節點。

　　　　8、insertBefore()方法

　　　　　　insertBefore()方法將新建元素添加到目標元素前，做為目標元素的前一個兄弟節點，方法如下:$(element).insertBefore(target);例:

　　　　　　$("<a href='#'>錨</a>").insertBefore("ul");

　　　　　　insertBefore()新建a元素，將新建的a元素添加到元素ul前，做為ul的前一個兄弟節點。

　　　　　　增加元素的方法前四個是添加到元素內部，後四個是添加到元素外部的操作，有這些方法可以完成任何形式的元素添加。

　  　四、刪--刪除DOM節點操作

　　　　　　如果想要刪除文檔中的某個元素JQuery提供了兩種刪除節點的方法：remove()和empty();

　　　　1、remove()方法

　　　　　　remove()方法刪除所有匹配的元素，傳入的參數用於篩選元素，該方法能刪除元素中的所有子節點，當匹配的節點及後代被刪除後，該方法返回值是指向被刪除節點的引用，因此可以使用該引用，再使用這些被刪除的元素。方法如下：$(element).remove();例:

　　　　　　$span=$("span").remove();

　　　　　　$span.insertAfter("ul");

　　　　　　該示例中先刪除所有的span元素，把刪除後的元素使用$span接收，把刪除後的元素添加到ul後面做為ul的兄弟節點。該操作相當於將所有的span元素以及後代元素移到ul後面。

　　　　2、empty()方法。

　　　　　　empty()方法嚴格來講並不是刪除元素，該方法只是清空節點，它能清空元素中的所有子節點。方法如下:$(element).empty();例：

　　　　　　$("ul li:eq(0)").empty();

　　　　　　該示例使用empty方法清空ul中第一個li的文本值。只能下li標簽預設符號”·“。

　　五、改--修改DOM節點操作

　　　　　　　修改文檔中的元素節點可以使用多種方法:複製節點、替換節點、包裹節點。

　　　　1、複製節點$(element).clone()

　　　　　　　複製節點方法能夠複製節點元素，並且能夠根據參數決定是否複製節點元素的行為。方法如下:$(element).clone(true);例：

　　　　　　　　$("ul li:eq(0)").clone(true);

　　　　　　　該方法複製ul的第一個li元素，true參數決定複製元素時也複製元素行為，當不複製行為時沒有參數。

　　　　2、替換節點$(element).repalcewith()、$(element).repalceAll()

　　　　　　　替換節點方法能夠替換某個節點，有兩種形式形式實現：replaceWith()和replaceAll().使用replaceWith方法使用後面的元素替換前面的元素，replaceAll方法使用前面的元素替換後面的元素，方法如下：$(oldelement).replaceWith(newelement);$(newelement).repalceAll(oldelement);例：　　　　　　　　　　　　　$("p").replaceWith("<strong>我要留下</strong>");該方法使用strong元素替換p元素。

　　　　　　　　$("<h3>替換strong</h3>").repalceAll("strong");該例使用h3元素替換所有的strong元素。

　　　　3、包裹節點$(element).wrap()、$(element).wrapAll()、$(element).wrapInner()

　　　　　　　包裹節點方法使用其他標記包裹目標元素從而改變元素的顯示形式等，並且該操作不會破壞原始文檔的詞義。包裹節點有三種實現形式：wrap();wrapAll();wrapInner();

　　　　　　　wrap()方法如下：$(dstelement).wrap(tag);例：

　　　　　　　　$("p").wrap("<b></b>");該示例方法使用b標簽包裹所有的p元素每個元素都使用b標簽包裹。

　　　　　　　wrapAll()方法如下：$(dstelement).wrapAll(tag);例：

　　　　　　　　$("p").wrapAll("<b></b>");訪示例方法使用b標簽包裹所有的p元素，所有的p元素標簽用一個b標簽包裹。

　　　　　　　　wrapInner()方法如下：$(dstelement).wrapInner(tag);例：

　　　　　　　　$("strong").wrapInner("<b></b>");該示例使用b標簽包裹每個一strong元素的子元素。

　　　　Dom元素的其他操作:屬性操作、樣式操作、設置和獲取HTML,文本和值、遍歷節點操作、Css-Dom操作。

　　　　1、屬性操作attr()和removeAttr()

　　　　　　attr()方法能夠獲取元素屬性，也能能夠設置元素屬性。方法如下，當attr(para1)方法有個參數時候用於獲得當前元素的para1的屬性值，當attr(para1,attrValue)有兩個參數時候設置當前元素的屬性名為para1的屬性值為attrValue;例：

　　　　　　 $("p").attr("title");該示例用於獲得p元素的title屬性值。

　　　　　　 $("p").attr("title","你最喜歡的水果");該示例設置p元素的title屬性值為"你最喜歡的水果";

　　　　　　如果一次設置多個屬性值可以使用“名/值”對形式，例：

　　　　　　 $("p").attr({"title":"你最喜歡的水果","name":"水果"})。該示例一次設置兩個屬性值。

　　　　　　removeAttr()方法用於刪除特定的屬性，方法是在參數中指定屬性名。例：

　　　　　　$("p").removeAttr("name");該方法就是移除p元素的name屬性。

　　　　 2、樣式操作addClass()、removeClass()、toggleClass()和hasClass()

　　　　　　添加樣式addClass()方法，使用該方法對目標元素添加相應的樣式，方法如下：$(element).addClass();例：

　　　　　　 $("p").addClass("ul");該示例設置元素p的樣式為ul。

　　　　　　移除樣式removeClass()方法，使用該方法移除目標元素的指定樣式，方法如下：$(element).removeClass();例：

　　　　　　 $("p").removeClass("ul");該救命去除掉p元素的ul類樣式。

　　　　　　切換樣式toggleClass()方法，使用該方法切換目標元素的樣式，方法如下：$(element).toggleClass();例：

　　　　　　$("p").toggleClass("ul");該方法來回切換【添加刪除實現切換】元素p的樣式ul.

　　　　　　判斷元素是否使用了樣式$(element).hasClass(),方法如下：$(element).hasClass(class);例：

　　　　　　alert($("p").hasClass("ul"));列印出p元素是否有ul樣式。

　　　　　　PS:addClass()和attr()方法設置樣式的不同，attr方法把元素的屬性名對應的屬性值設為方法中的參數值，addClass()則把屬性值

添加到屬性名對應的屬性值中。例：已有元素<p class='class1'>元素樣式</p>,使用attr()和addClass()分別添加新樣式。

　　　　　　$("p").attr("class","another").結果是<p class='another'>元素樣式</>

　　　　　　$("p").addClass("class","another")結果是<p class='class1 another'>元素樣式</p>

　　　　3、設置和獲取HTML【html()】,文本【text()】和值【val()】

　　　　　　html()方法獲得或設置某個元素的html元素。方法如下:$(selector).html();例:

　　　　　　 $("p").html();該示例獲得元素p的html內容。

　　　　　　$("p").html("<strong>添加html內容</strong>");該示例設置p的html內容為”<strong>添加html內容</strong>“;

　　　　　　PS：該方法可以用於XHTML文檔，不能用於XML文檔。

　　　　　　text()方法獲得或設置某個元素的文本值。方法如下:$(selecotr).text();例：

　　　　　　$("p").text();該示例獲得元素p的text文本內容。

　　　　　　$("p").text("重新設置的文本內容");該示例設置元素p的text文本為"重新設置的文本內容";

　　　　　　PS:該方法對html和XML文檔都適用。

　　　　　　val()方法獲得或設置某個元素的值，如果元素值是多選則以數組形式返回，方法如下：$(selector).val();例:文本元素 

<input type="text" id="userName" value="請輸入用戶名" />

　　　　　　$("#userName").val();獲得input元素的值。

　　　　　　$("#userName").val('響馬');設置input元素的值為'響馬'。

　　　　　　val()方法的不僅能操作input，最重要的一個用途用於select【下拉列表框】、checkbox【多選框】、radio【單選框】。例：在下拉框下的多選賦值應用<select id="fruits" multiple="multiple"><option>蘋果</option><option>香蕉</option><option>西瓜</option></select>

　　　　　　$("#fruits").val(['蘋果','香蕉']);該示例使select中蘋果和香蕉兩項被選中。

　　　   4、遍歷節點操作children()、next()、prev()、siblings()和closest()

　　　　　　children()方法用於取得匹配元素的子元素集合，只匹配子元素不考慮任何後代元素。方法如下：$(selector).children();例：

　　　　　　　$("$("body").children().length;該示例獲得body元素的子元素個數；

　　　　　　next()方法用於匹配元素的下一個兄弟節點，方法如下:$(selector).next();例：

　　　　　　　$("p").next().html();該示例獲得p元素的下一個兄弟節點的html內容。

　　　　　　prev()方法用於匹配元素的上一個兄弟節點，方法如下：$(selector).prev();例：

　　　　　　　$("ul").prev().text();該示例獲得ul元素的上一個兄弟節點的文本內容。

　　　　　　siblings方法()用於匹配目標元素的所有兄弟元素，方法如下：$(selector).siblings();例：

　　　　　　 $("p").slibings();示例獲得p元素的所有兄弟節點元素。

　　　　　　closest()方法()用來取得最近的匹配元素，首先檢查當前元素是否匹配如果匹配則直接返回，否則繼續向上查找父元素中符合條件的元素返回，如果沒有匹配的元素則返回空JQuery對象。

　　　　5、CSS-Dom操作css()、offset()、position()、scrollTop()和scrollLeft()

　　　　　　css()方法用於獲取、設置元素的一個或多個屬性。方法如下：$(selector).css();例：

　　　　　　　$("p").css("color","red");該示例用於設置元素的顏色屬性為紅色;

　　　　　　   $("p").css("color")該示例用於獲得元素的color樣式值;

　　　　　　　$("p").css({"font-size":"30px","backgroundColor","#888888"});該示例用於設置元素的多個樣式。

　　　　　　offset()方法用於獲取元素相對當前窗體的偏移量，其返回對象包括兩個屬性：top和left。方法如下：$(selector).offset()

　　　　　　　var offset= $("p").offset(); var left=offset.left;var top=offset.top;該示例用於獲得元素p的偏移量。

　　　　　　PS:offset()只對可見元素有效。

　　　　　　position()方法用於獲取元素於最近的個position樣式屬性設置為relative或者absolute的祖交節點的相對偏移量。方法如下：$(selector).position();例：

　　　　　　　var postion = $("p").positon();var left=positon.left;var top=positon.top;該示例用於獲得元素p的位置。

　　　　　　scrollTop()和scrollLeft()方法用於獲取元素的滾動條距頂端的距離和距左側的距離。方法如下:$(selector).scrollTop();$(selector).scrollLeft();例：

　　　　　　　var scrollTop=$("p").scrollTop();var scrollLeft=$("p").scrollLeft();該示例用於獲得元素的滾動條的位置。

　　　　　　也可以添加參數將元素滾動到指定的位置。例：

　　　　　　　$("textarea").scrollTop(300);$("textarea").scrollLeft(300);


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • bootstrap-select中selectpicker在jquery的clone()後無效問題-解決方法
    近期做一高校項目，招生計劃發佈需要實現同一專業在不同省份計劃招生的人數，即一對多以及多對多，就應用了批量填寫表單，由於整體UI框架用了bootstrap,那bootstrap-select的使用自然不在話下，於是使用了clone,但無奈發現bootstrap-select被clone,和after追 ...
  • 手風琴頁面
    啥都不說了，直接上 1.Html結構代碼 2.css樣式代碼 3.javascript代碼 4.主要： a.字體豎排垂直：字體大小font-size = 包含字體標簽寬度width b.js中stop()方法：stop()表示結束動畫有過渡 stop(true)表示暫停動畫， stop(true,t ...
  • 【原生JS】層疊輪播圖
    又是輪播？沒錯，換個樣式玩輪播。 HTML: CSS: JS: ...
  • Vue 入門筆記
    # vuejs tutorial ![vue-logo](img/logo.png) ## 搭建案例演示自動刷新環境 創建一個 `package.josn` 文件： ```bashnpm init -y``` 安裝 `browser-sync`: ```bash# npm install --sav ...
  • express入門學習(一)
    一、安裝express cnpm || npm install express --save ; 1. Hello World 2.express路由 3.靜態資源 app.user(express.statice('public')); 二、express的中間件 1.應用級中間件 2.路由級中間 ...
  • RequireJS模塊化編程詳解
    1.模塊的寫法 模塊化編程一般都有這麼幾個過渡過程，如下描述。 原始方法 上面的函數m1()和m2()，組成一個模塊。使用的時候，直接調用就行了。 這種做法的缺點很明顯："污染"了全局變數，無法保證不與其他模塊發生變數名衝突，而且模塊成員之間看不出直接關係。 對象寫法 為瞭解決上面的缺點，可以把模塊 ...
  • HTML里的哪一部分Javascript 會在頁面載入的時候被執行？
    最近遇到一個問題：HTML里的哪一部分Javascript 會在頁面載入的時候被執行（）A : 文件頭部 B : 文件尾 C : <head>標簽部分 D : <body>標簽部分 雖然大家都知道選D,但是關於答案的解析眾說紛紜，由此可見大家對於瀏覽器的載入解析渲染還是不夠瞭解。 瀏覽器是從上到下依 ...
  • Sublime Text3常用插件安裝
    一、Sublime3下載 1.百度搜索Sublime3,選擇進入下載頁面 2.小編選擇下載Win64位安裝程式 二、Sublime3安裝 傻瓜式安裝，此處省略千言萬語，然後打開就可以使用了，大家要註意的一點是，Sublime3是收費軟體，最傻的是，如果用戶不購買的話，在使用過程中會時不時出現要求購買 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類