jquery赋值

jQuery 赋值方法

jQuery 提供多种方式为 HTML 元素赋值，主要包括操作 DOM 元素属性、内容或表单值。以下是常见场景的赋值方法：

表单元素赋值

• 输入框（input/text）
  使用 val() 方法设置或获取值：

  $("#inputId").val("新值"); // 赋值
  let value = $("#inputId").val(); // 取值

• 复选框（checkbox）
  通过 prop() 设置选中状态：

  $("#checkboxId").prop("checked", true); // 勾选

• 单选按钮（radio）
  设置选中状态需匹配 value 属性：

  $("input[name='radioName'][value='1']").prop("checked", true);

• 下拉框（select）
  通过 val() 设置选中项：

  $("#selectId").val("optionValue"); // 根据option的value匹配

HTML 内容赋值

• 文本/HTML 内容
  text() 和 html() 分别用于纯文本和带标签的内容：

  $("#divId").text("纯文本内容"); // 不解析HTML标签
  $("#divId").html("<b>加粗文本</b>"); // 解析HTML标签

属性赋值

• 修改元素属性
  使用 attr() 或 prop()（推荐用于布尔属性如 checked）：

  $("#imgId").attr("src", "new_image.jpg"); // 修改src属性
  $("#linkId").prop("href", "https://example.com"); // 修改href属性

数据存储

• 自定义数据属性
  通过 data() 方法存取数据（不会修改DOM）：

  $("#element").data("key", "value"); // 存储数据
  let storedValue = $("#element").data("key"); // 读取数据

注意事项

• 表单元素建议优先使用 val()，而非 attr("value")。
• 布尔属性（如 disabled、checked）使用 prop() 更可靠。
• 直接修改 DOM 内容时，注意防范 XSS 攻击，避免拼接未转义的 HTML。

示例综合代码：

// 表单赋值示例
$("#username").val("John Doe");
$("#agreeTerms").prop("checked", true);

// 内容与属性示例
$("#message").html("<em>重要通知</em>");
$("#logo").attr("alt", "公司标志");