jQuery属性操作之类样式操作

类样式的操作：指对DOM属性className进行添加、移除操作。比如addClass()、removeClass()、toggleClass()。

1. addClass()

1.1 概述

$(selector).addClass(className)

className

类型： String

为每个匹配元素所要增加的一个或多个样式名

返回值：jQuery

描述： 为每个匹配的元素添加指定的样式类名

1.2 为匹配到的元素添加指定类名

格式为： $(selector).addClass("className");

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>addClass Demo</title>
 6     <script type="text/javascript" src="jquery.js"></script>
 7     <script type="text/javascript">
 8         $(function () {
 9             $("div").addClass("divClass2");
10         })
11     </script>
12 </head>
13 <body>
14     <div class="divClass1"></div>
15 </body>
16 </html>

 

1.3 为匹配到的元素添加多个类名

格式为：

　　　　＄(selector).addClass("className1  className2")

示例代码：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>addClass() Demo</title>
 6     <script type="text/javascript" src="jquery.js"></script>
 7     <script type="text/javascript">
 8         $(function () {
 9             $("div").addClass("divClass1 divClass2")
10         })
11     </script>
12 </head>
13 <body>
14     <div></div>
15 </body>
16 </html>

2. removeClass()

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

2.1 移除指定的单个类

格式： $(selector).removeClass("className");

示例代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>removeClass Demo</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            $("div").removeClass("className1");
            $("div").removeClass("className2");
        })
    </script>
</head>
<body>
    <div class="className1 className2"></div>
</body>
</html>

2.2  移除指定的多个类

　　格式： $(selector).removeClass("className1 className2");　　

示例代码：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>removeClass() Demo</title>
 6     <script type="text/javascript" src="jquery.js"></script>
 7     <script type="text/javascript">
 8         $(function () {
 9             $("div").removeClass("className1 className2");
10         })
11     </script>
12 </head>
13 <body>
14     <div class="className1 className2"></div>
15 </body>
16 </html>

2.3 移除全部的类

格式:

　　$(selector).removeClass();

示例代码：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>removeClass() Demo</title>
 6     <script type="text/javascript" src="jquery.js"></script>
 7     <script type="text/javascript">
 8         $(function () {
 9             $("div").removeClass();
10         })
11     </script>
12 </head>
13 <body>
14     <div class="className1 className2"></div>
15 </body>
16 </html>

2.4 removeClass()案例， 解决“排他”问题

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>removeClass() Demo</title>
    <style type="text/css">
        .active{
            color: red;
        }
    </style>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            $("ul li").click(function () {
                $(this).addClass("active").siblings("li").removeClass("active");
            })
        })
    </script>
</head>
<body>
    <ul>
        <li class="item">This is the first line.</li>
        <li class="item">This is the second line.</li>
        <li class="item">This is the third line.</li>
        <li class="item">This is the fourth line.</li>
    </ul>
</body>
</html>

3. toggleClass()

作用： 如果存在（不存在）就删除（添加）一个类

格式： $(selector).toggleClass("className");

示例代码：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>toggleClass() Demo</title>
 6     <style type="text/css">
 7         .active{
 8             color: red;
 9         }
10     </style>
11     <script type="text/javascript" src="jquery.js"></script>
12     <script type="text/javascript">
13         $(function () {
14             $("p").click(function () {
15                 $("p").toggleClass("active");
16             });
17         })
18     </script>
19 </head>
20 <body>
21     <p>This is the test.</p>
22 </body>
23 </html>

 

posted @ 2018-08-20 20:08  _杨魏  阅读(536)  评论(0)    收藏  举报