jQuery学习笔记(2)

val()

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

效果图:

jQuery学习笔记(2)

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

 

你可能感兴趣的:(jquery)