zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    @slf4j 使用方法
    spark入门简单介绍
    spring boot 的简单实用和spring cloud 概念
    nginx与Tomcat
    python27+百度文字识别api
    python27+opencv2.4.10+pytesseract0.2.0图片识别
    学习vue的核心功能
    使用vscode +vue的初始环境搭建
    excel的vlookup,第一次用
    pyautogui键盘鼠标控制,python27
  • 原文地址:https://www.cnblogs.com/yang-wei/p/9507787.html
Copyright © 2011-2022 走看看