jquery练习

第四章

实现鼠标经过字体变白吗，背景变蓝的效果，鼠标离开，恢复原来的样式。

<!DOCTYPE html>
<html>
  <head>
    <title>Unit.html</title>
    <style type="text/css">
    .a{
        background: blue;
        color: white;
    }
    </style>
    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function(){
            $("li").mouseover(function(){
                $(this).addClass("a");
            });
            $("li").mouseleave(function(){
                $(this).removeClass("a");
            });
            
        });
    </script>
  </head>
  
  <body>
    新手上路：
    <ul>
        <li>标题一</li>
        <li>标题一</li>
        <li>标题一</li>
        <li>标题一</li>
        <li>标题一</li>
    </ul>
  </body>
</html> 

输入提示效果

<!DOCTYPE html>
<html>
  <head>
    <title>test1.html</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
    $(function(){
        $("#username").click(function(){
            $(this).val("");
        });
        $("#password").click(function(){
            $(this).val("");
        });
    });
    
    </script>
  </head>
  
  <body>
    <from>
        用户名：<input type="text" value="用户名" style="color:gray;" id="username"><br><br>
        密码：<input type="text" value="密码" style="color:gray;" id="password"><br><br>
        <input type="submit" type="login">
    </from>

  </body>
</html>

 

posted on 2018-04-10 09:28  song.yan  阅读(141)  评论(0)    收藏  举报