类样式的操作：指对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. qt 静态编译配置项

    configure -confirm-license -opensource -platform win32-msvc2013 -debug-and-release -static -prefix & ...

  2. 解决radiobutton在gridview中无法单选的一种方法

    最近在项目中有个单选gridview中某一项的需求,使用radiobutton后发现,虽然最终选择出来的是一项,但是在页面上却可以选择多项,经过查看生成的html代码,发现生成的radio的name属 ...

  3. 进阶Java编程(7)反射机制

    反射机制 1,反射机制简介 在Java语言里面之所以会有如此多的开源技术支撑,很大的一部分是来自于Java最大的特征[反射机制].如果你不能够使用反射机制去进行项目的开发与设计,那么可以说你并未接触到 ...

  4. Python（六） —— 网络请求

    接口调用 接口调用有几个模块可以用:urllib 和 requests ,urllib 是内置的模块,极其不好用,强烈推荐用 requests 模块 get 请求 1.普通的 get 请求 impor ...

  5. 日历控件datetimepicker（IE11）

    1.安装 smalot.bootstrap-datetimepicker 2.引用 bootstrap.css bootstrap-datetimepicker.min.css jquery-1.10 ...

  6. java基础3(异常)

    1.异常的体系 1)请描述异常的继承体系 异常继承体系为:异常的根类是 java.lang.Throwable,其下有两个子类:java.lang.Error 与 java.util.Exceptio ...

  7. nginx 配置反向代理根目录到其他服务器

    location /detail/json { if ( $uri = "/detail/json" ) { rewrite "/detail/json" /i ...

  8. Android Jetpack之WorkManager: 观察结果

    在使用WorkManager的时候,有时候需要关注任务执行的结果和状态,可以使用 LiveData<WorkInfo> liveOpStatus = WorkManager.getInst ...

  9. 9.RNN应用

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

  10. Scrapy爬取小说简单逻辑

    Scrapy爬取小说简单逻辑 一 准备工作 1)安装Python 2)安装PIP 3)安装scrapy 4)安装pywin32 5)安装VCForPython27.exe ........... 具体 ...