jQuery的css样式与动画操作

最新推荐文章于 2023-05-06 23:39:02 发布

vhujbvf

最新推荐文章于 2023-05-06 23:39:02 发布

阅读量316

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_51592187/article/details/115973706

版权

笔记专栏收录该内容

129 篇文章 0 订阅

订阅专栏

jQuery的css样式操作与动画操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css样式操作</title>
		<style type="textćs">
			div.Div{
				width: 100px;
				height: 100px;
			}
			div.redDiv{
				background-color: #0000FF;
			}
			div.border{
				border:5px red solid;
			}
		<×yle>
		<script type="text/javascript" src="jquery-3.1.0.js"></script>
		<script type="text/javascript">
		   $(function(){//表示页面加载完成之后 相当于onload事件
		   //addClass 向被选元素添加一个或者多个类
		         $("#1").click(function() {
		         	$(".1").addClass("redDiv border");
		         });
		   //removeClass 从被选元素删除一个或者多个类
		         $("#2").click(function() {
		         	$(".1").removeClass("redDiv");
		         });
		   //toggleClass 对被选元素进行添加或者删除的切换操作
		         $("#3").click(function() {
		         	$(".1").removeClass("redDiv border");
		         });
		   //offset 返回第一个匹配元素相对于文档的位置
		         $("#4").click(function () {
		         	 var pos = $("#1").offset();
					 // console.log(pos);
					 var a = $("#1");
					 a.offset({
						 top:100,
						 left:100
					 });
		         });
				 
			});
		</script>
	</head>
	<body>
		<div class="1">你好</div>
		<input type="button" value="addClass()" id="1" />
		<input type="button" value="removeClass()" id="2" />
		<input type="button" value="toggleClass()" id="3" />
		<input type="button" value="offset()" id="4" />
	</body>
<cml>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动画操作</title>
		<style>
			div{
				background-color: #FF0000;
				width: 200px;
				height: 200px;
				margin-left: auto;
				margin-right: auto;
				text-align: center;
				border:10px #0000FF solid;
			}
		<×yle>
		<script type="text/javascript" src="jquery-3.1.0.js"></script>
		<script type="text/javascript">
		   $(function(){//表示页面加载完成之后 相当于onload事件
		   //基本动画 可以添加参数
			  //1.第一个参数是动画执行的时长 以毫秒为单位
			  //2.第二个是动画的回调函数 动画完成后自动调用的函数
			   /šow() 将隐藏的元素显示
					 $("#1").click(function() {
						$(".1").show(1000,function(){
							alert("hello");
						});
					 });
					 //可反复调用 反复出现消失
					 // var abc = function(){
						// $(".1").toggle(1000,abc);
						// }
					 // abc();
			   //hide() 将可见的元素隐藏
					 $("#2").click(function() {
						$(".1").hide(1000);
					 });
			   //toggle() 可见就隐藏 不可见就显示
					 $("#3").click(function() {
						$(".1").toggle(1000);
					 });
		   //淡入淡出动画 可以添加参数
		   //1.第一个参数是动画执行的时长 以毫秒为单位	
		   //2.第二个是动画的回调函数 动画完成后自动调用的函数
		       // fadeIn() 淡入(慢慢可见)
		             $("#4").click(function () {
		         	    $(".1").fadeIn(1000,function(){
							alert("hello");
						});
					 });
			   /9Out() 淡出(慢慢消失)
			         $("#5").click(function () {
			     	    $(".1").fadeOut(1000);
			   		 }); 
			   /9Toggle() 淡入或者淡出 切换
			         $("#6").click(function () {
			     	    $(".1").fadeToggle(1000);
			   		 });
			   /9To() 在指定时长内慢慢将透明度修改到指定的值 0不可见 1完全可见 0.5半透明
			         $("#7").click(function () {
			     	    $(".1").fadeTo(1000,0.5);
			   		 });
			});
		</script>
	</head>
	<body>
		<div class="1" >你好</div>
		<input type="button" value="show()" id="1" />
		<input type="button" value="hide()" id="2" />
		<input type="button" value="toggle()" id="3" />
		<input type="button" value="fadeIn()" id="4" />
		<input type="button" value="fadeOut()" id="5" />
		<input type="button" value="fadeToggle()" id="6" />
		<input type="button" value="fadeTo()" id="7" />
	</body>
<cml>

vhujbvf

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery的css样式与动画操作

jQuery的css样式操作与动画操作<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>css样式操作</title> <style type="textćs"> div.Div{ width: 100px; height: 100px; } div.redDiv{ background-colo
复制链接

扫一扫