首页
话题
消息
手册
我的
返回介绍

.attr()

发布于 2017-09-11 字数11264 浏览 1194 评论 0

所属分类:DOM 属性 | DOM 操作 > 通用属性操作
获取匹配的元素集合中的第一个元素的属性的值
 或
设置每一个匹配元素的一个或多个属性。

Contents:

  • .attr( attributeName )

    • .attr( attributeName )
  • .attr( attributeName, value )

    • .attr( attributeName, value )
    • .attr( attributes )
    • .attr( attributeName, function(index, attr) )

.attr( attributeName )返回: String

描述: 获取匹配的元素集合中的第一个元素的属性的值。

  • 添加的版本: 1.0.attr( attributeName )

    • attributeName
      类型: String

      要获取的属性名称

.attr()方法只获取第一个匹配元素的属性值。要获取每个单独的元素的属性值, 我们需要依靠jQuery的 .each()或者.map()方法循环。

使用 jQuery的 .attr() 方法得到了一个元素的属性值主要有两个好处:

  1. 方便:它可以直接被jQuery对象访问并且链式调用其他jQuery方法。
  2. 浏览器兼容:一些属性在不同浏览器中得到不同的值。 甚至在同一个浏览器的不同版本中。 .attr() 方法减少了兼容性问题。

注意: 除少数属性意外,属性值都是字符串,如value和tabindex。

注意:
试图改变通过HTML创建的,或已经在HTML文档中的input元素的type特性(attribute)或属性(property),在Internet Explorer 6, 7, or 8下将会抛出一个错误。

在jQuery 1.6中,当属性没有被设置时候,.attr()方法将返回undefined另外,.attr()不应该用在普通的对象,数组,窗口(window)或文件(document)上。若要检索和更改DOM属性,比如元素的checked, selected, 或 disabled状态,请使用.prop()方法。

Attributes vs. Properties

attributes和properties之间的差异在特定情况下是很重要。jQuery 1.6之前.attr()方法在取某些 attribute 的值时,会返回 property 的值,这就导致了结果的不一致。从 jQuery 1.6 开始.prop()方法 方法返回 property 的值,而 .attr() 方法返回 attributes 的值。

例如, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected 应使用.prop()方法进行取值或赋值。 在jQuery1.6之前,这些属性使用.attr()方法取得,但是这并不是元素的attr属性。他们没有相应的属性(attributes),只有特性(property)。

例如,考虑一个DOM元素的HTML标记中定义的<input type="checkbox" checked="checked" /> ,并假设它是一个JavaScript变量命名的elem

elem.checked
true (Boolean) 将随着复选框状态的改变而改变

$(elem).prop("checked")
true (Boolean) 将随着复选框状态的改变而改变

elem.getAttribute("checked")
"checked" (String) 复选框的初始状态;不会改变

$(elem).attr("checked")(1.6)
"checked" (String) 复选框的初始状态;不会改变

$(elem).attr("checked")(1.6.1+)
"checked" (String) 将随着复选框状态的改变而改变

$(elem).attr("checked")(pre-1.6)
true (Boolean) 将随着复选框状态的改变而改变

根据W3C的表单规范 ,在checked属性是一个布尔属性,
这意味着,如果这个属性(attribute)是目前存在,
即使,该属性没有对应的值,或者被设置为空字符串值,或甚至是”false”,相应的属性(property)为true。
这才是真正的所有布尔属性(attributes)。

然而,要记住的最重要的概念是checked特性(attribute)不是对应它checked属性(property)。特性(attribute)实际对应的是defaultChecked属性(property),而且仅用于设置复选框最初的值。checked特性(attribute)值不会因为复选框的状态而改变,而checked属性(property)会因为复选框的状态而改变。因此,
 跨浏览器兼容的方法来确定一个复选框是否被选中,是使用该属性(property):

  • if ( elem.checked )
  • if ( $(elem).prop("checked") )
  • if ( $(elem).is(":checked") )

对于其他的动态属性,同样是true,比如 selectedvalue.

Additional Notes(其他注意事项):

  • 在Internet Explorer 9之前的版本,使用.prop()设置DOM元素的属性进行赋值时,若所赋值的类型不是基本类型(number, string, 或 boolean),而且也没有使用 .removeProp() 方法在 DOM 元素从文档中被移除之前。为了安全的在 DOM 对象上进行赋值而不用担心内存泄露问题,请使用 .data() 方法 。

例子:

在页面的第一个<em>中找到title属性。

<!DOCTYPE html>
<html>
<head>
  <style>
  em { color:blue; font-weight:bold; }
  div { color:red; }
