在涉及DOM元素时,无涯教程可以操纵的一些最基本的组件是分配给这些元素的属性.
这些属性大多数都可以通过JavaScript作为DOM节点属性使用.一些较常见的属性是-
考虑图像元素的以下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>
这将产生以下输出-
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"选项. |
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)
Tony Bai · Go语言第一课 -〔Tony Bai〕