jQuery案例

已于 2022-05-03 11:44:37 修改
阅读量679 收藏
点赞数
分类专栏： jQuery案例 文章标签： jquery javascript 前端
于 2022-05-03 10:32:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TU_TU9/article/details/124269757
版权

1、下拉菜单 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		#father{
			width: 100%;
			text-align: center;
		}
		a{
			text-decoration: none;
		}
		#father>ul{
			list-style: none;
		}
		#father>ul>li{
			display: inline-block;
			background-color: pink;
		width: 100px;
		height: 25px;
		text-align: center;
		border-radius:5px;
		border-bottom: 2px solid #f07c82;
		}
		#father>ul>li>ul{
				display: none;
				list-style: none;
				padding: 0;
				position: absolute;
        }
		#father>ul>li>ul>li{
			padding-top: 5px;
			background-color: #FFC0CB;
			width: 100px;
			height: 25px;
			border-bottom: 2px solid #f07c82;
	
		}
		</style>
	</head>
	<body>
		<div id="father">
			<ul>
				<li>
					<a href="">一级菜单一号</a>
					<ul>
						<li><a href="">二级菜单1</a></li>
						<li><a href="">二级菜单2</a></li>
						<li><a href="">二级菜单3</a></li>
					</ul>
				</li>
				<li>
					<a href="">一级菜单二号</a>
					<ul>
						<li><a href="">二级菜单1</a></li>
						<li><a href="">二级菜单2</a></li>
						<li><a href="">二级菜单3</a></li>
					</ul>
				</li>
				<li>
					<a href="">一级菜单三号</a>
					<ul>
						<li><a href="">二级菜单1</a></li>
						<li><a href="">二级菜单2</a></a></li>
						<li><a href="">二级菜单3</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
</html>
<script src="jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
		$('#father>ul>li').mouseenter(function(){
        //stop() 方法停止当前正在运行的动画。解决当触发后立即移除鼠标，被触发的事件还再进行
			$(this).children('ul').stop(true,false).slideDown(400);//show()
		})
		$('#father>ul>li').mouseleave(function(){
			$(this).children('ul').stop(true,false).slideUp(200);//hide()
		})
	})
</script>

stop(stopAll,goToEnd)方法：

stop()等价于 stop(false, false)，仅停止当前动画，后面的动画还可以继续执行
stop(true)等价于 stop(true, false)，停止当前动画，并且停止后面的动画
stop(true, true)当前动画继续执行，只停止后面的动画
stop(false, true)停止当前动画，跳到最后一个动画，并且执行最后一个动画

执行效果：

2、爱豆选择（原淘宝案例）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		ul,li{
			list-style: none;
			margin: 0;
			padding: 0;
		}
		a{
			text-decoration: none;
			color: salmon;
		}
		#center li a{
			display: block;
		}
		#wrapp{
			width: 900px;
			height: 510px;
			margin: 0 auto;
			overflow: hidden;//溢出隐藏！
		}
			#left>li,#right>li{
				width: 140px;
				height: 100px;
				border: 1px solid pink;
				text-align: center;
				line-height: 100px;
				
			}
			#left{
				float: left;
			}
			#right{
				float: right;
			}
			#center{
				/* margin-left: 140px; */
				width: 615px;
				height: 510px;
				display: inline-block;
				background-image: url(EXO1.jpg);
				background-size: 615px 510px;
				background-repeat: no-repeat;
				background-position:center;
			}
		
		</style>
	</head>
	<body>
		<div id="wrapp">
			<ul id="left">
				<li><a href="">金俊勉</a></li>
				<li><a href="">金珉锡</a></li>
				<li><a href="">金钟仁</a></li>
				<li><a href="">金钟大</a></li>
				<li><a href="">都暻秀</a></li>
			</ul>
			<ul id="center">
				
				<li><a href=""><img src="./image1/SUHO01.jpg" width="615" height="510"/></a></li>
				<li><a href=""><img src="./image1/xiumin1.jpg" width="615" height="510"/></a></li>
				<li><a href=""><img src="./image1/kai1.jpg" width="615" height="510"/></a></li>
				<li><a href=""><img src="./image1/chen1.jpg" width="615" height="510"/></a></li>
				<li><a href=""><img src="./image1/do1.jpg" width="615" height="510"/></a></li>
				<li><a href=""><img src="./image1/bk1.jpg" width="615" height="510"/></a></li>
				<li><a href=""><img src="./image1/lay1.jpg" width="615" height="510"/></a></li>
				<li><a href=""><img src="./image1/吴世勋.jpg" width="615" height="510"/></a></li>
				<li><a href=""><img src="./image1/c1.jpg" width="615" height="510"/></a></li>
				<li><a href=""><img src="./image1/woodz1.jpg" width="615" height="510"/></li>
			</ul>
			<ul id="right">
				<li><a href="">边伯贤</a></li>
				<li><a href="">张艺兴</a></li>
				<li><a href="">吴世勋</a></li>
				<li><a href="">朴灿烈</a></li>
				<li><a href="">曹承衍</a></li>
			</ul>
		</div>
	</body>
