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

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

2024-06-20 13
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 杨校老师课堂之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
前端开发
关键词：
JavaScript Web
web js
前端web
web前端
JavaScript代码
杨校
目录
相关文章
67vpym2vvkfhs
|
10小时前
|
缓存 JavaScript 前端开发
程序员必知：广告等第三方应用嵌入到web页面方案之使用js片段
程序员必知：广告等第三方应用嵌入到web页面方案之使用js片段
67vpym2vvkfhs
4 0
G佳伟
|
2天前
|
JavaScript 前端开发
js,jq,jquery删除css属性
js,jq,jquery删除css属性
G佳伟
6 0
67vpym2vvkfhs
|
4天前
|
设计模式 前端开发 JavaScript
关于写好前端JS代码的一些建议
关于写好前端JS代码的一些建议
67vpym2vvkfhs
17 2
1660814598353893
|
6天前
|
前端开发 JavaScript
阿里云验证码2.0 验证时报错 前端页面获取的验证参数有问题，动态JS加载失败，请问怎么解决啊？急，急，急。
用户反馈校验时遇到错误，日志显示验证码参数获取异常。采用无痕验证，失败后，返回`{captchaResult:false,bizResult:false}`，未触发滑块二次验证。
1660814598353893
52 0
杨校
|
7天前
|
JavaScript 前端开发
杨校老师课堂之JavaScript定时器案例的红绿灯设计--原始写法
杨校老师课堂之JavaScript定时器案例的红绿灯设计--原始写法
杨校
7 0
杨校
|
7天前
|
前端开发 JavaScript
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
杨校
15 0
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
杨校
|
7天前
|
前端开发 安全 数据安全/隐私保护
杨校老师课堂之WEB前端HTML2
杨校老师课堂之WEB前端HTML
杨校
18 0
杨校
|
7天前
|
XML 移动开发 前端开发
杨校老师课堂之WEB前端HTML1
杨校老师课堂之WEB前端HTML
杨校
22 0
向善的灯
|
Web App开发 JSON 前端开发
JQuery课堂学习笔记
版权声明：本文为博主原创文章，未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/78412841 ...
向善的灯
1217 0
jjczqyjxgdegi
|
1天前
|
JavaScript PHP Perl
一篇文章讲明白jQuery插件之jqueryeditableplugin
一篇文章讲明白jQuery插件之jqueryeditableplugin
jjczqyjxgdegi
5 0

热门文章

最新文章

  • 1
    【好用】推荐10套后端管理系统前端模板
  • 2
    【Flutter前端技术开发专栏】Flutter中的热重载与热更新机制
  • 3
    【Flutter前端技术开发专栏】Flutter中的图片加载与缓存优化
  • 4
    【Flutter前端技术开发专栏】Flutter中的内存泄漏检测与解决
  • 5
    【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
  • 6
    【专栏】ngrok` 是一款让本地服务器暴露到公网的工具，提供外网访问、临时公网地址、安全隧道及实时更新功能
  • 7
    【Flutter前端技术开发专栏】Flutter中的性能分析工具Profiler
  • 8
    从前端Vue到后端Spring Boot：接收JSON数据的正确姿势
  • 9
    【Flutter前端技术开发专栏】Flutter中的下拉刷新与上拉加载更多
  • 10
    【专栏】探讨了前端性能优化中的 Performance 工具，它能帮助开发者分析页面加载速度和交互体验
  • 1
    Linux系统之部署web-check网站分析工具
    86
  • 2
    《理解 WebSocket：Java Web 开发的实时通信技术》
    85
  • 3
    构建响应式Web界面：Flexbox与Grid布局的深度对比
    36
  • 4
    使用JSON和XML：数据交换格式在Java Web开发中的应用
    47
  • 5
    掌握JSP页面编程：动态生成Web内容
    56
  • 6
    SpringCloud启动Consider defining a bean of type ‘org.springframework.web.client.RestTemplate‘ in your
    44
  • 7
    销售业务管理系统【Web系统】（Java课设）
    22
  • 8
    在使用智能媒体服务接入直播剪辑Web SDK时
    33
  • 9
    组态软件之万维组态介绍（web组态、html组态、vue2/vue3组态）
    208
  • 10
    jwt-auth插件实现了基于JWT(JSON Web Tokens)进行认证鉴权的功能。
    73

    • 相关课程

    更多
  • JavaScript 自学手册文档教程
  • 零基础学前端HTML+CSS
  • 企业Web常用架构LAMP-LNMP实战
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程
  • 高校精品课-西安交通大学-Web 编程技术

    • 相关电子书

    更多
  • JavaScript异步编程
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • Internet Information Services（IIS）部署Web项目
  • 云上Web及FTP
  • WEB网页编程实战
  • 前端开发基础1：前端开发环境的安装和配置
  • 网站用户流量分析—适用于电商网站、资讯网站、游戏主站等各类Web站点场景
  • Web Terminal环境使用指南
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）