jQuery练习

最新推荐文章于 2022-04-10 16:58:41 发布
最新推荐文章于 2022-04-10 16:58:41 发布
阅读量169 收藏 1
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42139212/article/details/98238304
版权

电影排行榜

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src='../jQuery/jquery-1.12.4.js'></script>
		<style type="text/css">
			.box {
				width: 300px;
				height: 450px;
				margin: 50px auto;
				border: 1px solid #000;
			}

			.box h1 {
				font-size: 20px;
				line-height: 35px;
				color: deeppink;
				padding-left: 10px;
				border-bottom: 1px dashed #ccc;
			}

			li {
				list-style: none;
				padding: 5px 10px;
				border: 1px dashed #ccc;
			}

			li span {
				display: inline-block;
				width: 20px;
				height: 20px;
				background: #ccc;
				text-align: center;
				line-height: 20px;
				margin-right: 10px;
			}

			* {
				margin: 0;
				padding: 0;
			}

			.content {
				overflow: hidden;
				margin-top: 5px;
				display: none;
			}

			.current .content {
				display: block;
			}

			.content img {
				float: left;
				width: 80px;
				height: 120px;
			}

			.content p {
				float: right;
				width: 180px;
				height: 120px;
				float: right;
				font-size: 12px;
				line-height: 20px;
			}
		</style>
		<script>
			$(function() {
				$('li').hover(function(){
					$(this).addClass('current')
				},function(){
					$(this).removeClass('current')
				})
			})
		</script>
	</head>
	<body>
		<div class="box">
			<h1>电影排行榜</h1>
			<ul>
				<li >
					<span>1</span>战狼
					<div class='content'>
						<img src='zl.jpg' />
						<p>简介：故事发生在非洲附近的大海上，主人公冷锋（吴京 饰）遭遇人生滑铁卢，被“开除军籍”，本想漂泊一生的他，正当他打算这么做的时候，一场突如其来的意外打破了他的计划，突然被卷入了一场...</p>
					</div>
				</li>
				<li>
					<span>2</span>战狼
					<div class='content'>
						<img src='zl.jpg' />
						<p>简介：故事发生在非洲附近的大海上，主人公冷锋（吴京 饰）遭遇人生滑铁卢，被“开除军籍”，本想漂泊一生的他，正当他打算这么做的时候，一场突如其来的意外打破了他的计划，突然被卷入了一场...</p>
					</div>
				</li>
				<li>
					<span>3</span>战狼
					<div class='content'>
						<img src='zl.jpg' />
						<p>简介：故事发生在非洲附近的大海上，主人公冷锋（吴京 饰）遭遇人生滑铁卢，被“开除军籍”，本想漂泊一生的他，正当他打算这么做的时候，一场突如其来的意外打破了他的计划，突然被卷入了一场...</p>
					</div>
				</li>
				<li>
					<span>4</span>战狼
					<div class='content'>
						<img src='zl.jpg' />
						<p>简介：故事发生在非洲附近的大海上，主人公冷锋（吴京 饰）遭遇人生滑铁卢，被“开除军籍”，本想漂泊一生的他，正当他打算这么做的时候，一场突如其来的意外打破了他的计划，突然被卷入了一场...</p>
					</div>
				</li>
				<li>
					<span>5</span>战狼
					<div class='content'>
						<img src='zl.jpg' />
						<p>简介：故事发生在非洲附近的大海上，主人公冷锋（吴京 饰）遭遇人生滑铁卢，被“开除军籍”，本想漂泊一生的他，正当他打算这么做的时候，一场突如其来的意外打破了他的计划，突然被卷入了一场...</p>
					</div>
				</li>
				<li>
					<span>6</span>战狼
					<div class='content'>
						<img src='zl.jpg' />
						<p>简介：故事发生在非洲附近的大海上，主人公冷锋（吴京 饰）遭遇人生滑铁卢，被“开除军籍”，本想漂泊一生的他，正当他打算这么做的时候，一场突如其来的意外打破了他的计划，突然被卷入了一场...</p>
					</div>
				</li>
			</ul>
		</div>
	</body>
</html>

Tab选项卡

