jQuery學習筆記(二)jQuery中的DOM操做

時間 2019-12-14

標籤 jquery 學習筆記 dom 欄目 JQuery 简体版

原文原文鏈接

　jQuery中的DOM操做包括如下部分css

　　1 查找節點
html

　　　　1.1 查找元素節點jquery

　　　　1.2 查找屬性節點數組

　　2 建立節點
瀏覽器

　　　　2.1 建立元素節點app

　　　　2.2 建立文本節點dom

　　　　2.3 建立屬性節點函數

　　3 插入節點
字體

　　4 刪除節點
this

　　　　1. remove()方法

　　　　2. detach() 方法

　　　　3. empty()方法

　　5 複製節點

　　　　clone() 方法

　　6 替換節點

　　　　 replaceWith() 方法

　　　　 replaceAll() 方法

　　7 包裹節點

　　　　wrap() 方法

　　　　wrapAll() 方法

　　　　wrapInner() 方法

　　8 屬性操做

　　　　1 獲取屬性和設置屬性（attr()）

　　　　2 刪除屬性（removeAttr()）

　　9 樣式操做

　　　　1 獲取樣式和設置樣式

　　　　2 追加樣式（addClass()）

　　　　3 移除樣式（removeClass()）

　　　　4 切換樣式（toggle()）

　　　　5 判斷是否含有某個樣式（hasClass()）

　　10 設置和獲取HTML、文本和值

　　　　1 html() 方法

　　　　2 text() 方法

　　　　3 val() 方法

　　11 遍歷節點

　　　　1 children() 方法

　　　　2 next() 方法

　　　　3 prev() 方法

　　　　4 siblings() 方法

　　　　5 closest() 方法

　　12 CSS-DOM操做

　　1 查找節點

　　　1.1 查找元素節點

　　　　利用jQuery選擇器查找元素　　　　　

如： $(「ul li:eq(1)」);　　//獲取ul下第2個li節點

　　　1.2 查找屬性節點

　　　　利用jQuery選擇器查找到須要的元素以後，就可使用 attr() 方法來獲取它的的各類屬性的值。　　

如： $("p").attr("title");   　　//獲取<p>元素節點屬性title

　　2 建立節點

　　　2.1 建立元素節點

　　　　　　//$(html)建立一個DOM對象，幷包裝成一個JQuery對象返回　　　　

如：var $li_1=$("<li></li>")   //建立一個<li>元素
　　$("ul").append($li_1);　　//用append方法將新元素插入文檔中

　　 2.2 建立文本節點　　　

如：var $li_1=$("<li>香蕉</li>")   //建立一個<li>元素，包括元素節點和文本節點，「香蕉」就是建立的文本節點
　　$("ul").append($li_1);　　　　　//用append方法將新元素插入文檔中

　　 2.3 建立屬性節點　　　　

如：var $li_1=$("<li title="香蕉">香蕉</li>")   //建立一個<li>元素，
　　　　　　　　　　　　　　　　　　　　　　　　　　　　//包括元素節點、文本節點和屬性節點
　　　　　　　　　　　　　　　　　　　　　　　　　　　　// title=「香蕉」就是建立的屬性節點
　 $("ul").append($li_1);　　　　　　　　　　　　//用append方法將新元素插入文檔中

　　3 插入節點

　　　插入節點的方法：

　　　append()　　

　　　向每一個匹配的元素內部追加內容

　　 appendTo()　　

　　　將全部匹配的元素追加到指定的元素中。實際上，使用該方法是顛倒了常規的$(A).append(B)的操做，即不是將B追加到A中，而是將A追加到B中

　　　prepend()　　

　　　向每一個匹配的元素內部前置內容

　　　prependTo()　　

　　　將全部匹配的元素前置到指定的元素中。實際上，使用該方法是顛倒了常規的$(A).prepend(B)的操做，即不是將B前置到A中，而是將A前置到B中

　　　after()　　

　　　在每一個匹配的元索以後插入內容

　　　insertAfter()　　

　　將全部匹配的元素插入到指定元素的後面。實際上，使用該方法是顛倒了常規的$(A).after(B)的操做，即不是將B插入到A後面，而是將A插入到B後面

　　　before()　　

　　　在每一個匹配的元素以前插入內容

　　　insertBefore()　　

　　　將全部匹配的元素捅入到指定的元素的前面。實際上，使用該方法是顛倒了常規的$(A).before(B)的操做，即不是將B插入到A前面，而是將A插入到B前面

