目录
  1. WIKI教程
  2. 学习jQuery
  3. jQuery - 属性( Attributes)

jQuery - 属性( Attributes)

当涉及到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.iowiki.com" />
      <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。

<上一篇.jQuery - 选择器( Selectors)
jQuery - 遍历( Traversing).下一篇>
↑回到顶部↑
WIKI教程 @2018