jQuery(二)

最新推荐文章于 2023-05-27 23:48:40 发布
最新推荐文章于 2023-05-27 23:48:40 发布
阅读量187 收藏
点赞数
分类专栏： web前端 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45155741/article/details/118368720
版权

jQuery（二）

效果

显示隐藏动画

show(),hide(),toggle()

显示、隐藏、切换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}
			div {
				width: 200px;
				height: 200px;
				background-color: blue;
				display: none;
			}
		</style>
		<title></title>
		<script src="../jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("button").eq(0).click(function(){
					$("div").show(1000, function(){
						alert("显示完成");
					});});
				$("button").eq(1).click(function(){
					$("div").hide(1000, function(){
						alert("隐藏完成");
					});});
				$("button").eq(2).click(function(){
					$("div").toggle(1000, function(){
						alert("切换完成");
					});});
				})
		</script>
	</head>
	<body>
		<button type="button">显示</button>
		<button type="button">隐藏</button>
		<button type="button">切换</button>
		<div id="">
			
		</div>
	</body>
</html>

对联广告

监听网页滚动：scroll()
获取网页滚动的偏移位：var off = $(html, body).scrollTop()

		<script src="../jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				//监听页面滚动
				$(window).scroll(function(){
					//获取滑动的距离
					var off = $("html, body").scrollTop();
					if(off > 400){
						$("img").show(1000);
					}
					else{
						$("img").hide(1000);
					}
				})
			})
		</script>

展开和收起动画

slideDown(),slideUp(),slideToggle()

展开，收起，切换

<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
		* {
			margin: 0px;
			padding: 0px;
		}
		#demo {
			width: 200px;
			height: 200px;
			background-color: #0000FF;
			display: none;
		}
		</style>
		<meta charset="utf-8">
		<title></title>
		<script src="../jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				//编写jquery代码
				$("button").eq(0).click(function(){
					$("#demo").slideDown(1000);
				})
				$("button").eq(1).click(function(){
					$("#demo").slideUp(1000);
				})
				$("button").eq(2).click(function(){
					$("#demo").slideToggle(1000);
				})
			})
		</script>
	</head>
	<body>
		<button type="button">展开</button>
		<button type="button">收起</button>
		<button type="button">切换</button>
		<div id="demo">
			
		</div>
	</body>
</html>

折叠菜单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;
				padding:0px;
				/* border: 1px solid resd; */
			}
			.demo1 {
				list-style: none;
				width: 300px;
				margin: 100px auto;
				text-indent: 2em;
				/* border: 1px solid black;
				border-top: none; */
				/* border-bottom: none; */
			}
			.demo1 li {
				border: 1px solid black;
				line-height: 30px;
				border-bottom: none;
				/* border-left: none;
				border-right: none; */
		/* 		margin-left: 10px; */
			}
			.demo2 {
				list-style: none;
				display: none;
			}
			.demo2 li {
				border-left: none;
				border-right: none;
				text-indent: 3em;
			}
			.demo1>li:last-child {
				border-bottom: 1px solid black;
				border-bottom-left-radius: 10px;
				border-bottom-right-radius: 10px;
			}
			.demo1>li:first-child {
				border-top-left-radius: 10px;
				border-top-right-radius: 10px;
			}
			.demo2>li:hover {
				background-color: #00FFFF;
			}
			.demo1>li:hover {
				background-color: aquamarine;
			}
		</style>
		<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$(".demo1>li").click(function(){
					// $(this).children(".demo2");
					var $demo = $(this).children(".demo2");
					$demo.slideToggle(1000);
				})
			})
		</script>

	</head>
	<body>
		<ul class="demo1">
			<li>一级菜单
				<ul class="demo2">
					<li>二级菜单</li>
					<li>二级菜单</li>
					<li>二级菜单</li>
					<li>二级菜单</li>
				</ul>
			</li>
			<li>一级菜单
				<ul class="demo2">
					<li>二级菜单</li>
					<li>二级菜单</li>
					<li>二级菜单</li>
					<li>二级菜单</li>
				</ul>
			</li>
			
		</ul>
	</body>
</html>

扩充（.stop()方法）

在jquery中，如果想要执行动画，建议先执行stop方法，然后再执行动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}

			.demo1 {
				width: 300px;
				height: 50px;
				list-style: none;
				margin: 200px auto;
				background-color: #FAEBD7;
			}

			.demo1>li {
				/* border: 1px solid red; */
				width: 100px;
				height: 50px;
				line-height: 50px;
				float: left;
				text-align: center;
			}

			.demo2 {
				list-style: none;
				background-color: #00FFFF;
				display: none;
			}
		</style>
		<script src="jQuery3.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				$(".demo1>li").mouseenter(function() {
					var $demo1 = $(this).children(".demo2");
					$demo1.stop();
					$demo1.slideDown();

				})
				$(".demo1>li").mouseleave(function() {
					var $demo1 = $(this).children(".demo2");
					$demo1.stop();
					$demo1.slideUp();
				
				});
			});
		</script>
	</head>
	<body>
		<ul class="demo1">
			<li>下拉菜单1
				<ul class="demo2">
					<li>1</li>
					<li>2</li>
					<li>3</li>
				</ul>
			</li>

			<li>下拉菜单2
				<ul class="demo2">
					<li>1</li>
					<li>2</li>
					<li>3</li>
				</ul>
			</li>

			<li>下拉菜单3
				<ul class="demo2">
					<li>1</li>
					<li>2</li>
					<li>3</li>
				</ul>
			</li>

		</ul>
	</body>
