jQuery attr()

admin發表於2017-02-16
jQuery

此方法獲取匹配的元素集合中的第一個元素的屬性（attribute）的值或設定每一個匹配元素的一個或多個屬性值。

語法結構一:

[JavaScript] 純文字檢視 複製程式碼
.attr(attributeName)

引數解析:

attributeName:要獲取值的屬性名稱。

返回匹配元素集合中第一個元素指定屬性的值。

jQuery1.0版本新增。

語法結構二:

[JavaScript] 純文字檢視 複製程式碼
.attr(attributeName, value)

引數解析:

（1）.attributeName:要設定值的屬性名。

（2）.value:要設定的屬性值。如果為null，指定的屬性將被刪除（就像.removeAttr()）。

設定所有匹配元素的屬性值。

jQuery1.0版本新增。

語法結構三:

[JavaScript] 純文字檢視 複製程式碼
.attr(attributes)

引數解析:

attributes:一個包含屬性/屬性值對的物件。

設定所有匹配元素的屬性值。

jQuery1.0版本新增。

語法結構四:

[JavaScript] 純文字檢視 複製程式碼
.attr(attributeName, function(index,oldValue))

引數解析:

（1）.attributeName:要設定值的屬性名。

（2）.function:返回屬性值的函式。index：可選，當前元素在匹配元素集合中的索引值（從0開始），oldValue：可選，當前元素的屬性值（被重置之前的值）。函式中的this指向當前元素。

設定所有匹配元素的屬性值。

jQuery1.1版本新增。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#bt").click(function () {
    alert($("div").attr("title"));
  })
})
</script>
</head>
<body>
<div title="螞蟻部落一">螞蟻部落一</div>
<div title="螞蟻部落二">螞蟻部落二</div>
<input type="button" id="bt" value="檢視演示"/>
</body>
</html>

返回匹配元素集合中第一個元素的指定屬性值。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>attr()函式-螞蟻部落</title>
<style type="text/css">
.ant {
  color:blue;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#bt").click(function () {
    $("div").attr("class", "ant");
  });
})
</script>
</head>
<body>
<div>螞蟻部落一</div>
<div>螞蟻部落二</div>
<input type="button" id="bt" value="檢視演示"/>
</body>
</html>

給所有的匹配的div元素新增一個class屬性，其值為"ant"。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#bt").click(function () {
    $("td").attr({
      width: "100",
      height: "50"
    });
  })
})
</script>
</head>
<body>
<table border="1">
<tr>
  <td>螞蟻部落</td>
</tr>
</table>
<input type="button" id="bt" value="檢視演示"/>
</body>
</html>

設定單元格的尺寸，方法的引數是一個物件。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  height:100px;
  line-height:200px;
  width:100px;
  text-align:center;
  background-color:#ccc;
}
.reset{
  color:blue;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#bt").click(function () {
    $("div").attr("class" ,function(){
      return "reset"
    })
  })
})
</script>
</head>
<body>
<div>螞蟻部落</div>
<input type="button" id="bt" value="檢視演示"/>
</body>
</html>

設定div的class屬性值，屬性值是以函式的返回值方式獲得的。

相關文章