jquery中html与val得到使用-优快云博客

本文介绍了使用jQuery进行HTML元素的操作方法，包括读取和修改HTML内容，以及如何通过jQuery来处理用户交互事件，例如点击事件。此外，还展示了如何利用jQuery的val()方法来获取和设置表单输入字段的值，并实现对输入框默认提示文字的管理。

1.属性操作

2.设置html

　　、

3.程序（关于html）

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6 <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
 7 <script type="text/javascript">
 8     $(function(){
 9         //html
10         $("#city").click(function(){
11             alert($(this).html());
12         })
13         //
14         $("#game").click(function(){
15             $(this).html("<li>天津</li>");
16         })
17         
18     })
19 </script>
20 </head>
21 <body>
22     <p>你喜欢哪个城市?</p>
23     <ul id="city">
24         <li id="bj" name="BeiJing">北京</li>
25         <li>上海</li>
26         <li id="dj">东京</li>
27         <li id="se">首尔</li>
28     </ul>
29     <br><br>
30     <p>你喜欢哪款单机游戏?</p>
31     <ul id="game">
32         <li id="rl">红警</li>
33         <li>实况</li>
34         <li>极品飞车</li>
35         <li>魔兽</li>
36     </ul>
37 </body>
38 </html>

4.程序（关于val）

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6 <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
 7 <script type="text/javascript">
 8     $(function(){
 9         //获取焦点与失去焦点,val
10         $(":text").focus(function(){
11             var val=$(this).val();
12             if(val==this.defaultValue){
13                 $(this).val("");
14             }
15         }).blur(function(){
16             var val=this.value;
17             if($.trim(val)==""){
18                 this.value=this.defaultValue;
19             }
20         })
21     })
22 </script>
23 </head>
24 <body>
25     <input type="text" id="address" value="请输入邮箱地址"><br>
26     <input type="text" id="password" value="请输入邮箱密码"><br>
27     <input type="button" value="登录"><br><br><br>
28 </body>
29 </html>