jQuery的屬性、遍曆和HTML操作

標籤：

一.屬性操作

  1、.attr()與.removeAttr()

每個元素都有一個或者多個特性，這些特性的用途就是給出相應元素或者其內容的附加資訊。如：在img元素中，src就是元素的特性，用來標記圖片的地址。

操作特性的DOM方法主要有3個，getAttribute方法、 setAttribute方法和removeAttribute方法，就算如此在實際操作中還是會存在很多問題，這裡先不說。而在jQuery中用一個 attr()與removeAttr()就可以全部搞定了，包括相容問題

jQuery中用attr()方法來擷取和設定元素屬性,attr是attribute（屬性）的縮寫，在jQuery DOM操作中會經常用到attr()

attr()有4個運算式

1. attr(傳入屬性名稱)：擷取屬性的值            $(selector).attr(attribute)
2. attr(屬性名稱, 屬性值)：設定屬性的值            $(selector).attr(attribute,value)
3. attr(屬性名稱,函數值)：設定屬性的函數值               $(selector).attr(attribute,function(index,oldvalue))
4. attr(attributes)：給指定元素設定多個屬性值，即：{屬性名稱一: “屬性值一” , 屬性名稱二: “屬性值二” , … … }$(selector).attr({attribute:value, attribute:value ...})

removeAttr()刪除方法

.removeAttr( attributeName ) : 為匹配的元素集合中的每個元素中移除一個屬性（attribute）

優點：

attr、removeAttr都是jQuery為了屬性操作封裝的，直接在一個 jQuery 對象上調用該方法，很容易對屬性進行操作，也不需要去特意的理解瀏覽器的屬性名稱不同的問題

注意的問題：

dom中有個概念的區分：Attribute和Property翻譯出來都是“屬性”，《js進階程式設計》書中翻譯為“特性”和“屬性”。簡單理解，Attribute就是dom節點內建的屬性

例如：html中常用的id、class、title、align等：

<div id="immooc" title=""></div>

而Property是這個DOM元素作為對象，其附加的內容，例如,tagName, nodeName, nodeType,, defaultChecked, 和 defaultSelected 使用.prop()方法進行取值或賦值等

擷取Attribute就需要用attr，擷取Property就需要用prop
2、html()及.text()

讀取、修改元素的html結構或者元素的常值內容是常見的DOM操作，jQuery針對這樣的處理提供了2個便捷的方法.html()與.text()

.html()方法 

擷取集合中第一個匹配元素的HTML內容 或 設定每一個匹配元素的html內容，具體有3種用法：

1. .html() 不傳入值，就是擷取集合中第一個匹配元素的HTML內容
2. .html( htmlString )  設定每一個匹配元素的html內容
3. .html( function(index, oldhtml) ) 用來返回設定HTML內容的一個函數

注意事項：

.htm()方法內部使用的是DOM的innerHTML 屬性來處理的，所以在設定與擷取上需要注意的一個最重要的問題，這個操作是針對整個HTML內容（不僅僅只是常值內容）

.text()方法

得到匹配元素集合中每個元素的常值內容結合，包括他們的後代，或設定匹配元素集合中每個元素的常值內容為指定的常值內容。，具體有3種用法：

1. .text() 得到匹配元素集合中每個元素的合并文本，包括他們的後代
2. .text( textString ) 用於設定匹配元素內容的文本
3. .text( function(index, text) ) 用來返回設定常值內容的一個函數

注意事項：

.text()結果返回一個字串，包含所有匹配元素的合并文本

    .html與.text的異同:

1. .html與.text的方法操作是一樣，只是在具體針對處理對象不同
2. .html處理的是元素內容，.text處理的是常值內容
3. .html只能使用在HTML文檔中，.text 在XML 和 HTML 文檔中都能使用
4. 如果處理的對象只有一個子文本節點，那麼html處理的結果與text是一樣的
5. Firefox不支援innerText屬性，用了類似的textContent屬性，.text()方法綜合了2個屬性的支援，所以可以相容所有瀏覽器

