Jquery事件大全

x33g5p2x  于11个月前 转载在 jQuery  
字(24.6k)|赞(0)|评价(0)|浏览(112)

Jquery事件大全

事件介绍和支持的对象

事件描述支持元素或对象
blur( )元素失去焦点a, input, textarea, button, select, label, map, area
change( )内容改变 仅适用于表单input, textarea, select
click( )鼠标点击某个对象几乎所有元素
hover()鼠标悬浮在某个对象上几乎所有元素 等同
dblclick( )鼠标双击某个对象几乎所有元素
focus( )元素获得焦点a, input, textarea, button, select, label, map, area
keydown( )某个键盘的键被按下几乎所有元素
keypress( )某个键盘的键被按下或按住几乎所有元素
keyup( )某个键盘的键被松开几乎所有元素
load( )加载外部文件html txt …
mousedown()某个鼠标按键被按下 可以监听 鼠标左右中几乎所有元素
mousemove()鼠标在元素内部移动时不断触发几乎所有元素
mouseout( )不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。几乎所有元素
mouseover( )鼠标被移到某元素之上 持续冒泡 不论鼠标指针穿过被选元素或子元素,都会触发几乎所有元素
mouseenter鼠标移入元素范围内触发 该事件不冒泡 即鼠标移到子元素上时不会触发。 也就是触发一次几乎所有元素
mouseleave鼠标移出元素范围时触发,该事件不冒泡,即鼠标移到子元素时不会触发。 也就是触发一次几乎所有元素
mouseup( )鼠标点击后被松开几乎所有元素
resize( )窗口或框架被调整尺寸window, iframe, frame
scroll( )滚动文档的可视部分时window
select( )文本被选定document, input, textarea
submit( )表单 提交按钮被点击form

我们来对上面的大部分常用的事件进行演示 没有演示到的自行查百度 还有很多事件在1.8之后被废弃掉了 以上都是能用的事件

常用的窗体事件

load( )加载事件

本质是使用Ajax来完成的

创建一个new_file1.html

<h1>哈哈</h1>
<h1>哈哈</h1>
<p id="p_1">idididididididi</p>
<p class="class_1">123456321</p>
<p class="class_1">asdgf</p>

可以使用load 来导入其他html的指定内容 可以通过 class id 和 标签选择器 这三种方式 多个使用逗号隔开

语法: load(‘地址 选择器…’,回调函数 )

$(document).ready(function(){
					$("#Div").load('./new_file1.html h1,#p_1,.class_1',function(da){
							console.log("加载成功")
					});
			})

