jQuery样式操作及王者荣耀手风琴案例

爱吃汉堡的代码人

于 2022-10-19 10:13:11 发布

阅读量296

点赞数

文章标签： jquery css 前端

本文链接：https://blog.csdn.net/weixin_67224308/article/details/127317455

版权

jQuery中常用的样式操作有两种:css()和设置类样式方法。

一、操作css方法

jQuery可以使用css方法来修改简单元素样式;也可以操作类,修改多个样式。

常用以下三种形式:

//1.参数只写属性名,则是返回属性值。

var strcolor = $(this).css'color';

//2．参数是属性名，属性值，逗号分隔，是设置一织样式，属性必须加引号，值如果是数字可以不用跟单位和引号。

$(this).css(''color''，" redz");

//3.参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号。

$(this).css({ "color": "white", "font-size”: "20px"});

二、设置类样式方法

作用等同于以前的classList，可以操作类样式，注意操作类里面的参数不要加点。常用的三种设置类样式方法:

//1.添加类

$("div".addclass("current");

// 2.删除类

s("div").removeclass ("current");

//3.切换类

s("div".toggleclass ("current");

注意:

1.设置类样式方法比较适合样式多时操作，可以弥补css()的不足。

⒉原生JS中className会覆盖元素原先里面的类名，jQuery里面类操作只是对指定类进行操作，不影响原先的类名。

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#content{
				width: 200px;
				height: 200px;
				margin: 10px auto;
				border: 1px blue solid;
			}
			.aa{
				background-color: pink;
				font-size: 24px;
				font-family: "楷体";
			}
		</style>
	</head>
	<body>
		<div id="content" class="aa">
			美乐蒂
		</div>
		<script src="js/JQuery.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#content").click(function(){
					$(this).addClass("aa");
				});
				
			});
		</script>
	</body>
</html>

三、jQuery 效果

jQuery给我们封装了很多动画效果,最为常见的如下:

显示隐藏:show()/ hide()/ toggle();

划入画出:slideDown()/ slideUp()/ slideToggle();

淡入淡出:fadeIn()/ fadeOut() / fadeToggle()/ fadeTo();

自定义动画:animate();

注意:

动画或者效果一旦触发就会执行,如果多次触发，就造成多个动画或者效果排队执行。

jQuery为我们提供另一个方法,可以停止动画排队:stop();

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#conten{
				width: 100px;
				height: 100px;
				background-color: lightgreen;
			}
			</style>
		</head>
		<body>
			<button id="toHide">隐藏</button>
			<button id="toSideUp">向上隐藏</button>
			<button id="toShow">显示</button>
			<button id="toToggle">切换</button>
			<button id="toSlideDown">向下滑动</button>
			<button id="toSlideUp">向上滑动</button>
			<button id="toSlide