关注我们

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

以下是一个简单的示例，该示例获取<em>标签的title属性，并将<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>

这将产生以下输出-

This is first paragraph.

This is second paragraph.

Bold and Brave

设置属性值

attr(name，value)方法可用于使用传递的值将命名属性设置到指定元素上.

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

复制代码

<html>
   <head>
      <title>The jQuery Example</title>
      <base href="https://www.learnfk.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>

这将产生以下输出-

Sample image

增加样式

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

以下是设置<p>标签的类属性的简单示例-

复制代码

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

这将产生以下输出-

This is first paragraph.

This is second paragraph.

属性方法

下表列出了一些有用的方法，可用于操纵属性和属性-

Sr.No.	Methods & Remark
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	设置每个匹配元素的value属性，如果在上调用它，但是如果在

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

Sr.No.	Selector & Remark
1	$("#myID").attr()("custom") 这将为与ID myID匹配的第一个元素返回属性 custom 的值.
2	$("img").attr()("alt"，"Example Image") 这会将所有图像的 alt 属性设置为新值"Example Image".
3	$("input").attr()({value:""，title:"请输入一个值"}); 将所有<input>元素的值设置为空字符串，并设置为字符串 “请输入一个值”。
4	$("a [href ^=https://]").attr()("target"，"_blank") 选择具有以 https://开头的href属性的所有链接，并将其目标属性设置为 _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>的value属性。
15	$("input").val("on") 这将检查所有值为"on"的单选或复选框按钮.
16	$("select").val("Orange") 这将在带有选项"Orange"，"Mango"和"Banana"的下拉框中选择"Orange"选项.
17	$("select").val("Orange"，"Mango") 这将在带有选项"Orange"，"Mango"和"Banana"的下拉框中选择"Orange"和"Mango"选项.

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

JavaScript核心原理解析 -〔周爱民〕

好记忆不如烂笔头。留下您的足迹吧 :)