当前位置: 首页 > 编程日记 > 正文

类操作是什么意思?jQuery的类操作教程

类操作就是通过操作元素的类名进行元素样式操作,当元素样式比较复杂时,如果通过css()方法实现,需要在CSS里编写很长的代码,既不美观也不方便。而通过写一个类名,把类名加上或去掉就会显得很方便。下面通过代码演示类的添加、删除和切换。

1. 准备工作

先准备一个HTML网页,然后用jQuery代码对网页进行操作。HTML代码如下。

<style>
  .current { background-color: red; }
  </style>
  <div>添加类名</div>
  <div class="current">删除类名</div>
  <div class="current">切换类名</div>
  上述代码中,第2行定义current类的样式为背景色为红色,第5行和第6行定义了两个类名  为current的div元素。


  2. addClass()添加类

addClass()方法向被选元素添加一个或多个类名,基本语法如下所示。

$(selector).addClass(className)

上述代码中,className表示要添加的类名,示例代码如下

<script>
  $("div").click(function() {
  $(this).addClass("current");
  });
  </script>
  上述代码执行后,单击页面中的“添加类名”按钮,就会在div元素上添加current类名,背景色修改为红色。

如果添加多个类,使用空格分隔类名,示例代码如下。

$(this).addClass("current current1 …");

3. removeClass()移除类

removeClass()方法从被选元素移除一个或多个类,基本语法如下所示。

$(selector).removeClass(className)
上述代码中, className参数可以传入一个或多个类名,使用空格来分隔,如果省略该参数,表示移除所有的类名。下面通过代码演示。

<script>
$("div").click(function() {
$(this).removeClass("current");
});
</script>
上述代码执行后,单击页面中的“删除类名”按钮,在div元素上的current类名会被移除,背景色消失。


4. toggleClass()切换类

toggleClass()方法用来为元素添加或移除某个类,如果类不存在,就添加该类,如果类存在,就移除该类。基本语法如下所示。

$(selector).toggleClass(className, switch)
上述代码中,className表示添加或移除的一个或多个类名,多个类名用空格分隔;switch参数用来规定只删除类或只添加类,设为true表示添加,设为false表示移除。

下面通过代码演示toggleClass()的使用。

<script>
  $("div").click(function() {
  $(this).toggleClass("current");
  });
  </script>
  上述代码执行后,单击页面中的“切换类名”按钮,当div元素上存在current类名时,则被移除,否则就添加。可以实现字体背景色的切换效果。

相关文章:

刻意练习:LeetCode实战 -- Task29. 加油站

背景 本篇图文是LSGO软件技术团队组织的 第二期基础算法&#xff08;Leetcode&#xff09;刻意练习训练营 的打卡任务。本期训练营采用分类别练习的模式&#xff0c;即选择了五个知识点&#xff08;数组、链表、字符串、树、贪心算法&#xff09;&#xff0c;每个知识点选择了…

C#从SQL server数据库中读取l图片和存入图片

一、从图片中获得二进制值的基本方法&#xff1a;Image.Save 方法 (String, ImageFormat) 这会将保存 Image 写入指定的文件中指定的格式。 命名空间: System.Drawing 程序集: System.Drawing&#xff08;位于 System.Drawing.dll&#xff09; 语法&#xff1a; public void S…

linux下查看内存使用情况

在Linux下查看内存我们一般用free命令&#xff1a;[rootscs-2 tmp]# free total used free shared buffers cachedMem: 3266180 3250004 16176 0 110652 2668236-/ buffers/cache: 471116 2795064Swa…

现在转行学习UI设计好不好就业

​ UI设计是很多企业都会有需求的一个岗位&#xff0c;对于现在转行学习UI设计好不好就业这个问题&#xff0c;小编的回答是肯定的&#xff0c;最直接的方法就是上招聘信息&#xff0c;如果说招聘网站上UI设计师职位很少&#xff0c;那就说明UI设计行业已经差不多饱和了。 ​ …

刻意练习:LeetCode实战 -- Task30.通配符匹配

背景 本篇图文是LSGO软件技术团队组织的 第二期基础算法&#xff08;Leetcode&#xff09;刻意练习训练营 的打卡任务。本期训练营采用分类别练习的模式&#xff0c;即选择了五个知识点&#xff08;数组、链表、字符串、树、贪心算法&#xff09;&#xff0c;每个知识点选择了…

iOS 11 安全区域适配总结

2019独角兽企业重金招聘Python工程师标准>>> 导语&#xff1a;本文主要是对iOS 11下APP中tableView内容下移20pt或下移64pt的问题适配的一个总结。内容包括五个部分&#xff1a;问题的原因分析、adjustContentInset属性的计算方式、什么情况下的tableView会发生内容…

(广州)软件开发定制服务,工作流引擎 OA 库存管理系统

