js进阶 11-1 jquery中的页面内容操作的三个方法

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>