resize( ) 窗口大小变动

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

	</head>
	<body>

		<div style="width:1500px;height: 1000px;border: 1px saddlebrown solid;"></div>
		<script type="text/javascript" src="./jquery-3.4.1.js"></script>
		<script> $(window).resize(function() { console.clear() console.log("窗体被调整了") console.log("浏览器窗口可视区域高度___" + $(window).height()); //浏览器时下窗口可视区域高度 console.log("浏览器窗口可视区域宽度___" + $(window).width()); //浏览器时下窗口可视区域宽度 console.log("浏览器窗口文档总高度____" + $(document).outerHeight(true)); //浏览器时下窗口文档body的总高度 console.log("浏览器窗口文档总宽度_____" + $(document).width()); //浏览器时下窗口文档对于象宽度 console.log("获取滚动条到顶部的高度_____" + $(document).scrollTop()); //获取滚动条到顶部的垂直高度 console.log("获取滚动条到左边的宽度___" + $(document).scrollLeft()); //获取滚动条到左边的垂直宽度 }); </script>

	</body>
</html>

scroll( ) 滚动条发送变化

下面是一些常用的 功能代码

游览器窗口监听 滚动条滚动方向

<div style="width: 1000px; height: 200px; border: 1px salmon solid;">
			</div>
			<div style="width: 200px; height: 200px; border: 1px cadetblue solid;">
			</div>
			<div style="width: 200px; height: 200px; border: 1px darkgoldenrod solid;">
			</div>
			<div style="width: 200px; height: 200px; border: 1px aquamarine solid; background-color: seashell;" id="div_s">
				测试区
			</div>
			<div style="width: 200px; height: 200px; border: 1px sandybrown solid;">
			</div>
			<div style="width: 200px; height: 200px; border: 1px gold;">
			</div>
			<div style="width: 200px; height: 200px; border: 1px darkcyan solid;">
			</div>
		<script type="text/javascript" src="./jquery-3.4.1.js"></script>
			<script type="text/javascript">
				window.onscroll = function(e){
					console.clear()
				        scrollFunc();
				        if(scrollDirection == 'down'){
				            //页面向下滚动要做的事情
							console.log("下")
				        }
				         if(scrollDirection == 'up'){
				            //页面向上滚动要做的事情
							console.log("上")
				        }
	
						if(scrollDirection == 'left'){
						    //页面向左滚动要做的事情
							console.log("左")
							
						}
						if(scrollDirection == 'right'){
						    //页面向右滚动要做的事情
									console.log("右")
						}
				    }
				
				
				var scrollAction = {x: 'undefined', y: 'undefined'}, scrollDirection;
				function scrollFunc() {
				    if (typeof scrollAction.x == 'undefined') {
				        scrollAction.x = window.pageXOffset;
				        scrollAction.y = window.pageYOffset;
				    }
				    var diffX = scrollAction.x - window.pageXOffset;
				    var diffY = scrollAction.y - window.pageYOffset;
				    if (diffX < 0) {
				        // Scroll right
				        scrollDirection = 'right';
				    } else if (diffX > 0) {
				        // Scroll left
				        scrollDirection = 'left';
				    } else if (diffY < 0) {
				        // Scroll down
				        scrollDirection = 'down';
				    } else if (diffY > 0) {
				        // Scroll up
				        scrollDirection = 'up';
				    } else {
				        // First scroll event
				    }
				    scrollAction.x = window.pageXOffset;
				    scrollAction.y = window.pageYOffset;
				}
			</script>

自己查看控制台 看效果

查询 带滚动条的元素 的滚动方向

一般就只有上滚动和下滚动 而不允许左右滚动

$("#texts_1").scroll(function(){
				console.clear()
				var oScrollTop=$(this).scrollTop();
				    if ( oScrollTop > 80) {
				      sign = oScrollTop;//更新scrollTop
				      console.log('向下');
				    }
				    if ( oScrollTop< 80) {
				      sign = oScrollTop//更新scrollTop
				      console.log('向上');
				    }
			})

当div 超出可视部分 和离开可视部分 那么就会触发****打开控制台查看结果

可视部分就是游览器能看见内容的区域 会随着调整游览器窗体大小而变化

<div style="width: 1000px; height: 200px; border: 1px salmon solid;">
		</div>
		<div style="width: 200px; height: 200px; border: 1px cadetblue solid;">
		</div>
		<div style="width: 200px; height: 200px; border: 1px darkgoldenrod solid;">
		</div>
		<div style="width: 200px; height: 200px; border: 1px aquamarine solid; background-color: seashell;" id="div_s">
			测试区
		</div>
		<div style="width: 200px; height: 200px; border: 1px sandybrown solid;">
		</div>
		<div style="width: 200px; height: 200px; border: 1px gold;">
		</div>
		<div style="width: 200px; height: 200px; border: 1px darkcyan solid;">
		</div>
	<script type="text/javascript" src="./jquery-3.4.1.js"></script>
		<script type="text/javascript"> // 第一种情况 由于元素随页面向上滚动, 整个页面滚动的距离 大于 (元素距离页面顶部的距离 + 元素本身的高度 )-> 超出 // 第二种情况 由于元素随页面向下滚动, 整个页面滚动的距离 小于 (元素距离页面顶部的距离 - 浏览器可见区域高度 )-> 超出 // 第三种情况 就是 元素 在可视 区域 //需要判断的元素 var en=document.getElementById("div_s"); $(document).scroll(function() { console.clear() // 1.元素距离页面顶部的距离 var mainOffsetTop = $(en).offset().top; console.log("元素距离页面顶部的距离 " + mainOffsetTop) // 2.元素的高度 var mainHeight = $(en).height(); console.log("元素的高度" + mainHeight) // 3.页面滚动的距离 var windowScrollTop = $(window).scrollTop(); // 4.浏览器可见区域的高度 var windowHeight = $(window).height(); console.log("浏览器可见区域的高度" + windowHeight) var pd1 = windowScrollTop > (mainOffsetTop + mainHeight) var pd2 = windowScrollTop < (mainOffsetTop - windowHeight) var pd3 = windowScrollTop < mainOffsetTop && !(windowScrollTop < (mainOffsetTop - windowHeight + mainHeight)) var pd4 = windowScrollTop > (mainOffsetTop - windowHeight + mainHeight) && !(windowScrollTop > mainOffsetTop) if (pd1) { console.log("元素被上面完全盖住了") } if (pd2) { console.log("元素被下面完全盖住了") } scrollFunc(); //开启滚动检测 if (scrollDirection == 'up') { //页面向上滚动要做的事情 if (pd3) { //必须元素完整的从上面显示出来 console.log("元素从上面完整显示出来了") } } if (scrollDirection == 'down') { //页面向下滚动要做的事情 if (pd4) { //必须元素完整的从下面显示出来 console.log("元素从下面完整显示出来了") } } if (pd1 == false && pd2 == false) { //只要元素漏出一点点都可以 算是在可视区域 console.log("元素在可视区域") } }) var scrollAction = { x: 'undefined', y: 'undefined' }, scrollDirection; function scrollFunc() { if (typeof scrollAction.x == 'undefined') { scrollAction.x = window.pageXOffset; scrollAction.y = window.pageYOffset; } var diffX = scrollAction.x - window.pageXOffset; var diffY = scrollAction.y - window.pageYOffset; if (diffX < 0) { // Scroll right scrollDirection = 'right'; } else if (diffX > 0) { // Scroll left scrollDirection = 'left'; } else if (diffY < 0) { // Scroll down scrollDirection = 'down'; } else if (diffY > 0) { // Scroll up scrollDirection = 'up'; } else { // First scroll event } scrollAction.x = window.pageXOffset; scrollAction.y = window.pageYOffset; } </script>

我们一般情况能用到的

// 元素被上面完全盖住了
				var pd1 = windowScrollTop > (mainOffsetTop + mainHeight)
				//元素被下面完全盖住了
				var pd2 = windowScrollTop < (mainOffsetTop - windowHeight)
				// 元素从上面完全显示出来
				var pd3 = windowScrollTop < mainOffsetTop && !(windowScrollTop < (mainOffsetTop - windowHeight + mainHeight))
				// 元素从下面完全显示出来
				var pd4 = windowScrollTop > (mainOffsetTop - windowHeight + mainHeight) && !(windowScrollTop > mainOffsetTop)
				//元素被下面盖住一半
				var pd5 =windowScrollTop < (mainOffsetTop - (windowHeight-(mainHeight/2) ))
				//元素从下面显示出来 
				var pd6=windowScrollTop < (mainOffsetTop - (windowHeight-mainHeight ))
				
				//元素从上面显示出来 
				var pd7=windowScrollTop < (mainOffsetTop+mainHeight)
				// 元素被上面盖住了一半 
				var pd8 = windowScrollTop > (mainOffsetTop + (mainHeight/2))

我们想要完成 某些功能 可以从上面的代码中 提取 出你想要的功能 来组合

比如:

我们可以根据 元素 进入到可视部分 和 离开可视部分 写一个 显示和隐藏动画

当元素从 不可视 到 可视 执行一次显示动画

当元素从 可视 到 不可视 执行一次隐藏动画

以页面底部为基准

我们可以定义二个变量 第一个变量来作为显示限制只执行一次 第二个变量作为隐藏限制只执行一次

以一半为基准隐藏 以开头为基准 显示

下面案例 使用的是Jquery 自带的 淡入 淡出 动画

<div style="width: 1000px; height: 200px; border: 1px salmon solid;">
		</div>
		<div style="width: 200px; height: 200px; border: 1px cadetblue solid;">
		</div>
		<div style="width: 200px; height: 200px; border: 1px darkgoldenrod solid;">
		</div>
		<div style="width: 200px; height: 200px; border: 1px aquamarine solid; background-color: seashell;" id="div_s">
			测试区
			<div style="display: none; width: 100px;height: 100px;background-color: black;" id="div_s_1">
			</div>
		</div>
		<div style="width: 200px; height: 200px; border: 1px sandybrown solid;">
		</div>
		<div style="width: 200px; height: 200px; border: 1px gold;">
		</div>
		<div style="width: 200px; height: 200px; border: 1px darkcyan solid;">
		</div>
		<script type="text/javascript" src="./jquery-3.4.1.js"></script>
		<script type="text/javascript"> var shwo1 = true, hide1 = true; // 第一种情况 由于元素随页面向上滚动, 整个页面滚动的距离 大于 (元素距离页面顶部的距离 + 元素本身的高度 )-> 超出 // 第二种情况 由于元素随页面向下滚动, 整个页面滚动的距离 小于 (元素距离页面顶部的距离 - 浏览器可见区域高度 )-> 超出 // 第三种情况 就是 元素 在可视 区域 //需要判断的元素 var en = document.getElementById("div_s"); $(document).scroll(function() { console.clear() // 1.元素距离页面顶部的距离 var mainOffsetTop = $(en).offset().top; console.log("元素距离页面顶部的距离 " + mainOffsetTop) // 2.元素的高度 var mainHeight = $(en).height(); console.log("元素的高度" + mainHeight) // 3.页面滚动的距离 var windowScrollTop = $(window).scrollTop(); // 4.浏览器可见区域的高度 var windowHeight = $(window).height(); console.log("浏览器可见区域的高度" + windowHeight) //元素被下面盖住一半 var pd5 = windowScrollTop < (mainOffsetTop - (windowHeight - (mainHeight / 2))) //元素从下面显示出来 var pd6 = windowScrollTop < (mainOffsetTop - (windowHeight - mainHeight)) scrollFunc(); //开启滚动检测 if (scrollDirection == 'up') { //页面向上滚动要做的事情 if (pd5 && hide1) { console.log("元素一半开始隐藏") $("#div_s_1").hide(500) hide1 = false shwo1 = true // alert("隐藏") } } if (scrollDirection == 'down') { //页面向下滚动要做的事情 if (pd6 && shwo1) { //必须元素完整的从下面显示出来 console.log("开始显示") $("#div_s_1").show(500) shwo1 = false hide1 = true // alert("显示") } } }) var scrollAction = { x: 'undefined', y: 'undefined' }, scrollDirection; function scrollFunc() { if (typeof scrollAction.x == 'undefined') { scrollAction.x = window.pageXOffset; scrollAction.y = window.pageYOffset; } var diffX = scrollAction.x - window.pageXOffset; var diffY = scrollAction.y - window.pageYOffset; if (diffX < 0) { // Scroll right scrollDirection = 'right'; } else if (diffX > 0) { // Scroll left scrollDirection = 'left'; } else if (diffY < 0) { // Scroll down scrollDirection = 'down'; } else if (diffY > 0) { // Scroll up scrollDirection = 'up'; } else { // First scroll event } scrollAction.x = window.pageXOffset; scrollAction.y = window.pageYOffset; } </script>

我博客文章模块 使用的就是这效果 完成的 只是动画是自己写的 但是差不到哪里去

http://boke.huitoushian.cn/

常用表单事件

focus( )获取焦点

<input type="text" />
		<script type="text/javascript" src="./jquery-3.4.1.js"></script>
		<script type="text/javascript"> $("input").focus(function() { $(this).val("获取焦点了") }) </script>

鼠标点击文本框 显示获取焦点了

第二种用法是 设置焦点

<input type="text" />
		<button>激活焦点</button>
		<script type="text/javascript" src="./jquery-3.4.1.js"></script>
		<script type="text/javascript">
			$("button").click(function() {
				$("input").focus()
			})

点击button 激活文本框

blur( )元素失去焦点

<input type="text"/>
		<script type="text/javascript" src="./jquery-3.4.1.js"></script>
		<script type="text/javascript"> $("input").blur(function(){ alert("焦点消失") }) </script>

你鼠标点击文本框激活后 在点击其他地方就会触发

change( )内容改变

<input type="text" value="+++++"/>
		<script type="text/javascript" src="./jquery-3.4.1.js"></script>
		<script type="text/javascript"> $("input").change(function(){ alert("内容发送变化了") }) </script>

修改文本框内容后 点击其他地方 就会触发

focus( )获取焦点

<input type="text" />
		<script type="text/javascript" src="./jquery-3.4.1.js"></script>
		<script type="text/javascript"> $("input").focus(function() { $(this).val("获取焦点了") }) </script>

鼠标点击文本框 显示获取焦点了

第二种用法是 设置焦点

<input type="text" />
		<button>激活焦点</button>
		<script type="text/javascript" src="./jquery-3.4.1.js"></script>
		<script type="text/javascript">
			$("button").click(function() {
				$("input").focus()
			})

点击button 激活文本框

select()文本被选中

<input type="text"  value="1111111"/>
		<script type="text/javascript" src="./jquery-3.4.1.js"></script>
		<script type="text/javascript">
			$("input").select(function(){
				alert("文本已选中!");
			}); 
		</script>

还可以这样

页面加载 自动选中文本

<input type="text"  value="1111111"/>
		<script type="text/javascript" src="./jquery-3.4.1.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$("input").select()
			})
		</script>

