jQuery的屬性、遍歷和HTML操做

一.屬性操做

  一、.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
二、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. 火狐不支持innerText屬性，用了相似的textContent屬性，.text()方法綜合了2個屬性的支持，因此能夠兼容全部瀏覽器

三、.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()均可以使用回調函數的返回值來動態的改變多個元素的內容。

四、增長樣式.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"樣式只會在本來的類上繼續增長，經過空格分隔

五、刪除樣式.removeClass()

jQuery經過.addClass()方法能夠很便捷的增長樣式。若是須要樣式之間的切換，一樣jQuery提供了一個很方便的.removeClass()，它的做用是從匹配的元素中刪除所有或者指定的class

.removeClass( )方法

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

注意事項

若是一個樣式類名做爲一個參數,只有這樣式類會被從匹配的元素集合中刪除 。 若是沒有樣式名做爲參數，那麼全部的樣式類將被移除

六、切換樣式.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名後新增，經過空格隔開

2、HTML操做

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

3、遍歷

 

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()	將匹配元素集合縮減爲指定範圍的子集。