jQuery 操作文本内容

阿帆fan 2021-06-25

359

jQuery 操作文本内容

+ 操作元素内的文本和超文本

1. html()
=> 语法:
    1. 元素集合.html()
      + 获取该元素的超文本内容, 以字符串的形式返回
      + 获取的时候为了保证 html 结构只能获取第一个的元素的超文本内容
    2. 元素集合.html('内容')
      + 设置元素集合内元素的超文本内容
      + 完全覆盖式的写入
      + 隐式迭代: 元素集合内有多少元素, 就写入多少元素

2. text()
=> 语法:
    1. 元素集合.text()
      + 获取该元素的文本内容, 以字符串的形式返回
      + 因为是文本内容, 不涉及 html 结构, 所以拿到的是所有元素的文本内容
      + 以一个字符串的形式返回
    2. 元素集合.text('内容')
      + 设置元素集合内元素的文本内容
      + 完全覆盖式的写入
      + 隐式迭代: 元素集合内有多少元素, 就写入多少元素

3. val()
=> 语法:
    1. 元素集合.val()
      + 获取元素集合内元素的 value 值
    2. 元素集合.val('内容')
      + 设置元素集合内元素的 value 值
      + 完全覆盖式的写入
      + 隐式迭代: 元素集合内有多少元素, 就写入多少元素

实战：

<!DOCTYPE html>
<html lang="en">
  <title>Document</title>
</head>
<body>


  <div>
    <p>我是一段超文本内容</p>
  </div>


  <div>
    <p>我是一段超文本内容</p>
  </div>
  <div>
    <p>我是一段超文本内容</p>
  </div>
  <div>
    <p>我是一段超文本内容</p>
  </div>
  <div>
    <p>我是一段超文本内容</p>
  </div>
  <div>
    <p>我是一段超文本内容</p>
  </div>


  <input type="text" value="你好 世界">
  <input type="text" value="你好 世界">
  <input type="text" value="你好 世界">
  <input type="text" value="你好 世界">
  <input type="text" value="你好 世界">


  <script src="./jquery/jquery.min.js"></script>
  <script>
    // 1. html()
    // 获取
    console.log($('div').html())
    // 设置
    $('div').html('<span>我是新来的</span>')




    // 2. text()
    // 获取
    console.log($('div').text())
    // 设置
    $('div').text('<span>我是新来的 span 标签</span>')




    // 3. val()
    // 获取
    console.log($('input').val())
    // 设置
    $('input').val('hello world')
</script>
</body>
</html>


复制

@阿帆fan

点这里给我留言

数据库

文章转载自阿帆fan，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

jQuery 操作文本内容

评论