脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery操作css方法

jQuery操作css方法的超全用法

 更新时间：2023年06月09日 15:01:18   作者：LazyKing-qi  
最近看了下jQuery的源代码,其中关于CSS及className的操作思想确实很不错,值得借鉴,下面这篇文章主要给大家介绍了关于jQuery操作css方法的超全用法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

一、jQuery可以使用css方法来修改元素样式

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

1.参数只写属性名，则是返回属性值

$(this).css("color"");

⒉.参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加号，值如果是数字可以不用

跟单位和引号

$(this).css("color", "red");

 示例：

<body>
		<div>123</div>
		<script>
			$(function(){
				$("div").css("color","red");
			});
		</script>
</body>

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

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

示例：

<body>
		<div></div>
		<script>
			$(function(){
				$("div").css({
					width:200,
					height:200,
					backgroundColor:"red"
				});
			});
		</script>
</body>

二、设置类的样式方法

作用等同于以前的classList，可以操作类样式，注意操作类里面的参数不要加点。

1.添加类

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

2.移除类

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

3.切换类

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

示例：

<style>
			div{
				width: 100px;
				height: 100px;
				background-color: aquamarine;
				margin: 100px auto;
				transition: all 0.5s;
			}
			.current{
				background-color: red;
				transform: rotate(360deg);
			}
		</style>
	</head>
	<body>
		<div class="current"></div>
		<script>
			//添加类addClass()
			/* $(function(){
				$("div").click(function(){
					$(this).addClass("current");
				});
			}) */
			//删除类removeClass()
			/* $("div").click(function(){
				$(this).removeClass("current");
			}); */
			//切换类 toggleClass()
			$("div").click(function(){
				$(this).toggleClass("current");
			});
		</script>
	</body>

三、类操作与className区别

原生JS中className会覆盖元素原先里面的类名。

jQuery里面类操作只是对指定类进行操作，不影响原先的类名。

<body>
		<div class="one"></div>
		<script>
			//追加类名，覆盖原来的类名
			var one = document.querySelector(".one");
			one.className = "two";
            //addClass相当于追加类名，不影响以前的类名
			$(".one").addClass("two");
			//移除two这个类名
			//$(".one").removeClass("two");
		</script>
</body>

四、显示隐藏效果

1、显示语法

show ([speed,[easing],[fn]])

显示参数

（1）参数都可以省略，无动画直接显示。

( 2 ) speed :三种预定速度之一的字符串(“slow”,"norma",or“fast”)或表示动画时长的毫秒数值

(如:1000)。

( 3 ) easing : (Optional)用来指定切换效果，默认是“swing”，可用参数“linear”。

( 4 ) fn:回调函数，在动画完成时执行的函数，每个元素执行一次。

2、隐藏语法

hide([speed,[easing],[fn]])

3、切换语法

toggle([speed,[easing],[fn]])

 示例：

<style>
			div{
				width: 100px;
				height: 100px;
				background-color: aquamarine;
			}
		</style>
	</head>
	<body>
		<button>显示</button>
		<button>隐藏</button>
		<button>切换</button>
		<div></div>
		<script>
			$(function(){
				$("button").eq(0).click(function(){
					$("div").show(1000,function(){
						alert(1);
					});
				});
				$("button").eq(1).click(function(){
					$("div").hide(1000,function(){
						alert(1);
					});
				});
				//一般情况不加参数，直接显示隐藏
				$("button").eq(2).click(function(){
					$("div").toggle(1000);
				});
			})
		</script>
	</body>

五、滑动效果

1、上滑效果语法

slideUp ([speed,[easing],[fn]])

2、下滑效果语法

slideDown([speed,[easing],[fn]])

3、滑动切换效果语法

slideToggle ([speed,[easing],[fn]])

 示例：

<style>
			div{
				width: 100px;
				height: 100px;
				background-color: aquamarine;
				display: none;
			}
		</style>
	</head>
	<body>
		<button>下滑</button>
		<button>上滑</button>
		<button>滑动切换</button>
		<div></div>
		<script>
			$(function(){
				//下滑slideDown()
				$("button").eq(0).hover(function(){
					$("div").slideDown();
				})
				//上滑slideUp()
				$("button").eq(1).hover(function(){
					$("div").slideUp();
				})
				//滑动切换slideToggle()
				$("button").eq(2).hover(function(){
					$("div").slideToggle();
				})
			})
		</script>
</body>

4、事件切换

hover([over,]out)

( 1 ) over:鼠标移到元素上要触发的函数(相当于mouseenter )

( 2 ) out:鼠标移出元素要触发的函数（相当于mouseleave )

