jQuery操作屬性和樣式詳解
• 區(qū)分 DOM 屬性和元素屬性
<img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus" class="classA" />
通常開發(fā)人員習慣將id,src,alt等叫做這個元素的"屬性"。我們將其稱為"元素屬性"。但是在解析成 DOM 對象時,實際瀏覽器最后會將標簽元素解析成"DOM 對象", 并且將元素的"元素屬性"存儲為"DOM 屬性",兩者是有區(qū)別的。
甚至有些"元素屬性"和"DOM 屬性"的名稱都不一樣,比如上面的元素屬性 class, 轉(zhuǎn)換為 DOM 屬性后對應(yīng) className。
牢記, 在 javascript 中我們可以直接獲取或設(shè)置"DOM 屬性":
<script type="text/javascript"> $(function() { var img1 = document.getElementById("hibiscus"); alert(img1.alt); img1.alt = "Change the alt element attribute"; alert(img1.alt); img1.className = "classB"; }) </script>
所以如果要設(shè)置元素的 CSS 樣式類, 要使用的是 DOM 屬性"className"而不是元素屬性"class"。
--------------------------------------------------------------------------------
•操作"Dom 屬性"
在 jQuery 提供了each()函數(shù)用于遍歷 jQuery 包裝集,其中的this指針是一個 DOM 對象,所以我們可以應(yīng)用這一點配合原生 javascript 來操作元素的 DOM 屬性:
$("img").each(function(index) { alert("index:" + index + ", id:" + this.id + ", alt:" + this.alt); this.alt = "changed"; alert("index:" + index + ", id:" + this.id + ", alt:" + this.alt); });
•操作"元素屬性"
我們可以使用 javascript 中的getAttribute和setAttribute來操作元素的"元素屬性"。在 jQuery 中給你提供了attr()包裝集函數(shù), 能夠同時操作包裝集中所有元素的屬性:
雖然我們可以使用removeAttr(name)刪除元素屬性,但是對應(yīng)的 DOM 屬性是不會被刪除的, 只會影響 DOM 屬性的值.比如將一個input元素的readonly元素屬性去掉,會導(dǎo)致對應(yīng)的 DOM 屬性變成false(即input變成可編輯狀態(tài)).
•修改 CSS 類和樣式
下表是修改 CSS 類相關(guān)的 jQuery 方法:
注意addClass(class)和removeClass(classes)的參數(shù)可以一次傳入多個 css 類, 用空格分割。removeClass 方法的參數(shù)可選, 如果不傳入?yún)?shù)則移除全部 CSS 類。
同樣當我們想要修改元素的具體某一個 CSS 樣式,即修改元素屬性"style"時, jQuery 也提供了相應(yīng)的方法:
• 獲取常用屬性
<!doctype html> <html lang="zh"> <head> <meata charset="utf-8"/> <title>get object width</title> <script src="jquery-1.11.2.min.js"></script> <script> $(function() { alert("attr(\"width\"):" + $("#testDiv").attr("width")); //undifined alert("css(\"width\"):" + $("#testDiv").css("width")); //auto(ie6) 或 1264px(ff) alert("width():" + $("#testDiv").width()); //正確的數(shù)值 1264 alert("style.width:" + $("#testDiv")[0].style.width); //空值 }) </script> </head> <body> <div id="testDiv">test text</div> </body> </html>
我們希望獲取測試圖層的寬度,使用 attr 方法獲取"元素特性"為 undefined, 因為并沒有為 div 添加 width。而使用 css()方法雖然可以獲取到 style 屬性的值, 但是在不同瀏覽器里返回的結(jié)果不同,IE6 下返回 auto,而 FF 下雖然返回了正確的數(shù)值但是后面帶有"px"。所以 jQuery 提供了 width()方法,此方法返回的是正確的不帶 px 的數(shù)值。
針對上面的問題,jQuery 為常用的屬性提供了獲取和設(shè)置的方法,比如 width()用戶獲取元素的寬度,而 width(val)用來設(shè)置元素寬度。
下面這些方法可以用來獲取元素的常用屬性值:
1. 寬和高相關(guān) Height and Width
outerWidth 可以接受一個 bool 值參數(shù)表示是否計算 margin 值。
2. 位置相關(guān) Positioning
以上這篇jQuery操作屬性和樣式詳解就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
jQuery實現(xiàn)base64前臺加密解密功能詳解
這篇文章主要介紹了jQuery實現(xiàn)base64前臺加密解密功能,結(jié)合實例形式分析了jquery.base64.js實現(xiàn)前臺base64加密與解密功能的實現(xiàn)方法,并給出了java實現(xiàn)后臺base64加密解密的操作示例對比驗證加密效果,需要的朋友可以參考下2017-08-08jQuery綁定事件-多種實現(xiàn)方式總結(jié)
下面小編就為大家?guī)硪黄猨Query綁定事件-多種實現(xiàn)方式總結(jié)。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考2016-05-05jQuery+CSS3折疊卡片式下拉列表框?qū)崿F(xiàn)效果
這是一款使用jQuery和CSS3制作的效果非常炫酷的折疊卡片式下拉列表框特效,感興趣的小伙伴們可以參考一下2015-11-11jQuery網(wǎng)頁定位導(dǎo)航特效實現(xiàn)方法
這篇文章主要介紹了jQuery網(wǎng)頁定位導(dǎo)航特效實現(xiàn)方法,結(jié)合實例形式分析了jQuery網(wǎng)頁定位導(dǎo)航的功能描述、原理與核心實現(xiàn)代碼,需要的朋友可以參考下2016-12-12jquery插件實現(xiàn)鼠標經(jīng)過圖片右側(cè)顯示大圖的效果(類似淘寶)
分享一個jquery插件:實現(xiàn)類似淘寶上鼠標經(jīng)過圖片右側(cè)顯示大圖的效果,感興趣的朋友可以研究下,或許對你學(xué)習jquery有所幫助,千萬不要錯過啊2013-02-02