submit( )表单提交

必须有<form>标签 才能触发 submit( )事件

return false 可以阻止表单提交事件

<form action="https://www.baidu.com" method="get" id="form_1">
			<input type="text"  id="text_1"/>
			<input type="submit" />
		</form>

		<script type="text/javascript" src="./jquery-3.4.1.js"></script>
		<script type="text/javascript">
			
			$("#form_1").submit(function(){
				var name=$("#text_1").val()
				if(name==""||name.trim().length==0){
					alert("不能为空")
				return false
				}
			})
		</script>

还可以这样使用

自己美化一个按钮 然后当点击这个按钮后 触发 表单内的提交按钮

<form action="https://www.baidu.com" method="get" id="form_1">
			<input type="text" id="text_1"/>
			<input type="submit" style="display: none;" id="sub_1"/>
			<button style="background-color: aquamarine;" id="button_1">提交</button>
			
		</form>

		<script type="text/javascript" src="./jquery-3.4.1.js"></script>
		<script type="text/javascript"> //当点击button 触发 隐藏的submit按钮 $("#button_1").click(function(){ $("#sub_1").submit(); }) </script>

常用鼠标事件

click( )点击某个元素

click事件只能监听左键

<p>点击我</p>
		<script type="text/javascript" src="./jquery-3.4.1.js"></script>
		<script type="text/javascript"> $("p").click(function(){ alert("点击了") }) </script>

