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>

View Code

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>

View Code

显示属性值：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>

View Code

2、设置内容 - text()、html() 以及 val()

我们将使用前一章中的三个相同的方法来设置内容：

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

下面的例子演示如何通过 text()、html() 以及 val() 方法来设置内容：

来源：https://www.cnblogs.com/abstract-fabulous/p/7197183.html

标签

脚本

jquery

jQuery与HTML

1、获得内容 - text()、html() 以及 val()

2、设置内容 - text()、html() 以及 val()