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/