鼠标点击 触发

mousedown()点击某个元素

可以检测

1.鼠标左键 button = 0

2.鼠标右键 button = 2

3.鼠标滑轮 button = 1

<script type="text/javascript" src="./jquery-3.4.1.js"></script>
		<script type="text/javascript">
			//键盘操作
			$(document).mousedown(function(e) {
				var event = e || window.event;

				if (event.button == 0) {
					alert('左键');
				} else if (event.button == 1) {
					alert('滑轮');
				} else if (event.button == 2) {
					alert('右键');

				}
			
			});
		</script>

hover()鼠标悬浮

<div style="width: 100px; height:100px; border: 1px saddlebrown solid;"></div>
		<script type="text/javascript" src="./jquery-3.4.1.js"></script>
		<script type="text/javascript"> $("div").hover(function(){ $(this).text("悬浮了") }) </script>

鼠标悬浮 在div 显示悬浮了

dblclick( )鼠标双击某个对象

<div style="width: 100px; height:100px; border: 1px saddlebrown solid;"></div>
		<script type="text/javascript" src="./jquery-3.4.1.js"></script>
		<script type="text/javascript"> $("div").dblclick(function(){ $(this).text("双击了") }) </script>

鼠标双击div 显示双击了

mouseleave 鼠标离开某个元素

