菜鸟教程
教程 jquery tutorial

内容操作

jQuery 提供多种方法用于操作网页元素的内容，包括文本、HTML 以及表单元素的值，方便动态更新页面信息。

获取和设置文本内容

  • 获取文本内容
js 
  var text = $("p").text();
  • 设置文本内容
js 
  $("p").text("新的文本内容");

获取和设置 HTML 内容

  • 获取 HTML 内容
js 
  var html = $("div").html();
  • 设置 HTML 内容
js 
  $("div").html("<strong>加粗内容</strong>");

获取和设置表单元素的值

  • 获取表单值
js 
  var val = $("input").val();
  • 设置表单值
js 
  $("input").val("新值");

示例代码

在线代码演示
源码 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(document).ready(function () {
    // 设置段落文本
    $("#para").text("这是用 jQuery 设置的新文本。");
    // 设置div的HTML内容
    $("#content").html("<em>这是一段斜体文本。</em>");
    // 设置输入框的值
    $("#inputBox").val("初始值");
    // 点击按钮，获取输入框值并显示
    $("#btn").click(function () {
      alert("输入框的值是：" + $("#inputBox").val());
    });
  });
</script>

<p id="para">原始文本</p>
<div id="content">原始内容</div>
<input type="text" id="inputBox" />
<button id="btn">显示输入值</button>

相关内容