jQuery - 概述

jQuery - 属性

← 上一节 下一节 →

当谈到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()方法可用于从第一个元素中获取属性的值匹配的set或set属性值到所有匹配的元素上.

示例

以下是一个简单的示例，它获取< em>的标题属性.标记和设置< div id ="divid">具有相同值

在线演示

<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)方法使用传递的值将命名属性设置为包装集中的所有元素.

实例

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

在线演示

<html>
   <head>
      <title>The jQuery Example</title>
      <base href="https://www.it1352.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)方法可用于将定义的样式表应用于所有匹配的元素. 您可以指定由空格分隔的多个类.

实例

以下是设置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.方法&说明
1attr(properties)

将键/值对象设置为所有匹配元素的属性.

2attr(key，fn)

在所有匹配的元素上将单个属性设置为计算值.

3removeAttr(name)

从每个匹配的元素中删除一个属性.

4hasClass(class)

如果指定的类出现在至少一个匹配元素中，则返回true.

5removeClass(class)

从匹配元素集中删除所有或指定的类.

6toggleClass(class)

添加指定的类(如果不存在)，删除指定的类(如果存在)./p>

7html()

获取第一个匹配元素的html内容(innerHTML).

8html(val)

设置每个匹配元素的html内容.

9text()

获取所有匹配元素的组合文本内容.

10text(val)

设置所有匹配元素的文本内容.

11val()

获取第一个匹配元素的输入值.

12val(val )

如果在< input>上调用它，则设置每个匹配元素的value属性.但如果在< select>上调用它使用传递的<选项>如果在复选框或单选框上调用，则选择值然后传递选项，然后将检查所有匹配的复选框和radiobox.

示例

与上面的语法和示例类似，以下示例将帮助您了解在不同情况下使用各种属性方法 :

Sr.No.选择器&说明
1

$("＃myID").attr("custom")

这将返回与ID匹配的第一个元素的属性 custom 的值myID.

2

$("img").attr("alt", "Sample Image")

这会设置 alt 属性将所有图像转换为新值"样本图像".

3

$("input").attr({ value: "", title: "Please enter a value" });

设置所有< input>的值元素为空字符串，以及将jQuery示例设置为字符串请输入值.

4

$("a [href ^ = https://]").attr(" target"，"_ blank")

选择具有以 https://开头的href属性的所有链接，并将其目标属性设置为 _blank .

5

$("a").removeAttr("target")

这将删除 target 属性所有链接.

6

$("form").submit(function(){$(":submit"，this).attr("disabled"，"disabled");});

这会在单击"提交"按钮时将已禁用的属性修改为"已禁用".

7

$("p:last").hasClass("selected")

如果上次< p>，则返回true tag已关联类已选择.

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")

这将在下拉框中选择Orange选项，选项为Orange，Mango和Banana.

17

$("select").val("Orange", "Mango")

这将在下拉菜单中选择橙色和芒果选项包含橙色，芒果和香蕉选项的盒子.

← 上一节 下一节 →

相关菜鸟教程