六、动画队列及其停止排队方法

1、动画或效果队列

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

2、停止排队

stop()

(1 ) stop()方法用于停止动画或效果。

(2)注意:stop()写到动画或者效果的前面，相当于停止结束上一次的动画。

<script>
	$(function(){
	//下滑slideDown()
	$("button").eq(0).hover(function(){
		$("div").stop().slideDown();
		})
		//上滑slideUp()
		$("button").eq(1).hover(function(){
			$("div").stop().slideUp();
		})
		//滑动切换slideToggle()
		$("button").eq(2).hover(function(){
		$("div").stop().slideToggle();
	    });
	});
</script>

七、淡入淡出效果

1、淡入效果语法

fadeIn([speed,[easing],[fn]])

淡入效果参数

(1)参数都可以省略。

( 2 ) speed :三种预定速度之一的字符串(“slow”,“normal”,or"fast”)或表示动画时长的毫秒数值(如

∶1000)。

( 3 ) easing : (Optional)用来指定切换效果，默认是“swing”，可用参数“linear”。.

( 4 ) fn:回调函数，在动画完成时执行的函数，每个元素执行一次。

2、淡出效果语法

fadeout([speed,[easing],[fn]])

3、淡入淡出切换效果语法

fadeToggle([speed, [easing],[fn]])

4、渐进方式调整到指定的不透明度

fadeTo ([[speed],opacity,[easing],[fn]])

2.效果参数

( 1 ) opacity透明度必须写，取值0~1之间。

( 2 ) speed :三种预定速度之一的字符串(“slow”,"normal" ,or“fast”)或表示动画时长的毫秒数值(如∶1000)。必须写

( 3 ) easing : (Optional)用来指定切换效果，默认是“swing”，可用参数“linear”。

( 4 ) fn:回调函数，在动画完成时执行的函数，每个元素执行一次。

示例：

<style>
			div{
				width: 100px;
				height: 100px;
				background-color: aquamarine;
				display: none;
			}
		</style>
	</head>
	<body>
		<button>淡入</button>
		<button>淡出</button>
		<button>淡入淡出</button>
		<button>修改不透明度</button>
		<div></div>
		<script>
			$(function(){
				$("button").eq(0).click(function(){
					$("div").fadeIn(1000);
				})
				$("button").eq(1).click(function(){
					$("div").fadeOut(1000);
				})
				$("button").eq(2).click(function(){
					$("div").fadeToggle(1000);
				})
				//透明度必须要写
				$("button").eq(3).click(function(){
					$("div").fadeTo(1000,0.5);
				});
			});
		</script>
</body>

八、自定义动画animate

语法：

animate(params, [speed],[easing],[fn])

参数

( 1 ) params:想要更改的样式属性，要以对象的形式传递，必须写。属性名可以不用带引号，如果

是复合属性则需要采取驼峰命名法borderLeft。其余参数都可以省略。

( 2 ) speed :三种预定速度之一的字符串(“slow”,"normal”,or“fast”)或表示动画时长的毫秒数值(如

∶1000)。

( 3 ) easing : (Optional)用来指定切换效果，默认是“swing”，可用参数“linear”。

( 4 ) fn:回调函数，在动画完成时执行的函数，每个元素执行一次。

示例：

<style>
			div{
				//盒子定位
				position: absolute;
				width: 100px;
				height: 100px;
				background-color: aquamarine;
			}
		</style>
	</head>
	<body>
		<button>动起来</button>
		<div></div>
		<script>
			$(function(){
				$("button").click(function(){
					$("div").animate({
						left: 300,
						top: 200,
						opacity: 0.4,
						width: 200,
						height: 200
					},500);
				});
			});
		</script>
	</body>

总结

到此这篇关于jQuery操作css方法的文章就介绍到这了,更多相关jQuery操作css方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论