屬性與樣式

一、.attr()與.removeAttr()

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

attr()有4個表達式

attr(attrName)：獲取屬性的值
attr(attrName, value)：設置屬性的值
attr(屬性名,函數值)：設置屬性的函數值
attr(attributes)：給指定元素設置多個屬性值，{屬性名一: “屬性值一” , 屬性名二: “屬性值二” , …}

removeAttr()刪除方法

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

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

注意的問題：

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()方法

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

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

.text()方法
得到匹配元素集合中每個元素的文本內容結合，包括他們的後代，或設置匹配元素集合中每個元素的文本內容爲指定的文本內容。

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

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

.val()

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

注意事項

.val()處理select元素， 當沒有選擇項被選中，它返回null
.val()方法　多用來設置表單　的字段的值
select元素有multiple（多選）屬性，並且至少一個選擇項被選中，.val()方法返回一個數組，這個數組包含每個選中選擇項的值

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

.html(),.text(),.val()三種方法都是用來讀取選定元素的內容；
    .html()是用來讀取元素的html內容（包括html標籤），
    .text()用來讀取元素的純文本內容，包括其後代元素，
    .val()是用來讀取表單元素的"value"值。
.html()和.text()方法不能使用在表單元素上,而.val()只能使用在表單元素上；

另外.html()方法使用在多個元素上時，只讀取第一個元素；
.val()方法和.html()相同，如果其應用在多個元素上時，只能讀取第一個表單元素的"value"值，
但是.text()和他們不一樣，如果.text()應用在多個元素上時，將會讀取所有選中元素的文本內容。

.html(htmlString),.text(textString)和.val(value)三種方法都是用來替換選中元素的內容，
如果三個方法同時運用在多個元素上時，那麼將會替換所有選中元素的內容。

.html(),.text(),.val()都可以使用回調函數的返回值來動態的改變多個元素的內容。

三、增加樣式

.addClass( className )方法

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

.removeClass()刪除樣式

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

toggleClass()切換樣式

jQuery提供toggleClass方法用於動態添加刪除Class，一次執行相當於addClass，再次執行相當於removeClass

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

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

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

四、.css()

獲取：

.css( propertyName ) ：獲取匹配元素集合中的第一個元素的樣式屬性的計算值
.css( propertyNames )：傳遞一組數組，返回一個對象結果

設置：

.css(propertyName, value )：設置CSS
.css( propertyName, function )：可以傳入一個回調函數，返回取到　對應的值　進行處理
.css( properties )：可以傳一個對象，同時設置多個樣式

當一個數只被作爲值（value）的時候， jQuery會將其轉換爲一個字符串，並添在字符串的結尾處添加px，例如 .css(“width”,50}) 與 .css(“width”,”50px”})一樣

.addClass()本質只是針對class的類的增加刪除，不能獲取到指定樣式的屬性的值，.css()可以獲取到指定的樣式值。
通過.css方法設置的樣式屬性優先級要高於.addClass方法

五、元素的數據存儲

jQuery提供的存儲接口

jQuery.data( element, key, value )   //靜態接口,存數據
jQuery.data( element, key )  //靜態接口,取數據   
.data( key, value ) //實例接口,存數據
.data( key ) //實例接口,存數據

2個方法在使用上存取都是通一個接口，傳遞元素，鍵值數據。在jQuery的官方文檔中，建議用.data()方法來代替。

同樣的也提供2個對應的刪除接口，

jQuery.removeData( element [, name ] )
.removeData( [name ] )