jQuery - 设置内容和属性

jQuery 是一种基于 JavaScript 开发的跨浏览器 JavaScript 库。它可以简化 HTML 文件中的 HTML 文档遍历、事件处理、动画以及 AJAX 操作等任务。其中，jQuery 的设置内容和属性的方法非常常用，本文将详细介绍 jQuery 设置内容和属性的语法以及功能。

设置内容

使用 jQuery 来设置 HTML 元素的内容，有多种方法。以下详细介绍这些设置内容的方法：

text() 方法用于设置或返回指定元素的文本内容，不保留该元素的任何 HTML 标记。语法如下：

$(selector).text(content)

其中，selector 用于指定要设置文本的元素，content 是要设置的文本内容。

例如，以下代码将一个 span 元素的文本内容设置为 “Hello World”：

$("span").text("Hello World");

html() 方法用于设置或返回元素的 HTML 内容。语法如下：

$(selector).html(content)

其中，selector 用于指定要设置 HTML 的元素，content 是要设置的 HTML 内容。

例如，以下代码将一个 div 元素的 HTML 内容设置为一个 h1 标题和一个段落：

$("div").html("<h1>Hello</h1><p>World</p>");

val() 方法用于设置或返回表单元素的值。语法如下：

$(selector).val(value)

其中，selector 用于指定要设置值的表单元素，value 是要设置的值。

例如，以下代码将一个 input 元素的值设置为 “John”：

$("input").val("John");

设置 HTML 元素的属性同样也有多种方法。以下详细介绍这些设置属性的方法：

attr() 方法用于设置或返回元素的属性值。语法如下：

$(selector).attr(attributeName, value)

其中，selector 用于指定要设置属性的元素，attributeName 是要设置的属性名，value 是要设置的属性值。

例如，以下代码将一个 img 元素的 src 属性设置为 “image.jpg”：

$("img").attr("src","image.jpg");

prop() 方法用于设置或返回属性值。与 attr() 方法不同的是，prop() 方法更适合用于处理布尔值的属性，如 checked、disabled 等。语法如下：

$(selector).prop(propertyName, value)

其中，selector 用于指定要设置属性的元素，propertyName 是要设置的属性名，value 是要设置的属性值。

例如，以下代码将一个 checkbox 元素的 checked 属性设置为 true：

$("input:checkbox").prop("checked", true);

css() 方法用于设置或返回元素的样式属性值。语法如下：

$(selector).css(property, value)

其中，selector 用于指定要设置样式的元素，property 是要设置的样式属性名，value 是要设置的属性值。

例如，以下代码将一个 div 元素的背景颜色设置为红色：

$("div").css("background-color", "red");

以上就是 jQuery 设置内容和属性的方法和语法了。这些方法非常常用，可以让你轻松地操作 HTML 元素的内容和属性，进而实现网站的动态效果。