jquery更改元素屬性attr()方法操作示例
本文實(shí)例講述了jquery更改元素屬性attr()方法。分享給大家供大家參考,具體如下:
jquery中用attr()方法來獲取和設(shè)置元素屬性,attr是attribute(屬性)的縮寫,
是js中setAttribute()和getAttribute()的簡(jiǎn)化
最基本常用的用法:
$("img").attr("src","img/a.jpg"); $("img").attr("width","100px");
attr()有四種用法,先列舉表達(dá)式:
語法:
$(selector).attr(attribute) //返回被選元素的屬性值。 $(selector).attr(attribute,value) //設(shè)置被選元素的屬性和值。 $(selector).attr(attribute,function(index,oldvalue)) //用函數(shù)返回值設(shè)置被選元素的屬性和值。 $(selector).attr({attribute:value, attribute:value ...}) //為被選一個(gè)以上的元素設(shè)置屬性和值。
第一個(gè)$(selector).attr(attribute)是用來得到屬性值的, 只有一個(gè)參數(shù)就是屬性名
var srcImg = $('#img_1').attr("src");
第二個(gè)是最基本常用的方式:
$(selector).attr(attribute,value)
第一個(gè)參數(shù)是屬性名, 第二個(gè)參數(shù)是想為該屬性賦的值
$('#img_1').attr('src','img/1.jpg');
第三種是用函數(shù)的返回值給屬性賦屬性值, 該函數(shù)可接收并使用選擇器的 index 值和當(dāng)前屬性值。
$(selector).attr(attribute,function(index,oldvalue))
這是W3School上一個(gè)點(diǎn)擊按鈕減少 img 50寬度的小實(shí)例
$("button").click(function(){ $("img").attr("width",function(n,v){ return v-50; }); });
第四種其實(shí)就是上邊第二種方式的拓展, 可以一次修改很多屬性的屬性值
$(selector).attr({attribute:value, attribute:value ...}) $('#img_1').attr({"width":80px, "height":50px});
還有可以用removeAttr刪除屬性:
$("img_1").removeAttr ("style");
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery頁面元素操作技巧匯總》、《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
jQuery對(duì)于顯示和隱藏等常用狀態(tài)的判斷方法
這篇文章主要介紹了jQuery對(duì)于顯示和隱藏等常用狀態(tài)的判斷方法,給出了兩種較為常用的判斷方法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2014-12-12使用jQuery在移動(dòng)頁面上添加按鈕和給按鈕添加圖標(biāo)
這篇文章主要介紹了使用jQuery在移動(dòng)頁面上增加按鈕和給按鈕添加圖標(biāo)的方法,用到了針對(duì)移動(dòng)開發(fā)的jQuery mobile庫,需要的朋友可以參考下2015-12-12使用jQuery5分鐘快速搞定雙色表格的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄褂胘Query5分鐘快速搞定雙色表格的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08簡(jiǎn)單常用的幻燈片播放實(shí)現(xiàn)代碼
幻燈片自動(dòng)播放圖片是當(dāng)前網(wǎng)站比較流行的一個(gè)展示方式,這里項(xiàng)目需要,我自己做了一個(gè)簡(jiǎn)單的,就不詳細(xì)講解了,代碼很簡(jiǎn)單。直接看效果圖和代碼吧,希望對(duì)大家有所幫助2013-09-09ASP.NET jQuery 實(shí)例6 (實(shí)現(xiàn)CheckBoxList成員全選或全取消)
ASP.NET jQuery 實(shí)例6 (實(shí)現(xiàn)CheckBoxList成員全選或全取消) ,需要的朋友可以參考下。2012-01-01jQuery實(shí)現(xiàn)的簡(jiǎn)單拖拽功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡(jiǎn)單拖拽功能,結(jié)合實(shí)例形式分析了jQuery鼠標(biāo)事件響應(yīng)及頁面元素動(dòng)態(tài)修改相關(guān)技巧,需要的朋友可以參考下2016-09-09jQuery模擬Marquee實(shí)現(xiàn)無縫滾動(dòng)效果完整實(shí)例
這篇文章主要介紹了jQuery模擬Marquee實(shí)現(xiàn)無縫滾動(dòng)效果,結(jié)合完整實(shí)例形式分析了jQuery針對(duì)圖片與文字的無縫滾動(dòng)效果實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-09-09