类样式的操作：指对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. MySQL中的数据库对象

    1.数据库中一般包含下列对象 表.约束.索引.触发器.序列.视图: 可以使用图形用户界面或通过显式执行语句来创建这些数据库对象.用于创建这些数据库对象的语句称为“数据定义语言”(DDL),它们通常以关 ...

  2. 怎样在 js 中实现 反转字符串 的功能?

    "string".split('').reverse().join('');

  3. ETL测试或数据仓库测试入门

    概述 在我们学习ETL测试之前,先了解下business intelligence(即BI)和数据仓库. 什么是BI? BI(Business Intelligence)即商务智能,它是一套完整的解决 ...

  4. 弹窗插件 layer

    官方网站 http://layer.layui.com/ Github 地址 https://github.com/sentsin/layer //在这里面输入任何合法的js语句 layer.open ...

  5. 解决VS2015 不能设置下面的断点**** 断点未能绑定

    解决VS2015   不能设置下面的断点**** 断点未能绑定 1. 清理解决方案  ,  重新生成解决方案 ,  无效!! 2. 选项-- 调试 -- 启用编辑并继续     无效!! 3.   启 ...

  6. 基于Openresty+Naxsi的WAF：从小白到实践

    序 2019年2月18日,加入妈妈网,至今已经有四个月的时间,上周进到一个网关项目组,这个项目的主要目的是基于openResty+Naxsi实现WAF,相关技术初定涉及到openResty.Lua.N ...

  7. Windows地址栏的妙用

    主角: 它就是windows自带的一个小工具->地址栏,可以通过在任务栏右键选择工具栏-地址栏添加使用. 妙用: 一.打开文件 使用方法:D:\Temp(文件路径) 小提示:快速进入回收站:Re ...

  8. 浅谈ROW_NUMBER() OVER()函数的使用

    语法格式:row_number() over(partition by 分组列 order by 排序列 desc)                   row_number() over 具有分组排 ...

  9. Liunx命令问题

    第一个问题是:快速杀死服务 第一步:查看进程号pid        ps -u my_account -o pid,rss,command | grep redis 第二步:杀死进程        k ...

  10. Almost Regular Bracket Sequence CodeForces - 1095E （线段树，单点更新，区间查询维护括号序列）

    Almost Regular Bracket Sequence CodeForces - 1095E You are given a bracket sequence ss consisting of ...