Jquery基础7_操作类样式

最新推荐文章于 2022-11-25 16:58:41 发布

橘九。

最新推荐文章于 2022-11-25 16:58:41 发布

阅读量87

点赞数

分类专栏： Jquery基础

本文链接：https://blog.csdn.net/qq_34400745/article/details/102785277

版权

Jquery基础专栏收录该内容

12 篇文章 0 订阅

订阅专栏

addClass（添加多个类名）removeClass

为每个匹配的元素添加指定的类名。

//追加一个类名到原有的类名
$('div').addClass("box");
还可以为匹配的元素添加多个类名
$('div').addClass("box box2");//追加多个类名

//从所有匹配的元素中删除全部或者指定的类。

 //移除指定的类（一个或多个）
 $('div').removeClass('box')；
 //移除全部的类
 $('div').removeClass();

#案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
	<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js"></script>
	
    <style type="text/css">
       
		/* 定义类属性changeColor */
		.changeColor{
			color: #6DA5FF;
			
		}
			
    </style>
</head>
<body>
     <ul>
         <li class="item">张三</li>
         <li class="item">李四</li>
         <li class="item">王五</li>
     </ul>
     
     <script type="text/javascript">
         $(function(){
             $('ul li').click(function(){
                 // this指的是当前点击的DOM对象 ,使用$(this)转化jquery对象
                 $(this).addClass('changeColor').siblings('li').removeClass('changeColor');
         })
		 })
     </script>
    
</body>
</html>

toggleClass

如果存在（不存在）就删除（添加）一个类。

$('span').click(function(){
    //动态的切换class类名为active
    $(this).toggleClass('active')
})

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
	<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js"></script>
	
    <style type="text/css">
       
		/* 定义类属性changeColor */
		.changeColor{
			color: #6DA5FF;
			
		}
			
    </style>
</head>
<body>
     <ul>
         <li class="item">张三</li>
         <li class="item">李四</li>
         <li class="item">王五</li>
     </ul>
     
     <script type="text/javascript">
         $(function(){
             $('ul li').click(function(){
                 // this指的是当前点击的DOM对象 ,使用$(this)转化jquery对象
                 $(this).toggleClass("changeColor");
         })
		 })
     </script>
    
</body>
</html>

也就是如果存在就删除，不存在就添加的意思；
点击后颜色去掉，再次点击颜色由于不存在所以又出现；

橘九。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery基础7_操作类样式

addClass（添加多个类名）removeClass为每个匹配的元素添加指定的类名。//追加一个类名到原有的类名$('div').addClass("box");还可以为匹配的元素添加多个类名$('div').addClass("box box2");//追加多个类名//从所有匹配的元素中删除全部或者指定的类。 //移除指定的类（一个或多个） $('div').removeC...
复制链接

扫一扫

专栏目录