jquery 设置值

jQuery 设置值的方法

jQuery 提供了多种方法来设置 HTML 元素的值，包括表单元素、文本内容、属性等。以下是常见的设置值的方法：

设置表单元素的值

使用 val() 方法可以设置或获取表单元素（如 input、select、textarea）的值。

// 设置 input 的值
$("#inputId").val("新值");

// 设置 select 的值
$("#selectId").val("选项值");

// 设置 textarea 的值
$("#textareaId").val("多行文本内容");

设置 HTML 内容

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

// 设置 div 的 HTML 内容
$("#divId").html("<p>这是新内容</p>");

设置文本内容

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

// 设置 div 的文本内容
$("#divId").text("这是纯文本内容");

设置属性值

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

// 设置 img 的 src 属性
$("#imgId").attr("src", "new-image.jpg");

// 设置 a 标签的 href 属性
$("#linkId").attr("href", "https://example.com");

设置 CSS 样式

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

// 设置 div 的背景颜色
$("#divId").css("background-color", "red");

// 同时设置多个样式
$("#divId").css({
    "color": "white",
    "font-size": "16px"
});

设置 data 属性

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

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

// 设置多个 data 属性
$("#elementId").data({
    "id": 123,
    "name": "example"
});

注意事项

• val() 方法适用于表单元素，而 html() 和 text() 适用于普通元素。
• attr() 方法用于设置标准属性，而 data() 方法用于设置自定义 data-* 属性。
• 使用 css() 方法时，属性名可以使用驼峰式（如 backgroundColor）或短横线式（如 background-color）。

通过以上方法，可以灵活地设置页面元素的值和属性。