前端路线--JQuery（day04）

已于 2022-03-30 10:41:21 修改
阅读量703 收藏 1
点赞数
分类专栏： 前端 文章标签： 前端 javascript html5
于 2022-03-30 10:40:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yan9_9/article/details/123840357
版权

01-绑定事件处理函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="JS/jquery.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.box {
				width: 200px;
				height: 200px;
				background-color: #00BFFF;
			}

			.box2 {
				width: 200px;
				height: 200px;
				background-color: #ccc;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
		<div class="box2"></div>
	</body>
	<script type="text/javascript">
		// 1. on('事件类型', '回调函数') //绑定多个事件
		$(function() {
			$('.box').on('click mouseover', function() {
				alert('111')
			})

			//2.绑定不同的事件  on({事件:fun,事件:fun})

			$('.box2').on({
				click: function() {
					alert('222')
				},
				mouseover: function() {
					alert('222')
				}
			})
		})
		
		/* 
				.on('事件类型', '子选择器','回调函数') 
				子选择器:指定子选择器,绑定在儿子身上(用于事件委托)
				*注意:因为有冒泡，所以出了这个机制
				* 
				
				on()的优点:
				1.绑定多个事件
				2.实现事件委托
				3.未来动态创建的元素绑定事件
		 */
	</script>
</html>

02-一次性事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="JS/jquery.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.box {
				width: 200px;
				height: 200px;
				background-color: #00BFFF;
			}

		</style>
	</head>
	<body>
		<div class="box"></div>
		<div class="box2"></div>
	</body>
	<script type="text/javascript">
		// 1. one('事件','函数') //一次性事件
		$(function() {
			$('.box').one('click',function () {
				alert('111')
			})
		})

	</script>
</html>

03-自动触发事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="JS/jquery.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.box {
				width: 200px;
				height: 200px;
				background-color: #00BFFF;
			}

		</style>
	</head>
	<body>
		<div class="box"></div>
		<div class="box2"></div>
	</body>
	<script type="text/javascript">
		// 1. trigger(type) //自动触发事件
		$(function() {
			$('.box').click(function () {
				alert('111')
			}).trigger('click')
		})
		
		/* 
		自动触发:
		 1.		.click()
		 2.		.trigger()
		 3.		.triggerHandler('事件')		//不会触发元素的默认行为
		 */
	</script>
</html>

04-移除事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="JS/jquery.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.box {
				width: 200px;
				height: 200px;
				background-color: #00BFFF;
			}

		</style>
	</head>
	<body>
		<div class="box"></div>
		<div class="box2"></div>
	</body>
	<script type="text/javascript">
		// 1.off('事件类型') 	//移除单个事件
		//不写参数，默认移除所有
		//$('ul').off('click','li')		//解绑事件委托
		$(function() {
			$('.box').click(function () {
				alert('111')
			})
			$('.box').off();
		})
		
	</script>
</html>

05-其他事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			img{
				width: 300px;
			}
		</style>
	</head>
	<body>
		<img src="./img/微信图片_20220329191810.jpg" >
		<br>
		<img src="img/微信图片_20220329191815.jpg" >
	</body>
</html>

在这里插入图片描述
在这里插入图片描述

06-JQ的动画效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="JS/jquery.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.box{
				width: 300px;
				height: 300px;
				background-color: #00BFFF;
			}
		</style>
	</head>
	<body>
		<button type="button" >显示</button>
		<button type="button" >隐藏</button>
		<button type="button">切换</button>
		<div class="box"></div>
	</body>
	<script type="text/javascript">
		$(function () {
			//显示
			$('button').first().click(function () {
				$('.box').show(1000)
			})
			//隐藏
			$('button').eq(1).click(function () {
				$('.box').hide(1000)
			})
			//切换
			$('button').last().click(function () {
				$('.box').toggle(1000)
			})
		})
		
		/* 
		1.
		 show([speed],[easing],[fun])	//显示元素
			 speed:		动画执行的时长(1000)	slow(600)	fast(200)
			 easing:	动画的样式
						swing	//开始和结束比较慢
						linear	//匀速运动
			fun:		回调函数
			
		2.
			hide([speed],[easing],[fun])	//隐藏元素
						 speed:		动画执行的时长(1000)	slow(600)	fast(200)
						 easing:	动画的样式
									swing	//开始和结束比较慢
									linear	//匀速运动
						fun:		回调函数
						
		3.
		toggle([speed],[easing],[fun])	//切换显示和隐藏
					 speed:		动画执行的时长(1000)	slow(600)	fast(200)
					 easing:	动画的样式
								swing	//开始和结束比较慢
								linear	//匀速运动
					fun:		回调函数
		 */
		
	</script>
</html>

