jQuery修改class屬性和CSS樣式整理
class屬性修改
類屬性即class屬性,規(guī)定類名.
用類選擇器規(guī)定樣式的時(shí)候,需要為元素指定類名,即class屬性的值.
注意每個(gè)HTML元素只有一個(gè)class屬性.但是class屬性的值可以是多個(gè)名稱,即可能包含一個(gè)詞的列表,中間用空格分隔.
具體使用方法見:http://www.w3school.com.cn/css/css_selector_class.asp
用jQuery進(jìn)行類名修改既可以用attr()方法修改”class”屬性,也可以用addClass(), removeClass(), toggleClass()等方法來完成.
addClass()
API: http://api.jquery.com/addClass/
addClass()方法向匹配的元素增加指定的類名(一個(gè)或多個(gè)).
注意對(duì)于元素來說,class屬性可以有多個(gè)值.該方法不會(huì)移除已經(jīng)存在的值,而是在原有的基礎(chǔ)上追加一個(gè)或多個(gè)class屬性.
用attr()方法設(shè)置class屬性,是一個(gè)覆蓋的過程;而addClass()則是一個(gè)追加的過程.
class之間最終是用空格來隔開的.
如果需要添加多個(gè)類,用空格分隔類名.
從1.4開始,這個(gè)方法的參數(shù)也可以傳入一個(gè)function.
removeClass()
API: http://api.jquery.com/removeClass/
removeClass()方法從被選元素移除一個(gè)或多個(gè)類.如需移除若干類,用空格來分隔類名.
如果沒有傳參數(shù),該方法將會(huì)移除被選元素的所有類.
toggleClass()
API: http://api.jquery.com/toggleClass/
toggleClass()方法對(duì)被選元素的一個(gè)或多個(gè)類進(jìn)行切換(設(shè)置或移除).
該方法檢查每個(gè)元素中的指定類,如果存在則刪除,如果不存在則添加.
通過添加參數(shù),可以設(shè)置只進(jìn)行刪除或者只進(jìn)行添加操作.
格式:$(selector).toggleClass(class,switch)
switch值為true時(shí),只添加;為false時(shí),只刪除.
hasClass()
API: http://api.jquery.com/hasClass/
hasClass()方法檢查被選元素是否包含指定的class.
還可以用is()方法實(shí)現(xiàn)同樣的功能,方法參數(shù)傳入一個(gè)選擇器字符串,比如”.className”.
CSS樣式修改
jQuery中還有一些方法直接返回或者設(shè)置元素的CSS屬性.
css()
API: http://api.jquery.com/css/
讀操作: 獲取匹配元素集合中第一個(gè)元素的指定樣式值(一個(gè)或多個(gè)).
注:讀取多個(gè)樣式值的操作是在jQuery v1.9才加入的.
寫操作: 為匹配元素集合中的每一個(gè)元素設(shè)置一個(gè)或多個(gè)CSS屬性的值.
傳入的參數(shù)可以是單個(gè)的鍵值對(duì),也可以是PlainObject指定的多個(gè)值,還可以是function.(v1.4).
jQuery會(huì)處理各個(gè)瀏覽器中不太相同的一些具體情況,比如W3C的cssFloat在IE中是styleFloat,在jQuery中,你可以使用float,然后jQuery會(huì)幫你把它翻譯成每個(gè)瀏覽器中應(yīng)該有的正確名稱.
還有,jQuery會(huì)合理解讀CSS和DOM格式的多詞屬性,比如.css(“background-color”)和.css(“backgroundColor”),它都是可以處理的.
height()和width()
API: http://api.jquery.com/height/和http://api.jquery.com/width/
高度和寬度屬性.這個(gè)寬高值不包括padding,border和margin.除非box-sizing屬性被使用了.
注意寫操作的時(shí)候set的是content的寬高,不包括box-sizing的部分.
讀操作仍然是返回集合第一個(gè)元素的屬性值.
.css(“width”)和.width()的區(qū)別是:前者返回帶單位的值,比如400px;后者返回不帶單位的像素?cái)?shù)值,即400.
所以如果值需要被用于某種計(jì)算,.height()和.width()是被推薦使用的.
讀取得到的數(shù)值不一定是整型,并且如果用戶縮放了頁(yè)面,其值可能是不正確的,因?yàn)闉g覽器沒有暴露這種情況的API.
還有一種不準(zhǔn)確的情況,當(dāng)這個(gè)元素的父元素隱藏起來時(shí),該元素的尺寸可能讀不準(zhǔn).
寫操作支持的value類型是字符串或者數(shù)字.
如果是數(shù)字,jQuery默認(rèn)是px為單位.
如果是字符串,除了可以數(shù)字加單位之外,任何合理的CSS measurement都可以用,比如100%,50%,或者auto.
position()
API: http://api.jquery.com/position/
返回第一個(gè)匹配元素相對(duì)于父元素(offset parent)的位置.
只有讀操作.
offset()
API: http://api.jquery.com/offset/
返回第一個(gè)匹配元素的坐標(biāo),或者設(shè)定每一個(gè)匹配元素的坐標(biāo),這個(gè)坐標(biāo)是相對(duì)于document的.
offsetParent()
API:http://api.jquery.com/offsetParent/
返回父類,只有讀操作.
scrollLeft()和scrollTop()
API: http://api.jquery.com/scrollLeft/和http://api.jquery.com/scrollTop/
相關(guān)文章
使用jQuery實(shí)現(xiàn)星級(jí)評(píng)分代碼分享
本文給大家分享的是一段使用jQuery制作的星級(jí)評(píng)分的代碼,非常大氣漂亮,功能也很實(shí)用,這里推薦個(gè)大家。2014-12-12
jquery.uploadifive插件怎么解決上傳限制圖片或文件大小問題
jQuery.uploadifive插件可以很好的解決上傳限制圖片或文件大小問題,具體實(shí)例代碼大家參考下本文2017-05-05
js jquery獲取當(dāng)前元素的兄弟級(jí) 上一個(gè) 下一個(gè)元素
js獲取方法要比jq的方法麻煩的多,主要是因?yàn)镕F瀏覽器,因?yàn)镕F瀏覽器也會(huì)把換行當(dāng)作dom元素,下面跟著小編一起來學(xué)習(xí)js jquery獲取當(dāng)前元素的兄弟級(jí) 上一個(gè) 下一個(gè)元素的,需要的朋友一起來學(xué)習(xí)吧2015-09-09
jQuery簡(jiǎn)單實(shí)現(xiàn)驗(yàn)證郵箱格式
這篇文章主要介紹了jQuery簡(jiǎn)單實(shí)現(xiàn)驗(yàn)證郵箱格式的相關(guān)資料,需要的朋友可以參考下2015-07-07
使用jquery實(shí)現(xiàn)IE下按backspace相當(dāng)于返回操作
后退鍵在各瀏覽器下默認(rèn)為點(diǎn)擊了一下后退按鈕,下面為大家介紹下如何實(shí)現(xiàn)實(shí)現(xiàn)IE下按backspace相當(dāng)于返回操作,需要的朋友可以參考下2014-03-03
validform表單驗(yàn)證的實(shí)現(xiàn)方法
這篇文章主要介紹了validform表單驗(yàn)證的實(shí)現(xiàn)方法,validform插件主要把所有的驗(yàn)證條件和驗(yàn)證提示信息綁定到每個(gè)表單元素,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-03-03