<div id="div_1" style="width: 100px;height: 100px;border: 1px saddlebrown solid;"> </div>
		<script type="text/javascript" src="./jquery-3.4.1.js"></script>
		<script type="text/javascript"> $("#div_1").mouseleave(function() { $(this).text("离开了") }); </script>

常用键盘事件

1、keydown():在键盘按下时触发。 (常用)

2、keyup():是按下键盘起来后的事件。

3、keypress():在敲击按键时触发,我们可以理解为按下并抬起同一个按键

查询ASCII 码

https://tool.oschina.net/commons?type=4

如果上面网站失效自己 去百度查询

我们也可以自己获取键盘码

<script type="text/javascript" src="./jquery-3.4.1.js"></script>
		<script type="text/javascript">
			//在键盘按下时触发
			$(document).keydown(function(event) {
            // 获取按下的 键盘码
				alert(event.keyCode);
			});
		</script>

上面例子中,event.keyCode 可以帮助我们获取到我们按下了键盘上的什么按键,它返回的就是 ASCII 码,

比如 上 下 左 右 键, 分别是38,40,37,39;

也可以用if(event.keyCode==”编码”){ 来判断用户按下了什么键来执行对应的操作 }

案例:

小说网站中常见的按左右键来实现上一篇文章和下一篇文章

