AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]

2024-06-20 232
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]

JQuery案例

 

想使用Jquery ，必须要导入Jquery的库文件jquery-1.7.2.min.js：

下载地址：

https://blog-static.cnblogs.com/files/xiaoxiao5016/jquery-1.7.2.min.js

1.鼠标经过图片切换

运行效果图

示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>鼠标经过图片切换</title>
  <script src="jquery-1.7.2.min.js"></script>
  <script>
  $(function(){
    //从哪下手写程序? 从事件着手
    /*$('img').mouseover(function(){
      $(this).attr('src','images/3.jpg');
    }).mouseout(function(){
      $(this).attr('src','images/1.jpg');
    });*/
    //如果hover 里边鼠标经过和离开时一样的事件指令，那么可以写一个
    //如果hover事件不同
    $('img').hover(function(){
      $(this).attr('src','images/3.jpg');
    },function(){
      $(this).attr('src','images/1.jpg');
    });
  });
  </script>
</head>
<body>
  <img src="img/1.jpg" height="320" width="400" alt="" />
</body>
</html>


Img素材

jQuery控制css类选择器的切换

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>类的切换</title>
  <style>
  div{
    width:200px;
    height:200px;
    background: #ccc;
  }
  .box{
    border:1px solid #000;
  }
  .changeColor{
    border:1px solid #000;
    background:pink;
  }
  </style>
  <script src="jquery-1.7.2.min.js"></script>
  <script>
  $(function(){
    $('button:eq(0)').click(function(){
      $('div').addClass('box');
    });
    $('button:eq(1)').click(function(){
      $('div').removeClass('box');
    });
    $('button:eq(2)').click(function(){
      $('div').toggleClass('changeColor');
    })
  })
  </script>
</head>
<body>
  <button>添加类</button>
  <button>移除类</button>
  <button>切换类</button>
  <div></div>
</body>
</html>

淘宝商品菜单展示

运行效果图：

示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>淘宝商品展示</title>
  <style>
  *{
    margin:0;
    padding:0;
    list-style: none;
  }
  div{
    width:600px;
    margin:50px auto;
    border:1px solid #000;
    padding:10px;
  }
  div ul{
    overflow: hidden;
  }
  div li{
    float:left;
    width:200px;
    height: 30px;
    text-align: center;
    line-height: 30px;
  }
  div p{
    width:200px;
    height:30px;
    line-height: 30px;
    text-align: center;
    border:1px solid #000;
    margin:0 auto;
    cursor: pointer;
  }
  </style>
  <script src="jquery-1.7.2.min.js"></script>
  <script>
  $(function(){
    $('li:gt(2):not(:last)').hide();
    //点击显示
    $('p').click(function(){
      $('li:gt(2):not(:last)').slideToggle(500);
      //如果点击的时候，当前是‘显示所有内容’ 就变为  ‘隐藏所有内容’  否则‘显示所有内容’
      if( $('p').html() == '显示所有内容' ){
        $('p').html('隐藏所有内容');
      }else{
        $('p').html('显示所有内容');
      }
    });
  })
  </script>
</head>
<body>
  <div>
    <ul>
      <li>佳能</li>
      <li>索尼</li>
      <li>三星</li>
      <li>尼康</li>
      <li>松下</li>
      <li>卡西欧</li>
      <li>富士</li>
      <li>可达</li>
      <li>宾得</li>
      <li>理光</li>
      <li>奥林巴斯</li>
      <li>明基</li>
      <li>显示其它品牌</li>
    </ul>
    <p>显示所有内容</p>
  </div>
</body>
</html>

百度风云榜

运行效果图：

示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>百度风云榜</title>
  <style>
  *{
    margin:0;
    padding:0;
    list-style: none;
  }
  .box{
    width: 100px;
    border:1px solid #000;
    background:#06f;
    margin:100px;
    color:#fff;
    padding:10px;
  }
  .box li{
    cursor: pointer;
  }
  .box span{
    background:url(images/close.gif) no-repeat left center;
    padding-left:14px;
  }
  .box ul{
    padding-left:14px;
    display: none;
  }
  .box .current ul{
    display: block;
  }
  .box .current span{
    background:url(images/open.gif) no-repeat left center;
  }
  </style>
  <script src="jquery-1.7.2.min.js"></script>
  <script>
  $(function(){
    /*$('.box>li').click(function(){
      $(this).toggleClass('current').siblings().removeClass('current');
    });*/
    $('.box span').click(function(){
      $(this).parent().toggleClass('current').siblings().removeClass('current');
    });
  })
  </script>