　　　這些插入節點的方法不只能將新建立的DOM元素插入到文檔中，也能對原有的DOM元素進行移動。例如利用它們建立新元素並對其進行插入操做：

　　　也利用它們對原有的DOM元素進行移動：

　　4 刪除節點

　　　jQuery提供了三種刪除節點的方法，即remove(),detach(),empty()。

　　　1. remove()方法

　　　　做用是從DOM中刪除全部匹配的元素，傳入的參數用於根據JQuery表達式來篩選元素。

　　2. detach() 方法

　　　 detach()和remove()同樣，也是從DOM中去掉全部匹配的元素。但須要注意的是，這個方法不會把匹配的元素從jQuery對象中刪除，於是能夠在未來再使用這些匹配的元素。與remove()不一樣的是，全部綁定的事件、附加的數據都會保留下來。　　　　　

如：$("ul li").click(function(){
　　　　 alert($(this).html());
　　})
　　var $li=$("ul li:eq(1)").detach();    //刪除元素
　　$li.appendTo("ul");　　        //從新追加此元素，發現它以前綁定的事件還在，若是使用remove()方法刪除元素的話，那麼它以前綁定的事件將失效。

　　3. empty()方法

　　　嚴格來說，empty()方法並非刪除節點，而是清空節點，它能清空元素中的全部後代節點。JQuery代碼以下：　

　　5 複製節點

　　　可使用clone() 方法來完成，jQuery代碼以下：

　　6 替換節點

　　　若是要替換某個節點，jQuery提供了相應的方法，即 replaceWith() 和 replaceAll() 。

　　　replaceWith（content）將全部選擇的元素替換成指定的html和dom元素。其中參數被選擇替換的內容。

replaceAll（selector）替換指定的selector元素。

　　　注意：　replaceWith() 與replaceAll() 方法均可以實現元素節點的替換，兩者最大的區別在於替換字符的順序，前者是用括號中的字符替換所選擇的元素，後者是用字符串替換括號中所選擇的元素。同時，一旦完成替換，被替換元素中的所有事件都將消失。

　　7 包裹節點

　　　wrap()方法

　　包裹節點操做還有其餘兩個方法，即wrapAll()和wrapInner()。

　　　wrapAll()方法

　　　　該方法會將全部匹配的元素用一個元素來包裹。它不一樣於wrap()方法，wrap()方法是將全部的元素進行單獨的包裹。

　　　　　JQuery代碼以下：

　　　 wrapInner()方法

　　　　　該方法將每個匹配的元素的子內容（包括文本節點）用其餘結構化的標記包裹起來。

　　8 屬性操做

　　　1 獲取屬性和設置屬性（attr()）

　　 2 刪除屬性（removeAttr()）

　　9 樣式操做

　　　1 獲取樣式和設置樣式

　　　　獲取class和設置class均可以使用attr()方法來完成。

　　　　例如使用attr()方法來獲取p元素的class，JQuery代碼以下：　　　　　

var p_class=$("p"),attr("class");　　//獲取<p>元素的class

　　　例如使用attr()方法來設置p元素的class，JQuery代碼以下：

$("p").attr("class","high")　　　　//設置<p>元素的class爲「high」  //在大多數狀況下，它是將原來的class替換爲新的class，而不是在原來的基礎上追加新的class。

　　　2 追加樣式（addClass()）

　　　3 移除樣式（removeClass()）

　　　4 切換樣式（toggle()）

　　　5 判斷是否含有某個樣式（hasClass()）

　　10 設置和獲取HTML、文本和值

　　　 1 html() 方法

　　　　此方法相似於JavaScript中的innerHTML屬性，能夠用來讀取或者設置某個元素中的HTML內容。

　　　　　　要獲取某個元素的內容，能夠這樣：　　　　　　

var p_html=$("p").html(); 　　//獲取p元素的HTML代碼

　　　　若是須要設置某元素的HTML代碼，那麼也可使用該方法，不過須要爲它傳遞一個參數。

　　　　　　例如要設置p元素的HTML代碼，可使用以下代碼：　　　　　　　

$("p").html("歡迎加入jquery");　//設置<p>元素的HTML代碼

　　　　注意：html()方法能夠用於XHTML文檔，但不能用於XML文檔。

　　　2 text() 方法

　　　　此方法相似於JavaScript中的innerText屬性，能夠用來讀取或者沒置某個元素中的文本內容。

　　　　　繼續使用以上的HTML代碼，用text()方法對p元素進行操做：　　　　　　　

