首页 > 代码库 > jQuery与HTML

jQuery与HTML

2024-10-28 22:57:39   207人阅读

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

三个简单实用的用于 DOM 操作的 jQuery 方法：

  • text() - 设置或返回所选元素的文本内容
  • html() - 设置或返回所选元素的内容（包括 HTML 标记）
  • val() - 设置或返回表单字段的值
技术分享 
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script type="text/javascript" src="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/请输入">
<br/>
<button type="button" id="bton">click here</button>
</body>
</html>
View Code

显示属性值：attr()

技术分享 
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://www.mamicode.com/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="http://www.mamicode.com/请输入">
<br/>
<button type="button" id="bton">click here</button>
</body>
</html>
View Code

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

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

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

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

 

jQuery与HTML


联系
我们