jQuery操作页面元素之元素内容操作

1：html()和text()的区别及使用

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="utf-8">
 6     <!--#id 用于绑定元素id来控制元素的style-->
 7     <style type="text/css">
 8         #btn {
 9             background-color: aliceblue;
10             width: 100px;
11             height: 50px;
12         }
13         
14         button {
15             background-color: brown;
16             width: 100px;
17             height: 100px;
18         }
19         
20         h1 {
21             font-style: initial;
22         }
23     </style>
24     <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
25     </script>
26 </head>
27 <script>
28     $(function() {
29         //$('button')绑定了所有的button
30         $('#btn').click(function() {
31             //a获取返回的内容,$为jQuery()函数.#id做为$()函数的参数返回的是jQuery对象.
32             console.log(($('#my_div').html()))
33         })
34 
35         $('#btn1').click(function() {
36             alert($('#my_div').text())
37         })
38 
39         $('#btn2').click(function() {
40                 $('#show').html('<h1>html设置内容</h1>')
41             })
42             //text()显示的是纯文本,不能处理HTML标签
43         $('#btn3').click(function() {
44             $('#show').text('<h1>text设置内容</h1>')
45         })
46     })
47 </script>
48 val
49 
50 <body>
51     <div id="my_div">
52         <p>HFC网与ADSL网的区别.</p>
53     </div>
54     <div id="show">
55         显示<br>
56     </div>
57     <!--html()类似Dom中的innerHTML：不但会读取元素内的内容还会将其子标签读出包括HTML代码-->
58     <button id="btn" type="button">使用html()读取内容</button><br>
59     <!--text()类似于innerText只能读取纯文本-->
60     <button id="btn1" type="button">text()读取</button><br>
61     <button id="btn2" type="button">使用html()来设置内容</button><br>
62     <button id="btn3" type="button">使用text()来设置内容</button><br>
63 </body>
64 
65 </html>

2:val()方法用于读取或设置表单字段的值，无参数时方法返回字段的值，有参数时将参数设置为字段值。

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="utf-8">
 6     <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
 7 </head>
 8 
 9 <body>
10     <form>
11         <input type="text" />
12         <button id="btn1">读内容</button>
13         <button id='btn2'>写内容</button>
14         <div id="show"></div>
15     </form>
16     <script>
17         $(function() {
18             $('#btn1').click(function() {
19                 //读输入框内容,$(:属性)
20                 $('div').text($(':text').val())
21             })
22             $('#btn2').click(function() {
23                 $(':text').val('val的参数用来设置内容')
24             })
25         })
26     </script>
27 </body>
28 
29 </html>

jQuery操作页面元素之元素内容操作

猜你喜欢