jQuery修改class屬性和CSS樣式

class屬性修改

　　類屬性即class屬性,規定類名.

　　用類選擇器規定樣式的時候,須要爲元素指定類名,即class屬性的值.

　　注意每一個HTML元素只有一個class屬性.可是class屬性的值能夠是多個名稱,便可能包含一個詞的列表,中間用空格分隔.

　　具體使用方法見: http://www.w3school.com.cn/css/css_selector_class.asp

 

　　用jQuery進行類名修改既能夠用 attr()方法修改」class」屬性,也能夠用 addClass(),  removeClass(), toggleClass()等方法來完成.

 

addClass()

　　API:  http://api.jquery.com/addClass/

　　addClass()方法向匹配的元素增長指定的類名(一個或多個).

　　注意對於元素來講,class屬性能夠有多個值.該方法不會移除已經存在的值,而是在原有的基礎上追加一個或多個class屬性. 

　　用attr()方法設置class屬性,是一個覆蓋的過程;而addClass()則是一個追加的過程.

　　class之間最終是用空格來隔開的.

　　若是須要添加多個類,用空格分隔類名.

　　從1.4開始,這個方法的參數也能夠傳入一個function.

 

removeClass()

　　API:  http://api.jquery.com/removeClass/

　　removeClass()方法從被選元素移除一個或多個類.如需移除若干類,用空格來分隔類名.

　　若是沒有傳參數,該方法將會移除被選元素的全部類.

 

 

toggleClass()

　　API:  http://api.jquery.com/toggleClass/

　　toggleClass()方法對被選元素的一個或多個類進行切換(設置或移除).

　　該方法檢查每一個元素中的指定類,若是存在則刪除,若是不存在則添加.

　　經過添加參數,能夠設置只進行刪除或者只進行添加操做.

　　格式:$(selector).toggleClass(class,switch)

　　switch值爲true時,只添加;爲false時,只刪除.

 

 

hasClass()

　　API:  http://api.jquery.com/hasClass/

　　hasClass()方法檢查被選元素是否包含指定的class.

　　還能夠用is()方法實現一樣的功能,方法參數傳入一個選擇器字符串,好比」.className」.

 

CSS樣式修改

　　jQuery中還有一些方法直接返回或者設置元素的CSS屬性.

css()

　　API:  http://api.jquery.com/css/

　　讀操做: 獲取匹配元素集合中第一個元素的指定樣式值(一個或多個).

　　注:讀取多個樣式值的操做是在jQuery v1.9才加入的.

　　寫操做: 爲匹配元素集合中的每個元素設置一個或多個CSS屬性的值.

　　傳入的參數能夠是單個的鍵值對,也能夠是PlainObject指定的多個值,還能夠是function.(v1.4).

 

　　jQuery會處理各個瀏覽器中不太相同的一些具體狀況,好比W3C的cssFloat在IE中是styleFloat,在jQuery中,你可使用float,而後jQuery會幫你把它翻譯成每一個瀏覽器中應該有的正確名稱.

　　還有,jQuery會合理解讀CSS和DOM格式的多詞屬性,好比.css(「background-color」)和.css(「backgroundColor」),它都是能夠處理的.

 

 

height()和width()

　　API:  http://api.jquery.com/height/和 http://api.jquery.com/width/

　　高度和寬度屬性.這個寬高值不包括padding,border和margin.除非box-sizing屬性被使用了.

　　注意寫操做的時候set的是content的寬高,不包括box-sizing的部分.

 

　　讀操做仍然是返回集合第一個元素的屬性值.

　　.css(「width」)和.width()的區別是:前者返回帶單位的值,好比400px;後者返回不帶單位的像素數值,即400.

　　因此若是值須要被用於某種計算,.height()和.width()是被推薦使用的.

　　讀取獲得的數值不必定是整型,而且若是用戶縮放了頁面,其值多是不正確的,由於瀏覽器沒有暴露這種狀況的API.

　　還有一種不許確的狀況,當這個元素的父元素隱藏起來時,該元素的尺寸可能讀不許.

 

　　寫操做支持的value類型是字符串或者數字.

　　若是是數字,jQuery默認是px爲單位.

　　若是是字符串,除了能夠數字加單位以外,任何合理的CSS measurement均可以用,好比100%,50%,或者auto.

 

position()

　　API:  http://api.jquery.com/position/

　　返回第一個匹配元素相對於父元素(offset parent)的位置.

　　只有讀操做.

 

offset()

　　API:  http://api.jquery.com/offset/

　　返回第一個匹配元素的座標,或者設定每個匹配元素的座標,這個座標是相對於document的.

 

 

offsetParent()

　　API: http://api.jquery.com/offsetParent/

　　返回父類,只有讀操做.

 

scrollLeft()和scrollTop()

　　API:  http://api.jquery.com/scrollLeft/和 http://api.jquery.com/scrollTop/

 

 

 

參考資料

　　聖思園張龍老師JavaWeb視頻教程75

　　jQuery API:  http://api.jquery.com/

　　w3school 參考手冊:

　　屬性操做:  http://www.w3school.com.cn/jquery/jquery_ref_attributes.asp

　　CSS操做: http://www.w3school.com.cn/jquery/jquery_ref_css.asp

　　CSS類選擇器:  http://www.w3school.com.cn/css/css_selector_class.asp