jQuery实践

最新推荐文章于 2024-05-13 18:00:12 发布
最新推荐文章于 2024-05-13 18:00:12 发布
阅读量170 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38689666/article/details/82916891
版权

jQuery实现电影排行榜

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="./jquery1.x/jquery.js"></script>
	<style type="text/css">
		*{
			margin:0;
			padding: 0;  /*清楚所有标签的内外边距*/
		}
		.box{
			width: 300px;
			margin: 50px auto;
			height: 500px;
			border:1px solid deeppink;
		}
		h1{
			color: deeppink;
			font-size: 24px;
			line-height: 30px;
			margin-left:10px;
		}
		.box li{
			list-style: none;
			border-bottom: 1px dashed deeppink;
			padding: 5px 10px;
			/*border-bottom: 0;*/
		}
		.box li:first-child{
			border-top: 1px dashed deeppink;
			/*background-color: red;*/
		}
		.box li>span{
			display: inline-block;
			height: 20px;
			width: 20px;
			background: #ccc;
			margin-right: 5px;
			text-align: center;
		}
		.content{
			width: 100%;
			height: 100px;
			/*background-color: blue;*/
			margin-top: 3px;
			overflow: hidden;
			display: none;
		}
		.content .left{
			width: 47%;
			height: 100%;
			background: red;
			display: inline-block;
			float: left;
		}
		.content .right{
			width: 50%;
			height: 150px;
			font-size: 12px;
			float:right;
		}
		.current .content{
			display: block;  /*交集选择器*/
		}
	</style>
	<script type="text/javascript">
		$(function(){

			$('li').hover(function(){
				// alert('jjj')
				$(this).addClass('current')
			},function(){
				$(this).removeClass('current')
			})
		});
	</script>
</head>
<body>
	<div class="box">
		<h1>电影排行</h1>
		<ul>
		<li><span>1</span>电影名称
			<div class="content">
				<div class="left"></div>
				<p class="right">描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述</p>
			</p>
		</div>
		</li>
		<li><span>2</span>电影名称
			<div class="content">
				<div class="left"></div>
				<p class="right">描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述</p>
			</p>
		</div>
		</li>
		<li><span>3</span>电影名称<div class="content">
				<div class="left"></div>
				<p class="right">描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述</p>
			</p>
		</div></li>
		<li><span>4</span>电影名称<div class="content">
				<div class="left"></div>
				<p class="right">描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述</p>
			</p>
		</div></li>
		<li><span>5</span>电影名称<div class="content">
				<div class="left"></div>
				<p class="right">描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述</p>
			</p>
		</div></li>
		<li><span>6</span>电影名称<div class="content">
				<div class="left"></div>
				<p class="right">描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述电影描述</p>
			</p>
		</div></li>
	</ul>
	</div>
</body>
</html>

tab选项卡

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>tab选项卡</title>
	<script type="text/javascript" src="./jquery1.x/jquery.js"></script>
</head>
<style>
	*{
		margin: 0;
		padding:0;
	}
	.box{
		width: 500px;
		height: 300px;
		border: 1px solid red;
		margin: 50px auto;
	}
	.nav li{
		list-style: none;
		width: 33.33333%;
		height: 30px;
		line-height: 30px;
		text-align: center;
		float: left;
		background-color: orange;
	}
	/*.nav li:first-child{
		background: gray;
	}*/
	.content li{
		clear: both;
		list-style:none;
		display: none;
	}
	.show{
		display: block!important;
	}
	
	.num1{
		display: inline-block;
		height: 270px;
		width: 100%;
		background-color: red;
	}
	.num2{
		display: inline-block;
		height: 270px;
		width: 100%;
		background-color: blue;
	}
	.num3{
		display: inline-block;
		height: 270px;
		width: 100%;
		background-color: green;
	}
	.current_color{
		background-color: gray!important;
	}
</style>
<script>
	$(function(){
		$(".nav>li").mouseenter(function(){
			// alert(this)
			$(this).addClass("current_color");
			$(this).siblings().removeClass("current_color");
			var index = $(this).index();
			// alert(index)
			$(".content>li").eq(index).addClass("show");
			$(".content>li").eq(index).siblings().removeClass("show")
		})
	})
