jQuery 文本属性值操作
# jQuery 文本属性值操作
jQuery 提供了方便的方法来获取和设置元素的内容、文本以及表单的值。以下是常用的文本属性值操作方法：
# 1. 获取或设置元素内容 html()
html() 方法用于获取或设置元素的 HTML 内容，相当于原生 JavaScript 中的 innerHTML。
// 获取元素的 HTML 内容
var content = $('#element').html();
console.log('HTML 内容:', content);
// 设置元素的 HTML 内容
$('#element').html('<p>新内容</p>');
1
2
3
4
5
6
2
3
4
5
6
语法：
.html() // 获取元素的 HTML 内容
.html(HTML字符串) // 设置元素的 HTML 内容
1
2
2
# 2. 获取或设置元素文本内容 text()
text() 方法用于获取或设置元素的纯文本内容，相当于原生 JavaScript 中的 innerText 或 textContent。
// 获取元素的文本内容
var textContent = $('#element').text();
console.log('文本内容:', textContent);
// 设置元素的文本内容
$('#element').text('新的文本内容');
1
2
3
4
5
6
2
3
4
5
6
语法：
.text() // 获取元素的文本内容
.text(文本字符串) // 设置元素的文本内容
1
2
2
# 3. 获取或设置表单的值 val()
val() 方法用于获取或设置表单元素的值（如输入框、选择框等），相当于原生 JavaScript 中的 value。
// 获取表单元素的值
var inputValue = $('#inputElement').val();
console.log('表单值:', inputValue);
// 设置表单元素的值
$('#inputElement').val('新值');
1
2
3
4
5
6
2
3
4
5
6
语法：
.val() // 获取表单元素的值
.val(值) // 设置表单元素的值
1
2
2
# 4. 综合示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 文本属性值操作示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// 获取元素的 HTML 内容
var htmlContent = $('#htmlElement').html();
console.log('HTML 内容:', htmlContent);
// 设置元素的 HTML 内容
$('#htmlElement').html('<p>这是新的 HTML 内容</p>');
// 获取元素的文本内容
var textContent = $('#textElement').text();
console.log('文本内容:', textContent);
// 设置元素的文本内容
$('#textElement').text('这是新的文本内容');
// 获取表单元素的值
var inputValue = $('#inputElement').val();
console.log('表单值:', inputValue);
// 设置表单元素的值
$('#inputElement').val('新表单值');
});
</script>
</head>
<body>
<div id="htmlElement"><p>原始 HTML 内容</p></div>
<div id="textElement">原始文本内容</div>
<input type="text" id="inputElement" value="原始表单值">
</body>
</html>
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
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
编辑此页 (opens new window)
上次更新: 2024/12/28, 18:32:08