属性（Attributes）

优质

小牛编辑

127浏览

2023-12-01

当涉及到DOM元素时，我们可以操作的一些最基本的组件是分配给这些元素的属性和属性。

大多数这些属性都可以通过JavaScript作为DOM节点属性获得。一些比较常见的属性是 -

className
tagName
id
href
title
rel
src

考虑以下用于图像元素的HTML标记 -

<img id = "imageid" src = "image.gif" alt = "Image" class = "myclass" 
   title = "This is an image"/>

在此元素的标记中，标记名称为img，id，src，alt，class和title的标记表示元素的属性，每个属性由名称和值组成。

jQuery为我们提供了轻松操作元素属性的方法，并允许我们访问元素，以便我们也可以更改其属性。

获取属性值

attr()方法可用于从匹配集中的第一个元素获取属性的值，或者将属性值设置到所有匹配的元素上。

例子 (Example)

以下是一个简单的示例，它获取标签的title属性并设置具有相同值的值 -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/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)方法可用于使用传递的值将命名属性设置为包装集中的所有元素。

例子 (Example)

以下是将图像标记的src属性设置为正确位置的简单示例 -

<html>
   <head>
      <title>The jQuery Example</title>
      <base href="https://www.xnip.cn" />
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#myimg").attr("src", "/jquery/images/jquery.jpg");
         });
      </script>
   </head>
   <body>
      <div>
         <img id = "myimg" src = "/images/jquery.jpg" alt = "Sample image" />
      </div>
   </body>
</html>

应用样式

addClass( classes )方法可用于将定义的样式表应用于所有匹配的元素。您可以指定由空格分隔的多个类。

例子 (Example)

以下是设置para“p”标记的class属性的简单示例 -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/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>

属性方法

下表列出了几个可用于操作属性和属性的有用方法 -

Sr.No.	方法和描述
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上调用它，则设置每个匹配元素的value属性，但是如果在select上使用传递的option值调用它，则会选择传递选项，如果在复选框或单选框上调用它将检查所有匹配的复选框和radiobox。

例子 (Examples)

与上面的语法和示例类似，下面的示例将为您提供在不同情况下使用各种属性方法的理解 -

以下是不同情况下属性方法的完整列表 -

Sr.No.	选择器和描述
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》元素的值设置为空字符串，并将jQuery示例设置为字符串Please enter a value 。
4	$("a[href^=https://]").attr("target","_blank") 选择具有以https://开头的href属性的所有链接，并将其target属性设置为_blank 。
5	$("a").removeAttr("target") 这将删除所有链接的target属性。
6	$("form").submit(function() {$(":submit",this).attr("disabled", "disabled");}); 这会在单击“提交”按钮时将已禁用的属性修改为“已禁用”值。
7	$("p:last").hasClass("selected") 如果最后一个标记已selected关联的类，则返回true。
8	$("p").text() 返回包含所有匹配的元素的组合文本内容的字符串。
9	$("p").text("《i》Hello World《/i》") 这会将“ Hello World I>”设置为匹配的元素的文本内容。
10	$("p").html() 这将返回所有匹配段落的HTML内容。
11	$("div").html("Hello World") 这会将所有匹配的的HTML内容设置为Hello World 。
12	$("input:checkbox:checked").val() 从选中的复选框中获取第一个值。
13	$("input:radio[name=bar]:checked").val() 从一组单选按钮中获取第一个值。
14	$("button").val("Hello") 设置每个匹配元素button的value属性
15	$("input").val("on") 这将检查其值为“on”的所有收音机或复选框按钮。
16	$("select").val("Orange") 这将在下拉框中选择Orange选项，选项包括Orange，Mango和Banana。
17	$("select").val("Orange", "Mango") 这将在下拉框中选择Orange和Mango选项，选项包括Orange，Mango和Banana。