1、获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法:
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容(包括 HTML 标记)
- val() - 设置或返回表单字段的值
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!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()
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!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() 方法来设置内容: