首頁 > web前端 > js教程 > jQuery .attr()和.removeAttr()方法操作元素屬性範例_jquery

jQuery .attr()和.removeAttr()方法操作元素屬性範例_jquery

WBOY
發布: 2016-05-16 17:28:40
原創
1446 人瀏覽過

今天主要和大家一起分享如何使用jQuery的.attr()和.removeAttr()方法讀取,添加,修改,刪除元素的屬性。大家在平常的Web頁面製作中都有碰到如何動態的取得元素的屬性和屬性值,或是說動態的修改元素的某個(某些)屬性的屬性值。那麼jQuery就可以讓我們輕鬆的讀取,添加,更改或刪除一個(或多個)元素中的任何屬性,在jQuery中我們可以使用下面的方法來實現:

1 .attr( ):jQuery中的.attr()方法讓你能輕鬆的讀取,增加或修改一個元素的屬性(詳情參考.attr());
2 .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(removeAttribute(remove )函數,但是它的優點是能夠直接被jQuery物件存取呼叫。
上面我們一起簡單的了解了一下.attr()和.removeAttr()方法的語法,下面我們一起來看看其具體的應用,首先我們來看一個簡單的html Demo:

這個方法用來製作圖片翻轉是很方便的,如:
html:

複製程式碼 程式碼如下:

jQuery .attr()和.removeAttr()方法操作元素屬性範例_jquery

js:
複製程式碼 程式碼如下:

$("document"). function(){
$(".img").hover(function(){
$(this).attr({
"src":"images/b.jpg",
"alt":"change the page"
})
},function(){
$(this).attr({
"src":"images/a.jpg",
"alt":"jQuery .attr()和.removeAttr()方法操作元素屬性範例_jquery"
});
});
});
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板