Jquery attr()方法 屬性賦值和屬性獲取詳解
jquery中用attr()方法來獲取和設置元素屬性,attr是attribute（屬性）的縮寫，在jQuery DOM操作中會經(jīng)常用到attr()，attr()有4個表達式。
1. attr( 屬性名 ) //獲取屬性的值（取得第一個匹配元素的屬性值。通過這個方法可以方便地從第一個匹配元素中獲取一個屬性的值。如果元素沒有相應屬性，則返回 undefined ）
2. attr( 屬性名, 屬性值 ) //設置屬性的值 （為所有匹配的元素設置一個屬性值。）
3. attr( 屬性名 , 函數(shù)值 ) //設置屬性的函數(shù)值 （為所有匹配的元素設置一個計算的屬性值。不提供值，而是提供一個函數(shù)，由這個函數(shù)計算的值作為屬性值。）
4. attr(properties) //給指定元素設置多個屬性值，即：{屬性名一: “屬性值一” , 屬性名二: “屬性值二” , … … }。(這是一種在所有匹配元素中批量設置很多屬性的最佳方式。 注意，如果你要設置對象的class屬性，你必須使用'className' 作為屬性名?；蛘吣憧梢灾苯邮褂?class'或者'id'。)
示例代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery中attr()方法</title>
<script src="js/jquery-1.4.2.min.js" language="javascript" type="text/javascript" ></script>
<style>
p{color:red}
li{color:blue;}
.lili{font-weight:bold;color:red;}
#lili{font-weight:bold;color:red;}
</style>
</head>
<body>
<p title="你最喜歡的水果是。">你最喜歡的水果是？</p>
<ul>
<li title="蘋果汁">蘋果</li>
<li title="橘子汁" alt="123">橘子</li>
<li title="菠蘿汁">菠蘿</li>
</ul>
<script>
...
</script>
</body>
<html>
1.attr(name)//獲取屬性的值
1.1使用attr(name)獲取title值：
<script>
alert($("ul li:eq(1)").attr("title"));
</script>
結(jié)果： 顯示 橘子汁
1.2使用attr(name)獲取alt值：
<script>
alert($("ul li:eq(1)").attr("alt"));
</script>
結(jié)果：
顯示123
2. attr(name,value) //設置屬性的值
2.1使用attr(name,value)修改title值為：不吃橘子
<script>
$("ul li:eq(1)").attr("title","不吃橘子");
alert($("ul li:eq(1)").attr("title"));
</script>
結(jié)果：
顯示不吃橘子
3. attr(name,fn) //設置屬性的函數(shù)值
3.1把alt屬性的值設置為title屬性的值。
<script>
$("ul li:eq(1)").attr("title",function(){ return this.alt});
alert($("ul li:eq(1)").attr("title"));
</script>
結(jié)果：
顯示123
4.attr(properties) //將一個“名/值”形式的對象設置為所有匹配元素的屬性
4.1獲取<ul>里第2個<li>設置title和alt屬性。
<script>
$("ul li:eq(1)").attr({title:"不喝橘子汁",alt:"不是123"});
alert($("ul li:eq(1)").attr("title"));
alert($("ul li:eq(1)").attr("alt"));
</script>
結(jié)果：
顯示2個，不喝橘子汁 不是123
4.2獲取<ul>里第2個<li>設置class。
<script>
$("ul li:eq(1)").attr({className:"lili"});
</script>
結(jié)果：
<li title="蘋果汁">蘋果</li>
<li class="lili" alt="123" title="橘子汁">橘子</li>
<li title="菠蘿汁">菠蘿</li>
4.3獲取<ul>里第2個<li>設置id。
<script>
$("ul li:eq(1)").attr({id:"lili"});
</script>
結(jié)果：
<li title="蘋果汁">蘋果</li>
<li class="lili" alt="123" title="橘子汁">橘子</li>
<li title="菠蘿汁">菠蘿</li>
4.4獲取<ul>里第2個<li>設置style。
<script>
$("ul li:eq(1)").attr({style:"color:red"});
</script>
結(jié)果：
<li title="蘋果汁">蘋果</li>
<li class="lili" alt="123" title="橘子汁" style="color:red">橘子</li>
<li title="菠蘿汁">菠蘿</li>
在 li中添加alt是錯誤的，它只能用在img、area和input元素中（包括applet元素）。對于input元素，alt屬性意在用來替換提交按鈕的圖片。在這里為了很詳細說明attr()方法，沒有合適的屬性，所有用了alt進行舉例，只供學習參考attr()方法用法。
在此說明下alt和tite的區(qū)別。
alt：這是用以描述圖形的文字，當圖片無法顯示時，這些文字會替代圖片而被顯示。當鼠標移至圖片上該些文字亦會顯示。
title：是鼠標放上去之后，會顯示出來的文字。
那么怎么刪除屬性呢?
jquery中刪除屬性的關鍵詞是: removeAttr 注意A是大寫的. 看看怎么用的:
同樣是用法一中的html代碼, 我想刪掉li的title屬性, 那么就這樣:
<script>
$("ul li:eq(1)").removeAttr("title");
</script>
就這么簡單， attr 其實就是原生js中 getAttribute 的簡化實現(xiàn), 而removeAttr 就是 removeAttribute 的簡寫了。
那么是否有跟attr()相似的屬性呢？
jquery中val()與之類似，
$(this).val();獲取某個元素節(jié)點的value值，相當于$(this).attr("value");
$(this).val(value);設置某個元素節(jié)點的value值，相當于$(this).attr("value",value);
以上這篇Jquery attr()方法 屬性賦值和屬性獲取詳解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
- jQuery .attr()和.removeAttr()方法操作元素屬性示例
- jQuery使用attr()方法同時設置多個屬性值用法實例
- jQuery中attr()和prop()在修改checked屬性時的區(qū)別
- jQuery獲取attr()與prop()屬性值的方法及區(qū)別介紹
- jquery attr()設置和獲取屬性值實例教程
- 詳談jQuery操縱DOM元素屬性 attr()和removeAtrr()方法
- 關于jquery中attr()和prop()方法的區(qū)別
- jQuery中.attr()和.data()的區(qū)別分析
- 詳談jQuery中使用attr(), prop(), val()獲取value的異同
- jquery更改元素屬性attr()方法操作示例
相關文章
jQuery實現(xiàn)的動態(tài)文字變化輸出效果示例【附演示與demo源碼下載】
這篇文章主要介紹了jQuery實現(xiàn)的動態(tài)文字變化輸出效果,采用jquery.quoterotator.min.js插件實現(xiàn)了文字動態(tài)變換顯示的功能,并附帶演示與demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
關于query Javascript CSS Selector engine
本篇文章，小編將為大家介紹，關于query Javascript CSS Selector engine，有需要的朋友可以參考一下2013-04-04
因為需求就只有4個元素。如果是要用CSS的class來處理，那就需要用到CSS3動畫了，好了下面為大家介紹下如何實現(xiàn)這個放大縮小動畫效果2013-09-09
這篇文章主要介紹了jQuery實現(xiàn)鼠標劃過修改樣式的方法,涉及jQuery針對鼠標事件及樣式操作的技巧,是jQuery鼠標事件的典型應用,非常具有實用價值,需要的朋友可以參考下2015-04-04
jquery 與NVelocity 產(chǎn)生沖突的解決方法
有時候使用jquery 與NVelocity的時候，會產(chǎn)生沖突，下面是具體的解決方法，需要的朋友可以參考下。2011-06-06
jquery實現(xiàn)LED廣告牌旋轉(zhuǎn)系統(tǒng)圖片切換效果代碼分享
這篇文章主要介紹了jquery實現(xiàn)LED廣告牌旋轉(zhuǎn)系統(tǒng)圖片切換效果類似路邊場景，很實用的代碼，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
這篇文章主要介紹了jQuery實現(xiàn)的圖片分組切換焦點圖插件,效果非常棒，而且很實用，推薦給有需要的小伙伴。2015-01-01
Jquery+Ajax+xml實現(xiàn)中國地區(qū)選擇三級聯(lián)動菜單效果(推薦)
下面小編就為大家?guī)硪黄狫query+Ajax+xml實現(xiàn)中國地區(qū)選擇三級聯(lián)動菜單效果(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要介紹了jquery 校驗中國身份證號碼實例詳解的相關資料,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了jquery使整個div區(qū)域可以點擊的方法,涉及jQuery操作頁面元素與鼠標事件的技巧,需要的朋友可以參考下2015-06-06