</html>
<script src="jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
		$('#left>li').mouseenter(function(){
			var idx=$(this).index();
			$('#center>li').eq(idx).show().siblings('li').hide();
		})
		$('#right>li').mouseenter(function(){
			var idx=$(this).index();
			idx+=4;
			$('#center>li').eq(idx).show().siblings('li').hide();
		})
	})
</script>

eq() 方法将匹配元素集缩减值指定 index 上的一个

效果展示： 

TU_TU9
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery小案例
weixin_49756484的博客
05-18 831
jQuery小案例 这篇文章我们主要是讲如何改变网页的背景颜色和改变背景图片以及计算器这三个小案例，我们将用到jQuery的方式去实现效果 我们先开始如何该表网页的背景颜色： 第一步：还是老规矩，先把页面新建好，在开始写我们的代码 第二步：开始写我们的html和css样式。这里我就把html和css样式的代码省略了，（图表1 则是我写的最终效果） 图表 1 样式写出来了，可是不我想要的一个效果，我想要的是点击一下红色方块整个网页的背景就变成了红色，点击绿色方块整个网页又变成了绿色，这个效果该
jQuery设计思想
weixin_34309543的博客
09-23 344
译文出自：阮一峰的网络日志 jQuery设计思想 一、选择网页元素jQuery的基本设计和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。这是它区别于其他函数库的根本特点。 使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()(简写为$)，然后得到被选中的元素。 选择表达式可以是CSS选择器： $(document)//选择整个文档对象 $...
jQuery 常用方法详解及示例
最新发布
abments的博客
07-04 902
jQuery 是一个快速、简洁的 JavaScript 库，它极大地简化了 HTML 文档操作、事件处理、动画效果以及 AJAX 交互。本文将详细介绍 jQuery 的一些常用方法，并通过示例说明它们的使用方法。用于选择 DOM 元素。示例： 筛选出与选择器匹配的元素。示例： 移除与选择器匹配的元素。示例： 选择具有指定索引值的元素。示例： 2. 操作 DOM 元素 获取或设置元素的 HTML 内容。示例： 获取或设置元素的文本内容。示例： 获取或设置元素的属性。示例： 移除元素的属性。示例：
jquery案例
m0_57732255的博客
01-25 1016
jquery案例 1：开关灯 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>开光灯</title> <style> </style> </head> <body> <button id="btn1">开灯</button> <bu.
jQuery案例练习.rar
07-09
jQuery案例有4个即1、手风琴显示图片效果2、方块旋转变色3、表格数据渲染删除操作 4、jquery写轮播图，也含有原生js轮播图案例，每个案例中代码注解很详细 通过案例练习熟悉jquery相关知识点
JQuery案例
01-20
这个“JQuery案例”是专为初级JQuery开发者设计的学习资源，旨在通过实际案例帮助初学者更好地理解和应用jQuery的核心概念。 首先，jQuery的核心优势在于其简洁的API，使得开发者可以用更少的代码实现更多的功能。...
jquery 案例
04-24
在探讨这个特定的jQuery案例时，我们首先需要理解jQuery是什么以及它如何被应用于网页开发中。jQuery是一个快速、简洁的JavaScript库，使得HTML文档遍历、事件处理、动画以及Ajax交互变得简单，从而大大简化了...
JQuery案例用到的素材
10-18
在"JQuery案例用到的素材"这个主题中，我们可以从以下几个关键知识点来展开： 1. **隔行换色**：在网页表格中，为了提高可读性和视觉效果，通常会采用隔行不同颜色的样式。在jQuery中，可以利用`$("tr:even")`和`$...
jquery 小例子
03-21
NULL 博文链接：https://hb-keepmoving.iteye.com/blog/937908
Jquery实例汇总
10-15
30个jquery实例，覆盖了jquery的各个用法，通过这些实例对jquery选择器、jquery事件处理、jquery应用的各个场景会更加熟悉。如果你不懂jquery基础知识，请参看我的jquery知识点汇总，那里用思维导图的形式总结了jquery的基本知识点，配合每个知识点的代码实现，一定会对你使用和学习jquery起到很大帮助。
50个Jquery经典实例 50个Jquery经典实例
03-23
50个Jquery经典实例 50个Jquery经典实例 50个Jquery经典实例 50个Jquery经典实例
jQuery全部案例
03-31
包含了博客里面的所有案例 相关博客查看https://blog.csdn.net/qq_41243737/article/details/105116006
常用的jquery案例
09-21
充分讲解了jquery的实战场景，帮助你快速掌握jquery技术啊
jQuery 案例
不因俊俏难为友，正为风流始读书
06-03 620
*5 jQuery中DOM常用方法或属性    1)val()：取得标签中value属性的值    2)html()：取得标签内的内容    3)size()或length：取得数组的长度    4)each()：该方法必须由jQuery对象调用（即数组对象），each(function)方法，会自动将数组中的每个元素自动调用      function函数    5)click(fu
jquery案例练习
06-20
以下是一些常见的jQuery案例练习： 1. **选择器练习**：使用`$("#id")`或`$(".class")`选择HTML元素，如获取或修改特定ID或类名的元素内容。 ```javascript // 获取id为"example"的元素 var element = $("#example...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值