0726-jQuery小练习

最新推荐文章于 2022-03-26 23:22:05 发布

原创最新推荐文章于 2022-03-26 23:22:05 发布 · 352 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了使用 jQuery 完成的五个实用功能案例，包括获取鼠标位置、数组元素加法操作、菜单项交互效果、根据选项更改图片以及表格行样式修改与复制。这些示例覆盖了网页交互的基本需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一：使用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>