属性
jQuery - 属性
当谈到 DOM 元素时，我们可以操作的一些最基本的组件是属性以及分配给这些元素的属性。
大部分属性可以作为 DOM 节点属性在 JavaScript 中时可用的。一些比较常见的属性是 ——
-
类名
-
标签名
-
id
-
超链接
-
标题
-
rel
- src
考虑下述一个图像元素的 HTML 标记 ——
<img id="imageid" src="image.gif" alt="Image" class="myclass" title="This is an image"/>在这个元素的标记中，标签名是 img，并且为 id，src，alt，类以及标题的标记代表了元素的属性，每一个都包含一个名称和一个值。
jQuery 提供给我们的方法很容易操纵元素的属性并且我们可以访问元素，这样我们也可以改变其属性。
获取属性值
attr() 方法可以用来获取与设置匹配的第一个元素的一个属性的值或对所有匹配的元素设置属性值。
示例
下面是一个简单的例子，用于获取 < em> 标签的标题属性并且用相同的值来设置 < div id="divid"> 的值 ——
<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript" src="https://atts.w3cschool.cn/attachments/image/wk/jquery/jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
var title = $("em").attr("title");
$("#divid").text(title);
});
</script>
</head>
<body>
<div>
<em title="Bold and Brave">This is first paragraph.</em>
<p id="myid">This is second paragraph.</p>
<div id="divid"></div>
</div>
</body>
</html>这将产生如下所示结果 ——
设置属性值
attr(name, value) 方法使用传递的值，用于给包装好的集合中的全部元素设置指定的属性。
示例
下述是一个简单的例子，用于将图像标签的 src 属性设置到一个正确的位置 ——
<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript" src="https://atts.w3cschool.cn/attachments/image/wk/jquery/jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#myimg").attr("src", "/images/jquery.jpg");
});
</script>
</head>
<body>
<div>
<img id="myimg" src="wrongpath.jpg" alt="Sample image" />
</div>
</body>
</html>这将产生如下所示结果 ——
应用样式
addClass( classes ) 方法可用于将定义好的样式表应用到全部可匹配的元素中。你可以指定由空间隔开的多个类。
示例
下面是一个简单的例子，设置了段落 < p> 标签的 class 属性 ——
<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript" src="https://atts.w3cschool.cn/attachments/image/wk/jquery/jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("em").addClass("selected");
$("#myid").addClass("highlight");
});
</script>
<style>
.selected { color:red; }
.highlight { background:yellow; }
</style>
</head>
<body>
<em title="Bold and Brave">This is first paragraph.</em>
<p id="myid">This is second paragraph.</p>
</body>
</html>这将产生如下所示结果 ——
属性方法
下表列出了一些有用的方法，你可以使用这些方法对多个属性进行操作 ——
| 序号 | 方法 & 描述 |
|---|---|
| 1 |
attr( properties )
设置键/值对象作为全部可匹配的元素的属性。 |
| 2 |
attr( key, fn )
为所有可匹配的元素设置一个单个的属性为可计算的值。 |
| 3 |
removeAttr( name )
从每一个可匹配的元素中删除一个属性。 |
| 4 |
hasClass( class )
如果指定的类出现在至少一个可匹配的元素集合中，返回 true。 |
| 5 |
removeClass( class )
从可匹配的元素集合中删除全部或指定的类。 |
| 6 |
toggleClass( class )
如果指定的类不存在，那么添加指定的类；如果指定的类存在，那么删除它。 |
| 7 |
html( )
获取第一个匹配元素的 html 内容 (innerHTML)。 |
| 8 |
html( val )>
设置每一个可匹配元素的 html 内容。 |
| 9 |
text( )
获取所有可匹配元素的组合的文本内容。 |
| 10 |
text( val )
设置所有可匹配元素的文本内容。 |
| 11 |
val( )
获取第一个可匹配元素的输入值。 |
| 12 |
val( val )
如果可匹配元素在 <input> 中调用，那么设置每个可匹配元素的属性值，但是如果可匹配元素在 <select> 中使用传递的 <option> 值调用，那么传递的选项就会被选中，如果可匹配元素在复选框或单选框中调用，那么所有匹配的复选框或单选框会被选中。 |
示例
与上述语法和示例相似，下述例子会使你对在不同的情况下使用不同的属性方法有一个很好地了解 ——
| 序号 | 选择器 & 描述 |
|---|---|
| 1 |
$("#myID").attr("custom")
这会为第一个与 ID myID 匹配的元素返回属性 custom 的值。 |
| 2 |
$("img").attr("alt", "Sample Image")
这会将所有图像的 alt 属性设置为一个新的值 "Sample Image". |
| 3 |
$("input").attr({ value: "", title: "Please enter a value" });
将所有的 <input> 元素设置为空字符串，同时将 The jQuery Example 设置为字符串 Please enter a value. |
| 4 |
$("a[href^=http://]").attr("target","_blank")
选择带有以 http:// 开头的 href 属性的全部链接并且将它的 target 属性设置为 _blank. |
| 5 |
$("a").removeAttr("target")
这将删除所有链接中的 target 属性。 |
| 6 |
$("form").submit(function() {$(":submit",this).attr("disabled", "disabled");});
点击提交按钮时，它会把不可用的属性修改为值 "disabled" 。 |
| 7 |
$("p:last").hasClass("selected")
如果最后一个 <p> 标签有关联类 selected，返回 true。 |
| 8 |
$("p").text()
返回包含与 <p> 元素匹配的组合的文本内容的字符串。. |
| 9 |
$("p").text("<i>Hello World</i>")
设置 "<I>Hello World</I>" 为与 <p> 元素匹配的文本内容。 |
| 10 |
$("p").html()
返回所有匹配的段落的 HTML 内容。 |
| 11 |
$("div").html("Hello World")
设置与 <div> 匹配的 HTML 内容为 Hello World。 |
| 12 |
$("input:checkbox:checked").val()
从已选取的复选框中获取第一个值。 |
| 13 |
$("input:radio[name=bar]:checked").val()
从一组单选按钮中获取第一个值。 |
| 14 |
$("button").val("Hello")
设置每一个与 <button> 匹配的元素的属性值。 |
| 15 |
$("input").val("on")
这会检查所有值为 "on" 的单选或复选框按钮。 |
| 16 |
$("select").val("Orange")
这会在下拉框为橙子，芒果和香蕉的选项中选择橙子。 |
| 17 |
$("select").val("Orange", "Mango")
这会在下拉框为橙子，芒果和香蕉的选项中选择橙子和芒果。 |
更多建议：