Jquery 简明教程
jQuery - Attributes Manipulation
jQuery 被大量用于操纵与 HTML 元素相关的各种属性。每个 HTML 元素可以具有各种标准和自定义属性（即属性），这些属性用于定义该 HTML 元素的特征。
jQuery is being heavily used in manipulating various attributes associated with HTML elements. Every HTML element can have various standard and custom attributes (i.e. properties) which are used to define the characteristics of that HTML element.
jQuery 为我们提供了轻松操纵（获取和设置）元素属性的方法。首先，让我们尝试了解一些关于 HTML 标准和自定义属性的信息。
jQuery gives us the means to easily manipulate (Get and Set) an element’s attributes. First let’s try to understand a little about HTML standard and custom attributes.
Standard Attributes
一些更常见的属性是： −
Some of the more common attributes are −
-
className
-
tagName
-
id
-
href
-
title
-
rel
-
src
-
style
Example
我们来看一看用于图像元素的 HTML 标记的以下代码片段 −
Let’s have a look at the following code snippet for HTML markup for an image element −
<img id="id" src="image.gif" alt="Image" class="class" title="This is an image"/>在这个元素的标记中，标签名称是 img，id、src、alt、class 和 title 的标记表示元素的属性，其中每一个都包含一个名称和一个值。
In this element’s markup, the tag name is img, and the markup for id, src, alt, class, and title represents the element’s attributes, each of which consists of a name and a value.
Custom data-* Attributes
HTML 规范允许我们在 DOM 元素中添加我们自己的自定义属性，以提供有关元素的更多详细信息。这些属性名称以 data- 开头。
HTML specification allows us to add our own custom attributes with the DOM elements to provide additional detail about the element. These attributes names start with data-.
jQuery - Get Standard Attributes
jQuery attr() 方法用于从匹配的 HTML 元素中获取任何标准属性的值。我们将使用 jQuery Selectors 匹配所需的元素，然后我们将应用 attr() 方法获取该元素的属性值。
jQuery attr() method is used to fetch the value of any standard attribute from the matched HTML element(s). We will use jQuery Selectors to match the desired element(s) and then we will apply attr() method to get the attribute value for the element.
Example
以下是获取 anchor <a> 元素 href 和 title 属性的 jQuery 程序：
Following is a jQuery program to get href and title attributes of an anchor <a> element:
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
$("button").click(function(){
alert( "Href = " + $("#home").attr("href"));
alert( "Title = " + $("#home").attr("title"));
});
});
</script>
</head>
<body>
<p>Click the below button to see the result:</p>
<p><a id="home" href="index.htm" title="Tutorials Point">Home</a></p>
<button>Get Attribute</button>
</body>
</html>jQuery - Get Data Attributes
jQuery data() 方法用于从匹配的 HTML 元素中获取任何自定义数据属性的值。我们将使用 jQuery Selectors 匹配所需的元素，然后我们将应用 data() 方法获取该元素的属性值。
jQuery data() method is used to fetch the value of any custom data attribute from the matched HTML element(s). We will use jQuery Selectors to match the desired element(s) and then we will apply data() method to get the attribute value for the element.
Example
以下是获取 <div> 元素 author-name 和 year 属性的 jQuery 程序：
Following is a jQuery program to get author-name and year attributes of a <div> element:
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
$("button").click(function(){
alert( "Author = " + $("#home").data("author-name"));
alert( "Year = " + $("#home").data("year"));
});
});
</script>
</head>
<body>
<p>Click the below button to see the result:</p>
<div id="home" data-author-name="Zara Ali" data-year="2022">
Just an Example Content
</div>
<br>
<button>Get Attribute</button>
</body>
</html>jQuery - Set Standard Attributes
jQuery attr(name, value) 方法用于设置匹配的 HTML 元素的任何标准属性的值。我们将使用 jQuery Selectors 匹配所需的元素，然后我们将应用 attr(key, value) 方法设置该元素的属性值。
jQuery attr(name, value) method is used to set the value of any standard attribute of the matched HTML element(s). We will use jQuery Selectors to match the desired element(s) and then we will apply attr(key, value) method to set the attribute value for the element.
Example
以下是设置 anchor <a> 元素 title 属性的 jQuery 程序：
Following is a jQuery program to set the title attribute of an anchor <a> element:
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
$("button").click(function(){
$("#home").attr("title", "New Anchor Title");
/* Let's get and display changed title */
alert( "Changed Title = " + $("#home").attr("title"));
});
});
</script>
</head>
<body>
<p>Click the below button to see the result:</p>
<p><a id="home" href="index.htm" title="Tutorials Point">Home</a></p>
<button>Set Attribute</button>
<p>You can hover the Home link to verify the title before and after the change.</p>
</body>
</html>jQuery - Set Custom Attributes
jQuery data(name, value) 方法用于设置匹配的 HTML 元素的任何自定义属性的值。我们将使用 jQuery Selectors 匹配所需的元素，然后我们将应用 attr(key, value) 方法设置该元素的属性值。
jQuery data(name, value) method is used to set the value of any custom attribute of the matched HTML element(s). We will use jQuery Selectors to match the desired element(s) and then we will apply attr(key, value) method to set the attribute value for the element.
Example
以下是设置 <div> 元素 author-name 属性的 jQuery 程序：
Following is a jQuery program to set author-name attribute of a <div> element:
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
$("button").click(function(){
$("#home").data("author-name", "Nuha Ali");
/* Let's get and display changed author name */
alert( "Changed Name = " + $("#home").data("author-name"));
});
});
</script>
</head>
<body>
<p>Click the below button to see the result:</p>
<div id="home" data-author-name="Zara Ali" data-year="2022">
Just an Example Content
</div>
<br>
<button>Set Attribute</button>
</body>
</html>jQuery HTML/CSS Reference
您可以在以下页面获得操纵 HTML 和 CSS 内容的所有 jQuery 方法的完整参考： jQuery HTML/CSS Reference 。
You can get a complete reference of all the jQuery Methods to manipulate HTML and CSS content at the following page: jQuery HTML/CSS Reference.