ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

jquery(2)

2021-10-18 20:03:09  阅读：158  来源： 互联网

标签：jquery function 5000 success 元素 jQuery img1


jQuery 事件
在这里插入图片描述
jQuery 事件方法语法
在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。
页面中指定一个点击事件：
$(“p”).click();
下一步是定义什么时间触发事件。您可以通过一个事件函数实现：
( " p " ) . c l i c k ( f u n c t i o n ( ) / / 动 作 触 发 后 执 行 的 代 码 ! ! ) ; ∗ ∗ 常 用 的 j Q u e r y 事 件 方 法 ∗ ∗ 1. ("p").click(function(){ // 动作触发后执行的代码!! }); **常用的 jQuery 事件方法** 1. ("p").click(function()//动作触发后执行的代码!!);∗∗常用的jQuery事件方法∗∗1.(document).ready(function) 文档完全加载完后执行函数
2.click(function) 方法是当按钮点击事件被触发时会调用一个函数
3.dblclick(function)双击元素时，会发生 dblclick 事件。
4.mouseenter(function)当鼠标指针穿过元素时，会发生 mouseenter 事件。
5.mouseleave(function)当鼠标指针离开元素时，会发生 mouseleave 事件。
6.hover(function)方法用于模拟光标悬停事件。
7.focus(function)当元素获得焦点时，发生 focus 事件。
8.blur(function)当元素失去焦点时，发生 blur 事件。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.5.1.js"></script>
		<script>
			$(document).ready(function(){
				alert("$(document).ready(function) 文档完全加载完后执行函数");
			});
			$(document).ready(function(){
				$("#but1").click(function(){
					alert("click(function) 方法是当按钮点击事件被触发时会调用一个函数");
				});
				
				$("#but2").dblclick(function(){
					alert("dblclick(function)双击元素时，会发生 dblclick 事件。");
				});
				
				$("#h2").mouseenter(function(){
					alert("4.mouseenter(function)当鼠标指针穿过元素时，会发生 mouseenter 事件。");
				});
				$("#h2").mouseleave(function(){
					alert("5.mouseleave(function)当鼠标指针离开元素时，会发生 mouseleave 事件。");
				});
				$("#a1").hover(function(){
					alert("6.hover(function)用于模拟光标悬停事件。");
				});
				$("#text1").focus(function(){
					$(this).val("background-color");
				});
				$("#text1").blur(function(){
				   alert($(this).val());
				});
			});
		</script>	
	</head>
	<body>
		<input id="but1" type="button" value="测试单击事件"><br>
		<input id="but2" type="button" value="测试双击事件"><br>
		<h2 id="h2">测试鼠标进入和移出事件</h2>
		<a id="a1" href="#">测试光标悬停事件</a><br><br><br>
		<input id="text1" type="text" value="测试获得焦点和失去焦点事件"><br>
	</body>
</html>
  1. 元素的隐藏和显示动画【就是元素的隐藏和显示】
    hide([毫秒数],[success-function]) 隐藏元素
    show([毫秒数],[success-function]) 显示元素
    fadeIn([毫秒数],[success-function]) 显示元素。
    fadeOut([毫秒数],[success-function]) 隐藏元素。
    slideDown([毫秒数],[success-function]) 显示元素
    slideUp([毫秒数],[success-function]) 隐藏元素
    例如:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素的隐藏和显示动画</title>
		<!-- 导入jquery的函数库 -->
		<script src="js/jquery-3.6.0.js"></script>
		<script>
			$(function(){
				$("#but1").click(function(){
					var butvalue=$("#but1").val();
					//jQuery hide([毫秒数],[success-function]) 隐藏元素
					//jQuery show([毫秒数],[success-function]) 显示元素
					/*
					if(butvalue=="隐藏"){
						//$("#img1").hide();
						//$("#img1").hide(5000);
						$("#img1").hide(5000,function(){
							$("#but1").val("显示");
						});
					}else{
						//$("#img1").show();
						//$("#img1").show(5000);
						$("#img1").show(5000,function(){
							$("#but1").val("隐藏");
						});
					}
					*/
					//jQuery fadeIn([毫秒数],[success-function]) 显示元素。
					//jQuery fadeOut([毫秒数],[success-function]) 隐藏元素。
					/*
					if(butvalue=="隐藏"){
						//$("#img1").fadeOut();
						//$("#img1").fadeOut(5000);
						$("#img1").fadeOut(5000,function(){
							$("#but1").val("显示");
						});
					}else{
						//$("#img1").fadeIn();
						//$("#img1").fadeIn(5000);
						$("#img1").fadeIn(5000,function(){
							$("#but1").val("隐藏");
						});
					}
					*/
				   //jQuery slideDown([毫秒数],[success-function]) 显示元素
				   //jQuery slideUp([毫秒数],[success-function]) 隐藏元素
					if(butvalue=="隐藏"){
						//$("#img1").slideUp();
						//$("#img1").slideUp(5000);
						$("#img1").slideUp(5000,function(){
							$("#but1").val("显示");
						});
					}else{
						//$("#img1").slideDown();
						//$("#img1").slideDown(5000);
						$("#img1").slideDown(5000,function(){
							$("#but1").val("隐藏");
						});
					}
				});
			});
		</script>
	</head>
	<body>
		<input id="but1" type="button" value="隐藏">
		<br>
		<img id="img1" src="imgs/open.png" />
	</body>
</html>

jQuery 效果- 动画
jQuery animate() 方法允许您创建自定义的动画。
语法：
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性.
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
jQuery 停止动画
jQuery stop() 方法用于停止动画或效果，在它们完成之前。
例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css"> 
#panel,#flip,#updiv{
	padding:5px;
	text-align:center;
	background-color:#e5eecc;
	border:solid 1px #c3c3c3;
}
#panel
{
	padding:50px;
	display:none;
}
#updiv{
	display:none;
}
</style>
<script  src="js/jquery-3.5.1.js"></script>
<script> 
$(function(){
  $("#flip").click(function(){
    $("#panel").slideDown(5000,function(){
		 $("#updiv").show();
	});
  });
  $("#stop").click(function(){
    $("#panel").stop();
  });
  
  $("#updiv").click(function(){
    $("#panel").slideUp(5000,function(){
		 $("#updiv").hide();
	});
  });
});
</script>
 