按 ctrl+enter或者enter 实现表单提交(以此提高用户体验);
如果我们要实现 ctrl+enter 提交表单,可以这样:

event.ctrlKey事件属性可返回一个布尔值,指示当事件发生时,Ctrl 键是否被按下并保持住。

event.altKey 事件属性可返回一个布尔值,指示当事件发生时,Alt 键是否被按下并保持住。

<script type="text/javascript" src="./jquery-3.4.1.js"></script>
		<script type="text/javascript">
		
			$(document).keydown(function(event) {
				if (event.ctrlKey && event.keyCode == 13) {
					alert('Ctrl+Enter');
				}else if (event.keyCode == 13) {
					alert('Enter');
				};

				switch (event.keyCode) {
					case 37:
						alert('方向键-左');
						break;
					case 39:
						alert('方向键-右');
						break;
				};
				return false;
			});
		</script>

绑定和解除事件

绑定事件 有bind ,on ,live , one 这些绑定事件的方法 但是最长用的是bind绑定事件

和unbind解除绑定事件 以及 on(委托事件)

bind 绑定事件有三个参数 type事件类型 [date]可选参数 fn处理函数 其中data不是必须的

语法:绑定事件

$对象.bind(“类型”,function(){ })

语法:清除绑定事件

$对象.unbind()清除全部

$对象.unbind(“事件名”) //清除指定事件 多个事件用空格隔开

$对象.unbind(“事件名”,函数名称) //清除绑定到指定事上的函数

演示需要的HTMl

<p>asa</p>	
	<p>asfas</p>
	<button type="button" id="gg">事件</button>
	<button type="button" id="hh">解除事件</button>

下面会将可以使用到的 事件绑定和解除绑定的方法 都演示一下

// 绑定事件 和 解除事件
		$(document).ready(function(){
			//绑定事件 每次绑定单个事件但是可以连续绑定
			$("#gg").bind("click",function(){//点击时变红
				$("p").css("color","red")
			}).bind("mouseout",function(){//鼠标移开恢复黑色
				$("p").css("color","black")
			})
			//解除clic和 mouseout事件
			$("#hh").click(function(){
				$("#gg").unbind("click mouseout"); 
			})
		})
// 同时绑定多个事件
		$(document).ready(function(){
			
			$("[type='button']").bind
			(
				{
						mouseover:function(){ //移入 
						$("p").css("color","red")
					},
						mouseout:function(){  //移除
						$("p").css("color","black")
					}
				
				}
			)
		})

我们还可以这样使用 让每个绑定到元素上的事件就执行一次

//也就是当鼠标进去 后出触发特效的同时 关闭了事件 下次进去了就没有此事件效果了
		$(document).ready(function(){
			$("[type='button']").bind
			(
				{
					mouseover:function(){
						$("p").css("color","red")
						$(this).unbind("mouseover") //当执行完一次后 解除mouseover事件
					},mouseout:function(){
						$("p").css("color","black")
					}
				
				}
			
			)
		})

比如多个 click 我只想解除其中 click事件中的 其中一个事件方法 需要在定义事件函数的时候设置变量

$(document).ready(function() {
						$("#gg").bind
						(
							{
								mouseover: xf = function() {
									$("p").css("color", "red")
								},
								mouseout: function() {
									$("p").css("color", "black")
								}

							}

						)
						
								//解除事件 
						$("#hh").click(function(){
								$("#gg").unbind("mouseover",xf); 
						})		
								
				})

解除 全部事件 不用指定清除的事件 直接清除所有已有的事件

$(document).ready(function() {
				$("#gg").bind
				(
					{
						click: xf = function() {//点击
							$("p").css("color", "red")
						},
						dblclick: function() {//双击
							$("p").css("color", "aquamarine")
						}

					}

				)

				$("#hh").click(function() {
					$("#gg").unbind();
				})

			})

