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

1. addClass()

1.1 概述

$(selector).addClass(className)

className

类型： String

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

返回值：jQuery

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

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

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

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>addClass Demo</title>

     <script type="text/javascript" src="jquery.js"></script>

     <script type="text/javascript">

         $(function () {

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

         })

     </script>

 </head>

 <body>

     <div class="divClass1"></div>

 </body>

 </html>

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

格式为：

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

示例代码：

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>addClass() Demo</title>

     <script type="text/javascript" src="jquery.js"></script>

     <script type="text/javascript">

         $(function () {

             $("div").addClass("divClass1 divClass2")

         })

     </script>

 </head>

 <body>

     <div></div>

 </body>

 </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");　　

示例代码：

 <!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 className2");

         })

     </script>

 </head>

 <body>

     <div class="className1 className2"></div>

 </body>

 </html>

2.3 移除全部的类

格式:

　　$(selector).removeClass();

示例代码：

 <!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();

         })

     </script>

 </head>

 <body>

     <div class="className1 className2"></div>

 </body>

 </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");

示例代码：

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>toggleClass() Demo</title>

     <style type="text/css">

         .active{

             color: red;

         }

     </style>

     <script type="text/javascript" src="jquery.js"></script>

     <script type="text/javascript">

         $(function () {

             $("p").click(function () {

                 $("p").toggleClass("active");

             });

         })

     </script>

 </head>

 <body>

     <p>This is the test.</p>

 </body>

 </html>

jQuery属性操作之类样式操作的更多相关文章

  1. JQuery DOM操作 、属性和CSS样式操作、其他函数

    DOM操作 1.在div1内部最后追加一个节点 $("#div1").append("<img src='../01-HTML基本标签/img/Male.gif'/ ...

  2. jQuery学习之旅 Item3 属性操作与样式操作

    本节将Dom元素的操作:属性操作.样式操作.设置和获取HTML,文本和值.Css-Dom操作. 1.属性操作 <input type="text" name="us ...

  3. jquery系列教程2-style样式操作全解

    全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...

  4. jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax

    jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...

  5. jQuery 效果函数，jquery文档操作，jQuery属性操作方法，jQuerycss操作函数，jQuery参考手册-事件，jQuery选择器

    jQuery 效果函数 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数( ...

  6. jQuery属性遍历、HTML操作

    jQuery 拥有可操作 HTML 元素和属性的强大方法. jQuery 遍历函数 jQuery 遍历函数包括了用于筛选.查找和串联元素的方法.    .add() 将元素添加到匹配元素的集合中. . ...

  7. jQuery基础-选择器，样式操作

    入口函数:ready() 当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时,会发生 ready 事件. 由于该事件在文档就绪后发生,因此把所有其他的 jQuery 事件和函数置 ...

  8. 6、前端--DOM操作（查找标签、节点操作、获取值操作、class操作、样式操作、绑定事件、内置参数this）

    DOM操作之查找标签 前缀关键字>>>:document # 基本查找(核心) document.getElementById 根据ID获取一个标签 document.getElem ...

  9. jQuery入门教程-CSS样式操作大全

    1.获取样式 2.设置样式 3.追加样式 4.移除样式 5.重复切换anotherClass样式 6.判断是否含有某项样式 7.设置 CSS 属性 参数 描述 name 必需.规定 CSS 属性的名称 ...

随机推荐

  1. 深入理解计算机系统 第十二章 并发编程 part1 第二遍

    三种构造并发程序的方法及其优缺点 1.进程 用这种方法,每个逻辑控制流都是一个进程,由内核来调度和维护.因为进程有独立的虚拟地址空间,想要和其他流通信,控制流必须使用某种显式的进程间通信机制. 优点: ...

  2. maven 常见命令 学习笔记（一）之 -pl -am -amd

    假设现有项目结构如下 dailylog-parent|-dailylog-common|-dailylog-web 三个文件夹处在同级目录中 dailylog-web依赖dailylog-common ...

  3. WCF寄宿windows服务二

    如果有很多WCF服务需要寄宿,需要额外做一些工作:总体思路是:先把这些WCF服务的程序集打包,然后利用反射加载各个WCF服务的程序集,按顺序一个一个寄宿.先来看看我们需要寄宿的WCF服务: 实现步骤: ...

  4. vue-element-admin 多层路由问题

    在二级页面上添加<router-view> 关于页面打包后三级路由无法访问问题 需要将 存放router-view 的页面单独存放一个文件夹 router.js 写法

  5. Burp破解安装(1.7和2.0)

    依赖 由于Brup是使用java语言开发的,因此我们需要本地有jdk8的环境,教程自己百度或者<a href="https://www.runoob.com/java/java-env ...

  6. BLE 5协议栈-主机控制接口（HCI）

    文章参考自:http://www.sunyouqun.com/2017/04/page/3/ .https://www.cnblogs.com/yuqilihualuo/p/9790164.html ...

  7. three.js之正投影摄像机与透视投影摄像机的区别

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. git 学习使用记录

    一.一个小时学会git:https://www.cnblogs.com/best/p/7474442.html 二.fetch fatal: Refusing to fetch into curren ...

  9. JAVA面试/笔试经典题

    1.short s1 = 1; s1 = s1 + 1;有什么错? short s1 = 1; s1 += 1;有什么错? 对于short s1 = 1; s1 = s1 + 1; 由于s1+1运算时 ...

  10. UVa101 The Blocks Problem（不定长数组vector）

    The Blocks Problem 书上的一道例题,代码思路比较清晰,可以看懂. 相关知识: 若a是一个vector,则: a.size():读取它的大小 a.resize():改变大小 a.pus ...