• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
    •
    位置： jQuery 中文手册 -> jQuery 对属性的操作 -> jQuery 属性

    attr()

    获取匹配的元素集合中的第一个元素的属性的值或设置每一个匹配元素的一个或多个属性。

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

    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 开始，.prop()方法方法返回属性（property）的值，而.attr()方法返回特性（attribute）的值。

    例如,selectedIndex,tagName,nodeName,nodeType,ownerDocument,defaultChecked,和defaultSelected应使用.prop()方法进行取值或赋值。

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

    elem.checkedtrue(Boolean)将随着复选框状态的改变而改变
    $(elem).prop("checked")true(Boolean)将随着复选框状态的改变而改变
    elem.getAttribute("checked")"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，比如selected和value.

    注意

    在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="https://www.lanmper.cn/static/js/jquery-3.5.0.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)

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

    1. .attr(attributeName, value)

      • attributeName类型: String要设置值的属性名
      • value类型: String,Number这个属性设置的值

    2. .attr(attributes)

      • attributes类型: PlainObject一个属性-值集合对象。（例如{alt:'', title:'WEB前端开发-https://www.lanmper.cn}）

    3. .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" />

    设置一个简单的属性

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

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

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

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

    一次设置多个属性

    同时改变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属性。

    推算属性值

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

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

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

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

    例子:

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

    <!DOCTYPE html>
<html>
<head>
  <style>
  img { padding:10px; }
  div { color:red; font-size:24px; }
</style>
  <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.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>

    使第二个后面的按钮disabled

    <!DOCTYPE html>
<html>
<head>
  <style>
  div { color:blue; }
  span { color:red; }
  b { font-weight:bolder; }
        </style>
  <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.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>

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

    <!DOCTYPE html>
<html>
<head>
  <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script>
</head>
<body>
 
<img title="hat.gif"/>
 
<script>
$("img").attr("src", function() {
    return "images/" + this.title;
});
</script>
 
</body>
</html>

    下篇：prop()