</script>
<body>
	<div class="box">
		<ul class="nav">
			<li class="current_color">JavaScript</li>
			<li>Python</li>
			<li>Java</li>
		</ul>
		<ul class="content">
			<li class="show"><div class="num1"></div></li>
			<li><div class="num2"></div></li>
			<li><div class="num3"></div></li>
		</ul>
	</div>
</body>
</html>

折叠菜单

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>下拉菜单</title>
	<script type="text/javascript" src="./jquery1.x/jquery.js"></script>
</head>
<style>
	*{
		padding:0;
		margin: 0;
	}
	html,body{
		height: 100%;
		width: 100%;
	}
	.nav{
		width: 30%;
		height: 100%;
		margin:50px auto;
		border: 1px solid gray;
		user-select: none;
	}

	.nav>li{
		list-style: none;
		border: 1px dashed blue;
		text-align: left;
		line-height: 30px;
		font-size: 20px;
		/*padding: 5px 10px;*/
		position: relative;
	}
	.nav>li>i>img{
		/*display: inline-block;*/
		height: 20px;
		width: 20px;
	}
	.nav>li>i{
		position: absolute;
		right: 10px;
		z-index: 100;
		transform: rotate(90deg);
		/*top:10px;*/
	}
	.rotate{
		transform: rotate(0deg)!important;
	}
	.sub{
		width: 100%;
		/*height: 200px;*/
	}
	.sub>li{
		list-style: none;
		border: 1px solid white;
		/*margin: 0;*/
		background-color: purple;
		font-size: 15px;
		padding-left: 10px;
	}
	.sub>li:hover{
		background-color: red;
	}
	.sub{
		display: none;
	}
</style>
<script>
	$(function(){
		$(".nav>li").click(function(){
			// alert('ssss')
			$(this).children(".sub").slideDown(500);
			$(this).siblings().children(".sub").slideUp(500);
			$(this).children('i').addClass('rotate')
			$(this).siblings().children('i').removeClass('rotate')
		});
	});
</script>
<body>
	<ul class="nav">
		<li>一级菜单
			<i><img src="images/t.jpg" alt=""></i>
			<ul class="sub">
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
			</ul>
			
		</li>
			
		<li>一级菜单
			<i><img src="images/t.jpg" alt=""></i>
			<ul class="sub">
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
			</ul>
		</li>
		<li>一级菜单
			<i><img src="images/t.jpg" alt=""></i>
			<ul class="sub">
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
			</ul>
			
		</li>
			
		<li>一级菜单
			<i><img src="images/t.jpg" alt=""></i>

			<ul class="sub">
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
			</ul>
		</li>
			
		<li>一级菜单
			<i><img src="images/t.jpg" alt=""></i>

			<ul class="sub"> 
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
			</ul>
			
		</li>
			
		<li>一级菜单
			<i><img src="images/t.jpg" alt=""></i>
			<ul class="sub">
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
			</ul>
			
		</li>
	</ul>
</body>
</html>

下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="./jquery1.x/jquery.js"></script>
	<style>
		*{
			margin: 0;
			padding: 0;
			}
		.nav{
			margin: 50px auto;
			width: 450px;
		}
		.nav>li{
			list-style: none;
			width: 150px;
			height: 50px;
			line-height: 50px;
			text-align: center;
			background-color: purple;
			float: left;
		}
		.nav>li:hover{
			background-color: red;
		}
		.sub-nav>li{
			list-style: none;
			border: 1px solid white;
			background-color: blue;
			border-top: none;
		}
		.sub-nav{
			display: none;
		}
		.current{
			display: block;
		}
	</style>
	<script>
		$(function(){
			$(".nav>li").hover(function(){
				$(this).children(".sub-nav").stop().slideDown(700);
				$(this).siblings().children(".sub-nav").removeClass("current")
			}, function(){
				$(this).children(".sub-nav").stop().slideUp(700);
				// $(this).siblings().children(".sub-nav").slideUp(1000);
			})
		});
	</script>
