jQuery学习笔记(2)

浏览数：18 / 时间：2015年06月09日

val()

当鼠标放上去的时候,文本消失,鼠标拿开,文本恢复

效果图:

code as below:

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head runat="server">
 3     <script src="Scripts/jquery-1.11.2.js" type="text/javascript"></script>
 4     <script type="text/javascript">
 5 
 6         $(function () {
 7             //var p_html = $("p").html(); //html() 同js中的innerHTML属性
 8             //alert(p_html);
 9 
10             //var p_text = $("p").text(); //text() 同js中的innerText属性
11             //alert(p_text);
12 
13 
14             //对地址框进行操作
15             $("#address").focus(function () {  //获得鼠标焦点 focus()同js中的onfocus()方法
16                 var txt_value = $(this).val();
17                 if (txt_value == "请输入邮箱地址") {
18                     $(this).val("");
19                 }
20             });
21 
22             $("#address").blur(function () {  //失去鼠标焦点 blur()同js中的onblur()方法
23                 var txt_value = $(this).val();
24                 if (txt_value == "") {
25                     $(this).val("请输入邮箱地址");
26                 }
27             });
28 
29             //对密码框进行操作
30             $("#password").focus(function () {
31                 var txt_value = $(this).val();
32                 if (txt_value == "请输入邮箱密码") {
33                     $(this).val("");
34                 }
35             });
36 
37             $("#password").blur(function () {
38                 var txt_value = $(this).val();
39                 if (txt_value == "") {
40                     $(this).val("请输入邮箱密码");
41                 }
42             });
43 
44 
45             //使用defaultValue
46             //地址框
47             $("#address").focus(function () {
48                 var txt_value = $(this).val();
49                 if (txt_value == this.defaultValue) {  //this.defaultValue就是当前文本框的默认值
50                     $(this).val("");
51                 }
52             
53             });
54             $("#address").blur(function () {
55                 var txt_value = $(this).val();
56                 if (txt_value == "") {  //this.defaultValue就是当前文本框的默认值
57                     $(this).val(this.defaultValue);
58                 }
59 
60             });
61 
62             //密码框同上
63 
64         });
65     </script>
66     <title></title>
67 </head>
68 <body>
69     <form id="form1" runat="server">
70     <div>
71         <p title="选择你最喜欢的水果">
72             <strong>你最喜欢的水果是?</strong></p>
73         <input type="text" id="address" value="请输入邮箱地址" /><br />
74         <input type="text" id="password" value="请输入邮箱密码" /><br />
75          <input type="button" value="登陆"/>
76     </div>
77     </form>
78 </body>
79 </html>