var p_text=$("p").text(); 　　//獲取p元素的文本內容

　　　　與html()方法同樣，若是須要爲某元素設置文本內容，那麼也須要傳遞一個參數。

　　　　　例如對p元素設置文本內容，代碼以下：　　

$("p").text("歡迎加入jquery");　//設置<p>元素的文本內容

　　　　要注意下面兩點：　

　　　　　　　　1. JavaScript中的innerText屬性並不能在Firefox瀏覽器下運行，而jQuery的text()方法支持全部的瀏覽器．

　　　　　　　　2. text()方法對HTML文檔和XML文檔都有效。

　　 3 val() 方法

　　　此方法相似於JavaScript中的value屬性，能夠用來設置和獲取元索的值。不管元素是文本框，下拉列表還足單選框，它均可以返回元素的值。若是元素爲多選，則返回一個包含全部選擇的值的數組。

　　　　示例：

　　　val()方法不只能設置元素的值，同時也能獲取元素的值。另外，val()方法還有另一個用處，就是它能使select（下拉列表框）、checkbox（多選框）和radio（單選框）相應的選項被選中，在表單操做中會常常用到。

　　11 遍歷節點

　　　 1 children() 方法

　　　　該方法用於取得匹配元素的子元素集合

　　 2 next() 方法

　　　該方法用於取得匹配元素後面緊鄰的同輩元素。

　　　　從DOM樹的結構中能夠知道p元素的下一個同輩節點是ul，所以能夠經過next()方法來獲取ul元素，代碼以下：　　　　

var $p1=$("p").next();　　//取得緊鄰p元素後的同輩元素

　 3 prev() 方法

　　　該方法用於取得匹配元素前面緊鄰的同輩元素。

　　　　從DOM樹的結構中能夠知道ul元素的上一個同輩節點是p，所以能夠經過prev()方法來獲取p元素，代碼以下：　　　　

var $ul=$("ul").prev();　　//取得緊鄰ul元素前的同輩元素

　　4 siblings() 方法

　　　該方法用於取得匹配元素先後全部的同輩元素。　　　　

　　　　　以DOM樹的結構爲例。ul元素和p元素互爲同輩元素，ul元素下的3個li元素也互爲同輩元素。

　　　　　若是要獲取p元素的同輩元素，則可使用以下代碼：　　　　　　　

var $p2=$("p").siblings();　　//取得<p>元素的同輩元素

　　5 closest() 方法

　　　　該方法用於取得最近的匹配元素　　　　　　　

　　　　　首先檢查當前元素是否匹配，若是匹配則直接返回元素自己。若是不匹配則向上查找父元素，逐級向上直到找到匹配選擇器的元素。若是什麼都沒找到則返回一個空的JQuery對象。

　　　　　好比，給點擊的目標元素的最近的li元素添加顏色，可使用以下代碼：　　　　　　

$(document).bind("click",function(e){
　　$(e.target).closest("li").css("color","red");　
})

　　　　　除此以外，在JQuery中還有不少遍歷節點的方法，例如find()、filter()、nextAll()、prevAIl()、parent()和parents()等，此處再也不贅述，讀者能夠查看附錄的JQuery速查表文檔。值得注意的是，這些遍歷DOM方法有一個共同點，均可以使用JQuery表達式做爲它們的參數來篩選元素。

　　12 CSS-DOM操做

　　　　CSS-DOM技術簡單來講就是讀取和設置style對象的各類屬性。style屬性頗有用，但最大不足是沒法經過它來提取到經過外部CSS設置的樣式信息，然而在jQuery中，這些都是很是的簡單。

　　　　　能夠直接利用css()方法獲取元素的樣式屬性，JQuery代碼以下：　　　

　$("p").css("color");　　//獲取<p>元素的樣式顏色

　　　　不管color屬性是外部CSS導入，仍是直接拼接在HTML元素裏（內聯），css()方法均可以獲取到屬性style裏的其餘屬性的值。

　　　　也能夠直接利用css()方法設置某個元素的單個樣式，例如：　　　　

$("p").css("color","red");　　//設置p元素的樣式顏色爲紅色

　　　　　與attr()方法同樣，css()方法也能夠同時設置多個樣式屬性，代碼以下：　　　　

$("p").css("fontSize":"30px","backgroundColor","red");　　//同時設置字體大小和背景色

