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>
原文：https://www.cnblogs.com/1314bjwg/p/12275278.html