jquery更改元素屬性attr()方法操作示例
本文實例講述了jquery更改元素屬性attr()方法。分享給大家供大家參考，具體如下：
jquery中用attr()方法來獲取和設(shè)置元素屬性,attr是attribute（屬性）的縮寫,
是js中setAttribute()和getAttribute()的簡化
最基本常用的用法:
$("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 ...}) //為被選一個以上的元素設(shè)置屬性和值。
第一個$(selector).attr(attribute)是用來得到屬性值的, 只有一個參數(shù)就是屬性名
var srcImg = $('#img_1').attr("src");
第二個是最基本常用的方式:
$(selector).attr(attribute,value)
第一個參數(shù)是屬性名, 第二個參數(shù)是想為該屬性賦的值
$('#img_1').attr('src','img/1.jpg');
第三種是用函數(shù)的返回值給屬性賦屬性值, 該函數(shù)可接收并使用選擇器的 index 值和當(dāng)前屬性值。
$(selector).attr(attribute,function(index,oldvalue))
這是W3School上一個點擊按鈕減少 img 50寬度的小實例
$("button").click(function(){
$("img").attr("width",function(n,v){
return v-50;
});
});
第四種其實就是上邊第二種方式的拓展, 可以一次修改很多屬性的屬性值
$(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測試上述代碼運(yùn)行效果。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery頁面元素操作技巧匯總》、《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
相關(guān)文章
基于jquery的不規(guī)則矩形的排列實現(xiàn)代碼
現(xiàn)在很多網(wǎng)站都用不規(guī)則矩形來羅列圖片，ipad上面很多應(yīng)該用也都是用的不規(guī)則的矩形，但是還要讓他們各自都靠近排列，不能有空隙2012-04-04
jquery.cookie實現(xiàn)的客戶端購物車操作實例
這篇文章主要介紹了jquery.cookie實現(xiàn)的客戶端購物車操作,結(jié)合實例形式分析了jQuery基于cookie存儲及操作數(shù)據(jù)實現(xiàn)購物車功能的技巧,需要的朋友可以參考下2015-12-12
今天給大家分享一款頁面無縫滾動的jquery插件，支持上下左右，淡入淡出，滾動時間設(shè)置，動畫時間設(shè)置，感興趣的小伙伴們可以參考一下2015-11-11
詳解jquery插件jquery.viewport.js學(xué)習(xí)使用方法
本篇文章主要介紹了詳解jquery插件jquery.viewport.js學(xué)習(xí)使用方法，具有一定的參考價值，有興趣的可以了解一下2017-09-09
基于jQuery的上下無縫滾動應(yīng)用(單行或多行)
基于jQuery的上下無縫滾動應(yīng)用,可應(yīng)用于多行或者單行.詳解請參考注釋.2010-08-08
網(wǎng)格系統(tǒng)的實現(xiàn)原理，是通過定義容器大小，平分12份(也有平分成24份或32份，但12份是最常見的)，再調(diào)整內(nèi)外邊距，最后結(jié)合媒體查詢，就制作出了強(qiáng)大的響應(yīng)式網(wǎng)格系統(tǒng)2017-03-03
jQuery Easyui DataGrid點擊某個單元格即進(jìn)入編輯狀態(tài)焦點移開后保存數(shù)據(jù)
這篇文章主要介紹了jQuery Easyui DataGrid點擊某個單元格即進(jìn)入編輯狀態(tài)焦點移開后保存數(shù)據(jù)的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
input 輸入框獲得/失去焦點時隱藏/顯示文字(jquery版)
input輸入框在獲得或失去焦點時隱藏或顯示文字，這樣的焦點效果想必很多朋友在填寫form表格的時候都曾見識過吧，本文使用jquery實現(xiàn)以下，感興趣的朋友可以參考下哈2013-04-04
這個腳本是網(wǎng)上的代碼修改的，兼容各主流瀏覽器，優(yōu)化頁面異步加載的文字的檢索提示框定位，根據(jù)選擇文字位置與屏幕尺寸計算檢索提示框定位。2010-09-09
純CSS打造的導(dǎo)航菜單(附j(luò)query版)
使用CSS 制作導(dǎo)航菜單，實際主要是利用了css的li a屬性，對于以后用css制作更絢麗的效果提高了很好的參考。2010-08-08