1、获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法：
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
5 <script type="text/javascript">
6 $(document).ready(function(){
7 $("#bton1").click(function(){
8 alert($("p").html());
9 });
10 });
11 </script>
12 </head>
13
14 <body>
15 <p>hhh<br>hh</p>
16 <button id="bton1" type="button">click here</button>
17 </body>
18 </html>
val:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#bton").click(function(){
alert($("#t").val());
});
})
</script>
</head>
<body>
<input id="t" type="text" value="请输入">
<br/>
<button type="button" id="bton">click here</button>
</body>
</html>
显示属性值：attr()
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#bton").click(function(){
alert($("#t").attr("id"));
});
})
</script>
</head>
<body>
<input id="t" type="text" value="请输入">
<br/>
<button type="button" id="bton">click here</button>
</body>
</html>
2、设置内容 - text()、html() 以及 val()
我们将使用前一章中的三个相同的方法来设置内容：
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
下面的例子演示如何通过 text()、html() 以及 val() 方法来设置内容：
时间： 2024-12-16 07:16:31