jQuery .attr()和.removeAttr()方法操作元素屬性示例
1 .attr():jQuery中的.attr()方法讓你能輕松的讀取,增加或修改一個(gè)元素的屬性(詳情參考.attr());
2 .removeAttr():jQuery中的.removeAttr()方法主要用來刪除一個(gè)元素的一個(gè)(或多個(gè))屬性(詳情參考.removeAttr())。
下面先來簡(jiǎn)單看一下.attr()和.removeAttr()兩種方法的語法格式:
.attr()方法
.attr()方法有兩種功能,第一種是讀取元素的屬性值,第二個(gè)是修改元素的屬性值
讀取屬性的語法
.attr(attributeName );//attributeName 為需要獲取的元素的屬性名
上面返回的是字符串“string”,值得注意的是.attr()方法只獲取第一個(gè)匹配元素的屬性值,如果你需要每個(gè)單獨(dú)的元素的屬性值,需要依靠jQuery的.each()或者.map()方法來實(shí)現(xiàn)。
為元素設(shè)軒屬性值的語法
.attr(attributeName, value);//其中attributeName為元素需要設(shè)置的屬性名,value是對(duì)應(yīng)的元素值
上面返回的是一個(gè)對(duì)象,主要用來為指定元素設(shè)置一個(gè)或多個(gè)屬性。
.removeAttr()方法
.removeAttr(attributeName);//其中attributeName 是要移除的屬性名
.removeAttr()方法使用原生的javaScript中的removeAttribute()函數(shù),但是它的優(yōu)點(diǎn)是能夠直接被jQuery對(duì)象訪問調(diào)用。
上面我們一起簡(jiǎn)單的了解了一下.attr()和.removeAttr()方法的語法,下面我們一起來看看其具體的應(yīng)用,首先我們來看一個(gè)簡(jiǎn)單的html Demo:
這種方法用來制作圖片翻轉(zhuǎn)是很方便的,如:
html:
<img src="images/a.jpg" alt="header" width="80" height="80" class="img"/>
js:
$("document").ready(function(){
$(".img").hover(function(){
$(this).attr({
"src":"images/b.jpg",
"alt":"change the page"
})
},function(){
$(this).attr({
"src":"images/a.jpg",
"alt":"header"
});
});
});
- jQuery使用attr()方法同時(shí)設(shè)置多個(gè)屬性值用法實(shí)例
- jQuery中attr()和prop()在修改checked屬性時(shí)的區(qū)別
- jQuery獲取attr()與prop()屬性值的方法及區(qū)別介紹
- Jquery attr()方法 屬性賦值和屬性獲取詳解
- jquery attr()設(shè)置和獲取屬性值實(shí)例教程
- 詳談jQuery操縱DOM元素屬性 attr()和removeAtrr()方法
- 關(guān)于jquery中attr()和prop()方法的區(qū)別
- jQuery中.attr()和.data()的區(qū)別分析
- 詳談jQuery中使用attr(), prop(), val()獲取value的異同
- jquery更改元素屬性attr()方法操作示例
相關(guān)文章
內(nèi)容滑動(dòng)切換效果jquery.hwSlide.js插件封裝
這篇文章主要為大家詳細(xì)介紹了jQuery開發(fā)之內(nèi)容滑動(dòng)切換效果的相關(guān)資料,jquery.hwSlide.js插件進(jìn)行封裝具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-07-07jQuery實(shí)現(xiàn)的簡(jiǎn)單無刷新評(píng)論功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡(jiǎn)單無刷新評(píng)論功能,涉及jQuery事件響應(yīng)及頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,代碼中備有較為詳盡的注釋便于理解,需要的朋友可以參考下2017-11-11jquery多行滾動(dòng)/向左或向上滾動(dòng)/響應(yīng)鼠標(biāo)實(shí)現(xiàn)思路及代碼
多行滾動(dòng)jQuery循環(huán)新聞列表代碼包括以下功能:鼠標(biāo)滑上焦點(diǎn)圖時(shí)停止自動(dòng)播放/滑出時(shí)開始自動(dòng)播放以及判斷執(zhí)行橫向或縱向滾動(dòng),感興趣的朋友可以了解下哦2013-01-01jquery 層次選擇器siblings與nextAll的區(qū)別介紹
jquery 層次選擇器包括siblings與nextAll,本文為大家介紹下具體的使用方法,想學(xué)習(xí)的朋也可以參考下,希望對(duì)大家有所幫助2013-08-08jQuery結(jié)合AJAX之在頁面滾動(dòng)時(shí)從服務(wù)器加載數(shù)據(jù)
這篇文章主要介紹了jQuery結(jié)合AJAX之在頁面滾動(dòng)時(shí)從服務(wù)器加載數(shù)據(jù),文中示例服務(wù)器端為C#程序,需要的朋友可以參考下2015-06-06jquery.jsPlumb實(shí)現(xiàn)拓?fù)鋱D
這篇文章主要為大家詳細(xì)介紹了jquery.jsPlumb實(shí)現(xiàn)拓?fù)鋱D,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03轉(zhuǎn)自Jquery官方 jQuery1.1.3發(fā)布,速度提升800%,體積保持20K
轉(zhuǎn)自Jquery官方 jQuery1.1.3發(fā)布,速度提升800%,體積保持20K...2007-08-08jQuery中parentsUntil()方法用法實(shí)例
這篇文章主要介紹了jQuery中parentsUntil()方法用法,實(shí)例分析了parentsUntil()方法的功能、定義及根據(jù)條件查找匹配元素的所有的祖先元素使用技巧,需要的朋友可以參考下2015-01-01