jquery中的页面内容操作的三个方法
一、总结
一句话总结：记三个方法即可。text，html，val。因为这里是方法，所以设置值的是后面方法的参数。
1、jquery中的页面内容操作的三个方法？
text，html，val
- text()方法:获取和设置某个元素的“文本内容”。
- html()方法:获取和设置某个元素中的“HTML内容”
- val()方法：获取或设置“表单元素”的值。
30 // alert($('#main').text())
2、jquery中如何设置页面内容操作来设置元素的值？
因为这里是方法，所以设置值的是后面方法的参数
$('#title').html('锦瑟-<em>李商隐</em>')
二、页面内容操作
1、相关知识
- text()方法:获取和设置某个元素的“文本内容”。
- html()方法:获取和设置某个元素中的“HTML内容”
- val()方法：获取或设置“表单元素”的值。
2、代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <style> 4 </style> 5 <head> 6 <meta charset="UTF-8"> 7 <title>演示文档</title> 8 <script type="text/javascript" src="jquery-3.1.1.min.js"></script> 9 <style> 10 h1{ 11 margin-left: 100px 12 } 13 </style> 14 </style> 15 </head> 16 <body> 17 <div id="main"> 18 <h1 id="title">锦瑟</h1> 19 <p>锦瑟无端五十弦，一弦一柱思华年。</p> 20 <p>庄生晓梦迷蝴蝶，望帝春心托杜鹃。</p> 21 <p>沧海月明珠有泪，蓝田日暖玉生烟。</p> 22 <p>此情可待成追忆？只是当时已惘然。</p> 23 </div> 24 <input type="button" id="btn1" value="获取"> 25 <input type="button" id="btn2" value="修改"> 26 <input type="button" id="btn3" value="删除"> 27 <script type="text/javascript"> 28 $(function(){ 29 $('#btn1').click(function(){ 30 // alert($('#main').text()) 31 // alert($('#main').html()) 32 alert($(this).val()) 33 }) 34 $('#btn2').click(function(){ 35 //$('#title').text('锦瑟-李商隐') 36 $('#title').html('锦瑟-<em>李商隐</em>') 37 $('#btn1').val('获取内容') 38 }) 39 }) 40 </script> 41 </body> 42 </html>