类样式的操作：指对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. poj 1064 求解最大化问题

    对于二分而言,如果判断条件比较简单的话,在求解最大化或者最小化问题的时候就比较适用但是这道题目吖的卡精度.. #include<cstdio> #include<iostream&g ...

  2. js对象的 两种访问方式

    来对象访问属性有两种方式.有一个对象Obj = {"Name":"Langshen","AGE":"28"} 用点访问, ...

  3. 题解 CF670C 【Cinema】

    题目链接: https://www.luogu.org/problemnew/show/CF670C 思路: step-1: 语言的数据范围是10^9,所以我们采取用map离散化,这样就能方便且不ML ...

  4. [转载]from __future__ import的用法

    一句话概况:这是为了在低版本python中使用高版本特性而引入的,最常用的就是print_function来实现在2.x中使用3.x中的print()命令,从而避免在切换版本时修改代码. https: ...

  5. O028、nova-compute 部署 instance 详解

    参考https://www.cnblogs.com/CloudMan6/p/5451276.html   本节讨论 nova-compute ,并详细分析 instance 部署的全过程.   nov ...

  6. kali安装dnsdict6

    https://src.fedoraproject.org/lookaside/pkgs/thc-ipv6/thc-ipv6-2.7.tar.gz/2975dd54be35b68c140eb2a6b8 ...

  7. vue打包后css背景图片地址找不到

    背景图片变成了这样:static/css/static/imgs/xxx.jpg 解决方法,修改build/utils,添加   publicPath: '../../'    就行 对比了下,com ...

  8. vue使用scss应该安装哪些依赖

    通过vue-cli搭建的项目如果想使用scss的话除了安装sass-loader,还需要安装node-sass cnpm install sass-loader node-sass -D

  9. 自己实现strcat函数

    问题:自己实现一个strcat_s函数,要和C语言库函数的strcat函数完成同样的功能. (1) 函数原型 char *strcat(char *dest, const char *src); (2 ...

  10. Asp.Net Zero通用打印实现

    Asp.Net Zero是一款非常优秀的web框架,可以用来快速构建业务系统.框架满足了业务系统所需的大部分通用功能,但是系统必须的打印报表功能一直没有实现.下面给大家介绍如何在zero中集成打印功能 ...