随笔 - 130  文章 - 1  评论 - 16  阅读 - 12万 

jQuery学习笔记(2)

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>
View Code
复制代码

 

posted on   水语者9  阅读(135)  评论(0)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
阅读排行：
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
点击右上角即可分享
微信分享提示