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

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

2024-06-20 265
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 杨校老师课堂之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
前端开发
杨校
目录
相关文章
凉凉心.
|
前端开发 算法 Java
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（一）：CSS发展史；CSS样式表的引入；CSS选择器使用，附带案例介绍
上下文选择器(迭代选择器)：基于祖先或同胞元素选择一个元素 ID和类选择器：基于id#和class的属性值进行选择元素。 属性选择器：基于属性的有无和特征进行选择。 ①上下文选择器： 上下文选择器的语法格式：标签1 标签2{属性:值;} //注意：组合选择器和上下文选择器的区别，组合选择器以逗号隔开， 上下文选择器以空格隔开 ②特殊的上下文选择器 子选择器> : 语法格式:标签1>标签2 解释说明：标签1和标签2
凉凉心.
767 1
卓伊凡
|
JavaScript 前端开发 Java
前端框架选择之争：jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
前端框架选择之争：jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
卓伊凡
981 72
前端框架选择之争：jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
土木林森
|
前端开发 JavaScript 安全
前端性能调优：HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性，HTTP/2显著提升了Web性能。同时，HTTPS确保了数据传输的安全性。文章提供了示例代码，展示了如何使用Node.js创建一个HTTP/2服务器。
土木林森
586 3
kijlee
|
移动开发 前端开发 JavaScript
前端web创建命令
本项目使用 Vite 搭建 Vue + TypeScript 开发环境，并基于 HTML5 Boilerplate 提供基础模板，快速启动现代前端开发。
kijlee
342 2
疯狂的猿
|
JavaScript
基于jQuery实现文字点击验证代码
jQuery文字点击验证代码基于jquery-3.4.1.min.js制作，按顺序，依次点击文字通过验证。
疯狂的猿
250 5
爱的不是纯牛奶-47754
|
监控 前端开发 JavaScript
探索微前端架构：构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略，通过将大型前端应用拆分为多个独立的微应用，提高开发效率、增强可维护性，并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
爱的不是纯牛奶-47754
539 6
爱的不是纯牛奶-47754
|
消息中间件 前端开发 JavaScript
探索微前端架构：构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略，旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分，提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势，并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
爱的不是纯牛奶-47754
429 1
土木林森
|
前端开发 安全 应用服务中间件
前端性能调优：HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展，前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用，介绍了二进制分帧、多路复用和服务器推送等特性，并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS，以提升Web应用的性能和安全性。
土木林森
638 3
疯狂的猿
|
JavaScript
jQuery实现的星级打分带评价及颜色区分代码
jQuery实现的星级打分带评价及颜色区分效果代码是一款支持自定义评论颜色的星级评价打分，其中红色为一星级，差评、绿色位五星级、满分好评，本段代码适应于所有网页使用，有需要的朋友们就来下载使用吧。
疯狂的猿
274 2
土木林森
|
前端开发 JavaScript API
前端框架新探索：Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来，前端技术飞速发展，Svelte凭借独特的编译时优化和简洁的API设计，成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势，包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制，并通过示例代码展示其使用方法。
土木林森
607 2

热门文章

最新文章

  • 1
    使用SSM框架搭建Web服务器实现登录功能(Spring+SpringMVC+Mybatis)
  • 2
    Java Web 在线商城项目最新技术实操指南帮助开发者高效完成商城项目开发
  • 3
    HTML5 Web SQL 数据库详解
  • 4
    快速部署 ChatGPT Next Web 社区版
  • 5
    云服务器 ECS 建站教程：手工部署Java Web项目
  • 6
    ThreeJs搭建web3D场景
  • 7
    在 Web 中判断页面是不是刷新
  • 8
    从零开始Web自动化(二)：第一个selenium脚本（使用过selenium的可跳过）
  • 9
    大华相机接入web页面实现人脸识别
  • 10
    Web Security 之 HTTP request smuggling（上）
  • 1
    前端如何存储数据：Cookie、LocalStorage 与 SessionStorage 全面解析
    1517
  • 2
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（九）：强势分析Animation动画各类参数；从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面，完全了解CSS3 Animation
    780
  • 3
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（八）：学习transition过渡属性；本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    651
  • 4
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（七）：学习ransform属性；本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    649
  • 5
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（六）：全方面分析css的Flex布局，从纵、横两个坐标开始进行居中、两端等元素分布模式；刨析元素间隔、排序模式等
    723
  • 6
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（五）：背景属性；float浮动和position定位；详细分析相对、绝对、固定三种定位方式；使用浮动并清除浮动副作用
    921
  • 7
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（四）：元素盒子模型；详细分析边框属性、盒子外边距
    1788
  • 8
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（三）：元素继承关系、层叠样式规则、字体属性、文本属性；针对字体和文本作样式修改
    448
  • 9
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（二）：CSS伪类：UI伪类、结构化伪类；通过伪类获得子元素的第n个元素；创建一个伪元素展示在页面中；获得最后一个元素；处理聚焦元素的样式
    1485
  • 10
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（一）：CSS发展史；CSS样式表的引入；CSS选择器使用，附带案例介绍
    767

    • 相关课程

    更多
  • 移动Web前端开发
  • Ajax 前端开发入门与实战
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • jQuery开发教程
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 阿里文娱大前端技术实践
  • 前端代码是怎样智能生成的
    • 下一篇
    一条命令迁移，帮你实现 OpenClaw 与 Hermes Agent 记忆互通！