动画事件

需要用到的HTML

<p>asa</p>	
	<p>asfas</p>
	<button type="button" id="gg">显示</button>
	<button type="button" id="hh">隐藏</button>

元素显示和隐藏

show()显示 ,hide隐藏 动画 他们都有两个参数 但不是必须的

show()第一个参数是时间 规定元素从显示到隐藏完全不可见的速度 默认为0 hide()相反

第二个参数 回调函数 也就是执行完成后会自动执行的函数

我们来演示:

什么都不设置 就直接0秒 隐藏 和 显示 没有动画效果

$("#hh").click(function(){
				$("p").hide()
			})
			$("#gg").click(function(){
				$("p").show()
			})

只设置时间 有逐渐显示 和 逐渐隐藏的动画效果

$("#hh").click(function(){
				$("p").hide(2000)
			})
			$("#gg").click(function(){
				$("p").show(2000)
			})

执行设置时间 和 函数(可以用来事后改变样式等等)

$("#hh").click(function(){
				$("p").hide(1000,function(){
					alert("隐藏了")
				})
			})
			$("#gg").click(function(){
				$("p").show(1000,function(){
					alert("显示了")
				})
			})

淡入淡出 显示和隐藏 动画

淡入 fadeOut() 淡出 fadeIn()

都有两个可选的参数 第一个参数时间 第二个参数 回调函数 也就是执行完成后会自动执行的函数

用法和上面案例 差不多 这里就简单的演示下

//淡入 fadeOut()
			$("#hh").click(function(){
				$("p").fadeOut(1000,function(){
					alert("我隐藏了")
				})
				
			})			
			  //淡出 fadeIn()
			$("#gg").click(function(){
				$("p").fadeIn(1000,function(){
					alert("我显示了")
				})
		
			})

改变元素高度的显示和隐藏 动画

slideDown()从上到下展开 的动画 显示

slideUp()从下到上展开 的动画 隐藏

都有两个可选的参数 第一个参数时间 第二个参数 回调函数 也就是执行完成后会自动执行的函数

//从下到上
			$("#hh").click(function(){
				$("p").slideUp(1000,function(){
						alert("我隐藏了")
				})
				
			})		
			   //从上到下
			$("#gg").click(function(){
				$("p").slideDown(1000,function(){
					alert("我显示了")
				})
		
			})

自定义动画animate

animate() 方法执行 CSS 属性集的自定义动画。

该方法通过 CSS 样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的,这样就可以创建动画效果。

只有数字值可创建动画(比如 “margin:30px”)。

字符串值无法创建动画(比如 “background-color:red”)。虽然不会报错但是不会执行 需要使用二进制颜色

也就是只能动画 长宽高 边框的边距 以及位置的变化

animate() 他有三个参数

第一个参数 添加的样式 (必须的) 可以添加多个样式 而参数可以使用变量 还可以使用+= -= 意思就是在原有的基础上 每次 加减

第二个参数 逐渐变化时间 ,

第三个 执行完 后回调的函数 也就是执行完成后会自动执行的函数

需要用到的HTML

<div style="width: 300px;height: 300px;border: 1px solid cadetblue;"></div>
				<button id="gg">点击变化</button>

单向 动画

var c=100;
			var b=100;
			$("#gg").click(function(){
				
				//缩放后直接恢复 初始状态
				$("div").animate({"width":"200px","height":c+b},2000,function(){
					//恢复初始大小 没有动画效果0秒恢复
					$(this).css({"width":"300px","height":"300"})
				
				})
			})

双向 动画

var c=100;
		var b=100;
		$("#gg").click(function(){
		
		// 动态 缩放 扩展
		$("div").animate({"width":"200px","height":c+b},2000,function(){
											
			alert("缩放")
			
		}).animate({"width":"300px","height":"300px"},2000,function(){
			alert("扩展")
		})
		
	})

注意事项 在自定义动画中改变了原本属性 那么在后来的 指定执行的函数中就不可以使用

addClass() 来改原本的属性 只能用于设置除了定义中使用的属性之外的 所有 (可以自己试试,不是很准确) 主要是addClass比较简便 不用一行一行的添加