通过addClass和removeClass设置鼠标移入选项卡时的动态效果
siblings()是获取同类其他元素
index()可以获取当前li的索引
通过display是none和block控制元素显示和隐藏。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src='../jQuery/jquery-1.12.4.js'></script>
		<script>
			$(function(){
				$('.nav>li').mouseenter(function(){
					//console.log($(this).siblings())
					$(this).addClass('current')//给当前移入的nav设置背景严肃
				    var index = $(this).index()//获取当前li的索引
					$(this).siblings().removeClass('current')
					var $li = $('.content>li').eq(index)//根据nav中当前li的索引找到content中对应的li的索引
					$li.addClass('show')
					$li.siblings().removeClass('show')
					})
			})
		</script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.box {
				width: 440px;
				height: 298px;
				border: 1px solid #000;
				margin: 50px auto;
			}

			.nav li {
				list-style: none;
				width: 110px;
				height: 50px;
				background: orange;
				text-align: center;
				line-height: 50px;
				float: left;
			}
			
			.nav .current{
				background-color: #ccc;
			}
			.content li {
				list-style: none;
				display: none;
			}

			.content .show {
				display: block;
			}
		</style>
	</head>
	<body>
		<div class='box'>
			<ul class='nav'>
				<li class='current'>h5+c3</li>
				<li>jQuery</li>
				<li>C语言</li>
				<li>Go语言</li>
			</ul>
			<ul class='content'>
				<li class='show'><img src='11.jpg' /></li>
				<li><img src='12.jpg' /></li>
				<li><img src='13.jpg' /></li>
				<li><img src='14.jpg' /></li>
			</ul>
		</div>
	</body>
</html>

折叠菜单

children()方法获取当前元素的子元素
transform能让元素旋转

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src='../jQuery/jquery-1.12.4.js'></script>
		<script>
			$(function(){
				$('.nav>li').click(function(){
					 $(this).children('.sub').slideDown(1000);
					 $(this).siblings().children('.sub').slideUp(1000)
					 $(this).addClass('current')
					 $(this).siblings().removeClass('current')
				})
			})
		</script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.nav {
				width: 300px;
				margin: 100px auto;
			}

			.nav>li {
				border: 1px solid black;
				list-style: none;
				border-bottom: none;
				line-height: 35px;
				text-indent: 2em;
				position: relative;
			}

			.nav>li:last-child {
				border-bottom: 1px solid black;
				border-bottom-left-radius: 10px;
				border-bottom-right-radius: 10px;
			}

			.nav>li:first-child {
				border-top-left-radius: 10px;
				border-top-right-radius: 10px;
			}

			.nav>li>span {
				background: url('arrow_right.png') no-repeat center;
				display: inline-block;
				height: 32px;
				width: 32px;
				position: absolute;
				right: 10px;
				top: 5px;
			}
			
			.nav>.current>span{
				transform:rotate(90deg);
			}

			.sub {
				display: none;
			}

			.sub>li {
				list-style: none;
				background: green;
				line-height: 30px;
				border-bottom: 1px white solid;
				text-indent: 2em;
			}

			.sub>li:last-child {
				border-bottom: none;
			}

			.sub>li:hover {
				background: red;
			}
		</style>
	</head>
	<body>
		<ul class='nav'>
			<li>一级菜单<span></span>
				<ul class='sub'>
					<li>二级菜单</li>
					<li>二级菜单</li>
					<li>二级菜单</li>
					<li>二级菜单</li>
				</ul>
			</li>
			<li>一级菜单<span></span>
				<ul class='sub'>
					<li>二级菜单</li>
					<li>二级菜单</li>
					<li>二级菜单</li>
					<li>二级菜单</li>
				</ul>
			</li>
			<li>一级菜单<span></span>
				<ul class='sub'>
					<li>二级菜单</li>
					<li>二级菜单</li>
					<li>二级菜单</li>
					<li>二级菜单</li>
				</ul>
			</li>
			<li>一级菜单<span></span>
				<ul class='sub'>
					<li>二级菜单</li>
					<li>二级菜单</li>
					<li>二级菜单</li>
					<li>二级菜单</li>
				</ul>
			</li>
			<li>一级菜单<span></span>
				<ul class='sub'>
					<li>二级菜单</li>
					<li>二级菜单</li>
					<li>二级菜单</li>
					<li>二级菜单</li>
				</ul>
			</li>
		</ul>

	</body>
</html>

弹窗广告

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src='../jQuery/jquery-1.12.4.js'></script>
		<script>
			$(function(){
				$('div>span').click(function(){
					$('div').remove()
				})
				$('div').stop().slideDown(1000).fadeOut(1000).fadeIn(1000)
			})
		</script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			div {
				position: fixed;
				display: none;
				right: 0;
				bottom: 0;
			}

			div > span {
				position: absolute;
				display: inline-block;
				width: 20px;
				height: 20px;
				top: 0;
				right: 0;
			}
		</style>
	</head>
	<body>
		<div>
			<img src='ad-pic.png' />
			<span></span>
		</div>
	</body>
</html>

