jQuery入门(案例集合)

最新推荐文章于 2022-11-04 15:14:11 发布
最新推荐文章于 2022-11-04 15:14:11 发布
阅读量234 收藏 3
点赞数 1
文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46077178/article/details/106175295
版权
jQuery二级菜单
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			
			ul{
				list-style: none;
			}
			
			.wrap{
				width: 330px;
				height: 30px;
				margin: 100px auto 0;
				padding-left: 10px;
				background-image: url();
			}
			
			.wrap li{
				background-image: url();
			}
			
			.wrap>ul>li{
				float: left;
				margin-right: 10px;
				position: relative;
				background-color: aquamarine;
			}
			
			.wrap a{
				display: block;
				height: 30px;
				width: 100px;
				text-decoration: none;
				color: #000;
				line-height: 30px;
				text-align: center;
			}
			
			.wrap li ul{
				position: absolute;
				top: 30px;
				display: none;
				background-color: aquamarine;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<ul>
				<li>
					<a href="javascript:void(0)">一级菜单1</a>
					<ul>
						<li><a href="javascript:void(0)">二级菜单1</a></li>
						<li><a href="javascript:void(0)">二级菜单2</a></li>
						<li><a href="javascript:void(0)">二级菜单3</a></li>
					</ul>
				</li>
				<li>
					<a href="javascript:void(0)">一级菜单1</a>
					<ul>
						<li><a href="javascript:void(0)">二级菜单1</a></li>
						<li><a href="javascript:void(0)">二级菜单2</a></li>
						<li><a href="javascript:void(0)">二级菜单3</a></li>
					</ul>
				</li>
				<li>
					<a href="javascript:void(0)">一级菜单1</a>
					<ul>
						<li><a href="javascript:void(0)">二级菜单1</a></li>
						<li><a href="javascript:void(0)">二级菜单2</a></li>
						<li><a href="javascript:void(0)">二级菜单3</a></li>
					</ul>
				</li>
			</ul>
		</div>
		<script src="jquery-1.12.4.js"></script>
		<script>
			$(function(){
				//需求 : 给一级菜单的元素设置鼠标移入事件  二级菜单显示
				//鼠标移出  二级菜单隐藏
				//为什么给li元素注册事件  不给a注册？？？
				$(".wrap>ul>li").mouseover(function(){
					//这里需要用到this
					$(this).children("ul").show();//show()方法的本质就是修改css里面的display属性  改为block
				})
				$(".wrap>ul>li").mouseout(function(){
					//这里需要用到this
					$(this).children("ul").hide();//show()方法的本质就是修改css里面的display属性  改为none
				})
			})
		</script>
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			
			ul{
				list-style: none;
			}
			.warp{
				width: 400px;
				border: 1px solid black;
				height: auto;
				margin: 200px auto;
			}
			.warp ul li{
				background-color: lavender;
				text-align: center;
				font-size: 22px;
				font-weight: bold;
				height: auto;
				line-height: 40px;
				border: 1px solid  dimgrey;
				cursor: pointer;
			}
			.warp ul li div{
				width: 398px;
				height: 250px;
				background-color: white;
				font-size: 16px;
				font-weight: normal;
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="warp">
			<ul>
				<li>QQ空间
					<div>我是QQ空间的内容</div>
				</li>
				<li>朋友圈
					<div>我是朋友圈的内容</div>
				</li>
				<li>微博
					<div>我是微博的内容</div>
				</li>
				<li>论坛
					<div>我是论坛的内容</div>
				</li>
			</ul>
		</div>
		<script src="jquery-1.12.4.js"></script>
		<script>
			$(function(){
				$(".warp ul li").click(function(){
					$(this).children("div").css("display","block").parent().siblings().children("div").css("display","none");
				})
			})
			
		</script>
	</body>
</html>

在这里插入图片描述

jQuery轮播图(仿京东轮播图)
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			
			ul{
				list-style: none;
			}
			.warp{
				width: 400px;
				border: 1px solid black;
				height: auto;
				margin: 200px auto;
			}
			.warp ul li{
				background-color: lavender;
				text-align: center;
				font-size: 22px;
				font-weight: bold;
				height: auto;
				line-height: 40px;
				border: 1px solid  dimgrey;
				cursor: pointer;
			}
			.warp ul li div{
				width: 398px;
				height: 250px;
				background-color: white;
				font-size: 16px;
				font-weight: normal;
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="warp">
			<ul>
				<li>QQ空间
					<div>我是QQ空间的内容</div>
				</li>
				<li>朋友圈
					<div>我是朋友圈的内容</div>
				</li>
				<li>微博
					<div>我是微博的内容</div>
				</li>
				<li>论坛
					<div>我是论坛的内容</div>
				</li>
			</ul>
		</div>
		<script src="jquery-1.12.4.js"></script>
		<script>
			$(function(){
				$(".warp ul li").click(function(){
					$(this).children("div").css("display","block").parent().siblings().children("div").css("display","none");
				})
			})
			
		</script>
	</body>
</html>

在这里插入图片描述

jQuery手风琴
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			ul,li{
				list-style: none;
			}
			#box{
				width: 1200px;
				height: 400px;
				border: 2px solid red;
				margin: 100px auto;
				overflow: hidden;
			}
			li{
				width: 240px;
				height: 400px;
				float: left;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		
		<script src="jquery-1.12.4.js"></script>
		<script>
			$(function(){
				//获取页面所有的li元素
				var $lis = $("li");
				
				//需求1:给每一个li标签添加img标签
				for(var i = 0;i < $lis.length;i++){
					$($lis[i]).html("<img src='./images/collapse/"+(i+1)+".jpg' alt='' />")
				}
				
				//需求2:给每一个li元素添加鼠标移入事件
				$lis.mouseenter(function(){
					$(this).stop(true,false).animate({
						width : 100,
					},1000).siblings("li").stop(true,false).animate({
						width : 100
					},1000)
				})
				
				//需求3:鼠标移出box  所有的图片的宽度恢复原状
				$("#box").mouseleave(function(){
					$lis.stop(true,false).animate({
						width : 240,
					},1000)
				})
			})
		</script>
	</body>
</html>

在这里插入图片描述

新手小白求教
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JQuery入门—编写一个简单的JQuery应用案例
10-27
首先引入JQuery文件库只需将文件导入页面中即可，即在<head></head>中，接下来详细介绍，感兴趣的朋友可以了解下
jQuery使用（超详细）
最新发布
Eliauk_Doubling的博客
08-12 1万+
会把这个dom对象转换成jQuery对象,即 [object HTMLSpanElement] ======> [object Object]* 4.传入参数为[DOM对象]时，将DOM对象包装为jQuery对象返回。* 2.传入参数为[HTML字符串]时，根据这个字符串创建元素节点对象。* 3.传入参数为[选择器字符串]时，根据这个字符串查找元素节点对象。*1. 传入参数为[函数]是，在文档加载完成以后执行这个函数。jQuery对象的本质时dom对象的数组+jQuery提供的一系列的功能函数。
jquery实例
weixin_46673625的博客
06-28 612
jquery自定义登录认证 jquery实现表格的全选反选和取消实例 jquery实现表格的增删改
jQuery入门教程
hy250_的博客
05-17 7387
一、jQuery是什么？ jQuery是一种方法库 语法：$ jQuery 二、jQuery文件引用 1、本地引用 语法：<script type="text/javascript" src="jquery.js"></script> 2、远程调用： 语法：<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery1.4....
jQuery
好记性不如烂键盘
10-06 1023
为什么要学jquery 使用javascript开发过程中，有许多的缺点： 查找元素的方法单一，麻烦。 遍历数组很麻烦，通常要嵌套一大堆的for循环。 有兼容性问题。 想要实现简单的动画效果，也很麻烦 代码冗余。 体验jquery的使用 /* * 1. 查找元素的方法多种多样，非常灵活 * 2. 拥有隐式迭代特性，因此不再需要手写for循环了。 * 3. 完全没有兼容性问题。 * 4. 实现动...
jquery入门级简单案例
weixin_44392027的博客
02-24 607
城市选择案例 上面两个按钮会全部移动，下面则会移动已选中单位 select { width: 200px; /*background-color: teal;*/ height: 200px; font-size: 20px; } .btn-box { width: 30px; ...
jquery入门培训及案例
08-27
jQuery开发入门 jQuery选择器 jQuery操作DOM Ajax在jQuery中的应用 jQuery实用工具函数
jQuery入门
08-09
jQuery入门1 适合零基础初学者，讲解详细，易于理解，
jQuery案例练习.rar
07-09
jQuery案例有4个即1、手风琴显示图片效果2、方块旋转变色3、表格数据渲染删除操作 4、jquery写轮播图，也含有原生js轮播图案例，每个案例中代码注解很详细 通过案例练习熟悉jquery相关知识点
JQuery入门&选择器
03-10
JQuery入门&选择器
JQuery基础案例大全
01-02
JQuery是现在最流行的Ajax框架；本案例是本人亲手总结的教学案例。基本包括的Jquery的各个方面的基础应用。包括：选择器；Dom操作；事件；动画；Ajax操作；是一个非常容易上手的代码案例。送给初学者。--邵老师
jQuery实例视频教程
07-22
教程名称：jQuery实例视频教程课程目录：【】jQuery实例-商城放大镜效果【】jQuery实例-图片放大效果【】jQuery实例-图片转动立体效果【】jQuery实例-对联广告【】jQuery实例-返回顶部(解决IE6固定定位)【】jQuery实例-随机切换相册【】jQuery实例-顶部滑动下拉广告 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
jQuery详细教程，基础内容罗列
weixin_53761834的博客
11-04 2772
jQuery 是一个 JavaScript 函数库。 jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。 jQuery 库包含以下功能： HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities 除此之外，jQuery 还提供了大量的插件。
jQuery 实例 教程
GarfieldEr007的专栏
02-01 797
jQuery 选择器 $(this).hide() 演示 jQuery 的 hide() 函数，隐藏当前的 HTML 元素。 $("p").hide() 演示 jQuery 的 hide() 函数，隐藏所有 <p> 元素。 $(".test").hide() 演示 jQuery 的 hide() 函数，隐藏所有 class="test" 的元素。 $("#test").h...
jquery实例教学一
weixin_34129145的博客
01-12 685
jquery实例教学一 今天我们继续探讨jquery的相关内容。 首先，我们看看基本过滤选择器：                         一、选中单行或双行 能不能选中指定的某一个呢？   二、筛选大于，小于的   三、注意选择的顺序呦 :not(选择器) 选取不满足“选择器”条件的元素，$("input:not(.myClass)")选取样式名不是myClas...
十分钟玩转jQuery实例大全
DTCloud
04-25 815
文章目录文档处理内部插入外部插入替换删除复制事件页面载入页面处理页面委派(event object) 对象 文档处理 内部插入 $("p").append("<b>nick</b>"); //每个p元素内后面追加内容 $("p").appendTo("div"); 　　　 //p元素追加到div内后 $("p").prepend("<b>Hello</b>"); //每个p元素内前面追加内容 $("p").prependTo("div");
JQuery入门学习及简单案例
AtlantisChina
10-20 782
JQuery入门学习及简单案例，如隔行换色，多选下拉列表的左右移动、广告显示隐藏、抽奖等。
50个实用的jquery案例
二手农民的学习博客
02-25 4400
1. 如何创建嵌套的过滤器： //允许你减少集合中的匹配元素的过滤器，   //只剩下那些与给定的选择器匹配的部分。在这种情况下，   //查询删除了任何没（:not）有（:has）   //包含class为“selected”（.selected）的子节点。   .filter(":not(:has(.selected))")  2. 如何重用元素搜索 var a
jQuery入门学习（Demo案例）
辰兮要努力
03-06 3264
【辰兮要努力】：hello你好我是辰兮，很高兴你能来阅读，昵称是希望自己能不断精进，向着优秀程序员前行！ 博客来源于项目以及编程中遇到的问题总结，偶尔会有读书分享，我会陆续更新Java前端、后台、数据库、项目案例等相关知识点总结，感谢你的阅读和关注，希望我的博客能帮助到更多的人，分享获取新知，大家一起进步! 吾等采石之人，应怀大教堂之心，愿你们奔赴在各自的热爱中… 文章目录一、文章序言二、基础入门三、代码案例 一、文章序言 最近一段时间我打算系统的整理一下关于前端jQuery的相关使用，分享给初学.
jQuery 遍历案例
07-27
jQuery Mobile是一个基于jQuery的JavaScript库，用于开发移动设备上的网页应用。它具有跨平台和跨浏览器的能力，可以让您使用统一的代码开发多种类型的移动设备。jQuery Mobile提供了丰富的UI组件，如导航栏、按钮、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值