　　　　　若是值是數字，將會被自動轉化爲像素值。在css()方法中，若是屬性中帶有「-」符號，例如font-size和background-color屬性，若是在設置這些屬性的值的時候不帶引號，那麼就要用駝峯式寫法，好比上面的代碼，若是帶上了引號，既能夠寫成「font-size」，也能夠寫成「fontSize」。總之建議你們加上引號，養成良好的習慣。

　　　　　對透明度的設置，能夠直接使用opacity屬性，jQuery已經處理好了兼容性的問題。

　　　　　以下代碼所示，將p元素的透明度設置爲半透明：　　　　　

$("p").css("opacity","0.5");

　　　　　若是須要獲取某個元素的height屬性，則能夠經過以下JQuery代碼實現：　　　　

$(element).css("height");

　　　　　在jQuery中還有另一種方法也能夠獲取元素的高度，即height()。它的做用是取得匹配元素當前計算的高度值(px)：　　　　

$("p").height(); 　　//獲取p元素的高度值

　　　　　height()方法也能用來設置元素的高度，若是傳遞的值是一個數字，則默認單位爲px。若是要用其餘單位（例如em），則必須傳遞一個字符串，JQuery代碼以下：　　　　

$("p").height("100px"); 　　//設置p元素的高度值爲l00px 
$("p").height(「10em」); 　　//設置p元素的高度值爲10em

　　　　　1. 在jQuery l.2版本之後的height()方法能夠用來獲取window和document的高度。

　　　　　2. 二者的區別是：css()方法獲取的高度值與樣式的設置有關，可能會獲得「auto」，也可能獲得」10px」之類的字符串；而height()方法獲取的高度值則是元素在頁面中的實際高度，與樣式的設置無關，而且不帶單位。

　　　　　與height()方法對應的還有一個width()方法，它能夠取得匹配元素的寬度值(px)。　　　　　

$("p").width();　　// 獲取p元素的寬度值

　　　　　一樣，width()方法也能用來設置元素的寬度。　　　　

$("p").width("400px");　　//獲取p元素的寬度值爲400px

　　　　　此外，在CSS-DOM中，關於元素定位有如下幾個常用的方法。

　　1 offset() 方法

　　　它的做用是獲取元素在當前視窗的相對偏移，其中返回的對象包含兩個屬性，即top和left，它只對可見元素有效。

　　　　　例如用它來獲取p元素的的偏移量：　　　　　　　　

var offset=$("p").offset();　　//獲取<p>元素的offset()
var left=offset.left;　　　　   //獲取左偏移
var top=offset.top;　　　　     //獲取右偏移

　　2 position() 方法

　　　它的做用是獲取元素相對於最近的一個position樣式屬性設置爲relative或者absolute的祖父節點的相對偏移，與offset()同樣，它返回的對象也包括兩個屬性，即top和left。

　　　　JQuery代碼以下：　　　　　　　　　　　

var position=$("p").position();　　//獲取<p>元素的position()
var left=position.left;　　　　       //獲取左偏移
var top=position.top;　　　　       //獲取右偏移

　　3 scrollTop()方法和scrollLeft()方法

　　　這兩個方法的做用分別是獲取元素的滾動條距頂端的距離和距左側的距離。

　　　　　例如使用下面的代碼獲取p元素的滾動條距離：　　　　　　　　

var $p=$("p");
var scrollTop=$p.scrollTop();　　//獲取元素的滾動條距頂端的距離
var scrollLeft=$p.scrollLeft();　　//獲取元素的滾動條距左側的距離

　　　　　另外，能夠爲這兩個方法指定一個參數，控制元素的滾動條滾動到指定位置。

　　　　　例如使用以下代碼控制元素內的滾動條滾動到距頂端300和距左側300的位置：　　　　　　　　　

$("textarea").scrollTop(300);　　//元素的垂直滾動條滾動到指定的位置
$("textarea").scrollLeft(300);　　//元素的橫向滾動條滾動到指定的位置

　jQuery 參考手冊 　

jQuery 遍歷函數

　 jQuery 遍歷函數包括了用於篩選、查找和串聯元素的方法。

　jQuery 文檔操做方法

　這些方法對於 XML 文檔和 HTML 文檔均是適用的，除了：html()。

　jQuery 屬性操做方法

下面列出的這些方法得到或設置元素的 DOM 屬性。

這些方法對於 XML 文檔和 HTML 文檔均是適用的，除了：html()。

　jQuery CSS 操做函數

下面列出的這些方法設置或返回元素的 CSS 相關屬性。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。