杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
2024-05-16 21:03:29
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文档的童鞋，可以移步这里进行下载：
作者： 杨校
出处： https://blog.csdn.net/kese7952
Java互联网交流学习群：827829292
分享是快乐的，也见证了个人成长历程，文章大多都是工作经验总结以及平时学习积累，基于自身认知不足之处在所难免，也请大家指正，共同进步。
本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出, 如有问题， 可邮件（397583050@qq.com）咨询。
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]相关推荐
- 杨校老师课堂之WEB前端HTML
目录 1. 概念: 2. 快速入门: 2.1 语法: 2.2 代码: 3. 认识标签: 3.1 文件标签:构成html最基本的标签 3.2 文本标签:和文本有关的标签 3.3 图片标签: 3.4 列表 ...
- 杨校老师课堂之CSDN博客查找博文汇总-目录
目录 1.面试 2.JavaWeb文件[图片]上传功能: 3.BaseServlet设计教程 4.富文本编辑器使用教程 5.下载Jar包教程 6.页面原型下载 7.Java连接数据库 ...
- 杨校老师课堂之Java类与对象、封装、构造方法
杨校老师课堂之Java类与对象.封装.构造方法 本篇文章内容如下: 面向对象 类与对象 三大特征--封装 构造方法 教学目标 能够理解面向对象的思想 能够明确类与对象关系 能够掌握类的定义格式 能够掌 ...
- 杨校老师课堂之JavaScript案例之跑马灯左右无缝连接图片自动轮播
JavaScript案例之跑马灯左右无缝连接 效果图: 思路: 1.先做界面 1.1 制作一个大盒子,进行存放整个图片及按钮区域 1.2 制作两个按钮和中间区域盒子 1.3 中间区域盒子中使用无序列表 ...
- 杨校老师课堂之Spring框架面试题【开发工程师面试前必看】
1.spring 中都用到了哪些设计模式? 2.spring 中有哪些核心模块? 3.说一下你理解的 IOC 是什么? 4.spring 中的 IOC 容器有哪些?有什么区别? 5.那 BeanFac ...
- 杨校老师课堂之Maven下载与配置阿里云镜像
1. 下载 下载地址: https://archive.apache.org/dist/maven/maven-3/ 建议: 不要存放在C盘内: 不要存放在桌面 不要存放在有中文路径中或存放在带有特殊 ...
- 杨校老师课堂之JavaScript右下角广告弹框教程
案例制作思路: 1.先制作界面 添加一个盒子包含一个按钮,使盒子绝对定位在右上角 添加一个大盒子,同理,将盒子居于左下角:其中内部包含一个顶端盒子和底部盒子 顶端盒子因为是属于大盒子内部的存在,所以宽 ...
- 杨校老师课堂之DeDeCMS织梦后台目录介绍篇
织梦后台目录认识 基本的目录结构 ../a 默认生成文件存放目录../data 系统缓存或其他可写入数据存放目录../dede 默认后台登录管理(可任意改名)../images 系统默认的部分系统需要 ...
- 杨校老师课堂之基于SpringBoot + Vue 的智能停车场平台设计
1. 获取代码: 自助获取:https://download.csdn.net/download/kese7952/84988573 点我去下载 2. 技术栈 后端 SpringBoot + Spri ...
最新文章
- 浅析网站SEO优化对长尾关键词保持好感度的四大技巧
- bigquery sql 正则表达式
- 安装Ubuntu nginx及其配置安装Php
- java中不允许一个方法在自身定义的内部调用自己_Java面向对象三大特性（基础篇）...
- python 如何加密自己的脚本
- python对原数组遍历_Python数组遍历的简单实现方法小结
- Android Binder 学习中几个问题
- 三大框架 —— 持久层框架MyBatis
- Python：1019 数字黑洞
- Revit二开之管道翻弯
- Vue + Element UI 实现权限管理系统 前端篇（六）：更换皮肤主题
- php 提取图片的特征,让机器“看见”：图像数据的特征提取方法
- github大文件上传：使用LFS （以及如何将lfs从仓库中移除！）
- 27. OP-TEE驱动篇----libteec接口在驱动中的实现
- 计算机科学与技术核心期刊和相关网站
- Redis高负载排查记录
- 2.2 PPT封面练习（3）
- 74160ENT引脚设计法接成1000进制加法计数器
- STL 标准模板库—容器部分【C++】
- 游戏动画设计师的发展前景如何？