</head>
<body>
  <ul class="box">
    <li>
      <span>事件</span>
      <ul>
        <li>上周</li>
        <li>最近</li>
        <li>上月</li>
      </ul>
    </li>
    <li>
      <span>娱乐</span>
      <ul>
        <li>游戏</li>
        <li>电视</li>
        <li>电影</li>
      </ul>
    </li>
    <li>
      <span>人物</span>
      <ul>
        <li>美女</li>
        <li>帅哥</li>
        <li>明星</li>
      </ul>
    </li>
  </ul>
</body>
</html>


回到顶端

运行效果图：

示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>回到顶部</title>
  <style>
  a{
    width: 100px;
    height: 100px;
    
    position: fixed;
    right: 20px;
    bottom: 20px;
  }
  </style>
  <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"/>
  <script src="jquery-1.7.2.min.js"></script>
  <script>
  $(function() {
    $('p').html('这是文字内容');
  });
  </script>
</head>
<body>
  <a href="#"><i class="fa fa-rocket fa-3x" style="transform: rotate(-45deg); color:#ccc;"></i></a>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
</body>
</html>


素材：font-awesome.min.css

下载：https://files.cnblogs.com/files/xiaoxiao5016/font-awesome.min.css  或者官方下载：https://fontawesome.com/download

未完，会持续补入后续案例！

 

如果有需要查看JQueryAPI文档的童鞋，可以移步这里进行下载：

 

分享是快乐的，也见证了个人成长历程，文章大多都是工作经验总结以及平时学习积累，基于自身认知不足之处在所难免，也请大家指正，共同进步。

文章标签：
JavaScript
前端开发
杨校
目录
相关文章
游客vwx7bav3mqbk6
|
并行计算 前端开发 JavaScript
Web Worker：让前端飞起来的隐形引擎
在现代 Web 开发中，前端性能优化是一个至关重要的课题，尤其是对于计算密集型的应用，如图像处理、视频处理、大规模数据分析等任务。单线程的 JavaScript 引擎常常成为性能瓶颈，导致应用变得迟缓。Web Worker，作为一种强大的技术，使得前端能够在后台进行并行计算，从而实现高效的任务处理，不影响主线程的运行和用户的交互体验。
游客vwx7bav3mqbk6
894 108
Bluening
|
Java 数据库 网络架构
菜鸟之路Day36一一Web开发综合案例（部门管理）
本文详细记录了基于Spring Boot的Web开发综合案例——部门管理功能的实现过程。从环境搭建到功能开发，涵盖数据库表设计、Spring Boot项目创建、依赖引入、配置文件设置以及Mapper、Service、Controller的基础结构构建。文章重点讲解了查询、删除、新增和修改部门信息的业务逻辑实现，遵循RESTful规范设计接口，并通过统一响应结果类`Result`优化前后端交互体验。借助Spring的IoC容器管理与MyBatis的SQL映射，实现了高效的数据操作与业务处理，最终完成部门管理的全功能开发。
Bluening
525 12
游客tsrksm3mlhq4y
|
JavaScript 前端开发 API
现代前端开发：四大JavaScript框架和库的比较
JavaScript框架和库
游客tsrksm3mlhq4y
1816 57
JackJiang2026
|
Web App开发 编解码 移动开发
零基础音视频入门：你所不知道的Web前端音视频知识
本文回顾了Web端音视频的发展历程，同时还介绍了视频的编码、帧率、比特率等概念，提到了Canvas作为视频播放的替代方案，以及FFmpeg在音视频处理中的重要作用等知识。
JackJiang2026
416 1
Bluening
|
XML SQL 前端开发
菜鸟之路Day37一一Web开发综合案例（员工管理）
本文介绍了基于Web开发的员工管理综合案例，涵盖分页查询、条件分页查询、删除员工和新增员工四大功能模块。通过前后端交互，前端传递参数（如页码、每页记录数、查询条件等），后端使用MyBatis与PageHelper插件处理数据查询与操作。代码结构清晰，包括Controller层接收请求、Service层业务逻辑处理以及Mapper层数据访问，并结合XML动态SQL实现灵活的条件查询。此外，新增与删除功能分别通过POST与DELETE请求完成，确保系统功能完整且高效。
Bluening
406 7
Bluening
|
存储 前端开发 Java
菜鸟之路Day38一一Web开发综合案例（三）
本文介绍了Web开发中的文件上传与员工信息修改的综合案例，涵盖前端到后端的完整流程。重点讲解了阿里云OSS的集成，包括Bucket创建、密钥获取及SDK使用，并通过Spring Boot实现文件上传功能。同时，详细描述了员工信息查询与修改的操作逻辑，涉及Controller、Service和Mapper层代码实现。最后探讨了配置文件的优化，对比@Value与@ConfigurationProperties注解，展示了如何通过实体类批量注入配置参数，提升代码可维护性与灵活性。
Bluening
355 1
小华同学ai
|
前端开发 JavaScript 数据可视化
58K star！这个让网页动起来的JS库，前端工程师直呼真香！
Anime.js 是一款轻量级但功能强大的JavaScript动画引擎，它能够以最简单的方式为网页元素添加令人惊艳的动效。这个项目在GitHub上已经获得58,000+星标，被广泛应用于电商页面、数据可视化、游戏开发等场景。
小华同学ai
815 8
翻滚的樱桃肉
|
资源调度 JavaScript 前端开发
前端开发必备！Node.js 18.x LTS保姆级安装教程（附国内镜像源配置）
本文详细介绍了Node.js的安装与配置流程，涵盖环境准备、版本选择（推荐LTS版v18.x）、安装步骤（路径设置、组件选择）、环境验证（命令测试、镜像加速）及常见问题解决方法。同时推荐开发工具链，如VS Code、Yarn等，并提供常用全局包安装指南，帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件，确保合规性与安全性。
翻滚的樱桃肉
16174 23
游客u6vcprrm3r23y
|
Web App开发 前端开发 JavaScript
鸿蒙5开发宝藏案例分享---Web适配一多开发实践
这是一份实用的鸿蒙Web多设备适配开发指南，针对开发者在不同屏幕尺寸下的布局难题提供了解决方案。文章通过三大法宝（相对单位、媒体查询和窗口监听）详细介绍如何实现智能适配，并提供了多个实战案例，如宫格布局、对话框变形和自适应轮播图等。此外，还分享了调试技巧及工具推荐，帮助开发者快速上手并优化性能。最后鼓励读者实践探索，并提示更多官方资源等待发现。
游客u6vcprrm3r23y
584 0
异步社区
|
JavaScript 前端开发 API
《JavaScript构建Web和ArcGIS Server应用实战》——2.7　总结
异步社区
1569 0

