詳談jQuery操縱DOM元素屬性 attr()和removeAtrr()方法
jQuery中操縱元素屬性的方法:
attr(): 讀或者寫(xiě)匹配元素的屬性值.
removeAttr(): 從匹配的元素中移除指定的屬性.
attr()方法 讀操作
attr()讀操作. 讀取的是匹配元素中第一個(gè)元素的指定屬性值.
格式: .attr(attributeName),返回值類(lèi)型:String.讀取不存在的屬性會(huì)返回undefined.
注意選擇器的選擇結(jié)果可能是一個(gè)集合,這里僅僅獲取的是集合中第一個(gè)元素的該屬性值.
看例子:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
alert($("p").attr("title"));//獲取屬性
// this code can only get the first element's attribute.
});
});
</script>
</head>
<body>
<p title="title1">paragraph 1</p>
<p title="title2">paragraph 2</p>
<br/>
<button>get title</button>
</body>
</html>
運(yùn)行結(jié)果:彈框顯示: title1.
想要分別獲取每一個(gè)元素的屬性,需要使用jQuery的循環(huán)結(jié)構(gòu),比如.each()或.map()方法.
上面的例子可以改成:
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
//get attribute for every element in selection.
$("p").each(function () {
alert($(this).attr("title"));
});
});
});
</script>
即可分別獲取每個(gè)元素的屬性.
attr()方法 寫(xiě)操作
attr()寫(xiě)操作. 為匹配元素的一個(gè)或多個(gè)屬性賦值.
一般格式: .attr(attributeName, value), 即為屬性設(shè)置value.
返回值類(lèi)型:jQuery.也即支持鏈?zhǔn)椒椒ㄕ{(diào)用.
執(zhí)行寫(xiě)操作的時(shí)候,如果指定的屬性名不存在,將會(huì)增加一個(gè)該名字的屬性,即增加自定義屬性,其名為屬性名,其值為value值.
寫(xiě)屬性是為匹配集合中的每一個(gè)元素都進(jìn)行操作的,見(jiàn)例子:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#button1").click(function(){
$("p").attr("title","Hello World");
});
});
</script>
</head>
<body>
<input type="button" id="button1" value="button1"></input>
<p>This is a paragraph.</p>
<div>This is a div.</div>
<p>This is another paragraph.</p>
<div>This is another div.</div>
</body>
</html>
點(diǎn)擊按鈕之后所有的p都加上了title="Hello World”的屬性.
寫(xiě)操作還有以下兩種格式:
.attr(attributes)和.attr(attributeName, function).
下面分別介紹.
.attr(attributes):
這里attributes類(lèi)型是PlainObject,可以用于一次性設(shè)置多個(gè)屬性.
什么是PlainObject呢,簡(jiǎn)單理解就是大括號(hào)包圍的鍵值對(duì)序列.可以參考問(wèn)后鏈接說(shuō)明.
鍵和值之間用冒號(hào)(:)分隔,每個(gè)鍵值對(duì)之間用逗號(hào)(,)分隔.
注意: 設(shè)置多個(gè)屬性值時(shí),屬性名的引號(hào)是可選的(可以有,也可以沒(méi)有).但是class屬性是個(gè)例外,必須加上引號(hào).
例子:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#button1").click(function () {
$("p").attr("title", "Hello World");
});
$("#button2").click(function () {
$("div").attr({"title": "some title for div", "hello": "World"});
});
});
</script>
</head>
<body>
<input type="button" id="button1" value="button1"></input>
<input type="button" id="button2" value="button2"></input>
<p>This is a paragraph.</p>
<div>This is a div.</div>
<p>This is another paragraph.</p>
<div>This is another div.</div>
</body>
</html>
點(diǎn)擊兩個(gè)按鈕之后,元素變?yōu)?
其中<div>的hello是一個(gè)新增的自定義屬性,其value為World.
.attr(attributeName, function(index, oldValue)):
使用一個(gè)function來(lái)設(shè)置屬性值.function的第一個(gè)參數(shù)是index,第二個(gè)參數(shù)是該屬性之前的值.
看例子:
<!DOCTYPE html>
<html>
<head>
<style>
div {
color: blue;
}
span {
color: red;
}
b {
font-weight: bolder;
}
</style>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("div")
.attr("id", function (index, oldAttr) {
if (oldAttr) {
return "div-id" + index + oldAttr;
} else {
return "div-id" + index;
}
})
.each(function () {
$("span", this).html("(id = '<b>" + this.id + "</b>')");
});
});
</script>
</head>
<body>
<div id="someId">Zero-th <span></span></div>
<div>First <span></span></div>
<div>Second <span></span></div>
</body>
</html>
上面的例子,對(duì)應(yīng)的頁(yè)面結(jié)果如下:
當(dāng)使用一個(gè)方法來(lái)設(shè)定屬性值的時(shí)候,如果這個(gè)set的function沒(méi)有返回值,或者返回了undefined,當(dāng)前的值是不會(huì)被改變的.
即操作會(huì)被忽略.
還是上面的例子,attr()其中的function返回undefined:
如下:
<script type="text/javascript">
$(document).ready(function () {
$("div").attr("id", function (index, oldAttr) {
return undefined;
}).each(function () {
$("span", this).html("(id = '<b>" + this.id + "</b>')");
});
});
</script>
返回的頁(yè)面效果如下:
即沒(méi)有進(jìn)行任何修改操作,還是保持原來(lái)的屬性值.
注意:jQuery不能修改<input>和<button>的type屬性,如果修改會(huì)在瀏覽器報(bào)錯(cuò).
這是因?yàn)镮E瀏覽器中不能修改type屬性.
removeAttr()方法
移除匹配元素集合中每一個(gè)元素的指定屬性.
removeAttr()方法調(diào)用的是JavaScript的removeAttribute()方法,但是它能用jQuery對(duì)象直接調(diào)用,并且它考慮到并處理了各個(gè)瀏覽器上的屬性名稱(chēng)可能不統(tǒng)一的問(wèn)題.
例子:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("input[type=button]").click(function () {
$("div").removeAttr("title");
});
});
</script>
</head>
<body>
<input type="button" value="ClickMe"></input>
<div title="hello">Zero</div>
</body>
</html>
點(diǎn)擊按鈕后,<div>的title屬性會(huì)被刪除.
注意: 用removeAttr()移除onclick在IE6-8上都不會(huì)起作用,為了避免這個(gè)問(wèn)題,應(yīng)該使用.prop()方法.
比如:
$element.prop( "onclick", null );
console.log( "onclick property: ", $element[ 0 ].onclick );
相關(guān)文章
jquery tools系列 overlay 學(xué)習(xí)
接著上次scrollable的學(xué)習(xí)，今天繼續(xù)jquery tools六大功能的第四個(gè)功能——overlay的學(xué)習(xí)。2009-09-09
jQuery簡(jiǎn)單實(shí)現(xiàn)title提示效果示例
這篇文章主要介紹了jQuery簡(jiǎn)單實(shí)現(xiàn)title提示效果的方法,結(jié)合實(shí)例形式分析了jQuery封裝與使用title提示框的方法,需要的朋友可以參考下2016-08-08
這里給大家分享幾段JQuery提示效果的代碼，非常的簡(jiǎn)單實(shí)用，有需要的小伙伴直接拿走吧2014-11-11
jquery checkbox實(shí)現(xiàn)單選小例
checkbox是復(fù)選框如何將其變?yōu)閱芜x呢？下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下2013-11-11
用js實(shí)現(xiàn)的模擬jquery的animate自定義動(dòng)畫(huà)(2.5K)
模仿jquery的animate寫(xiě)了一個(gè)簡(jiǎn)單的動(dòng)畫(huà)實(shí)現(xiàn)方法。2010-07-07
jQuery內(nèi)容過(guò)濾選擇器與子元素過(guò)濾選擇器用法實(shí)例分析
這篇文章主要介紹了jQuery內(nèi)容過(guò)濾選擇器與子元素過(guò)濾選擇器用法,結(jié)合實(shí)例形式分析了jQuery內(nèi)容過(guò)濾選擇器與子元素過(guò)濾選擇器相關(guān)功能、原理及使用方法,需要的朋友可以參考下2019-02-02
淺談jQuery animate easing的具體使用方法(推薦)
下面小編就為大家?guī)?lái)一篇淺談jQuery animate easing的具體使用方法(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
基于jquery實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了基于jquery二級(jí)聯(lián)動(dòng)效果的代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
基于jquery日歷價(jià)格、庫(kù)存等設(shè)置插件
這篇文章主要為大家詳細(xì)介紹了基于jquery日歷價(jià)格、庫(kù)存等設(shè)置插件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
jquery和css3實(shí)現(xiàn)的炫酷時(shí)尚的菜單導(dǎo)航
點(diǎn)擊列表圖表后，內(nèi)容頁(yè)面向內(nèi)移動(dòng)顯示菜單項(xiàng)。當(dāng)單擊關(guān)閉菜單按鈕時(shí)，菜單項(xiàng)隱藏，內(nèi)容頁(yè)恢復(fù)原位2014-09-09