Jquery 简明教程

jQuery - DOM Manipulation

jQuery 提供了许多方法以有效的方式操作 DOM。您无需编写庞大且复杂的代码来设置或获取任何 HTML 元素的内容。

jQuery provides a number of methods to manipulate DOM in efficient way. You do not need to write big and complex code to set or get the content of any HTML element.

jQuery DOM Manipulation

jQuery 提供诸如 attr() 、 html() 、 text() 和 val() 的方法，这些方法充当 getter 和 setter，以操作来自 HTML 文档的内容。

jQuery provides methods such as attr(), html(), text() and val() which act as getters and setters to manipulate the content from HTML documents.

以下是借助 jQuery 标准库方法可以在 DOM 元素上执行的一些基本操作 -

Here are some basic operations which you can perform on DOM elements with the help of jQuery standard library methods −

Extract the content of an element
Change the content of an element
Adding a child element under an existing element
Adding a parent element above an existing element
Adding an element before or after an existing element
Replace an existing element with another element
Delete an existing element
Wrapping content with-in an element

讨论 jQuery Attributes 时我们已经介绍了 attr() 方法，本章将讨论剩余的 DOM 内容操作方法 html() 、 text() 和 val() 。

We have already covered attr() method while discussing jQuery Attributes and remaining DOM content manipulation methods html(), text() and val() will be discussed in this chapter.

jQuery - Get Content

jQuery 提供了 html() 和 text() 方法来提取匹配的 HTML 元素的内容。以下是这两个方法的语法：

jQuery provides html() and text() methods to extract the content of the matched HTML element. Following is the syntax of these two methods:

$(selector).html();

$(selector).text();

jQuery text() 方法返回内容的纯文本值，而 html() 返回带有 HTML 标记的内容。您需要使用 jQuery 选择器来选择目标元素。

The jQuery text() method returns plain text value of the content where as html() returns the content with HTML tags. You will need to use jQuery selectors to select the target element.

Example

以下示例演示如何使用 jQuery text() 和 html() 方法获取内容：

Following example shows how to get the content with the jQuery text() and html() methods:

<!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() {
      $("#text").click(function(){
         alert($("p").text());
      });
      $("#html").click(function(){
         alert($("p").html());
      });
   });
</script>
</head>
<body>
   <p>The quick <b>brown fox</b> jumps over the <b>lazy dog</b></p>

   <button id="text">Get Text</button>
   <button id="html">Get HTML</button>
</body>
</html>

Get Form Fields

jQuery val() 方法用于从任何表单字段获取值。以下是该方法的简单语法。

jQuery val() method is used to get the value from any form field. Following is simple syntax of this method.

$(selector).val();

Example

以下是另一个示例，展示如何使用 jQuery 方法 val() 获取 input 字段的值：

Following is another example to show how to get the value an input field with jQuery method val() −

<!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() {
      $("#b1").click(function(){
         alert($("#name").val());
      });
      $("#b2").click(function(){
         alert($("#class").val());
      });
   });
</script>
</head>
<body>
   <p>Name: <input type="text" id="name" value="Zara Ali"/></p>
   <p>Class: <input type="text" id="class" value="Class 12th"/></p>

   <button id="b1">Get Name</button>
   <button id="b2">Get Class</button>
</body>
</html>

jQuery - Set Content

jQuery html() 和 text() 方法可用于设置匹配的 HTML 元素的内容。以下是设置值时这两个方法的语法：

jQuery html() and text() methods can be used to set the content of the matched HTML element. Following is the syntax of these two methods when they are used to set the values:

$(selector).html(val, [function]);

$(selector).text(val, [function]);

此处 val 是要为元素设置的文本内容的 HTML。我们可以向这些方法提供一个可选回调函数，该函数将在设置元素值时被调用。

Here val is he HTML of text content to be set for the element. We can provide an optional callback function to these methods which will be called when the value of the element will be set.

jQuery text() 方法设置内容的纯文本值，而 html() 方法设置带有 HTML 标记的内容。

The jQuery text() method sets plain text value of the content where as html() method sets the content with HTML tags.

Example

以下是使用 jQuery text() 和 html() 方法设置元素内容的方式：

Following example shows how to set the content of an element with the jQuery text() and html() methods:

<!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() {
      $("#text").click(function(){
         $("p").text("The quick <b>brown fox</b> jumps over the <b>lazy dog</b>");
      });
      $("#html").click(function(){
         $("p").html("The quick <b>brown fox</b> jumps over the <b>lazy dog</b>");
      });
   });
</script>
</head>
<body>
   <p>Click on any of the two buttons to see the result</p>

   <button id="text">Set Text</button>
   <button id="html">Set HTML</button>
</body>
</html>

Set Form Fields

jQuery val() 方法还用于从任何表单字段设置值。当它用于设置值时，以下为该方法的简单语法。

jQuery val() method is also used to set the value from any form field. Following is simple syntax of this method when it is used to set the value.

$(selector).val(val);

val 是要为输入字段设置的值。我们可以提供一个可选的回调函数，当字段值设置时将调用该回调函数。

Here val is he value to be set for the input field. We can provide an optional callback function which will be called when the value of the field will be set.

Example

以下是另一个示例，展示如何使用 jQuery 方法 val() 设置 input 字段值 −

Following is another example to show how to set the value an input field with jQuery method val() −

<!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() {
      $("#b1").click(function(){
         $("#name").val("Zara Ali");
      });
      $("#b2").click(function(){
         $("#class").val("Class 12th");
      });
   });
</script>
</head>
<body>
   <p>Name: <input type="text" id="name" value=""/></p>
   <p>Class: <input type="text" id="class" value=""/></p>

   <button id="b1">Set Name</button>
   <button id="b2">Set Class</button>
</body>
</html>

jQuery - Replacement Elements

jQuery replaceWith() 方法可用于将完整的 DOM 元素替换为另一个 HTML 或 DOM 元素。以下是方法的语法：

The jQuery replaceWith() method can be used to replace a complete DOM element with another HTML or DOM element. Following is the syntax of the method:

$(selector).replaceWith(val);

val 是您希望替换原始元素的内容。这可以是 HTML 或纯文本。

Here val is what you want to have instead of original element. This could be HTML or simple text.

Example

以下是一个示例，我们将用一个 <h1> 元素替换一个 <p> 元素，然后进一步用一个 <h2> 元素替换 <h1> 元素。

Following is an example where we will replace a <p> element with an <h1> element and then further we replace <h1> element with <h2> 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() {
      $("#b1").click(function(){
         $("p").replaceWith("<h1>This is new heading</h1>");
      });
      $("#b2").click(function(){
         $("h1").replaceWith("<h2>This is another heading</h2>");
      });
   });
</script>
</head>
<body>
   <p>Click below button to replace me</p>


   <button id="b1">Replace Paragraph</button>
   <button id="b2">Replace Heading</button>
</body>
</html>

jQuery HTML/CSS Reference

您可以在以下页面获取所有 jQuery 方法的完整参考，用于操作 CSS 和 HTML 内容： jQuery CSS/HTML Reference 。

You can get a complete reference of all the jQuery Methods to manipulate CSS and HTML content at the following page: jQuery CSS/HTML Reference.