05-jQuery-DOM操作-内容操作html()、text()、val()

Gy-qwert

已于 2024-02-18 20:57:44 修改

阅读量653

点赞数

分类专栏： javaweb-HTML\CSS\JS\jQuery 文章标签： html jquery javascript

于 2023-05-24 02:10:23 首次发布

本文链接：https://blog.csdn.net/qq_47128897/article/details/130838607

版权

javaweb-HTML\CSS\JS\jQuery 专栏收录该内容

48 篇文章 2 订阅

订阅专栏

jQuery 提供了三个用于内容操作的方法，分别是 html()、text() 和 val()，它们分别用来获取或设置指定元素的 HTML 内容、文本内容和值属性。下面分别进行详细介绍。

1、html()：html() 方法用来获取或设置指定元素的 HTML 内容。如果该方法不传入任何参数，则会返回第一个匹配元素的 HTML 内容。如果传入一个字符串参数，则会将 HTML 内容设置为该字符串，并返回 jQuery 对象本身，以便进行链式调用。

html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My Page</title>
  <script src="//cdn.bootcss.com/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(() => {
      // 获取元素的 HTML 内容
      const divHtml = $('div').html();
      console.log('div element HTML:', divHtml);
      
      // 设置元素的 HTML 内容
      $('div').html('<p>Hello world!</p>');
    });
  </script>
</head>
<body>
  <div>Some content here</div>
</body>
</html>

在上述代码中，使用 $ 或 jQuery 对象获取 <div> 元素对象，然后调用 html() 方法获取或设置其 HTML 内容。例如，获取 <div> 元素的 HTML 内容可以在控制台中打印输出。

需要注意的是，如果被操作的元素有多个，只会针对第一个匹配的元素进行操作。

2、text()：text() 方法用来获取或设置指定元素的文本内容。如果该方法不传入任何参数，则会返回第一个匹配元素的文本内容。如果传入一个字符串参数，则会将文本内容设置为该字符串，并返回 jQuery 对象本身，以便进行链式调用。

html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My Page</title>
  <script src="//cdn.bootcss.com/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(() => {
      // 获取元素的文本内容
      const divText = $('div').text();
      console.log('div element text:', divText);
      
      // 设置元素的文本内容
      $('div').text('Hello world!');
    });
  </script>
</head>
<body>
  <div>Some content here</div>
</body>
</html>

在上述代码中，使用 $ 或 jQuery 对象获取 <div> 元素对象，然后调用 text() 方法获取或设置其文本内容。例如，获取 <div> 元素的文本内容可以在控制台中打印输出。

3、val()：val() 方法用来获取或设置指定表单元素的值属性，包括 <input>、<textarea> 和 <select> 等元素。如果该方法不传入任何参数，则会返回第一个匹配元素的值属性。如果传入一个字符串参数，则会将该元素的值属性设置为该字符串，并返回 jQuery 对象本身，以便进行链式调用。

html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My Page</title>
  <script src="//cdn.bootcss.com/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(() => {
      // 获取表单元素的值属性
      const inputVal = $('input').val();
      console.log('input element value:', inputVal);
      
      // 设置表单元素的值属性
      $('input').val('new value');
    });
  </script>
</head>
<body>
  <input type="text" value="initial value">
</body>
</html>

在上述代码中，使用 $ 或 jQuery 对象获取 <input> 元素对象，然后调用 val() 方法获取或设置其值属性。例如，获取 <input> 元素的值属性可以在控制台中打印输出。

Gy-qwert

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
05-jQuery-DOM操作-内容操作html()、text()、val()

jQuery 提供了三个用于内容操作的方法，分别是 html()、text() 和 val()，它们分别用来获取或设置指定元素的 HTML 内容、文本内容和值属性。下面分别进行详细介绍。
复制链接

扫一扫