3、.val()

jQuery中有一個.val()方法主要是用於處理表單元素的值，比如 input, select 和 textarea。

.val()方法

1. .val()無參數，擷取匹配的元素集合中第一個元素的當前值
2. .val( value )，設定匹配的元素集合中每個元素的值
3. .val( function ) ，一個用來返回設定值的函數

 注意事項：

1. 通過.val()處理select元素， 當沒有選擇項被選中，它返回null
2. .val()方法多用來設定表單的欄位的值
3. 如果select元素有multiple（多選）屬性，並且至少一個選擇項被選中， .val()方法返回一個數組，這個數組包含每個選中選擇項的值

 

.html(),.text()和.val()的差異總結：  

1. .html(),.text(),.val()三種方法都是用來讀取選定元素的內 容；只不過.html()是用來讀取元素的html內容（包括html標籤），.text()用來讀取元素的純文字內容，包括其後代元素，.val()是 用來讀取表單元素的"value"值。其中.html()和.text()方法不能使用在表單元素上,而.val()只能使用在表單元素上；另 外.html()方法使用在多個元素上時，唯讀取第一個元素；.val()方法和.html()相同，如果其應用在多個元素上時，只能讀取第一個表單元素 的"value"值，但是.text()和他們不一樣，如果.text()應用在多個元素上時，將會讀取所有選中元素的常值內容。
2. .html(htmlString),.text(textString)和.val(value)三種方法都是用來替換選中元素的內容，如果三個方法同時運用在多個元素上時，那麼將會替換所有選中元素的內容。
3. .html(),.text(),.val()都可以使用回呼函數的傳回值來動態改變多個元素的內容。

4、增加樣式.addClass()

通過動態改變類名（class），可以讓其修改元素呈現出不同的效果。在HTML結構中裡，多個class以空格 分隔，當一個節點（或稱為一個標籤）含有多個class時，DOM元素響應的className屬性擷取的不是class名稱的數組，而是一個含有空格的 字串，這就使得多class操作變得很麻煩。同樣的jQuery開發人員也考慮到這種情況，增加了一個.addClass()方法，用於動態增加 class類名

.addClass( className )方法

1. .addClass( className ) : 為每個匹配元素所要增加的一個或多個樣式名        $(selector).addClass(class)
2. .addClass( function(index, currentClass) ) : 這個函數返回一個或更多用空格隔開的要增加的樣式名     $(selector).addClass(function(index,oldclass))

注意事項：

.addClass()方法不會替換一個樣式類名。它只是簡單的添加一個樣式類名到元素上

簡單的描述下：在p元素增加一個newClass的樣式

<p class="orgClass">$("p").addClass("newClass")

那麼p元素的class實際上是 class="orgClass newClass"樣式只會在原本的類上繼續增加，通過空格分隔

5、刪除樣式.removeClass()

jQuery通過.addClass()方法可以很便捷的增加樣式。如果需要樣式之間的切換，同樣jQuery提供了一個很方便的.removeClass()，它的作用是從匹配的元素中刪除全部或者指定的class

.removeClass( )方法

1. .removeClass( [className ] )：每個匹配元素移除的一個或多個用空格隔開的樣式名     $(selector).removeClass(class)
2. .removeClass( function(index, class) ) ： 一個函數，返回一個或多個將要被移除的樣式名     $(selector).removeClass(function(index,oldclass))

注意事項

如果一個樣式類名作為一個參數,只有這樣式類會被從匹配的元素集合中刪除 。 如果沒有樣式名作為參數，那麼所有的樣式類將被移除

6、轉場樣式.toggleClass()

在做某些效果的時候，可能會針對同一節點的某一個樣式不斷的切換，也就是addClass與removeClass的互斥切換，比如隔行換色效果

jQuery提供一個toggleClass方法用於簡化這種互斥的邏輯，通過toggleClass方法動態添加刪除Class，一次執行相當於addClass，再次執行相當於removeClass