07-滑动效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="JS/jquery.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.box{
				width: 300px;
				height: 300px;
				background-color: #00BFFF;
			}
		</style>
	</head>
	<body>
		<button type="button" >滑下</button>
		<button type="button" >滑上</button>
		<button type="button">切换</button>
		<div class="box"></div>
	</body>
	<script type="text/javascript">
		$(function () {
			//滑下
			$('button').first().click(function () {
				$('.box').slideDown(1000)
			})
			//滑上
			$('button').eq(1).click(function () {
				$('.box').slideUp(1000)
			})
			//切换
			$('button').last().click(function () {
				$('.box').slideToggle(1000)
			})
		})
		
		/* 
		1.
		 slideDown([speed],[easing],[fun])	//滑下
			 speed:		动画执行的时长(1000)	slow(600)	fast(200)
			 easing:	动画的样式
						swing	//开始和结束比较慢
						linear	//匀速运动
			fun:		回调函数
			
		2.
			slideUp([speed],[easing],[fun])	//滑上
						 speed:		动画执行的时长(1000)	slow(600)	fast(200)
						 easing:	动画的样式
									swing	//开始和结束比较慢
									linear	//匀速运动
						fun:		回调函数
						
		3.
		slideToggle([speed],[easing],[fun])	//切换
					 speed:		动画执行的时长(1000)	slow(600)	fast(200)
					 easing:	动画的样式
								swing	//开始和结束比较慢
								linear	//匀速运动
					fun:		回调函数
		 */
		
	</script>
</html>

08-停止动画排队

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="JS/jquery.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.box{
				width: 300px;
				height: 300px;
				background-color: #00BFFF;
			}
		</style>
	</head>
	<body>
		<button type="button" >显示</button>
		<button type="button" >隐藏</button>
		<button type="button">切换</button>
		<div class="box"></div>
	</body>
	<script type="text/javascript">
		$(function () {
			//滑下
			$('button').first().click(function () {
				$('.box').stop().slideDown(1000)
			})
			//滑上
			$('button').eq(1).click(function () {
				$('.box').stop().slideUp(1000)
			})
			//切换
			$('button').last().click(function () {
				$('.box').stop().slideToggle(1000)
			})
		})
		
		/* 
			.stop()		//停止动画排队
			/*注意:必须写到动画前面
		 */
		
	</script>
</html>

09-淡入淡出效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="JS/jquery.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.box{
				width: 300px;
				height: 300px;
				background-color: #00BFFF;
			}
		</style>
	</head>
	<body>
		<button type="button" >淡入</button>
		<button type="button" >淡出</button>
		<button type="button">切换</button>
		<button type="button">修改透明度</button>
		<div class="box"></div>
	</body>
	<script type="text/javascript">
		$(function () {
			//淡入
			$('button').first().click(function () {
				$('.box').fadeIn(1000)
			})
			//淡出
			$('button').eq(1).click(function () {
				$('.box').fadeOut(1000)
			})
			//切换
			$('button').eq(2).click(function () {
				$('.box').fadeToggle(1000)
			})
			//渐进的方式调整到指定的不透明度
			$('button').last().click(function () {
				$('.box').fadeTo(200,0.5)
			})
		})
		
		/* 
		1.
		 fadeIn([speed],[easing],[fun])	//淡入
			 speed:		动画执行的时长(1000)	slow(600)	fast(200)
			 easing:	动画的样式
						swing	//开始和结束比较慢
						linear	//匀速运动
			fun:		回调函数
			
		2.
			fadeOut([speed],[easing],[fun])	//淡出
						 speed:		动画执行的时长(1000)	slow(600)	fast(200)
						 easing:	动画的样式
									swing	//开始和结束比较慢
									linear	//匀速运动
						fun:		回调函数
						
		3.
		fadeToggle([speed],[easing],[fun])	//切换
					 speed:		动画执行的时长(1000)	slow(600)	fast(200)
					 easing:	动画的样式
								swing	//开始和结束比较慢
								linear	//匀速运动
					fun:		回调函数
					
		4.
		.fadeTo([speed],opcity,[easing],[fun])				//渐进的方式调整到指定的不透明度
			speed:必写  
			opcity: 必写  0-1
		 */
		
	</script>
</html>