</html>

淡入淡出动画

方法

淡入：fadeIn()
淡出：fadeOut()
切换：fadeToggle()
淡入到：fadeTo()可以传三个参数，第一个为动画时间，第二个为淡入程度，的第三个为淡入结束的执行函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}
			#demo {
				width: 400px;
				height: 400px;
				background-color: red;
				display: none;
			}
		</style>
		<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				//编写jquery代码
				$("button").eq(0).click(function(){
					$("#demo").fadeIn(1000)
				})
				$("button").eq(1).click(function(){
					$("#demo").fadeOut(1000)
				})
				$("button").eq(2).click(function(){
					$("#demo").fadeToggle(1000)
				})
				$("button").eq(3).click(function(){
					$("#demo").fadeTo(1000, 0.5)
				})
			})
		</script>
	</head>
	<body>
		<button>淡入</button>
		<button>淡出</button>
		<button>切换</button>
		<button>淡入到</button>
		<div id="demo">
			
		</div>
	</body>
</html>

弹窗广告demo

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}
			#demo {
				/* border: 1px solid #FF0000;
				width: 380px;
				height: 200px; */
				position: fixed;
				right: 0;
				bottom: 0;
				display: none;
			}
			#demo>span {
				display: block;
				width: 30px;
				height: 30px;
				position: absolute;
				right: 0;
				top: 0;
				/* background-color: red; */
			}
		</style>
		<script type="text/javascript">
			$(function(){
				//编写jquery代码
				$("span").click(function(){
					$("#demo").fadeOut(1000);
				})
				$("#demo").stop().slideDown(1000).fadeOut(1000).fadeIn(1000);
			})
		</script>
	</head>
	<body>
		<div id="demo">
			<img src="img/3.png" />
			<span></span>
		</div>
	</body>
</html>

自定义动画

animate({}, 1000, swing, function(){})

可以有四个参数
第一个参数接受一个对象，对象中传递属性
第二个参数传递时长
第三个参数指定动画节奏：linear(快慢交替)，swing(匀速)
第四个参数传递一个执行结束以后的函数
注：对象中可以累加，可以传递关键字（比如show,hide,toggle）

stop方法和delay方法

delay()方法可以延迟动画
stop()方法传参有以下几点：

 立即停止当前动画,继续执行后续的动画
$("div").stop();
$("div").stop(false);
$ ("div").stop(false, false) ;
立即停止当前和后续所有的动画
$("div").stop(true);
$("div").stop(true，false);
立即完成当前的，继续执行后续动画
$("div").stop(false，true);
立即完成当前的,并且停止后续所有的
$("div").stop(true, true);

添加节点相关方法

append():添加节点到元素内部最后
prepend()：添加节点到元素内部之前
after()：添加节点到元素外部之后
before()：添加节点到元素外部之前

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				//编写jquery代码
				var $li = $("<li>我是新增的li</li>");
				$("button").click(function(){
					$("ul").append($li);
					// $("ul").prepend($li);
					// $("ul").after($li);
					// $("ul").before($li);
				});
			})
		</script>
	</head>
	<body>
		<button type="button">新增节点</button>
		<ul>
			<li>第一个li</li>
			<li>第二个li</li>
		</ul>
	</body>
</html>

删除节点相关方法

remove():删除指定元素
empty()：删除指定元素的内容，指定元素的标签不会受到影响

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				//编写jquery代码
				$("button").click(function(){
					// $("li").remove(".demo");
					$("p").empty();
				});
			})
		</script>
	</head>
	<body>
		<button type="button">删除节点</button>
		<ul>
			<li class="demo">我是第2个li</li>
			<li>我是第1个li</li>
			<li class="demo">我是第3个li</li>
			<li>我是第4个li</li>
			<li>我是第5个li</li>

		</ul>
		<div>
			<p>我是一个段落</p>
		</div>
	</body>
</html>

替换节点相关方法

replaceWith()

复制节点相关方法

clone(false)：浅复制，复制标签但不复制事件
clone(true)：深复制，复制标签同时也复制事件
注：要配合append()方法一起进行调用

注：该篇博客为自己视频学习时记录下的笔记，部分内容来源于学习视频

