类样式的操作：指对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. Mysterious Crime CodeForces - 1043D (哈希)

    大意: 给定m个n排列, 求有多少个公共子串. 枚举每个位置, hash求出最大匹配长度. #include <iostream> #include <sstream> #in ...

  2. websocket vue

    /* eslint-disable */ let tt; let count = 1; let lockReconnect = false; function isJsonString(str) { ...

  3. java实现spark常用算子之Reduce

    import org.apache.spark.SparkConf;import org.apache.spark.api.java.JavaRDD;import org.apache.spark.a ...

  4. css强制换行显示省略号之显示两行后显示省略号

    1,首先来一个固定宽度,在一行显示,超出隐藏,显示省略号的样式 display:block; white-space:nowrap; overflow:hidden; text-overflow:el ...

  5. PTA ”写出这个数“

      读入一个正整数 n,计算其各位数字之和,用汉语拼音写出和的每一位数字. 输入格式: 每个测试输入包含 1 个测试用例,即给出自然数 n 的值.这里保证 n 小于 10的100次方. 输出格式: 在 ...

  6. Linux----Ubuntu虚拟机(VMWare)学习

    1.在安装虚拟机系统完成后,如果忘记密码则 https://jingyan.baidu.com/article/c843ea0b9e851077931e4aea.html 2.如何拖动桌面软件移动 长 ...

  7. sql 查询重复记录值取一条

    SELECT * FROM JBL_WebLog WHERE JBL_WebLog_PID IN ( --根据userName分类获取数据最小ID列表 SELECT MIN(JBL_WebLog_PI ...

  8. 8.CNN应用于手写字识别

    import numpy as np from keras.datasets import mnist from keras.utils import np_utils from keras.mode ...

  9. facenet中pairs文件制作

    1.对图片进行重命名 """Rename the image based on the folder name""" import os i ...

  10. libusb_transfer

    http://libusb.sourceforge.net/api-1.0/structlibusb__transfer.html int libusb_control_transfer(libusb ...