jquery 学习之二 属性(html()与html(val))

下面是关于“jquery 学习之二 属性(html()与html(val))”的完整攻略。

标题

什么是属性操作

在 jQuery 中，属性操作是指操作 HTML 标签的属性，包括读取、添加、修改和删除属性。jQuery 提供了丰富的属性操作方法，其中包括 html() 和 val() 方法。

html() 方法

html() 方法用于获取或设置元素的 HTML 内容。调用该方法时不传入任何参数时，表示获取元素的 HTML 内容。调用该方法时传入参数（字符串）时，则表示将参数作为元素的 HTML 内容进行替换或设置。

以下示例演示如何获取 HTML 内容和设置 HTML 内容：

<div id="demo">
  <p>这是一个段落。</p>
</div>

// 获取元素的 HTML 内容
var content = $("#demo").html();
console.log(content); // 输出结果为 "<p>这是一个段落。</p>"

// 设置元素的 HTML 内容
$("#demo").html("<h1>jQuery 教程</h1>");

上述示例中，$("#demo").html() 用于获取 id 为 demo 的元素的 HTML 内容，输出结果为 <p>这是一个段落。</p>。$("#demo").html("<h1>jQuery 教程</h1>") 用于将 id 为 demo 的元素的 HTML 内容替换为 <h1>jQuery 教程</h1>。

需要注意的是，使用 html() 方法设置元素的 HTML 内容时，会将原有的 HTML 内容全部替换，如果想要添加新的 HTML 内容可以使用 append() 或 prepend() 方法。

val() 方法

val() 方法用于获取或设置表单元素的值。调用该方法时不传入任何参数时，表示获取表单元素的值。调用该方法时传入参数（字符串）时，则表示将参数作为表单元素的值进行替换或设置。

以下示例演示如何获取表单元素的值和设置表单元素的值：

<input type="text" id="name" value="">

// 获取文本框的值
var value = $("#name").val();
console.log(value); // 输出结果为空

// 设置文本框的值
$("#name").val("hello world");

上述示例中，$("#name").val() 用于获取 id 为 name 的文本框的值，输出结果为空。$("#name").val("hello world") 用于将 id 为 name 的文本框的值替换为字符串 "hello world"。

需要注意的是，不同类型的表单元素有不同的值类型，例如 checkbox 和 radio 元素的值是 boolean 类型，select 元素的值是字符串或数组。

总结

在 jQuery 中，html() 和 val() 方法是常用的属性操作方法，分别用于操作元素的 HTML 内容和表单元素的值，使用时需要注意参数的传递方式以及值类型的转换。

以上就是关于“jquery 学习之二 属性(html()与html(val))”的完整攻略，希望对您有所帮助。