本人专注于工作流的研究设计同时提供软件开发定制服务,工作流引擎 OA系统 库存管理系统 如果有机会合作共事请联系&#xff1a;15817167503&#xff08;本人在广州&#xff09; QQ&#xff1a;1311663711 加时请注明软件定制 广州软件定制开发 转载于:https://www.cnblogs.com/…

Java类加载机制详解【java面试题】

Java类加载机制详解【java面试题】 (1)问题分析&#xff1a; Class文件由类装载器装载后&#xff0c;在JVM中将形成一份描述Class结构的元信息对象&#xff0c;通过该元信息对象可以获知Class的结构信息&#xff1a;如构造函数&#xff0c;属性和方法等&#xff0c;Java允许用户…

C#获取文件的当前路径

1. System.Diagnostics.Process.GetCurrentProcess().MainModule.FileName &#xff0d;获取模块的完整路径。 2.System.Environment.CurrentDirectory &#xff0d;获取和设置当前目录(该进程从中启动的目录)的完全限定目录。 3.System.IO.Directory.GetCurrentDirectory() &a…

c# ThreadPool 判断子线程全部执行完毕的四种方法

1、先来看看这个多线程编程多线程用于数据采集时&#xff0c;速度明显很快&#xff0c;下面是基本方法&#xff0c;把那个auto写成采集数据方法即可。using System;using System.Collections.Generic;using System.Text;using System.Threading;namespace ConsoleApplication1{…

腾讯精选练习 50 题(Leetcode)笔记 PDF下载!

昨天在知识星球中立了一个Flag&#xff0c;第一步采取的行动就是把以前刷的“腾讯精选练习 50 题”重新梳理一下&#xff0c;就有了今天这本170多页的小册子。 这本小册子即可以作为学习数据结构与算法课程的参考资料&#xff0c;也可以作为备考计算机类研究生的备考资料。希望…

Python培训:try-except语句与else子句联合使用处理可能出现的程序异常

异常处理的主要目的是防止因外部环境的变化导致程序产生无法控制的错误&#xff0c;而不是处理程序的设计错误。因此&#xff0c;将所有的代码都用try语句包含起来的做法是不推荐的&#xff0c;try语句应尽量只包含可能产生异常的代码。Python中try-except语句还可以与else子句…

Backup Exec 2012 备份和还原活动目录(非授权还原)

延续以上两篇&#xff0c;安装配置完毕后&#xff0c;开始进行备份操作。 环境一如上篇: DC: pdc1.fengdian.info BE2012 Svr: backup.fengdian.info 本例使用BE2012对活动目录进行备份和后续的还原操作&#xff0c;通过模拟误删除DC中的两个OU及其用户账号&#xff0c;使用先…

hdu3368 Reversi

题意&#xff1a;一种翻转棋游戏&#xff0c;对当前的棋局&#xff0c;问黑子下一步最多能将几个白子翻为黑子&#xff0c;&#xff08;当前黑子与原先棋盘中的黑子的连线中间的白子会翻成黑子&#xff09; 分析&#xff1a;很简单的搜索题&#xff0c;不过一开始一直WA&#x…

有符号整型的数据范围为什么负数比正数多一个?

背景 我们先看Leetcode的这道题目&#xff1a; 标题&#xff1a;50. Pow(x, n)难度&#xff1a;中等https://leetcode-cn.com/problems/powx-n/ 实现 pow(x, n) &#xff0c;即计算 x 的 n 次幂函数。 示例 1: 输入: 2.00000, 10 输出: 1024.00000示例 2: 输入: 2.10000, 3…

UI设计培训:UI构思创意技巧和方法

想要作为一名合格的UI设计师&#xff0c;那么创意技巧和方法是非常重要的&#xff0c;很多刚入职场的新人或者是工作多年的设计师都会在创意技巧和方法上遇到瓶颈&#xff0c;下面小编为大家整理一些UI构思创意技巧和方法&#xff0c;希望能够帮助到大家。 UI设计培训&#xff…

博客园 cnblogs博客添加Google Analytics统计

在cnblogs的文章列表中只可以看到自己的每篇文章的页面浏览量&#xff0c;没有详细的统计信息。Google Analytics作为强大的统计工具&#xff0c;能得到几乎所有想要的统计信息&#xff0c;是博客不可多得的好工具&#xff0c;本文介绍如何在cnblogs博客中使用Google Analytics…

技术图文:Python 位运算防坑指南

背景 我们先看这个题目&#xff1a; 标题&#xff1a;137. 只出现一次的数字 II难度&#xff1a;中等https://leetcode-cn.com/problems/single-number-ii/ 给定一个 非空 整数数组&#xff0c;除了某个元素只出现一次以外&#xff0c;其余每个元素均出现了三次。找出那个只出…

