-
DOM操作之 屬性與樣式
在上一篇jQuery筆記1中把DOM元素節點的常用操作都介紹了一遍, 這一篇筆記仍是有關jQuery DOM的操作, 主要是DOM節點中屬性與樣式的添加, 更改刪除等操作
屬性操作
jQuery 使用attr和removeAttr這兩個方法來對節點的屬性進行操作, 其中attr方法可以用來獲取和設置屬性, removeAttr可以用來刪除節點的屬性.爲方便說明,下面所有的例子都基於以下的html代碼:
<div class="go">
<h2>圍棋國手</h2>
<ul>
<li title="柯潔">柯潔</li>
<li title="唐韋星">唐韋星</li>
<li title="李世石">李世石</li>
<a href="http://github.com" title="默認提示">同性交友</a>
</ul>
<button id="test">test</button>
</div>
屬性的獲取與設置
jQuery中節點屬性的獲取與設置可以通過同一個方法來實現, 當傳入的參數爲一個時, attr方法可以獲取節點的屬性, 當傳入的參數爲兩個時, attr方法可以設置節點的屬性.
var title = $("ul li").attr("title")
console.log(title)
打開控制檯, 你可以看到輸出了 柯潔 , 從這裏可以看出attr方法一個重要的特性, 如果有多個匹配的元素, 那麼只會獲取第一個元素的屬性, 這點要牢記.
$("li").attr("class", "player")
上面的代碼給li 標籤添加class屬性, 打開瀏覽器查看源碼, 可以看到源碼變成了這樣子:
<div class="go">
<h2 style="font-size: 30px">圍棋國手</h2>
<ul>
<li title="柯潔" class="player">柯潔</li>
<li title="唐韋星" class="player">唐韋星</li>
<li title="李世石" class="player">李世石</li>
<a href="http://github.com" title="默認提示">同性交友</a>
</ul>
<button id="test">test</button>
</div>
也就是說, 每一個li標籤都添加了class爲player的屬性, 這與獲取的時候不太一樣, 大家千萬牢記在心.
如果要一次性給元素加點添加多個屬性, jQuery還提供了一種便利的寫法:
$("ul li").attr({"class": "player", "name": "go"})屬性的刪除
節點屬性的刪除可以使用removeAttr方法來實現, 例如要刪除li標籤中的title屬性, 可以這麼寫
$("li").removeAttr("title")
這樣就可以把所有匹配的元素節點中的title屬性刪除了.樣式操作
在前端開發中,我們通常會把樣式寫在class中, 然後在節點中引入. 因此對樣式的操作大致可以分爲兩類, 一種是對class的操作, 另一種是直接對css進行處理, 下面將詳細講述jQuery的樣式操作.
樣式的獲取與設置
樣式的獲取和設置可以使用css方法. 例如我們要獲取h2標籤的樣式
$("h2").css("font-size")
與attr方法一樣,css方法帶一個參數時是獲取css樣式, 帶兩個參數是設置節點屬性的樣式.
$("h2").css("color","#444")
上面的代碼會給h2標籤添加顏色爲#444的樣式.同樣的, 我們還可以同時設置多個屬性, 用法也是和attr方法相同.
$("h2").css({
"color": "#333",
"font-size": "40px"
})
使用class進行樣式的處理
上面的方法是直接使用css方法對節點進行樣式的獲取與設置, 但在實際的前端開發中, 絕大多數的樣式屬性是卸載class中, 因此,jQuery也提供了一系列的方法供我們對class進行操作, 包括添加class的方法addClass, 刪除class的方法removeClass, 切換class的方法toggleClass等等, 下面詳細介紹這些方法進行樣式的處理.
追加樣式
爲方便理解, 我們先寫兩個樣式文件
.highlight{
color: #ff0000;
}
.blue{
color: #6FBFD7;
}
給h2標籤添加類名可以這麼寫
$("h2").addClass("highlight")
這樣代碼會給h2標籤追加一個highlight的類名.如果要同時追加多個類名的話也是可以的, 只要用空格空開就行了.
$("h2").addClass("highlight blue")
移除樣式
用法和addClass一樣, 只是作用是把類名從標籤中移出去.
$("h2").removeClass("highlight")
同樣的,我們也可以同事移除多個類名.
切換樣式
當前端開發中有時候我們會遇到這樣一種情況, 那就是樣式會反覆切換, 取個簡單的例子就是, 一個標題欄點擊之後高亮, 再次點擊又變回原樣, 我們可以用addClass和removeClass來實現.
$("h2").click(function(){
if ($(this).hasClass("highlight")){
$(this).removeClass("highlight")
}
else{
$(this).addClass("highlight")
}
})
但對於一個常用的功能, 這種實現顯然還是比較繁瑣, 因此,jQuery提供了一種非常簡潔的方法來實現這一功能, 那就是toggleClass, 上面的代碼可以用下面這一行代碼來代替:
$("h2").click(function(){
$("h2").toggleClass("highlight")
})
** 判斷樣式是否存在**
hasClass方法可以用來判斷元素中是否包含某個class.
$("h2").hasClass("highlight")
用法非常簡單.
關於jQuery 對樣式的操作大致就這麼多了, 下一篇我會介紹jQuery中Dom操作中的其他內容.