</head>
<body>
	<button id="stop">停止滑动</button>
	<div id="flip">点我向下滑动面板</div>
	<div id="panel">Hello world!</div>
	<div id="updiv">点我向上滑动面板</div>
</body>
</html>

jQuery - 链(Chaining)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
	#div1{
		background-color: red;
		width: 200px;
		height: 200px;
		border-radius: 100px;
	}
	#div2{
		background-color: yellow;
		width: 200px;
		height: 200px;
		border-radius: 100px;
	}
</style>
<script  src="js/jquery-3.5.1.js"></script>
</script>
<script>
$(function(){
  $("#but1").click(function(){
	  //延迟执行的函数
	   setTimeout(function(){
		   for(var i=1;i<=10;i++){
			    $("#div1").fadeOut(500).fadeIn(500);
		   }
	   },0);  
	  setTimeout(function(){
	  		   for(var i=1;i<=10;i++){
	  			    $("#div2").fadeOut(500).fadeIn(500);
	  		   }
	  },10000); 
  });
});
</script>
</head>
<body>
	<input id="but1" type="button"  value="红灯亮"/>
	<div id="div1"></div>
	<div id="div2"></div>
</body>
</html>

6.HTML DOM 遍历和修改
jQuery each() 方法
语法
$(selector).each(function(index,element){ })
each函数中的function的
参数1-index–被遍历出的每一个元素在数组中的位置[下标]
参数2-element–被遍历出的每一个元素具体元素【DOM对象】
each函数中的function中没有element时，可以被this代替
例如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>遍历元素</title>
		<!-- 导入jquery的函数库 -->
		<script src="js/jquery-3.6.0.js"></script>
		<script>
			$(function(){
				var parray=$("p");
				//$(selector).each(function(index,element){  });
				//each函数中的function的
				//参数1-index--被遍历出的每一个元素在数组中的位置[下标]
				//参数2-element--被遍历出的每一个元素具体元素【DOM对象】
				//each函数中的function中没有element时，可以被this代替
				/*
				parray.each(function(index,element){
					alert(element);
				});
				*/
			   parray.each(function(index){
				   var size=index*10+20;
				   $(this).css("font-size",size+"px");
			   });
			});
		</script>
	</head>
	<body>
		<p>测试用的p元素1</p>
		<p>测试用的p元素2</p>
		<p>测试用的p元素3</p>
		<p>测试用的p元素4</p>
	</body>
</html>

总结:
1.jQuery 选择器
2.jQuery对象与javascriptDOM对象转换
3.jQuery控制html元素内容【text([content]) /html([content]) / val([content]) 】
4.jQuery添加html元素[append()/ after() / before()]
5.jQuery删除html元素[remove()/empty()]
6.jQuery控制css 【css(“css属性名”)
/ css(“css属性名”,”属性值”)
/css({“css属性名”:”属性值”,…})
/addClass(class类型样式)
/removeClass(class类型样式)
7.jQuery控制事件 【jquery对象.事件名称(function(){/* 事件处理动作 */})】
8.jQuery的each方法
9.jQuery的AJAX操作

标签：jquery,function,5000,success,元素,jQuery,img1
来源： https://blog.csdn.net/m0_60165694/article/details/120833367

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有