1.实现鼠标移入则添加背景色，鼠标移出则删除背景色
<!DOCTYPE html> <html> <head> <title>test1.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-3.3.1.js"></script> <style type="text/css"> .abc{ background:red; } </style> <script type="text/javascript"> $(function(){ $("li").mouseover(function(){ $(this).addClass("abc"); }); $("li").mouseout(function(){ $(this).removeClass("abc"); }); }); </script> </head> <body> <ul> <li>apple</li> <li>banana</li> <li>pear</li> <li>oragle</li> </ul> </body> </html>
2.实现QQ登录功能，默认是用户名点击则为空等待用户输入
第一种：click
<!DOCTYPE html> <html> <head> <title>test2.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ $("input").click(function(){ $(this).val(""); }); }); </script> </head> <body> <form action=""> <table> <tr> <td>用户名：</td> <td><input type="text" id="username" value="用户名"><br></td> </tr> <tr> <td>密码 ：</td> <td><input type="password" id="password" value="密码"><br></td> </tr> </table> </form> </body> </html>
第二种：（**）
<!DOCTYPE html> <html> <head> <title>test2.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-3.3.1.js"></script> <style type="text/css"> .a{ opacity:0.5; } </style> <script type="text/javascript"> $(function(){ $("input").on("focus",function(){//获得焦点 $(this).removeClass("a"); if($(this)[0].value==null||$(this)[0].value==""||$(this)[0].value=="please input password"){ $(this).val(""); }else{ $(this).select(); } }) .on("blur",function(){ if($(this)[0].value==null||$(this)[0].value==""||$(this)[0].value=="please input password"){ $(this).val("please input password"); $(this).addClass("a"); }else{ $(this).removeClass(); } }); }); </script> </head> <body> <form action=""> <table> <tr> <td>password：</td> <td><input type="text" id="username" class="a" value="please input password"><br></td> </tr> </table> </form> </body> </html>