.toggleClass( )方法：在匹配的元素集合中的每個元素上添加或刪除一個或多個樣式類,取決於這個樣式類是否存在或值切換屬性。即：如果存在（不存在）就刪除（添加）一個類

1. .toggleClass( className )：在匹配的元素集合中的每個元素上用來切換的一個或多個（用空格隔開）樣式類名
2. .toggleClass( className, switch )：一個布爾值，用於判斷樣式是否應該被添加或移除
3. .toggleClass( [switch ] )：一個用來判斷樣式類添加還是移除的 布爾值
4. .toggleClass( function(index, class, switch) [, switch ] )：用來返回在匹配的元素集合中的每個元素上用來切換的樣式類名的一個函數。接收元素的索引位置和元素舊的樣式類作為參數

注意事項：

1. toggleClass是一個互斥的邏輯，也就是通過判斷對應的元素上是否存在指定的Class名，如果有就刪除，如果沒有就增加
2. toggleClass會保留原有的Class名後新增，通過空格隔開

二、HTML操作

函數	描述
$(selector).html(content)	改變被選元素的（內部）HTML
$(selector).append(content)	向被選元素的（內部）HTML 追加內容
$(selector).prepend(content)	向被選元素的（內部）HTML “預置”（Prepend）內容
$(selector).after(content)	在被選元素之後添加 HTML
$(selector).before(content)	在被選元素之前添加 HTML

三、遍曆

 

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

 

函數	描述
.add()	將元素添加到匹配元素的集合中。
.andSelf()	把堆棧中之前的元素集添加到當前集合中。
.children()	獲得匹配元素集合中每個元素的所有子項目。
.closest()	從元素本身開始，逐級向上階項目匹配，並返回最先匹配的祖先元素。
.contents()	獲得匹配元素集合中每個元素的子項目，包括文本和注釋節點。
.each()	對 jQuery 對象進行迭代，為每個匹配元素執行函數。
.end()	結束當前鏈中最近的一次篩選操作，並將匹配元素集合返回到前一次的狀態。
.eq()	將匹配元素集合縮減為位於指定索引的新元素。
.filter()	將匹配元素集合縮減為匹配選取器或匹配函數傳回值的新元素。
.find()	獲得當前匹配元素集合中每個元素的後代，由選取器進行篩選。
.first()	將匹配元素集合縮減為集合中的第一個元素。
.has()	將匹配元素集合縮減為包含特定元素的後代的集合。
.is()	根據選取器檢查當前匹配元素集合，如果存在至少一個匹配元素，則返回 true。
.last()	將匹配元素集合縮減為集合中的最後一個元素。
.map()	把當前匹配集合中的每個元素傳遞給函數，產生包含傳回值的新 jQuery 對象。
.next()	獲得匹配元素集合中每個元素緊鄰的同輩元素。
.nextAll()	獲得匹配元素集合中每個元素之後的所有同輩元素，由選取器進行篩選（可選）。
.nextUntil()	獲得每個元素之後所有的同輩元素，直到遇到匹配選取器的元素為止。
.not()	從匹配元素集合中刪除元素。
.offsetParent()	獲得用於定位的第一個父元素。
.parent()	獲得當前匹配元素集合中每個元素的父元素，由選取器篩選（可選）。
.parents()	獲得當前匹配元素集合中每個元素的祖先元素，由選取器篩選（可選）。
.parentsUntil()	獲得當前匹配元素集合中每個元素的祖先元素，直到遇到匹配選取器的元素為止。
.prev()	獲得匹配元素集合中每個元素緊鄰的前一個同輩元素，由選取器篩選（可選）。
.prevAll()	獲得匹配元素集合中每個元素之前的所有同輩元素，由選取器進行篩選（可選）。
.prevUntil()	獲得每個元素之前所有的同輩元素，直到遇到匹配選取器的元素為止。
.siblings()	獲得匹配元素集合中所有元素的同輩元素，由選取器篩選（可選）。
.slice()	將匹配元素集合縮減為指定範圍的子集。

 

jQuery的屬性、遍曆和HTML操作