0726-jQuery小练习

来源：互联网发布：新版淘宝找相似店铺编辑：程序博客网时间：2024/05/22 00:38
一：使用jquery编写一个函数，此函数绑定到body的mousemove事件上，可以获取鼠标的位置：
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <script src="../jquery-3.1.1.min.js"></script></head><body><!--请使用jquery编写一个函数，此函数绑定到body的mousemove事件上，可以获取鼠标的位置-->    <p>鼠标所在位置：<span></span></p></body><script>    $(document).mousemove(function(e){        $("span").text(e.pageX + ", " + e.pageY);    });</script></html>
二：遍历数组【2，4,6,8】，为每个元素加1：
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../jquery-3.1.1.min.js"></script></head><body><!--遍历数组【2，4,6,8】，为每个元素加1--></body><script>    $(function () {        var arr=[2,4,6,8];        $.each(arr,function(i,a) {            alert(a += 1)        })    })</script>
</html>
三：鼠标移到菜单上时改变菜单样式，鼠标移出恢复为原来样式：
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../jquery-3.1.1.min.js"></script>    <style>        div{            width: 90px;            height: 40px;            background-color: gray;            float: left;            border-radius: 10px;            margin: 10px;            line-height: 37px;        }        .a{            background-color: red;        }    </style></head><body><div>咨询动态</div><div>市场营销</div><div>产品世界</div><!--鼠标移到菜单上时改变菜单样式，鼠标移出恢复为原来样式--></body><script>    $(function () {        $('div').mouseover(function () {            $(this).addClass('a')        }).mouseout(function(){            $(this).removeClass('a');        })    })</script></html>
四：点击改变图片，显示选择的图片：
<!DOCTYPE html><html>   <head>      <meta charset="UTF-8">      <title></title>      <script src="../jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>      <script type="text/javascript">         $(function(){            $("#b").click(function(){               var val=$("input:checked").val();               switch(val) {                  case 'a':                  $("img").attr('src','../../img/f3_Android1.png');                  break;                  case 'b':                  $("img").attr('src','../../img/f3_Android2.png');                  break;                  case 'c':                  $("img").attr('src','../../img/f3_Android3.png');                  break;               }            })         })      </script>   </head>   <body>      <img src="../../img/f3_Android1.png"/>      <br />      <h1>请选择水果</h1>      <input type="radio" name="fruit" value="a" checked="checked" />香蕉      <input type="radio" name="fruit" value="b" />梨      <input type="radio" name="fruit" value="c" />葡萄      <input type="button" id="b" value="改变图片" />   </body></html>
五：修改和复制表格行：
<!DOCTYPE html><html>   <head>      <meta charset="UTF-8">      <title></title>      <script src="../jquery-3.1.1.min.jsA" type="text/javascript" charset="utf-8"></script>      <script type="text/javascript">         $(function(){            //修改样式            $("#a").click(function(){               $("table tr:first-child").css('background-color','blue');            })            //复制最后一行            $("#b").click(function(){               $("table tr:last-child").clone(true).appendTo('table');            })         })      </script>   </head>   <body>      <table border="1">         <tr>            <td>书名</td>            <td>价格</td>         </tr>         <tr>            <td>1</td>            <td>1</td>         </tr>         <tr>            <td>2</td>            <td>2</td>         </tr>         <tr>            <td>3</td>            <td>3</td>         </tr>         <tr>            <td>4</td>            <td>4</td>         </tr>      </table>      <input type="button" id="a" value="修改标题样式" />      <input type="button" id="b" value="复制最后一行" />   </body></html>
阅读全文
0 0