jQuery效果与DOM

最新推荐文章于 2021-09-01 16:31:17 发布

suiseidesu

最新推荐文章于 2021-09-01 16:31:17 发布

阅读量117

点赞数

分类专栏：学习笔记笔记

本文链接：https://blog.csdn.net/qq_50270170/article/details/108889594

版权

学习笔记同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

笔记

8 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了jQuery中的常用事件方法，包括$(document).ready()、click()、blur()和hover()，以及显示与隐藏、淡入淡出、上卷与下拉等效果的实现。此外，还讲解了如何使用animate()方法进行DOM元素的动画操作，如改变高度、宽度和透明度。示例代码展示了如何应用这些方法和效果。

摘要由CSDN通过智能技术生成

1.常用的jQuery事件方法

（1）$（document）.ready
（document）.ready（）允许我们在文档完全加载完后执行函数等价于function（）{}
（2）click（）
Click（）方法当按钮点击事件被触发的时候回调用一个函数
该函数在用户点击HTML
（3）Blur
失去焦点时触发，一般input输入框，当光标离开（失去焦点就会）触发
（4）Hover
鼠标悬停在元素上面触发

2.效果

显示（show）与隐藏（hide）
Hide（），隐藏，将高度，宽度，透明度变为0
Show（），显示，将高度，宽度，透明度变为初始值
Toggle（）开关，同时有隐藏和显示两种功能

<script type="text/javascript">
		$("#hide").click(function(){
			$(".p1").hide();//参数可以写快/慢,也可以写数字
			//数字越大,速度越慢
			})
		$("#show").click(function(){
			$(".p1").show();
		})
		$("#togeher").click(function(){
			$(".p1").toggle("slow");//快:fast 慢:slow
		})
	</script>

淡入（fadeln）与淡出（fadeOut）
Fadeln淡入，将隐藏的样式通过改变其透明度将其显示出来
Fadeout淡出，将显示的样式通过改变其透明度让其透明度

<script type="text/javascript">
		$("#fadeOut").click(function(){
			$("p").fadeOut(2000);
		})
		$("#fadeIn").click(function(){
			$("p").fadeIn(2000);
		})
		$("#toggle").click(function(){
			$("p").fadeToggle("fast");
		})
</script>

上卷（slideUp）与下拉（slideDown）

<script type="text/javascript">
		$("#slideUp").click(function(){
			$("#div1").slideUp(2000);
		})
		$("#slideDown").click(function(){
			$("#div1").slideDown(2000);
		})
		$("#slideToggle").click(function(){
			$("#div1").slideToggle(2000);
		})
	</script>

3.DOM

捕获与设置
Js获取文本内容:innerText，innerHtml，textCountent
动画
Animate（）有三个参数，第一个参数就是你要改变的样式，第二个是显示的速度（“fast”，“slow”毫秒数），第三个是回调函数

<body>
		<input type="button" id="start" value="开始动画" />
		<input type="button" id="stop" value="停止动画" />
		<div id="div1" style="background-color: aqua;"></div>
	</body>
	<script type="text/javascript">
		$("#start").click(function(){
			$("#div1").animate({height:'300px',opacity:'0.4'},"slow");
			$("#div1").animate({width:'300px',opacity:'0.8'},"slow");
			$("#div1").animate({height:'100px',opacity:'0.4'},"slow");
			$("#div1").animate({width:'100px',opacity:'0.8'},"slow");
		})
		$("#stop").click(function(){
		    $("#div1").stop(true);	
		})
	</script>
</html>