图标特效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src='../jQuery/jquery-1.12.4.js'></script>
		<script>
			$(function(){
				$('li').each(function(index,ele){
					var url = "url('bg.png') no-repeat 0 " + (index * -24 )+ "px"
					$(this).children('span').css('background',url)
				})
				$('li').mouseenter(function(){
					$(this).children('span').animate({
						top:-50
					},1000,function(){
						$(this).css('top','50px')
						$(this).animate({
							top:0
						},1000)
					})
				})
			})
		</script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			ul {
				list-style: none;
				width: 400px;
				height: 250px;
				border: 1px solid #000;
				margin: 100px auto;
			}

			ul>li>span {
				background: url('bg.png') no-repeat 0 0;
				display: inline-block;
				width: 24px;
				height: 24px;
				position: relative;
			}

			ul>li {
				float: left;
				width: 100px;
				height: 50px;
				margin-top: 50px;
				text-align: center;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<ul>
			<li><span></span>
				<p>百度</p>
			</li>
			<li><span></span>
				<p>淘宝</p>
			</li>
			<li><span></span>
				<p>微博</p>
			</li>
			<li><span></span>
				<p>网易</p>
			</li>
			<li><span></span>
				<p>搜狐</p>
			</li>
			<li><span></span>
				<p>腾讯</p>
			</li>
			<li><span></span>
				<p>优酷</p>
			</li>
			<li><span></span>
				<p>京东</p>
			</li>
		</ul>
	</body>
</html>

循环滚动播放

利用定时器和左边距为负值设置图片左移滚动播放

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src='../jQuery/jquery-1.12.4.js'></script>
		<script>
			$(function(){
				var timer
				var offset = 0
				function autoplay(){
					timer = setInterval(function(){
						offset += -10
						if(offset <= -1200){
							offset = 0
						}
						$('ul').css({
							marginLeft:offset
						})
					},50)
				}
				autoplay()
				$('li').hover(function(){
					clearInterval(timer)//停止滚动
					$(this).siblings().fadeTo(1000,0.5)//给未选中的图片设置蒙版
					$(this).fadeTo(1000,1)
				},function(){
					autoplay()//光标移出时开启定时器滚动
					$('li').fadeTo(1000,1)//所有图片恢复原始状态
				})
			})
		</script>
		<style type="text/css">
			* {
				margin: 0 ;
				padding:0;
			}

			div {
				height: 161px;
				width: 600px;
				overflow: hidden;
				margin: 100px auto;
				border: 1px solid black;
			}

			ul {
				list-style: none;
				height: 161px;
				width: 1800px;
			}

			li {
				float: left;
			}
		</style>
	</head>
	<body>
		<div>
			<ul>
				<li><img src='a.jpg' /></li>
				<li><img src='b.jpg' /></li>
				<li><img src='c.jpg' /></li>
				<li><img src='d.jpg' /></li>
				<li><img src='a.jpg' /></li>
				<li><img src='b.jpg' /></li>
			</ul>
		</div>
	</body>
</html>
jiaody111
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端jquery练习网页
10-12
这个“前端jQuery练习网页”项目是您在学习阶段完成的一个作品，虽然存在一些bug，但它仍然是一个很好的学习和回顾jQuery核心概念的起点。** 在项目中，`js` 文件夹可能包含你编写的所有 JavaScript 代码，这些代码...
Jquery练习题
batianaa的博客
09-26 161
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="JQuery/jquery-3.4.1.min.js"> </script> <script&...
jquery练习
weixin_34315189的博客
09-06 86
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &am
jQuery与jQuery选择器及练习
星河梦~的博客
07-25 715
目录jQuery概念使用方式jQuery选择器优点基本选择器基本过滤选择器属性过滤选择器 jQuery 概念 jQuery：是JavaScript的一个库。 它对JavaScript的相关操作进行了封装： 遍历HTML文档、操作DOM、事件处理、Ajax等 书写代码也比JavaScript原来的写法简便许多。 使用方式 （1）引入jQuery库： <script src="jquery.js"></script> 这里的jQuery文件可以在jQuery官网上自行下载文件。 （2）
jQuery
java_vava2的博客
03-14 628
一、jQuery 1.1 $() 使用(".box")或者(".box")或者(".box")或者("#box")获取元素 选用JQ以后不能直接使用原生JS对象的方法 1.2 jQuery与原生对象的转换 jQ转原生：直接利用数组下标 $ps = $("p")[0] 原生转JQ：加$() p = document.getElementTagName("p")[0]; $(p).css("background-color","skyblue") $(p).html("使用jQ修改html内容")
JQuery初识(二)
a86123969的博客
09-29 254
一丶链式编程 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <ul> ...
jquery练习实例
10-16
在“jQuery练习实例”这个压缩包中，我们可以期待找到一系列的示例代码和讲解，帮助我们深入理解jQuery的核心功能和常见用法。 1. **DOM操作**：jQuery的核心在于其对DOM（Document Object Model）的操作。通过简洁...
jQuery第三章
weixin_34254823的博客
01-27 179
一、jQuery中的DOM操作 一般来说，DOM操作分为3个方面，即DOM Core核心、HTML-DOM和CSS-DOM 1.DOM Core JavaScript中的getElementById()、getElemntByTagName()、getAttribute()和setAttribute()等方法，都是DOM Core的核心，例如： （1）使...
jQuery笔记-jQuery筛选器children()详解
萌萌的It人 www.itmmd.com
02-23 2万+
jQuery的选择包含两种，一种是选择器，一种是筛选器。筛选器是对选择器选定的jQuery对象做进一步选择。children()是一个筛选器，顾名思义就是筛选孩子，筛选那些符合条件的孩子。完整的格式如下： .children(expr) 其中children是筛选器的名称，expr是表达式，所有选择器中的表达式都可以用在这，比如按标签名"div",按类名".class",按序号":first"等等
jQuery children() 方法
qq_30017619的博客
09-03 1406
children() 方法返回被选元素的所有直接子元素。 该方法只会向下一级对 DOM 树进行遍历。 下面的例子返回每个 <div> 元素的所有直接子元素： 实例 $(document).ready(function(){ $("div").children(); }); 您也可以使用可选参数来过滤对子元素的搜索。 下面的例子返回类名为 "1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素： 实例 $(document)....
jQuery练习题及答案
热门推荐
weixin_40693633的博客
07-03 8万+
一．选择题1. 下面哪种不是jquery的选择器?(  )  C。A、基本选择器                          B、层次选择器C、css选择器                                   D、表单选择器2. 当DOM加载完成后要执行的函数，下面哪个是正确的?(  )  CA、jQuery(expression, [context])  B、jQuery...
JQuery基础例题详解
哈哈
04-10 1071
上 jQuery选择器和2. jQuery效果 包括：显示和隐藏、显示隐藏交替 show() hide() toggle 淡入淡出、淡入淡出交替fadeIn()fadeOut()toggle() 动画animate()
Jquery
weixin_40055163的博客
09-29 208
1 什么是jquery 是 js 的一款框架产品 Jquery解决的问题： 1.原生js编程复杂 获取标签对象document.getElementById(“id值”)。 2.屏蔽浏览器差异。 3.含有插件 表单验证 图片放大器。 2 第一个jquery程序 1.搭建开发环境 A.在项目中引入jquery相关的js文件。 ...
基于Springboot和Vue的图书借还管理系统源码 图书借还管理系统代码（高分毕设）
07-28
图书借还管理系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
C语言内存管理：静态与动态分配的较量
07-28
C语言是一种通用的编程语言，由丹尼斯·里奇（Dennis Ritchie）在20世纪70年代早期于美国电话电报公司（AT&T）的贝尔实验室开发。C语言以其高效性、灵活性和可移植性而闻名，它是一种过程式编程语言，提供了对底层硬件的直接访问能力。 C语言的特点包括： 1. **简洁高效**：C语言的语法简洁，执行效率高，适合编写系统软件。 2. **接近硬件**：C语言提供了对内存地址和位操作的直接控制，使其非常适合硬件级编程。 3. **可移植性**：C语言编写的程序可以在不同的操作系统和硬件平台上编译和运行，具有很好的可移植性。 4. **丰富的库支持**：C语言拥有大量的标准库，如标准输入输出库（stdio.h）、数学库（math.h）等。 5. **结构化编程**：C语言支持结构化编程，允许使用循环、条件判断和函数等控制结构。 6. **指针**：C语言的指针功能强大，可以操作内存地址，实现复杂的数据结构和算法。 7. **编译型语言**：C语言是一种编译型语言，源代码需要通过编译器转换成机器码才能运行。 C语言广泛应用于操作系统（如Unix和Linux）、嵌入式系统、高性能
通讯协议规范-命令包格式
07-28
提供一份通讯协议规范，包含命令包、格式等，在上下位机调试的时候可参考该文档，制定对应的通讯协议。
四足宠物机器狗动态步行规划与仿真.pdf
最新发布
07-28
四足宠物机器狗动态步行规划与仿真
jquery练习2:验证贵美网站注册页面
01-02
我们可以使用jQuery来实现这一功能。首先，我们可以编写一个jQuery函数，当用户点击注册按钮时触发。在这个函数中，我们可以获取用户输入的用户名、密码、邮箱等信息，并对其进行验证。 我们可以使用正则表达式来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值