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

简介: 杨校老师课堂之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文档的童鞋,可以移步这里进行下载:

 

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

目录
相关文章
|
4天前
|
Web App开发 存储 JavaScript
前端如何学习Node.js及Node.js的主要用途
【7月更文挑战第16天】 学习Node.js对前端开发者至关重要,涉及理解其基于V8的运行时环境、JavaScript基础、安装与验证、核心模块(如fs、http、path)及npm管理。实践项目,如用Express建服务器,参与开源,深入学习异步编程和事件循环。Node.js用于服务器开发、构建工具、本地开发服务器和实时应用,提升全栈能力。借助官方文档和各种资源加速学习。
14 4
|
7天前
|
缓存 JavaScript 前端开发
前端框架与库 - Vue.js基础:模板语法、数据绑定
【7月更文挑战第14天】Vue.js 是渐进式框架,以简洁API和高效数据绑定知名。本文聚焦模板语法与数据绑定,解释常见问题和易错点,助力初学者避坑。模板语法中,{{ expression }} 用于渲染值,v-bind/: 用于动态绑定属性。数据绑定涉及文本、属性和事件,注意v-model适用于表单元素,计算属性有缓存。理解正确用法,借助文档和IDE,可提升开发质量和效率。善用Vue.js,打造响应式UI。
|
6天前
|
JavaScript 前端开发 API
前端框架与库 - Vue.js 组件与路由
【7月更文挑战第15天】Vue.js 框架以简洁API和高效DOM更新著名,组件和路由是构建应用的关键。组件是自包含的实例,常见问题包括命名冲突、作用域混淆和状态管理。要避免这些问题,可使用命名空间、明确数据绑定和事件,以及采用Vuex管理状态。Vue Router提供声明式路由,常见挑战包括路由守卫、动态路由参数和懒加载配置。正确使用路由守卫、处理动态参数和实现代码分割能优化路由管理。提供的代码示例展示了基本组件和路由配置。
|
16天前
|
前端开发 NoSQL 数据库
部署常用的流程,可以用后端,连接宝塔,将IP地址修改好,本地只要连接好了,在本地上前后端跑起来,前端能够跑起来,改好了config.js资料,后端修改好数据库和连接redis,本地上跑成功了,再改
部署常用的流程,可以用后端,连接宝塔,将IP地址修改好,本地只要连接好了,在本地上前后端跑起来,前端能够跑起来,改好了config.js资料,后端修改好数据库和连接redis,本地上跑成功了,再改
|
11天前
|
存储 JavaScript 前端开发
WEB三大主流框架之Vue.js
WEB三大主流框架之Vue.js
|
11天前
|
缓存 前端开发 JavaScript
JavaScript进阶 - Web Workers与Service Worker
【7月更文挑战第10天】在Web开发中,Web Workers和Service Worker提升性能。Workers运行后台任务,防止界面冻结。Web Workers处理计算密集型任务,Service Worker则缓存资源实现离线支持。常见问题包括通信故障、资源限制、注册错误及缓存更新。通过示例代码展示了两者用法,并强调生命周期管理和错误处理的重要性。善用这些技术,可构建高性能的Web应用。
|
15天前
|
缓存 JavaScript 前端开发
JavaScript进阶 - Web Workers与Service Worker
【7月更文挑战第6天】JavaScript的Web Workers和Service Worker增强了浏览器的性能处理和离线功能。Web Workers处理后台计算,减轻主线程压力,但通信有开销,受同源策略限制。Service Worker则能拦截网络请求,支持离线缓存和推送通知,但其生命周期和权限管理需谨慎处理。通过理解它们的工作原理和限制,开发者能创建更流畅、更健壮的Web应用。
|
24天前
|
前端开发 JavaScript 数据库
如何实现前后端分离-----前端笔记
如何实现前后端分离-----前端笔记
|
24天前
|
前端开发 安全 NoSQL
技术笔记:Security前端页面配置
技术笔记:Security前端页面配置
|
1月前
|
JSON 前端开发 JavaScript
前端Ajax、Axios和Fetch的用法和区别笔记
前端Ajax、Axios和Fetch的用法和区别笔记
36 2