1、jQuery的屬性與樣式之.attr()與.removeAttr()

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

attr()有4個表達式
attr(傳入屬性名)：獲取屬性的值
attr(屬性名, 屬性值)：設置屬性的值
attr(屬性名,函數值)：設置屬性的函數值
attr(attributes)：給指定元素設置多個屬性值，即：{屬性名一: “屬性值一” , 屬性名二: “屬性值二” , … … }

removeAttr()刪除方法
.removeAttr( attributeName ) : 為匹配的元素集合中的每個元素中移除一個屬性（attribute）
優點：
attr、removeAttr都是jQuery為了屬性操作封裝的，直接在一個 jQuery 對象上調用該方法，很容易對屬性進行操作，也不需要去特意的理解瀏覽器的屬性名不同的問題

注意的問題：

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

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

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

獲取Attribute就需要用attr，獲取Property就需要用prop

http://js.jirengu.com/yakoyekefo/1/

2、jQuery的屬性與樣式之html()及.text()

.html()方法

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

.html() 不傳入值，就是獲取集合中第一個匹配元素的HTML內容
.html( htmlString ) 設置每一個匹配元素的html內容
.html( function(index, oldhtml) ) 用來返回設置HTML內容的一個函數
注意事項：.html()方法，這個操作是針對整個HTML內容（不僅僅只是文本內容）

.text()方法

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

.text() 得到匹配元素集合中每個元素的合并文本，包括他們的后代
.text( textString ) 用于設置匹配元素內容的文本
.text( function(index, text) ) 用來返回設置文本內容的一個函數
注意事項：.text()結果返回一個字符串，包含所有匹配元素的合并文本

.html與.text的異同:

.html處理的是元素內容，.text處理的是文本內容
如果處理的對象只有一個子文本節點，那么html處理的結果與text是一樣的
火狐不支持innerText屬性，用了類似的textContent屬性，.text()方法綜合了2個屬性的支持，所以可以兼容所有瀏覽器

http://js.jirengu.com/yulixiziji/1/

<script type="text/javascript">
        //通過.text()的回調，獲取原本的內容，修改，在重新賦值
        $(".left a:first").text(function(idnex,text){
            return '增加新的文本內容' + text
        })
    </script>

不知道什么意思

3、jQuery的屬性與樣式之.val()

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

.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()都可以使用回調函數的返回值來動態的改變多個元素的內容。？？？什么意思

http://js.jirengu.com/zamekiluda/1/

<script type="text/javascript">
        //多個select被選擇，返回["imocc", "博客園"]
        $("p:last").text( $("#multiple").val() ) 
</script>

為什么，返回["imocc", "博客園"] 兩個

4、jQuery的屬性與樣式之增加樣式.addClass()

在HTML結構中里，多個class以空格分隔，當一個節點（或稱為一個標簽）含有多個class時，DOM元素響應的className屬性獲取的不是class名稱的數組，而是一個含有空格的字符串，這就使得多class操作變得很麻煩。
同樣的jQuery開發者也考慮到這種情況，增加了一個.addClass()方法，用于動態增加class類名。

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

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

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

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

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

http://js.jirengu.com/foqokoxowo/1/

<script type="text/javascript"> 
    
        //通過className(fucntion)方法
        //這個函數返回一個或更多用空格隔開的要增加的樣式名。
        //接收index 參數表示元素在匹配集合中的索引位置和html 參數表示元素上原來的 HTML 內容

        //找到所有的div，然后通過addClass設置顏色，根據返回的className的判斷，
        $("div").addClass(function(index,className) {

            //找到類名中包含了imooc的元素
            if(-1 !== className.indexOf('imooc')){
                //this指向匹配元素集合中的當前元素
                $(this).addClass('imoocClass')
            }
        });
    </script>

什么意思

5、jQuery的屬性與樣式之增加樣式.removeClass()

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

注意事項：
如果一個樣式類名作為一個參數,只有這樣式類會被從匹配的元素集合中刪除 。 如果沒有樣式名作為參數，那么所有的樣式類將被移除
http://js.jirengu.com/fehoricito/1/

6、jQuery的屬性與樣式之切換樣式.toggleClass()

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

1、.toggleClass( className )：在匹配的元素集合中的每個元素上用來切換的一個或多個（用空格隔開）樣式類名

2、.toggleClass( className, switch)：一個布爾值，用于判斷樣式是否應該被添加或移除？？？？？

3、.toggleClass( [switch] )：一個用來判斷樣式類添加還是移除的 布爾值

4、.toggleClass( function(index, class, switch) [, switch ] )：用來返回在匹配的元素集合中的每個元素上用來切換的樣式類名的一個函數。接收元素的索引位置和元素舊的樣式類作為參數

7、jQuery的屬性與樣式之樣式操作.css()

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

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

注意事項：
1、瀏覽器屬性獲取方式不同，在獲取某些值的時候都jQuery采用統一的處理，比如顏色采用RBG，尺寸采用px
2、.css()方法支持駝峰寫法與大小寫混搭的寫法，內部做了容錯的處理
3、當一個數只被作為值（value）的時候， jQuery會將其轉換為一個字符串，并添在字符串的結尾處添加px，例如 .css("width",50}) 與 .css("width","50px"})一樣

http://js.jirengu.com/maniqeyeve/1/
問題：

<script type="text/javascript">
        //獲取到指定元素的寬度，在回調返回寬度值
        //通過處理這個value，重新設置新的寬度
        $('.sixth').css("width",function(index,value){
            //value帶單位，先分解
            value = value.split('px');
            //返回一個新的值，在原有的值上，增加50px
            return (Number(value[0]) + 50) + value[1];
        })
    </script>

8、jQuery的屬性與樣式之.css()與.addClass()設置樣式的區別？？

通過.css方法設置的樣式屬性優先級要高于.addClass方法

總結：
.addClass與.css方法各有利弊，一般是靜態的結構，都確定了布局的規則，可以用addClass的方法，增加統一的類規則
如果是動態的HTML結構，在不確定規則，或者經常變化的情況下，一般多考慮.css()方式

9、jQuery的屬性與樣式之元素的數據存儲 不懂

jQuery提供的存儲接口
jQuery.data( element, key, value ) //靜態接口,存數據
jQuery.data( element, key ) //靜態接口,取數據
.data( key, value ) //實例接口,存數據
.data( key ) //實例接口,存數據
http://www.imooc.com/code/8596