jQuery操作css方法

太过爱你忘了你带给我的痛 2024-04-03 09:11 80阅读 0赞

**目录**

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

二、设置类的样式方法

1.添加类

2.移除类

3.切换类

三、类操作与className区别

四、显示隐藏效果

1、显示语法

2、隐藏语法

3、切换语法

五、滑动效果

1、上滑效果语法

2、下滑效果语法

3、滑动切换效果语法

4、事件切换

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

1、动画或效果队列

2、停止排队

七、淡入淡出效果

1、淡入效果语法

2、淡出效果语法

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

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

八、自定义动画animate

--------------------

### 一、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");

示例：

### 三、类操作与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、切换语法 ####