</style>
  <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
 
<p>
  Once there was a <em title="huge, gigantic">large</em> dinosaur...
</p>
 
  The title of the emphasis is:<div></div>
 
<script>
var title = $("em").attr("title");
  $("div").text(title);
</script>
 
</body>
</html>

.attr( attributeName, value )返回: jQuery

描述: 设置每一个匹配元素的一个或多个属性。

  • 添加的版本: 1.0.attr( attributeName, value )

    • attributeName
      类型: String

      要设置值的属性名

    • value
      类型: String,Number

      这个属性设置的值

  • 添加的版本: 1.0.attr( attributes )

    • attributes
      类型: PlainObject

      一个 属性 – 值 集合对象。(译者注:例如{
      alt: ”,
      title: ‘WEB前端开发-http://www.css88.com
      })

  • 添加的版本: 1.1.attr( attributeName, function(index, attr) )

    • attributeName
      类型: String

      要设置值的属性名.

    • function(index, attr)
      类型: Function()

      这个函数返回用来设置的值,this指向当前的元素。接收index 参数表示元素在匹配集合中的索引位置和html 参数表示元素上原来的 HTML 内容。

这个 .attr() 方法 是一个设置属性值的方便而且强大的途径—特别是当设置多个属性或使用值来自函数。 让我们考虑下面的图片:

<img id="greatphoto" src="brush-seller.jpg" alt="brush seller" />

Setting a simple attribute(设置一个简单的属性)

我们可以通过.attr()方法非常简单的改变 alt 属性并附上新值:

$('#greatphoto').attr('alt', 'Beijing Brush Seller');

我们可以用同样的方法 添加 一个属性:

$('#greatphoto')
.attr('title', 'Photo by Kelly Clark');

Setting several attributes at once(一次设置多个属性)

同时改变alt 属性 和 添加 title属性, 我们可以使用一个“名/值”形式的对象 (JavaScript object literal)传递给这个方法。 每个 key-value 对象将增加或者修改一个属性:

$('#greatphoto').attr({
  alt: 'Beijing Brush Seller',
  title: 'photo by Kelly Clark'
});

当设置多个属性,包裹属性名的引号是可选的。

警告: 当设置样式名(“class”)属性时,必须使用引号!

注意: jQuery禁止改变一个 <input><button>元素的type 特性(attribute),并且在所有浏览器下将抛出一个错误。因为Internet Explorer不会允许你改变<input>或者<button>元素的type属性。

Computed attribute values(推算属性值)

通过使用一个函数来设置属性, 可以根据该元素上的其它属性值返回最终所需的属性值。例如,我们可以把新的值与现有的值联系在一起:

$('#greatphoto').attr('title', function(i, val) {
  return val + ' - photo by Kelly Clark'
});

当前运用一个函数来计算属性的值,当我们修改了多个元素的属性,特别有用。

注意 如果setter函数没有返回任何数据(例如:function(index, attr){}),属性的当前值返回值是undefined,作为一个getter行为。实际上,如果不进行任何更改的setter函数不返回的东西。

例子:

Example: 为页面中全部的 <img>设置一些属性。

<!DOCTYPE html>
<html>
<head>
  <style>
  img { padding:10px; }
  div { color:red; font-size:24px; }
</style>
  <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
 
  <img />
  <img />
  <img />
 
  <div><B>Attribute of Ajax</B></div>
 
<script>
$("img").attr({
  src: "images/hat.gif",
  title: "jQuery",
  alt: "jQuery Logo"
});
$("div").text($("img").attr("alt"));
</script>
 
</body>
</html>

Example: 使第二个后面的按钮disabled

<!DOCTYPE html>
<html>
<head>
  <style>
  div { color:blue; }
  span { color:red; }
  b { font-weight:bolder; }
        </style>
  <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
 
  <div>Zero-th <span></span></div>
  <div>First <span></span></div>
  <div>Second <span></span></div>
 
<script>
$("div").attr("id", function (arr) {
  return "div-id" + arr;
})
.each(function () {
  $("span", this).html("(ID = '<b>" + this.id + "</b>')");
});
</script>
 
</body>
</html>

Example: 通过图片的title属性设置SRC属性。

<!DOCTYPE html>
<html>
<head>
  <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
 
<img title="hat.gif"/>
 
<script>
$("img").attr("src", function() {
    return "images/" + this.title;
});
</script>
 
</body>
</html>

您暂时不能评论!

管理员开启了需要登录才能够评论,你可以免费注册一个本站的账号。

还没有评论!

目前还没有任何评论,快来抢沙发吧!