1：html()和text()的区别及使用 【html对应DOM中的innerHtml，text对应innerText】
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>
三：attr()
1：使用attr()方法指定一个参数时，返回参数对应的元素属性值；同时指定第2个参数时，将设置指定属性的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>attr()</title>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
</head>
<style type="text/css">
</style>
<script>
n = 0; //全局变量
$(function() {
$('#btn1').click(function() {
n--;
console.log(n);
if (n < 0)
n = 5;
$('img').attr('src', 'D:/图库/' + 'img' + n + '.jpg');
$('#show').text($('img').attr('src'));
});
$('#btn2').click(function() {
n++;
if (n > 5) {
n = 0;
}
$('img').attr('src', 'D:/图库/' + 'img' + n + '.jpg');
$('#show').text($('img').attr('src'));
})
})
</script>
<body>
<img src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1772101787,3097677950&fm=26&gp=0.jpg" width="200" height="100" />
<button id="btn1">上一张</button>
<button id="btn2">下一张</button>
<div id="show">
</div>
</body>
</html>