提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

猴子也能学会的jQuery第九期——jQuery内容操作

jQuery 操作 内容 学会 猴子
2023-09-11 14:15:12 时间

​

​

📚系列文章—目录🔥

猴子也能学会的jQuery第一期——什么是jQuery

猴子也能学会的jQuery第二期——引入jQuery

猴子也能学会的jQuery第三期——使用jQuery

猴子也能学会的jQuery第四期——jQuery选择器大全

猴子也能学会的jQuery第五期——jQuery样式操作

猴子也能学会的jQuery第六期——jQuery事件（上）

猴子也能学会的jQuery第六期——jQuery事件（中）

猴子也能学会的jQuery第六期——jQuery事件（下）

猴子也能学会的jQuery第七期——jQuery动画（上）

猴子也能学会的jQuery第七期——jQuery动画（下）

猴子也能学会的jQuery第八期——jQuery属性操作

猴子也能学会的jQuery第九期——jQuery内容操作

猴子也能学会的jQuery第十期——jQuery元素操作（上）

猴子也能学会的jQuery第十期——jQuery元素操作（下）

猴子也能学会的jQuery第十一期——jQuery尺寸和位置操作

猴子也能学会的jQuery第十二期——jQuery遍历（上）

猴子也能学会的jQuery第十二期——jQuery遍历（中）

猴子也能学会的jQuery第十二期——jQuery遍历（下）

猴子也能学会的jQuery——参考手册

🔥未完待续...

文章目录

📚系列文章—目录🔥

📌回顾上期

🎯jQuery内容操作

🧩jQuery中内容操作方法

📌回顾上期

上期讲了jQuery属性操作。

  • jQuery提供了一些属性操作的方法，主要包括prop()、attr()和data()等等。通过这些方法，能够实现不同的需求。

🎯jQuery内容操作

  • jQuery 中非常重要的部分，就是操作 DOM 的能力。
  • jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。
  • jQuery提供了内容操作的方法，用来操作元素的内容，根据不同的需求，可以使用html()方法、text()方法或val()方法。

🧩jQuery中内容操作方法

  • jQuery中操作元素内容的方法，主要包括html()方法、text()方法和val()方法。html()方法用于获取或设置元素的HTML内容，text()方法用于获取或设置元素的文本内容，val()方法用来获取或设置表单元素的value值。具体使用说明如下表所示。

  • 语法说明
    html()获取第一个匹配元素的HTML内容
    html(content)设置第一个匹配元素的HTML内容
    text()获取所有匹配元素包含的文本内容组合起来的文本
    text(content)设置所有匹配元素的文本内容
    val()获取表单元素的value值
    val(value)设置表单元素的value值

  • 需要注意的是，val()方法可以操作表单（select、radio和checkbox）的选中情况，当要获取的元素是<select>元素时，返回结果是一个包含所选值的数组；当要为表单元素设置选中情况时，可以传递数组参数。

  • 为了更好地理解元素内容相关方法的使用，下面通过具体代码进行演示。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ajax study</title>
  <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
</head>

<body>
  <div>
    <span>我是内容</span>
  </div>
  <input type="text" value="请输入内容">

</body>
<script>
  // 1. 获取设置元素内容html()
  console.log($("div").html()); // 输出结果：<span>我是内容</span>
  $("div").html("<span>hello</span>"); // 修改div的内容（HTML会被解析）
  // 2. 获取设置元素文本内容text()
  console.log($("div").text()); // 输出结果：hello
  $("div").text("<span>123</span>"); // 设置div的文本内容（不解析HTML）
  // 3. 获取设置表单值val()
  console.log($("input").val()); // 输出结果：请输入内容
  $("input").val("123"); // 设置表单元素的值为123
</script>

</html>

  • 通过代码和运行结果可以看出，使用html()方法获取的元素内容含有HTML标签（如span），而使用text()方法获取的是去除HTML标签的内容，将该元素包含的文本内容组合起来的文本。因此，读者根据项目的需求，在开发中选择合适的方法使用即可。

 

📚持续更新🔥

相关文章