</head>
<body>
	<ul class="nav">
		<li>1
			<ul class="sub-nav">
				<li>子菜单</li>
				<li>子菜单</li>
				<li>子菜单</li>
				<li>子菜单</li>
				<li>子菜单</li>
			</ul>
		</li>
		<li>2
			<ul class="sub-nav">
				<li>子菜单</li>
				<li>子菜单</li>
				<li>子菜单</li>
				<li>子菜单</li>
				<li>子菜单</li>
			</ul>
		</li>
		<li>3
			<ul class="sub-nav">
				<li>子菜单</li>
				<li>子菜单</li>
				<li>子菜单</li>
				<li>子菜单</li>
				<li>子菜单</li>
			</ul>
		</li>
	</ul>
</body>
</html>
Scorpion-S
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery实战3
程程的博客
10-12 103
文章目录3.实战1. 页面效果2. 代码分析1. 页面元素2. 初始代码3. 绑定省份4. 绑定城市 3.实战 1. 页面效果 2. 代码分析 1. 页面元素 2. 初始代码 3. 绑定省份 4. 绑定城市
jQuery
qq_22242915的博客
02-03 780
jQuery和js页面加载区别 jquery-1.8.3.min是jquery-1.8.3的压缩版，代码都在一行上，开发时候用这个。 <head> <meta charset="UTF-8"> <title>jQuery</title> <script type="text/javascript" src="../js/jquery-1.8.3.j
jQuery实战
01-09
《jQuery实战》全面介绍jQuery知识，展示如何遍历HTML文档、处理事件、执行动画以及给网页添加Ajax。书中紧紧地围绕“用实际的示例来解释每一个新概念”这一宗旨，生动描述了jQuery如何与其他工具和框架交互以及如何生成jQuery插件。jQuery是目前最受欢迎的JavaScript/Ajax库之一，能用最少的代码实现最多的功能。《jQuery实战》适合各层次Web开发人员。
jquery实战训练
热门推荐
ITDragon博客
11-15 1万+
JQuery实战训练，1.5秒返回页面，2.鼠标滑过显示内容，3.轮展图，4.返回顶部，5.右击显示菜单，6.内容编辑，7.购物车结算，实时更新。
7个JQ最佳实践
xlei1123的博客
01-13 345
在这篇文章中，我会给大家介绍在编写、调试和审查JavaScript代码的时候一些好的实践（至少我是这么认为的）。事实上，我选择了其中7个最常见的场景。 　1、使用CDN及其回退地址（fallback） 　　CDN代表内容传递网络（Content Delivery Network），是一个缓存了JavaScript文件的服务器。使用CDN之后，每当一个新用户发起请求的时候，你的应用程序可
02期：jQuery最佳实践（包含常见优化写法）
cai649399010的专栏
07-25 779
让你的jQuery代码更加高效、优雅，也一起来了解一下事件委托机制的实现原理。
jquery实践
weixin_44520715的博客
01-15 150
开发过程中使用到jQuery的问题，细小的总结如下： 下拉框： "&lt;select style='width:100px';id='KINSHIP_SEX"+i+"'&gt;"+ "&lt;option value=''&gt;请选择:&lt;/option&gt;"+ "&lt;option value='1'&gt;男&lt;/option&gt
etchasketch:来自 The Odin Project 的 Etchasketch JQuery 实践项目
06-01
《蚀刻草图：The Odin Project 的 Etchasketch JQuery 实践项目详解》 在编程学习的道路上，实践是检验理论的最佳方式。The Odin Project 是一个广受欢迎的在线编程学习资源，它提供了一系列项目，帮助学员通过实际...
js-jq-site:JavaScript 和 jQuery 实践网站
06-23
在这个名为 "js-jq-site" 的项目中，我们看到一个专门针对这两个技术的实践网站，它提供了学习和练习 JavaScript 和 jQuery 的机会。这个项目可能包含一系列的练习和示例，帮助用户深入理解这两种语言的用法。 ...
jquery 实验室
10-18
2个网页文件，一个可以输入各种jquery选择器，并给出选择结果集， 另一个可以输入各种jquery命令，并给出运行结果 非常适合初学者。
Jquery学习总结
01-08
这是本人通过一段时间的学习后得的总结，让初学者少走弯路
7个jQuery最佳实践
10-23
【jQuery最佳实践】 jQuery作为一个广泛使用的JavaScript库，极大地简化了DOM操作、事件处理和动画效果。然而，不当的使用方式可能会导致性能下降。以下7个jQuery最佳实践将帮助你优化代码，提高应用性能： 1. **...
jQuery最佳实践
GarfieldEr007的专栏
01-30 696
上周，我整理了《jQuery设计思想》。 那篇文章是一篇入门教程，从设计思想的角度，讲解"怎么使用jQuery"。今天的文章则是更进一步，讲解"如何用好jQuery"。 我主要参考了Addy Osmani的PPT《提高jQuery性能的诀窍》（jQuery Proven Performance Tips And Tricks）。他是jQuery开发团队的成员，具有一定的权威性，提出的结论都有测...
jQuery konb实践
zjfchinese的博客
01-23 2852
jQuery konb的github: https://github.com/aterrien/jQuery-Knob jQuery konb的demo: http://anthonyterrien.com/demo/knob/ 目前面临的项目需求 圆环上面代表的是温度， 彩色弧度起始位置为当前温度，显示数值在正中间如图15.0 
jQuery实践-别踩白块儿网页版
u011277123的博客
01-18 1043
达人科技 2017-01-17 17:57 ▓▓▓▓▓▓ 大致介绍 终于结束了考试，放假回家了。这次的别踩白块儿网页版要比之前做的 jQuery实践-网页版2048小游戏要简单一点，基本的思路都差不多。 这篇博客并不是详细的讲解，只是大致介绍函数的作用，其中实现的细节注释中有解释，网上的这个源码有点乱，如果想看比较整齐的源码或者视频的可以QQ联系我(免费)(找共同学习的伙伴) ▓▓▓▓
jQuery实践小结
weixin_33725807的博客
10-26 1155
前言 虽然 jQuery 不再更新，但是公司的旧项目中依然在使用，也再次感受了一下属于jQuery的那个时代。但是由于长时间没有使用 jQuery ，导致使用生疏。下面就遇到的一些问题进行总结归纳。 使用 jQuery/javascript判断及改变checkbox选中状态 使用jQuery来判断一个CheckBox是否被选中有以下三种方式： （1）.attr('checked) 看JQuery版...
实训八:使用jQuery技术实现企业信息展示系统的相关功能
最新发布
折耳根的羹
05-13 317
(2)将在客户端网页中使用的MyTools中的函数转换为jQuery函数。用jQuery技术实现产品的查询、添加、修改与删除，用户的登录、注册、查询和删除。实训八:使用jQuery技术实现企业信息展示系统的相关功能。使用jQuery技术实现企业信息展示系统的相关功能。(1)从jquery.com下载jQuery库。(3)进一步理解Ajax程序的设计方法。(4)会利用所学知识设计简单的应用程序。(1)掌握jQuery的基本知识。(2)掌握jQuery的应用方法。(3)进一步完善功能，优化界面。
javaweb实训第二天上午——jQuery基础
dearQiHao的博客
05-22 1686
文章目录课程介绍1.jQuery介绍1.1.jQuery的认识1.2.和原生js比较1.2.1.获取结点1.2.2.Ajax处理1.3.1.3.其他js库或js框架2.使用jQuery2.1.jQuery版本介绍2.2.jQuery编程步骤2.3.页面加载事件2.4.jQuery===$2.5.DOM对象与jQuery对象转换3.jQuery选择器3.1.基本选择器3.2.层次选择器（有上下级关系）3.2.1.祖先 后代（空格）3.2.2.父亲 儿子（>）3.2.3.元素 紧接下一个元素（+）3.2.
ASP.NET与jQuery实践指南
9. **安全实践**：讨论使用jQuery时需要注意的安全问题，如防止XSS攻击和CSRF（跨站请求伪造）。 10. **最佳实践**：提供关于如何在ASP.NET项目中组织和维护jQuery代码的建议和指导。 请注意，由于此书的具体内容...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值