0%

3.4.5 操作元素内容的相关方法

发表于 更新于 分类于 ， ，

3.4.5 操作元素内容的相关方法

jQuery 还提供了以下方法来访问或设置DOM元素的内容,包括访问或设置这些DOM元素的innerHTML属性、文本内容和value属性。

获取或设置DOM元素的HTML内容

方法 描述
html() 返回jQuery对象包含的第一个匹配的DOM元素的HTML内容(也就是返回其innerHTML属性值)。不能在XML文档中使用该方法,可以在HTML文档中使用。
html(value) 设置jQuery对象包含的所有DOM元素的HTML内容(也就是同时设置它们的innerHTML属性值)。不能在XML文档中使用该方法,可以在HTML文档中使用。
## 获取或设置DOM元素的文本内容 ##
方法 描述
text() 返回jQuery对象包含的所有DOM元素的文本内容(会剔除该DOM元素里所有的XML、HTML标签)。该方法对XML文档和HTML文档都有作用。
text(val) 设置jQuery对象包含的所有DOM元素的文本内容。该方法对XML文档和HTML文档都有作用。

获取或设置表单控件的value属性值

方法 描述
val() 返回jQuery对象包含的第一个匹配的DOM元素的value值,实际上就是返回表单控件的value属性值。该方法可返回字符串和数组(例如多选框和允许多选的下拉列表框)。
val(value) 为jQuery对象包含的所有DOM元素设置单个value属性值,实际上就是设置表单控件的value属性值。
val(Array<String>) 为jQuery对象包含的所有DOM元素设置多个value属性值。主要用于操作复选框和允许多选的下拉列表框。

程序示例

下面的程序示范了操作元素内容的相关方法的用法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html>

<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> 操作HTML内容的工具方法 </title>
</head>

<body>
	<div></div>
	<div></div>
	<input id="book" name="book" type="text" />
	<br />
	<input id="desc" name="desc" type="text" />
	<br />
	<select id="gender">
		<option value="male">男人</option>
		<option value="female">女人</option>
	</select>
	<br />
	<select id="publish" multiple="multiple">
		<option value="phei">电子工业出版社</option>
		<option value="ptpress">人民邮电出版社</option>
	</select>
	<br />
	<script type="text/javascript" src="../jquery-3.1.1.js">
	</script>
	<script type="text/javascript">
		// 设置body下的div元素的内容
		$("body>div").html("疯狂前端开发讲义");

		// 设置所有input元素的值
		$(":input").val("疯狂XML讲义");

		// // 为所有的<select.../>元素设置value值
		$("select").val(["female", "ptpress", "phei"]);

		// // 仅获取jQuery元素的text部分，下面将输出java:疯狂Java讲义
		console.log($("<div>java:<span>疯狂Java讲义</span></div>").text());
	</script>
</body>

</html>

原文链接: 3.4.5 操作元素内容的相关方法