jQuery 属性操作
jQuery 在操作与 HTML 元素相关的各种属性上被广泛使用。每个 HTML 元素都可以有各种标准和自定义属性(即属性),这些属性用于定义该 HTML 元素的特性。
jQuery 提供了一种简便的方式来操作(获取和设置)元素的属性。首先让我们试着了解一些关于 HTML 标准和自定义属性的知识。
标准属性
一些常见的属性如下:
- className
- tagName
- id
- href
- title
- rel
- src
- style
示例
让我们来看一下以下代码片段,用于表示图像元素的 HTML 标记:
在这个元素的标记中,标记的名称是img,而id,src,alt,class和title的标记表示元素的属性,每个属性由名称和值组成。
自定义data-*
属性
HTML规范允许我们在DOM元素中添加自定义属性,以提供有关元素的附加细节。这些属性名称以 data- 开头。
示例
以下是一个示例,我们使用 data-copyright 这个自定义属性来提供有关图片版权的信息:
jQuery获取标准属性
使用jQuery attr() 方法可以获取匹配的HTML元素的任何标准属性的值。我们将使用jQuery选择器来匹配所需的元素,然后应用 attr() 方法来获取元素的属性值。
如果给定的选择器匹配多个元素,则返回值的列表,您可以使用jQuery数组方法进行迭代。
示例
以下是一个使用jQuery程序获取锚点<a>
元素的href和title属性的示例:
jQuery – 获取数据属性
jQuery data() 方法用于从匹配的HTML元素中获取任何自定义数据属性的值。我们将使用 jQuery选择器 来匹配所需的元素,然后我们将应用 data() 方法来获取元素的属性值。
示例
以下是一个使用jQuery获取<div>
元素的author-name和year属性的程序:
jQuery – 设置标准属性
jQuery attr(name, value) 方法用于设置匹配的 HTML 元素的任何标准属性的值。我们将使用 jQuery 选择器 来匹配所需的元素,然后应用 attr(key, value) 方法来设置元素的属性值。
如果指定的选择器匹配多个元素,则会为所有匹配的元素设置属性值。
示例
下面是一个使用 jQuery 设置锚点 <a>
元素的 title 属性的示例:
jQuery – 设置自定义属性
jQuery的 data(name, value) 方法用于设置匹配的HTML元素的任何自定义属性的值。我们将使用 jQuery选择器 匹配所需的元素,然后应用 attr(key, value) 方法来设置元素的属性值。
如果给定的选择器匹配多个元素,则会为所有匹配的元素设置属性的值。
示例
以下是一个使用jQuery设置<div>
元素的author-name属性的程序:
jQuery HTML/CSS参考文档
您可以在以下页面获取关于所有jQuery方法用于操纵HTML和CSS内容的完整参考文档: jQuery HTML/CSS参考文档 。