聊聊nginx报错499问题

序本文主要来聊一下nginx的access log当中出现的499问题。 问题描述499 CLIENT CLOSED REQUESTA non-standard status code introduced by nginx for the case when a client closes the connection while nginx is processing the request. 原因服务器返回http头之前&#xff…

UI设计需要报培训班学习吗

UI设计在很多企业已经是不可或缺的一个岗位了&#xff0c;所以UI设计的发展空间是非常大的&#xff0c;想要做UI设计师&#xff0c;光靠自学是不行的&#xff0c;那么UI设计需要报培训班学习吗?来看看下面小编的详细介绍就知道了。 UI设计需要报培训班学习吗?目前学习UI设计主…

技术图文:位运算技术在求解算法题中的应用

背景 前段时间&#xff0c;在知识星球立了一个Flag&#xff0c;这是总结Leetcode刷题的第一篇图文。 在总结这篇图文的时候&#xff0c;顺便把遇到的坑写了两篇辅助的图文&#xff0c;大家可以参考一下&#xff1a; 有符号整型的数据范围为什么负数比正数多一个&#xff1f;P…

JavaScript学习系列6 充实文档的内容

JavaScript 两项基本原则渐进增强&#xff1a;你应该总是从最核心的部分&#xff0c;也就是从内容开始。应该根据内容使用标记实现良好的结构&#xff1b;然后再逐步加强这些内容。平稳退化&#xff1a;不支持JavaScript也能访问基本内容。内容&#xff1a;我们在Html文件中编辑…

mapreduce中设置自定义的输入类,进行文本解析(默认以tab键为分隔符)

job.setInputFormatClass(KeyValueTextInputFormat.class);//此时map端输入的键的内容为第一个tab键以左的内容,值得内容为第一个tab键以右的内容转载于:https://www.cnblogs.com/le-ping/p/7788973.html

如何分辨Web前端培训机构的好坏

web前端在互联网行业有着非常高的薪水和很好的前景&#xff0c;想要学习web前端的人越来越多&#xff0c;对于web前端培训机构的选择让很多人犯了难&#xff0c;那么如何分辨Web前端培训机构的好坏呢?该如何选择呢?来看看下面的详细介绍。 如何分辨Web前端培训机构的好坏? 1…

mysql dba系统学习(19)配置mysql+lvs+keeplived实现Mysql读操作的负载均衡

配置mysqllvskeeplived实现Mysql读操作的负载均衡 环境&#xff1a; test1192.168.46.131master test2192.168.46.130slave备份test库 test3调度器 1、安装与配置Keepalived 首先在节点test1、test2上安装Keepalived软件&#xff0c;软件安装非常简单。 12345678910111213[root…

技术图文:浅析 C# Dictionary实现原理

背景 对于 C# 中的 Dictionary类 相信大家都不陌生&#xff0c;这是一个 Collection(集合) 类型&#xff0c;可以通过 Key/Value (键值对) 的形式来存放数据&#xff1b;该类最大的优点就是它查找元素的时间复杂度接近 O(1)&#xff0c;实际项目中常被用来做一些数据的本地缓存…

思念水饺吃成泡沫水饺(图)思念质量门

思念再曝水饺吃出泡沫 &#xff01;思念带着“创可贴汤圆”和“泡沫水饺”“拜晚年”了&#xff0c;而失去新国标的“护身符”&#xff0c;思念这次还要找出什么样的借口为汤圆里的创可贴和水饺里的泡沫找“台阶”下呢&#xff1f;思念汤圆刚被爆吃出创可贴&#xff0c;思念水饺…

jQuery动画的显示与隐藏效果

jQuery中用于控制元素显示和隐藏效果的方法如表1所示。 表1 控制元素的显示和隐藏 在表1中&#xff0c;参数speed表示动画的速度&#xff0c;可设置为动画时长的毫秒值(如1000)&#xff0c;或预定的3种速度(slow、fast和normal);参数easing表示切换效果&#xff0c;默认效果为s…

技术图文:字典技术在求解算法题中的应用

背景 前段时间&#xff0c;在知识星球立了一个Flag&#xff0c;这是总结Leetcode刷题的第二篇图文。 在总结这篇图文的时候&#xff0c;顺便总结了 C# 中Dictionary类的实现&#xff0c;大家可以参考一下&#xff1a; 浅析 C# Dictionary实现原理 理论部分 C# 中字典的常…

[WCF REST] 解决资源并发修改的一个有效的手段:条件更新(Conditional Update)

条件获取&#xff08;Conditional Update&#xff09;可以避免相同数据的重复传输&#xff0c;进而提高性能。条件更新&#xff08;Conditional Update&#xff09;用于解决资源并发操作问题。如果我们预先获取一个资源进行修改或者删除&#xff0c;条件更新检验帮助我们确认资…