jQuery學(xué)習(xí)3:操作元素屬性和特性
先看一個(gè)例子:
<a id="easy" href="#">http://chabaoo.cn</a>現(xiàn)在要得到a標(biāo)簽的屬性id。有如下方法:
jQuery("#easy").click(function() {
alert(document.getElementById("easy").id); //1
alert(this.id); //2
alert(jQuery(this).attr("id")); //3
});
方法1使用的是javascript原始方法;方法2用到了this,this就相當(dāng)于一個(gè)指針,返回的是一個(gè)dom對象,本例中返回a標(biāo)簽對象。所以this.id可直接得到id。方法3將dom對象轉(zhuǎn)換成了jQuery對象,再利用jQuery封裝的方法attr()得到a標(biāo)簽的ID。
可見,有時(shí)候用javascript配合jQuery會很方便。下邊著重總結(jié)一下jQuery操作元素屬性。
◦attr(name) 取得元素的屬性值
◦attr(properties) 設(shè)置元素屬性,以名/值形式設(shè)置
◦attr(key,value) 為元素設(shè)置屬性值
◦removeAttr(name) 移除元素的屬性值
下邊以實(shí)例說明每種方法的具體用法。
<div id="test">
<a id="hyip" href="javascript:void(0)">腳本之家</a>
<a id="baidu" href="javascript:void(0)">百度</a>
<img id="show" />
</div>
jQuery("#test a").click(function() {
//得到ID
jQuery(this).attr("id"); //同this.id
//為img標(biāo)簽設(shè)置src為指定圖片;title為百度.
var v = { src: "http://www.baidu.com/img/bdlogo.gif", title: "百度" };
jQuery("#show").attr(v);
//將img的title設(shè)置為baidu,同上邊的區(qū)別是每次只能設(shè)定一個(gè)屬性
jQuery("#show").attr("title", "baidu");
//移除img的title屬性
jQuery("#show").removeAttr("title");
});
大家可能已經(jīng)發(fā)現(xiàn)了,在jQuery中attr()方法,既可以獲得元素的屬性值,又能設(shè)置元素的屬性值。是的,在jQuery中,類似的方法還有很多,現(xiàn)在將它們總結(jié)下來,以后用起來也會比較容易。
方法有:
◦html() 獲取或設(shè)置元素節(jié)點(diǎn)的html內(nèi)容
◦text() 獲取或設(shè)置元素節(jié)點(diǎn)的文本內(nèi)容
◦height() 獲取或設(shè)置元素高度
◦ width() 獲取或設(shè)置元素寬度
◦ val() 獲取或設(shè)置輸入框的值
以html()為例,其余的相似:
<div id="showhtml">baidu</div>
//獲得html,結(jié)果為baidu
jQuery("#showhtml").html();
//設(shè)置html,結(jié)果為I love baidu
jQuery("#showhtml").html("I love baidu");
以上這些就是jQuery操作元素屬性的一些基本方法了,經(jīng)過本次的總結(jié),相信大家在使用jQuery時(shí),會更加的熟練。
以下是其它網(wǎng)友的補(bǔ)充:
下面就列出jQuery中提供的方法:
操作元素屬性:each(iterator)遍歷包裝集里所有元素,為各元素分別調(diào)用傳遞進(jìn)來的迭代器函數(shù)。參數(shù)iterator 一個(gè)函數(shù),為匹配集中的各元素分別調(diào)用一次。傳遞到函數(shù)的參數(shù)被設(shè)置為包裝集里當(dāng)前元素的下標(biāo)(從0開始),而當(dāng)前元素可通過函數(shù)this屬性來訪問。
$('img').each(function(n){
this.alt='This is image['+n+'] with an id of'+this.id;
})
獲取特性值:attr(name)獲取指派到包裝集里第一個(gè)元素指定特性的值。參數(shù) name為特性的名稱,該特性的值將被獲取。如果沒有該特性則返回undefined值。
<img id="myImage" src="image.gif" alt="An image" class="someClass" title="This is an image" custom="some value">
$("#myImage").attr("custom") 得到值就是some value。
設(shè)置特性值:attr(name,value)為包裝集里的所有元素的name特性設(shè)置傳遞進(jìn)來的值。name將被設(shè)置的特性的名稱,value指定特性的值。
$('*').attr('title',function(index) {
return 'I am element' '+ index +' and my name is ' +(this.id?this.id:'unset');
});
該函數(shù)是設(shè)置頁面上的所有元素的title特性為一個(gè)字符串。由DOM中元素的下標(biāo)和各個(gè)特定元素id特性值所組成的字符串。
attr()還可以一次設(shè)置多個(gè)特性到包裝集里所有元素的快速簡便的方式。attr(attributes)。
$('input').attr(
{value:'',title:'please enter a value'}
);
該函數(shù)把所有<input>元素的value設(shè)置為空字符串,同時(shí)把title設(shè)置為字符串Please enter a value。
相關(guān)文章
jQuery實(shí)現(xiàn)平滑滾動到指定錨點(diǎn)的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)平滑滾動到指定錨點(diǎn)的方法,實(shí)例分析了jQuery根據(jù)錨點(diǎn)定位滾動的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03JQuery validate 驗(yàn)證一個(gè)單獨(dú)的表單元素實(shí)例
下面小編就為大家?guī)硪黄狫Query validate 驗(yàn)證一個(gè)單獨(dú)的表單元素實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02jQuery插件ImgAreaSelect實(shí)現(xiàn)頭像上傳預(yù)覽和裁剪功能實(shí)例講解一
這篇文章主要介紹了jQuery插件ImgAreaSelect實(shí)現(xiàn)頭像上傳預(yù)覽和裁剪功能實(shí)例講解一,需要的朋友可以參考下2017-05-05jQuery實(shí)現(xiàn)錨點(diǎn)向下平滑滾動特效示例
下面小編就為大家?guī)硪黄猨Query實(shí)現(xiàn)錨點(diǎn)向下平滑滾動特效示例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08jQuery時(shí)間插件jquery.clock.js用法實(shí)例(5個(gè)示例)
這篇文章主要介紹了jQuery時(shí)間插件jquery.clock.js用法,結(jié)合5個(gè)實(shí)例簡單分析了jQuery時(shí)間插件jquery.clock.js的具體使用技巧,需要的朋友可以參考下2016-01-01jquery實(shí)現(xiàn)奇偶行賦值不同css值
通常為了讓頁面呈現(xiàn)的更為美觀,我們喜歡在奇偶行加上不同的顏色2012-02-02