jquery设置值

jQuery 设置值的方法

jQuery 提供了多种方法来设置 HTML 元素的值，具体取决于元素的类型（如输入框、下拉框、文本等）。以下是一些常见的设置值的方法：

设置输入框的值

使用 .val() 方法可以设置输入框（如 <input>、<textarea>、<select>）的值：

$("#inputId").val("新的值");

设置 HTML 内容

使用 .html() 方法可以设置元素的 HTML 内容（包括标签）：

$("#elementId").html("<p>新的 HTML 内容</p>");

设置纯文本内容

使用 .text() 方法可以设置元素的纯文本内容（不解析 HTML 标签）：

$("#elementId").text("新的纯文本内容");

设置属性值

使用 .attr() 方法可以设置元素的属性值：

$("#elementId").attr("attributeName", "新的属性值");

设置 CSS 样式

使用 .css() 方法可以设置元素的 CSS 样式：

$("#elementId").css("propertyName", "value");

设置多个 CSS 样式

可以通过传递对象的方式设置多个 CSS 样式：

$("#elementId").css({
    "property1": "value1",
    "property2": "value2"
});

设置 data 属性

使用 .data() 方法可以设置元素的 data-* 属性：

$("#elementId").data("key", "value");

示例代码

以下是一个完整的示例，展示如何使用 jQuery 设置不同类型的值：

$(document).ready(function() {
    // 设置输入框的值
    $("#username").val("admin");

    // 设置 HTML 内容
    $("#content").html("<strong>加粗文本</strong>");

    // 设置纯文本内容
    $("#textContent").text("纯文本内容");

    // 设置属性值
    $("#link").attr("href", "https://example.com");

    // 设置 CSS 样式
    $("#box").css("color", "red");

    // 设置多个 CSS 样式
    $("#box").css({
        "background-color": "yellow",
        "font-size": "20px"
    });

    // 设置 data 属性
    $("#item").data("id", 123);
});

注意事项

• .val() 方法适用于表单元素，而 .html() 和 .text() 适用于普通元素。
• 使用 .html() 时，传入的字符串会被解析为 HTML，而 .text() 会将其作为纯文本处理。
• 修改 data-* 属性时，.data() 方法不会直接修改 DOM，而是存储在 jQuery 的内部对象中。