10-自定义动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="JS/jquery.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
		body{
			position: relative;
		}
			.box{
				width: 300px;
				height: 300px;
				background-color: #00BFFF;
				position: absolute;
				
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
	<script type="text/javascript">
		$(function () {
			$('.box').click(function () {
				$(this).animate({
					top: 500,
					left: 500
				})
			})
		})
		
		
		/* 
		//自定义动画
		 animate({属性},[speed],[easing],[fun])
		 */
	</script>
</html>

11-案例–返回顶部

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="JS/jquery.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			div{
				width: 1000px;
				height: 600px;
				margin: 0 auto;
			}
			div:nth-child(even){
				background-color: pink;
			}
			div:nth-child(odd){
				background-color: deepskyblue;
			}
			.back{
				width: 50px;
				height: 50px;
				background-color: aqua;
				position: fixed;
				left: 20px;
				bottom: 100px;
				font-size: 18px;
				text-align: center;
				cursor: pointer;
				/* display: none; */
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
		<div class="box2"></div>
		<div class="box3"></div>
		<div class="box4"></div>
		<div class="box5"></div>
		<div class="box6"></div>
		<div class="back">返回顶部</div>
	</body>
	<script type="text/javascript">
		$(function () {
			//1.监听window的滚动距离
			$(window).scroll(function () {
				if($(this).scrollTop()>800){
					$('.back').fadeIn(1000);
				}else{
					$('.back').fadeOut(1000);
				}
			})
			//2.给back添加点击事件
			//监听html的scrollTop
			$('.back').click(function () {
				$('html').animate({
					scrollTop:0
				},1000)
			})
		})
	</script>
</html>

12-案例–跳楼机

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="JS/jquery.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.header,
			.banner,
			.main1,
			.main2,
			.main3,
			.main4,
			.footer {
				width: 1200px;
				margin: 0 auto;
			}

			/* 头部 */

			.header {
				height: 400px;
				background-color: pink;
			}

			.banner {
				height: 500px;
				background-color: skyblue;
			}

			.main1 {
				height: 500px;
				background-color: #BDB76B;
			}

			.main2 {
				height: 500px;
				background-color: skyblue;
			}

			.main3 {
				height: 500px;
				background-color: #EE9900;
			}

			.main4 {
				height: 500px;
				background-color: mediumturquoise;
			}

			.footer {
				height: 500px;
				border: 1px solid green;
			}

			.side-bar {
				width: 80px;
				position: fixed;
				bottom: 40%;
			 left: 10px;
				/* 初始楼层不显示 */
				display: none;
			}

			.side-bar>div {
				height: 50px;
				border: 1px solid #666;
				text-align: center;
				line-height: 50px;
			}

			.side-bar .active {
			 background-color: orangered;
			}
		</style>
	</head>
	<body>
		<div class="header">头部区域</div>
		<div class="banner">广告区域</div>
		<!-- 主体 -->
		<div class="main1 floor">主体区域1-女装</div>
		<div class="main2 floor">主体区域2-男装</div>
		<div class="main3 floor">主体区域3-童装</div>
		<div class="main4 floor">主体区域4-化妆品</div>
		<div class="footer">底部区域</div>
		<!-- 侧边栏 -->
		<div class="side-bar">
			<div class="bar1 item active">女装</div>
			<div class="bar2 item">男装</div>
			<div class="bar3 item">童装</div>
			<div class="bar4 item">化妆品</div>
		</div>
	</body>
	<script type="text/javascript">
		$(function () {
			//判断在页面中间刷新是让跳楼机出现
			if($(window).scrollTop()>=$('.main1').offset().top){
				$('.side-bar').fadeIn(1000);
			}else{
				$('.side-bar').fadeOut(1000);
			}
			//1.判断让楼层导航显示
			$(window).scroll(function () {
				if($(window).scrollTop()>=$('.main1').offset().top){
					$('.side-bar').fadeIn(1000);
				}else{
					$('.side-bar').fadeOut(1000);
				}
				
				//2.判断让跳楼机进行排他(获取内容区的集合和跳楼机的集合)
				$('.floor').each(function (index,value) {
					//如果window的滚动距离>楼层距离顶部的偏移量
					if($(window).scrollTop()>=$(value).offset().top){
						//跳楼机切换(排他)
						//获取所有的楼层导航集合,用.eq(index)值可以找到对应的楼层
						$('.item').eq(index).addClass('active').siblings().removeClass('active');
					}
				})
			})
			
			
		})
	</script>
</html>
喝西瓜汁的兔叽Yan
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Work-Day-Scheduler-Jquery:使用jquery和时刻制作的调度程序
04-04
【标题】"Work-Day-Scheduler-Jquery:使用jquery和时刻制作的调度程序"是一个项目，它利用了jQuery和Moment.js库来创建一个实用的工作日程安排工具。这个工具旨在帮助用户高效地管理他们的时间，特别是在工作日中。 ...
15day-study-jquery-.rar_JavaScript/JQuery_Java_
08-11
在本资源"15day-study-jquery-.rar"中，你将踏上一个为期15天的快速学习jQuery的旅程。jQuery是一个强大的JavaScript库，它极大地简化了JavaScript编程，特别是对于网页上的DOM操作、事件处理、动画效果以及AJAX交互...
jq 超简单跳楼效果解析
weixin_34110749的博客
03-22 123
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ margin: 0; padding: 0;} .list_li{ posi...
浅谈jquery电梯事件
不是死水
05-29 91
初学电梯事件 1.本人第一次用jquery做电梯事件，在此分享一些经验,小白一个，若有更好的方法，请随时指正 先引入jquery库 <script src="js/jquery.min.js"></script> 首先是显示与隐藏，个人觉得用fadeIn（），fadeOut（）效果会更好些， 当页面滚动到目标是显示 toggelTop() function toggelTop(){ if($(document).scrollTop() >= top
前端路线--JQuery（day01）
Yan9_9的博客
03-25 890
JQuery的引入方式 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
前端路线--bootstrap（day02）
Yan9_9的博客
04-09 903
day02-01-图片 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &lt
前端路线--bootstrap（day03）
Yan9_9的博客
04-09 772
day03-01-面包屑导航 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
前端路线--bootstrap（day01）
Yan9_9的博客
04-07 781
day01-01-bootstrap基础 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt
前端路线--Nodejs（day07）
Yan9_9的博客
04-29 707
好谷大牛后台管理系统 文件目录 app.js文件 /* cnpm install express ejs body-parser md5 mongoose moment --save 1.搭建服务器 2.引入ejs模板 2.1配置模板类型 2.2配置模板路径 2.3配置静态资源目录 3.配置路由渲染ejs文件 3.1路由模块化--在项目目录day07中新建router文件夹 3.2在router文件夹中新建用户user_router.js文件,内部放置和用户相关的
前端路线--Nodejs（day06）
Yan9_9的博客
04-28 886
好谷大牛管理系统 文件夹图片 app.js //引入模块 let express = require('express'); let ejs = require('ejs'); let mongoose = require('mongoose'); let bodyParser = require('body-parser'); let usersRouter = require('./router/users_router'); require('./database/db.js'); //服务器---
前端学习Day27-jQuery
ITsheng_ge的博客
07-24 225
jQuery的应用
关于前端服务器字体的引用
qq_69304031的博客
09-02 357
服务器字体是一种强大的工具，可以帮助我们实现全场景字体风格的统一。通过定义服务器字体，我们可以确保网页在不同的设备和浏览器上都能呈现出一致的字体效果，提升用户体验和品牌形象。在使用服务器字体时，需要注意字体文件的版权问题，并确保字体文件的加载速度不会影响网页的性能。希望这篇博客对你在网页设计中使用服务器字体有所帮助。如果你有任何问题或建议，欢迎在评论区留言。
后端输出二进制数据，前端fetch接受二进制数据，并转化为字符输出
cdcdhj的博客
09-01 488
在这个前端代码中，我们使用fetch API请求PHP脚本，并获取二进制数据。然后，我们将ArrayBuffer转换为字符串，以便在JavaScript中使用。在PHP中，你可以将字符串或其他数据类型转换为二进制数据，并通过HTTP响应发送给前端。
从面向对象(OOP)到面向切面(AOP)：编程范式的演变
妍思码匠的博客
08-30 1379
本文深入探讨了面向切面编程（AOP）在前端开发中的应用，解释了AOP如何通过动态增强与代码复用、降低模块间耦合度，为前端项目带来更高效、更模块化的解决方案。通过具体案例分析，如日志记录切面和动态埋点的实现，展示了如何利用装饰器模式、高阶组件等技术在前端实现AOP。理解AOP的原理与实践，将有助于开发者构建更易于维护和扩展的前端应用。无论你是前端新手还是资深开发者，本文都将为你提供有价值的见解和实用技巧。
vue3使用-watch监听总结
weixin_44072254的博客
09-01 491
{deep: true, immediate: true, flush: 'post'}：deep是深度监听；flush:如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'，sync'创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发；flush: 'post'， 如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'flush: sync'，创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发。监听数组的方式-示例。
深入理解JavaScript闭包：避免常见的内存泄漏问题
最新发布
官方推荐
09-02 3732
深入理解JavaScript闭包：避免常见的内存泄漏问题
材料表面缺陷检测系统源码分享 # [一条龙教学YOLOV8标注好的数据集一键训练_70+全套改进创新点发刊_Web前端展示]
xuehai996的博客
08-29 2429
材料表面缺陷检测系统源码分享 # [一条龙教学YOLOV8标注好的数据集一键训练_70+全套改进创新点发刊_Web前端展示]
15天掌握jQuery实战教程
- Day 11至Day 15进一步扩展jQuery的应用范围，如多文件上传、Lightbox插件、表格操作、工具提示以及拖拽效果和选择器，这些内容涵盖了网页交互设计的多个重要方面。 通过这个15天的学习计划，读者不仅可以掌握...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值