1. 设置文本内容 – text()

大白话解释： 这个方法就像你给元素写纯文本笔记一样。不管元素原来有什么内容，都会被替换成你提供的新文本。

特点： 不会解析HTML标签，插入的HTML标签会显示为普通文本。

// 设置单个元素的文本内容
$(‘#element’).text(‘新的文本内容’);

// 设置多个元素的文本内容
$(‘.elements’).text(‘所有元素都将显示这段文本’);
📝 示例演示：

输入新文本：

原始文本内容

2. 设置HTML内容 – html()

大白话解释： 如果你想在元素内添加带格式的内容（比如加粗、链接、图片等），这个方法就是你的选择。

特点： 会解析HTML标签，适合添加结构化内容。

// 设置元素的HTML内容
$(‘#element’).html(‘<strong>加粗文本</strong> 和 <em>斜体文本</em>’);

// 添加复杂内容
$(‘#container’).html(‘<div class=”box”><h3>标题</h3><p>段落内容</p></div>’);
📝 示例演示：

输入HTML内容：

原始内容 斜体文本

3. 设置表单值 – val()

大白话解释： 专门用于设置输入框、下拉框、单选复选框等表单元素的值。

特点： 只适用于表单元素，是处理用户输入的重要方法。

// 设置文本框的值
$(‘#username’).val(‘张三’);

// 设置下拉框选中项
$(‘#country’).val(‘china’);

// 设置复选框选中状态
$(‘#agree’).val(true);
📝 示例演示：

文本框：

下拉选择：

复选框：

文本框当前值：

下拉框当前值：

复选框状态：

4. 设置属性 – attr()

大白话解释： 这个方法用于设置HTML元素的属性值，比如id、class、href、src等。

特点： 适用于大多数HTML属性，可以一次设置一个或多个属性。

// 设置单个属性
$(‘#link’).attr(‘href’, ‘https://example.com’);

// 设置多个属性
$(‘#image’).attr({
  src: ‘new-image.jpg’,
  alt: ‘新的图片描述’,
  title: ‘鼠标悬停提示’
});
📝 示例演示：

设置链接地址：

设置提示文本：

链接元素：

点击这里

将鼠标悬停在链接上查看提示文本

✅ 综合练习

练习使用多种jQuery方法设置内容和属性：

设置标题文本：

设置背景颜色：

切换边框样式：

练习区域

使用左侧控件修改此区域的样式和内容

// 综合练习中的代码示例
// 设置文本
$(‘#exTitle’).text(‘新标题’);

// 设置CSS样式
$(‘#exBox’).css(‘background’, ‘#e3f2fd’);

// 切换类
$(‘#exBox’).toggleClass(‘bordered’);
/* CSS样式 */
.bordered { border: 3px solid #3498db !important; }