热门文章

最新文章

  • 1
    X-Frame-Options头只能在web服务器里面设置吗？
  • 2
    传统Java Web系统上云（K8S）详细步骤
  • 3
    Web网站扫【小程序码】登录的技术实现！记得收藏，要用时别找不到！
  • 4
    Web应用优化基础参数
  • 5
    [Web开发] IE8中如何防御网站被Clickjacking攻击
  • 6
    py django web quickstart
  • 7
    [Web开发] MySpace 发布开发接口
  • 8
    QPS 提升60%，揭秘阿里巴巴轻量级开源 Web 服务器 Tengine 负载均衡算法
  • 9
    阿里云安全产品Web应用防火墙是什么？Web应用防火墙功能与作用简介
  • 10
    RobotFramework实战篇-PC端web自动化demo及持续集成
  • 1
    JQuery选择器以及对象
    305
  • 2
    jquery无限循环内容滑块插件
    316
  • 3
    jQuery响应式内容选项卡插件
    269
  • 4
    简单轻量级的jquery图表插件
    310
  • 5
    jQuery Slidorion自动切换选项图片轮播的手风琴效果
    322
  • 6
    jqtimeline.js-简单又好用的jquery时间轴插件
    990
  • 7
    百叶窗效果的jQuery幻灯片插件
    341
  • 8
    带完成百分比的jQuery表单插件
    273
  • 9
    支持多种动画特效的响应式jQuery幻灯片插件
    347
  • 10
    jQuery超酷3D包装盒封面旋转特效
    325

    • 相关课程

    更多
  • Python Web开发基础
  • Java Web开发系列课程 - Spring框架入门
  • 企业Web常用架构LAMP-LNMP实战
  • 高校精品课-西安交通大学-Web 编程技术
  • Java Web项目实战 - 图书商城
  • Java面试疑难点解析 - Java Web开发

    • 相关电子书

    更多
  • Web应用系统性能优化
  • 高性能Web架构之缓存体系
  • PWA:移动Web的现在与未来
    • 下一篇
    一条命令迁移，帮你实现 OpenClaw 与 Hermes Agent 记忆互通！