0726-jQuery小练习

最新推荐文章于 2022-03-26 23:22:05 发布
原创 最新推荐文章于 2022-03-26 23:22:05 发布 · 376 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

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





LPDFIGHT
关注
jQuery的几个小练习
paradoxzl的博客
07-14 743
学习jQuery过程中的小练习
jQuery练习
03-20
1：导航菜单弹出二级菜单 博文链接：https://justsee.iteye.com/blog/798405
JQuery 小练习(实例代码)
10-29
空闲时候写的一些jquery小代码，虽然就几分钟完成的小代码，但每天保持练习，不至于头脑会生锈；
jQuery小练习
wzw_jiexika的博客
08-10 268
jQuery 反选全选框、 添加、 批量删除 反选框&全选框 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>奇数偶数 和 全选 /反选</title> <script type="text/javascript" src="js/jquery1.11.3.min.js" ></script> <script
boxes-Jquery-Playground:框练习来练习 jQuery
07-16
jQuery 游乐场 一个由彩色框组成的网格，可用作学习选择器、事件等的 jQuery 游乐场。 练习 1 - DOM 就绪 参考。 添加一个回调函数到 ready ，它会提醒一条消息，准备好进行 DOM 操作。 尝试使用两种风格的回调。 ...
Zenva-jQuery
03-10
在Zenva-jQuery-master这个压缩包中，可能包含了示例代码、教程文档、练习项目等资源。通过学习这些内容，你可以掌握如何使用jQuery来增强HTML页面的交互性和动态性。比如，你可能会学到如何使用jQuery选择器选取...
精选资源
CS110-jQuery:编写 Dojo jQuery 练习
07-02
在本课程"CS110-jQuery:编写Dojo jQuery练习"中，我们将深入探讨JavaScript的一个强大库——jQuery，以及如何将它与Dojo框架相结合，以提高前端开发的效率和代码质量。jQuery以其简洁易用的API和广泛的浏览器兼容性...
js-jquery-beginner-project:The Odin Projects 网络开发课程介绍练习
06-05
【标题】：“js-jquery-beginner-project：The Odin Projects 网络开发课程介绍练习” 在Web开发领域，JavaScript和jQuery是两个至关重要的工具。这个名为“js-jquery-beginner-project”的项目是针对初学者设计的...
TutsPlus-JavaScript-Without-jQuery:Tuts +课程的源代码-jquery source code
03-24
源代码包含了多个示例和练习，涵盖了以下关键知识点： 1. **DOM操作**：学习如何使用原生JavaScript选择元素、添加/删除元素、遍历DOM树，以及修改元素属性，例如`querySelector`, `querySelectorAll`, `...
js 小项目练习，jQuery 小例子
04-10
js 小项目练习，jQuery 小例子。 使用jquery写的一些小例子，比如菜单，星级评分，轮播图，拖拽上传等效果源码。 jquery小项目
Jquery部分效果练习
07-01
新人，最近练习的一些jquery实现的前端效果
jquery一些小例子
12-29
jquery一些小例子，包括图片滚动等，20字呀20字，20字呀20字，20字呀20字，20字呀20字，20字呀20字，20字呀20字，20字呀20字，20字呀20字，20字呀20字，20字呀20字，20字呀20字
JQuery小练习
Vivian_shuang的博客
07-22 505
DOCTYPE html> html> head> meta charset="UTF-8"> title>title> style type="text/css"> #div0{ width: 100px; height: 100px; border: 5px solid palegreen; } #div1{ width: 100px; height:
JQuery小练习（.js部分）
m0_47887988的博客
03-26 2052
实现功能： 1、购物车全选与全不选 2、删除选中商品 3、直接删除商品 4、数量和价格修改 5、计算总价 $(function(){ //全选与全不选 $("#allCheckBox").click(function (){ var flag=$(this).is(":checked"); //记录此时全选框的状态 $("input[name='cartCheckBox']").each(function (){ //遍历所有cartCheck
jQuery：一些小练习
dgk96672的博客
01-25 186
练习1：点击所有的 p 节点，能够弹出对应的文本内容。 1 <script type="text/javascript" src="jquery-1.7.2.js"></script> 2 <script type="text/javascript"> 3 $(function()...
掌握Dojo与jQuery：CS110-jQuery练习解析
描述中的“编写 Dojo jQuery 练习”表明该模块或练习可能涉及到使用jQuery技术对Dojo框架进行编程练习。Dojo是一个多功能的JavaScript框架，它提供了一组工具和库，用以构建各种应用，从简单的网页特效到复杂的富...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值