jQuery学习笔记：CSS 样式操作和jQuery动画

最新推荐文章于 2024-06-13 21:20:19 发布

Serein_Pt

最新推荐文章于 2024-06-13 21:20:19 发布

阅读量119

点赞数 1

分类专栏： JavaWeb 文章标签： jquery 动画 css

本文链接：https://blog.csdn.net/qq_49019244/article/details/122092007

版权

JavaWeb 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

学习内容：CSS 样式操作和jQuery动画

1. CSS 样式操作

addClass() 添加样式

$divEle.addClass('redDiv blueBorder');//addClass() - 向被选元素添加一个或多个类

removeClass() 删除样式

$divEle.removeClass();//removeClass() - 从被选元素删除一个或多个类

toggleClass() 有就删除，没有就添加样式。

$divEle.toggleClass('redDiv')//toggleClass() - 对被选元素进行添加/删除类的切换操作

offset() 获取和设置元素的坐标。

var pos = $divEle.offset();//offset() - 返回第一个匹配元素相对于文档的位置。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="czys.css">
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function(){
		var $divEle = $('div:first');
		$('#btn01').click(function(){
			//addClass() - 向被选元素添加一个或多个类
			$divEle.addClass('redDiv blueBorder');
		});
		
		$('#btn02').click(function(){
			//removeClass() - 从被选元素删除一个或多个类 
			$divEle.removeClass();
		});

		$('#btn03').click(function(){
			//toggleClass() - 对被选元素进行添加/删除类的切换操作 
			$divEle.toggleClass('redDiv')
		});

		$('#btn04').click(function(){
			//offset() - 返回第一个匹配元素相对于文档的位置。
			var pos = $divEle.offset();
			console.log(pos);
			$divEle.offset({
				top:100,
				left:50
			});
		});
	})
</script>
</head>
<body>
	<table align="center">
		<tr>
			<td>
				<div class="border">
				</div>
			</td>
			<td>
				<div class="btn">
					<input type="button" value="addClass()" id="btn01"/>
					<input type="button" value="removeClass()" id="btn02"/>
					<input type="button" value="toggleClass()" id="btn03"/>
					<input type="button" value="offset()" id="btn04"/>
				</div>
			</td>
		</tr>
	</table>
</body>
</html>

css：

div{
    width:100px;
    height:260px;
}
div.whiteborder{
    border: 2px white solid;
}
div.redDiv{
    background-color: red;
}
div.blueBorder{
    border: 5px blue solid;
}

2. jQuery 动画

2.1、基本动画

show() 将隐藏的元素显示
hide() 将可见的元素隐藏。
toggle() 可见就隐藏，不可见就显示。
以上动画方法都可以添加参数。
1、第一个参数是动画执行的时长，以毫秒为单位
2、第二个参数是动画的回调函数 (动画完成后自动调用的函数)

2.2、淡入淡出动画

fadeIn() 淡入（慢慢可见）
fadeOut() 淡出（慢慢消失）
fadeTo() 在指定时长内慢慢的将透明度修改到指定的值。0 透明，1 完成可见，0.5 半透明
fadeToggle() 淡入/淡出切换

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<link href="css/style.css" type="text/css" rel="stylesheet" />
		<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
		$(function(){
			//显示   show()
			$("#btn1").click(function(){
				$("#div1").show(1000);
			});		
			//隐藏  hide()
			$("#btn2").click(function(){
				$("#div1").hide(1000);
			});	
			//切换   toggle()
			$("#btn3").click(function(){
				$("#div1").toggle(1000);
			});	

			//淡入   fadeIn()
			$("#btn4").click(function(){
				$("#div1").fadeIn(500);
			});	
			//淡出  fadeOut()
			$("#btn5").click(function(){
				$("#div1").fadeOut(500);
			});	
			
			//淡化到  fadeTo()
			$("#btn6").click(function(){
				$("#div1").fadeTo("slow",Math.random());
			});	
			//淡化切换  fadeToggle()
			$("#btn7").click(function(){
				$("#div1").fadeToggle("slow","linear");
			});	
		})
</script>
	</head>
	<body>
		<table style="float: left;">
			<tr>
				<td><button id="btn1">显示show()</button></td>
			</tr>
			<tr>
				<td><button id="btn2">隐藏hide()</button></td>
			</tr>
			<tr>
				<td><button id="btn3">显示/隐藏切换 toggle()</button></td>
			</tr>
			<tr>
				<td><button id="btn4">淡入fadeIn()</button></td>
			</tr>
			<tr>
				<td><button id="btn5">淡出fadeOut()</button></td>
			</tr>
			<tr>
				<td><button id="btn6">淡化到fadeTo()</button></td>
			</tr>
			<tr>
				<td><button id="btn7">淡化切换fadeToggle()</button></td>
			</tr>
		</table>
		<div id="div1" style="float:left;border: 1px solid;background-color: blue;width: 300px;height: 200px;">
			jquery动画定义了很多种动画效果，可以很方便的使用这些动画效果
		</div>
	</body>
</html>

Serein_Pt

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习笔记：CSS 样式操作和jQuery动画

学习内容：CSS 样式操作和jQuery动画1. CSS 样式操作addClass() 添加样式$divEle.addClass('redDiv blueBorder');//addClass() - 向被选元素添加一个或多个类removeClass() 删除样式$divEle.removeClass();//removeClass() - 从被选元素删除一个或多个类 toggleClass() 有就删除，没有就添加样式。$divEle.toggleClass('redDiv')//tog
复制链接

扫一扫