css 可以改变原本属性

还可以是用引用当前的元素.属性来改变当前的属性

停止当前正在运行的动画:

$(动画元素).stop() 停止当前动画 如果此元素绑定了多个动画 那么后续的动画还是会执行的

$(动画元素).stop (true) 停止被选元素的所有加入队列的动画。 不管此元素绑定了多少动画 都停止

你可以使用上面的 双向动画案例试试

添加下面这段代码

<button id="stop">停止动画</button>
$("#stop").click(function(){

			 $("div").stop();  //试试 加true和不加true的区别

			});

复合事件

需要用到了HTML和CSS

<style> .read{
			color: fuchsia;
			}
		</style>
<p>asa</p>	
	<p>asfas</p>
	<button type="button" id="gg">事件</button>

复合事件 hover 相当于mouseenter(鼠标移入),和mouseleave(鼠标移出)

$("#gg").hover(function(){
			// 鼠标移入
			$("p").css("background-color","yellow");
		},function(){//鼠标移出
			$("p").css("background-color","pink");
		});

复合事件 toggle方法 显示 和 隐藏

元素处于可见 就隐藏 元素处于隐藏 就显示

在jQuery中分为带参和不带参

不带参 0秒显示 0秒隐藏

带参数的方法 就是逐渐显示 和逐渐隐藏 的延迟动画

//不带参 
	$(document).ready(function(){
			$("#gg").click(function(){
				$("p").toggle()
			})
			
		})
//带参数 
		$(document).ready(function(){
			$("#gg").click(function(){
				$("p").toggle(3000)  //延迟逐渐3秒后 消失或者显示
			})
			
		})

toggleClass()类样式的 添加样式 和 取消样式

简单来说 就是如果此元素 没有这个Class样式 那么就是添加 如果有这个样式了那么就是删除

$("#gg").hover(function(){
			$("p").toggleClass("read")
			
			},function(){

				$("p").toggleClass("read")
		})

获取鼠标点击元素的各项参数

需要的HTML

<ul>
	
	<li id="hh1" class="c1" name="n1">ghjaskdfd</li>
	<li id="hh2" class="c2" name="n2" >asdsfdgfhgjhgf</li>
	<li id="hh3" class="c3" name="n3">rgbhjmyutyndb</li>
</ul>

作用范围 整个 页面

获取鼠标点击 元素 的 id class name text…

$(document).click(function(e) {
				console.clear()
				//获取鼠标点击的元素属性的值 id
				var v_id = $(e.target).attr('id');
				console.log(v_id)
				//获取鼠标点击的元素属性的值 class 
				var v_class = $(e.target).attr('class');
					console.log(v_class)
				//获取鼠标点击的元素信息 name 
				var v_name = $(e.target).attr('name');
				console.log(v_name)

				//获取鼠标点击的文本信息 text() 或者html()
				var v_text = $(e.target).text();
				console.log(v_text)
			})

获取鼠标点击标签 获取标签名称的三种方法

//获取鼠标点击标签 获取标签名称的三种方法
			$(document).click(function(e) {
				console.clear()
				var v_id1 = $(e.target).prop("tagName");
				var v_id2 = $(e.target)[0].tagName;
				var v_id3 = $(e.target).get(0).tagName
				console.log(v_id1)
				console.log(v_id2)
				console.log(v_id3)
			})

//作用指定标签范围内 //

同级别

$("li").click(function(){ 
		var a=$("li").index(this);   //不能使用this 代替$("li")里的 li 否则获取的都是 0
		console.log(a)
		})

父子级 比如 当前点击的ul 标签下 的 某个li标签 获取此标签的的下标 那么 选择器就是 父级是ul 也就是他的上一级

$("ul li").click(function(){
			var	c=$(this).index();
			console.log(c)
		})

注意: 下标是从0开始的

获取鼠标点击的坐标

$("li").click(function(e) {
				console.clear()
				var y = $(this).offset().top;
				var x = $(this).offset().left;
				console.log(y)
				console.log(x)
			});

点赞 -收藏-关注-便于以后复习和收到最新内容有其他问题在评论区讨论-或者私信我-收到会在第一时间回复如有侵权,请私信联系我感谢,配合,希望我的努力对你有帮助^_^

相关文章