本文為大家詳細介紹下如何使用jQuery的
attr()和
removeAttr()方法讀取
添加
修改
刪除元素的屬性
不會的朋友可以參考下哈
希望對大家有所幫助
今天主要和大家一起分享一下如何使用jQuery的attr()和removeAttr()方法讀取添加修改刪除元素的屬性大家在平時的 Web頁面制作中都有碰到如何動態的獲取元素的屬性和屬性值或者說動態的修改元素的某個（某些）屬性的屬性值那麼jQuery就可以讓我們輕松的讀 取添加更改或刪除一個（或多個）元素中的任何屬性在jQuery中我們可以使用下面的方法來實現
attr()jQuery中的attr()方法讓你能輕松的讀取增加或修改一個元素的屬性（詳情參考attr()）;
removeAttr():jQuery中的removeAttr()方法主要用來刪除一個元素的一個（或多個）屬性（詳情參考removeAttr()）
下面先來簡單看一下attr()和removeAttr()兩種方法的語法格式
attr()方法
attr()方法有兩種功能第一種是讀取元素的屬性值第二個是修改元素的屬性值
讀取屬性的語法
attr(attributeName );//attributeName 為需要獲取的元素的屬性名
上面返回的是字符串“string”值得注意的是attr()方法只獲取第一個匹配元素的屬性值如果你需要每個單獨的元素的屬性值需要依靠jQuery的each()或者map()方法來實現
為元素設軒屬性值的語法
attr(attributeName value);//其中attributeName為元素需要設置的屬性名value是對應的元素值
上面返回的是一個對象主要用來為指定元素設置一個或多個屬性
removeAttr()方法
removeAttr(attributeName);//其中attributeName 是要移除的屬性名
removeAttr()方法使用原生的javaScript中的removeAttribute()函數但是它的優點是能夠直接被jQuery對象訪問調用
上面我們一起簡單的了解了一下attr()和removeAttr()方法的語法下面我們一起來看看其具體的應用首先我們來看一個簡單的html Demo
這種方法用來制作圖片翻轉是很方便的如
html:
復制代碼 代碼如下:
<img src="images/a
jpg" alt="header" width="
" height="
" class="img"/>
js:
復制代碼 代碼如下:
$("document")ready(function(){
$("img")hover(function(){
$(this)attr({
"src":"images/bjpg"
"alt":"change the page"
})
}function(){
$(this)attr({
"src":"images/ajpg"
"alt":"header"
});
});
});
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19621.html