牛仔不当马仔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
jQuery一级菜单和二级菜单
wen0627的博客
05-07 3370
1、先做一级菜单，第一步设置body，把大概样子写出来。 2、第二步-1、用css设置通配符。 3、第二步-2、设置ul标签基础样式 。 4、第二步-3、设置类样式。 5、设置jquery内容的第一步先引入jQuery文件。 6、第二步设置一个函数在里面放入我们要设置成的效果，获取文档在在载入页面是的效果，绑定类设置鼠标移入展示一级菜单内容，鼠标移出隐藏内容。 7、一级菜单的说完了，现在来说二级菜单的内容怎么设置移入显示然后在移入下一个就显示下一个隐藏上一个...
jQuery二级联动城市选择特效代码
03-20
jQuery二级联动城市选择代码是一款仿Boss招聘网站的点击下拉二级联动城市选择，适用于搜索框分类城市选择代码。
jQuery二进制、十进制、十六进制转换
LiGuogang
11-12 1930
十进制数 d = 15，转为二进制数 b ？ // 十进制数 var d = 15; // 二进制数 var b = d.toString(2); // '1111' 十进制数 d = 15，转为十六进制数 h ？ // 十进制数 var d = 15; // 十六进制数 var h = d.toString(16); // 'f' 二进制数 b = ‘1111’，转为十进制数 d ？ // 二进制数 var b = "1111"; // 十进制数 var d = parseInt("1111", .
JQuery实现二级联动
qq_43379611的博客
04-06 1272
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>二级联动_JQ</title> <style> </style> <script src="jquery-1.9.1.min.js"></script> </head> <body> <!--下拉框.
jQuery二、常用API
李宥的博客
03-28 1115
原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。
jQuery实现二级侧边导航菜单
ovocc的博客
03-21 1740
案例向
如何使用JQuery实现Js二级联动和三级联动
是个非常热爱生活、乐观、奋斗、努力的逗比青年
05-27 2138
好了，以上代码就是使用JQuery库来实现的上面的二级三级联动，希望多多支持！
jquery实现二级菜单
enthan809882的博客
10-27 2504
代码如下： <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <meta charset="utf-8"> <title></title> <style...
jQuery
热门推荐
qq_44930306的博客
08-08 1万+
这里集合了一些jQuery的一些基础知识点！
jQuery遍历二维数组
zhangxy
12-04 4696
var info = [[1,'jack'],[0,'mary'],[3,'tom']]; $.each(info, function(i, j){ $.each(j, function(m, n){ document.write(n); if(m &lt; j.length - 1){ document.write("=&gt;...
jQuery练习——下拉菜单
m0_55394328的博客
09-12 3391
哈喽大家好，本次是jQuery案例练习系列第一期，本期是用jQuery实现下拉菜单。 笔者还是前端的菜鸟，还请大家多多指教呀~
jquery二级高亮下拉导航效果特效代码
03-20
jquery二级高亮下拉导航效果是一款基于jquery代码实现的简洁二级下拉导航代码，鼠标悬停后下拉显示二级内容，同时一级栏目背景保持高亮显示。
jQuery二级下拉滑动导航菜单特效代码
03-20
jQuery二级下拉滑动导航菜单基于jquery-1.7.2.min.js制作，鼠标经过一级菜单，下拉显示二级菜单，渐隐效果。
jquery二级三级多级栏目导航代码.zip
08-19
jquery二级三级多级栏目导航代码，分享出来给有需要的朋友。
jQuery二进制数字时钟代码
06-10
一款很烧脑的jQuery二进制数字时钟代码，时分秒都是用二进制来表示，绿色表示该位值是1，灰色则表示0。其实实现原理也是很简单，无非是将时钟的时分秒分别实时转换成二进制，然后随着本地时间的更新而实时刷新。一般...
微信小程序wx.request使用post向后端传递数组，后端无法接收到数据的解决
qq_45155741的博客
08-06 3182
wx.request({ url: 'http://127.0.0.1:8090/inStorkAPI/php/add_order_del_multi_carts.php', data: { "cartIds":cartIdarr }, metho...
使用vue-monaco-editor遇到的坑--
qq_45155741的博客
11-30 2624
编辑器重复加载上次编辑器中的内容，不会被新的内容替代 直接上代码 给MonacoEditor加上属性key <MonacoEditor width="100%" height="537" :key="randomkey" language="html" theme="vs-dark" :code="code" > </MonacoEditor> 每次重新给c
微信小程序 访问数据api接口(get请求和获取父页面传递参数并向接口传参获取数据）
qq_45155741的博客
08-01 2457
/** * 生命周期函数--监听页面加载 */ onLoad: function (options) { wx.request({ url: 'http://127.0.0.1:8090/inStorkAPI/php/goods_detail.php', data: { //options.goods_id为父页面传递过来的参数goods_id为接口中接收参数的参数名 ...
微信小程序创建订单号思路（附将带其它符号字符串转换成纯数字字符串）
qq_45155741的博客
08-06 2251
// 1获取当前时间 let time = util.formatTime(new Date()); // 2创建订单号 // 拼接时间字符和电话号码 // let orderNumber = time + telNumber; // 利用正则表达式，将原有字符串转化为只有数字 ...
jquery二级菜单
最新发布
11-18
以下是一个简单的jQuery二级菜单的例子： HTML代码： ```html <li><a href="#">菜单1 <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单2</a></li> <li><a href="#">子菜单3</a></li> <li><a ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

牛仔不当马仔

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值