开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

jQuery ToggleClass -删除2个类并添加1个类

jQuery ToggleClass是一个用于切换元素类的函数。它可以删除一个或多个类，并添加一个类。具体来说，它会检查元素是否已经具有指定的类，如果有，则删除它；如果没有，则添加它。

这个函数的语法如下：

$(selector).toggleClass(classname)

其中，selector是要操作的元素的选择器，classname是要删除和添加的类名。

使用toggleClass函数可以实现一些动态的效果，比如点击一个按钮时切换元素的样式。

下面是一个示例，演示如何使用toggleClass函数删除两个类并添加一个类：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <style>
    .red {
      color: red;
    }
    .bold {
      font-weight: bold;
    }
    .italic {
      font-style: italic;
    }
  </style>
</head>
<body>
  <button id="toggleButton">Toggle Class</button>
  <p id="myParagraph" class="red bold">Hello, World!</p>
  <script>
    $(document).ready(function(){
      $("#toggleButton").click(function(){
        $("#myParagraph").toggleClass("red bold").addClass("italic");
      });
    });
  </script>
</body>
</html>

在上面的示例中，当点击"Toggle Class"按钮时，#myParagraph元素的red和bold类会被删除，同时添加italic类。这样，元素的文本颜色将变为黑色，字体将变为斜体。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云云函数（SCF）。

腾讯云云服务器（CVM）：提供可扩展的计算能力，适用于各种应用场景，包括网站托管、应用程序部署、大数据分析、人工智能等。了解更多信息，请访问腾讯云云服务器。
腾讯云云函数（SCF）：无服务器计算服务，可以让您无需管理服务器即可运行代码。适用于事件驱动的应用程序、微服务、数据处理等场景。了解更多信息，请访问腾讯云云函数。

相关搜索:Jquery ToggleClass不能在两个类之间切换 jQuery |点击添加/删除类|最佳实践 jQuery划分元素并添加类 jQuery可以添加类，但不能删除类 jQuery复选框禁用并添加类 jQuery将类设置为活动类并删除所有其他活动类 JQuery添加/删除导航栏的类 jQuery添加/删除类或切换类 jQuery添加删除选定的类 toggleClass不会删除“showing”的类

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

JavaScript和jQuery添加和删除class类名

JavaScript添加/删除类名： element.classList.add("className") ：添加类名 element.classList.remove("className") ：删除类名...("class","three"); //three jQuery添加/删除类名： element.addClass("className") ：添加类名 element.removeClass("className...") ：删除类名 removeClass() 方法可以从被选元素移除一个或多个类，如移除多个类，可以用空格隔开。...注释：如果没有规定参数，则该方法将从被选元素中删除所有类。...可以使用函数来删除被选元素中的类： ele.removeClass(function(index,oldclass)) index ：可选，接受选择器的 index 位置。

2.6K0 0

jquery怎么添加类和移除类

jquery中可用addClass()和removeClass()来添加类和移除类。...jquery添加类和移除类的方法方法描述 addClass() 向匹配的元素添加指定的类名。 removeClass() 从所有匹配的元素中删除全部或者指定的类。...jquery addClass()添加类 addClass() 方法向被选元素添加一个或多个类。该方法不会移除已存在的 class 属性，仅仅添加一个或多个 class 属性。... 向第一个 p 元素添加一个类 jQuery removeClass()移除类 removeClass()... 从第一个段落中删除类

5.3K5 0

jQuery - 获取并设置 CSS 类

我们将学习下面这些： addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleClass() - 对被选元素进行添加/删除类的切换操作...当然，在添加类时，您也可以选取多个元素：实例 $("button").click(function(){ $("h1,h2,p").addClass("blue"); $("div").addClass...addClass("important blue"); }); jQuery removeClass() 方法下面的例子演示如何在不同的元素中删除指定的 class 属性：实例 $("button"...).click(function(){ $("h1,h2,p").removeClass("blue"); }); jQuery toggleClass() 方法下面的例子将展示如何使用 jQuery...该方法对被选元素进行添加/删除类的切换操作：实例 $("button").click(function(){ $("h1,h2,p").toggleClass("blue"); });

2.2K3 0

原生JS添加Class类名删除类名

原生JS添加类名删除类名为 div>元素添加 class: document.getElementById("myDIV").classList.add("mystyle"); 为 div 元素添加多个类...document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass"); 为 div元素移除一个类:...document.getElementById("myDIV").classList.remove("mystyle"); 为 div 元素移除多个类: document.getElementById...("myDIV").classList.remove("mystyle", "anotherClass", "thirdClass"); 检查是否含有某个CSS类 myDiv.classList.contains...('myCssClass'); //return true or false 另一种给元素添加class属性 document.getElementsByTagName('body')[0].className

7.3K4 0

jQuery点击切换增加和删除class类

$(".text").click(function () { if ($(this).parent().hasClass("se...

3.6K1 0

js遍历添加栏目类添加css，再点击其它删除css

很多网页设计都可能会用到js遍历去增加css类别，这篇文章主要介绍了js遍历添加栏目类添加cs，再点击其它删除css的实例代码，非常不错，具有一定的参考借鉴借鉴价值，原作者是谁已无从知晓，但是代码是有效的...具体代码如下： //js遍历添加栏目类添加css 再点击其它删除css $(".radio-group .ckselect").each(function(index) { $(this).click...allhide")) { $(".peoples").hide(); $(".peoples").removeClass("allhide") } }); 以上所述就是给大家介绍的js遍历添加栏目类添加...css，再点击其它删除css的教程，希望对大家有所帮助，如果大家有任何疑问请给我留言！

3.7K2 0

盘点Vector类向量中添加和删除元素常用方法

Vector类是实现动态数组的功能，主要是用在不知道数组的大小，在开发常用查找、插入、删除的工作的情况。...类向量中添加元素常用方法 1.void addElement(Object obj)在集合的末尾添加一个元素，不管它是什么类型都会把它的toString()返回值加进去。...三、Vector类向量中删除元素对象的常用方法 1.void removeAllElement( )删除集合中的所有元素，并将把大小设置为0。...四、总结本文主要介绍了Vector类、Vector类向量中添加元素常用方法、Vector类向量中删除元素对象的常用方法。 Vector类是实现动态数组的功能，介绍它的4种构造方法。...Vector类向量中添加元素常用方法有addElement(Object obj)在集合的末尾添加一个元素，不管它是什么类型都会把它的toString()返回值加进去、insetElementAt(Object

9833 0

盘点Vector类、Vector类向量中添加元素常用方法、Vector类向量中删除元素对象的常用方法

Vector类是实现动态数组的功能，主要是用在不知道数组的大小，在开发常用查找、插入、删除的工作的情况。...类向量中添加元素常用方法 1.void addElement(Object obj)在集合的末尾添加一个元素，不管它是什么类型都会把它的toString()返回值加进去。...三、Vector类向量中删除元素对象的常用方法 1.void removeAllElement( )删除集合中的所有元素，并将把大小设置为0。...四、总结本文主要介绍了Vector类、Vector类向量中添加元素常用方法、Vector类向量中删除元素对象的常用方法。 Vector类是实现动态数组的功能，介绍它的4种构造方法。...Vector类向量中添加元素常用方法有addElement(Object obj)在集合的末尾添加一个元素，不管它是什么类型都会把它的toString()返回值加进去、insetElementAt(Object

1.6K4 0

jquery教程之属性操作函数

jquery教程之属性操作函数一、html 取得第一个匹配元素的html内容获取 $('p').html(); 设置 $('p').html('设置html内容'); 二、text 取得所有匹配元素的内容...class addClass 为每个匹配的元素添加指定的类名 $("p").addClass("selected") removeClass...从所有匹配的元素中删除全部或者指定的类。...$("p").removeClass("selected"); toggleClass 如果存在（不存在）就删除（添加）一个类。.../jquery.min.js"> console.log($('#el').html()) $('#el p:first').html

7802 0

JQuery干货篇之处理元素

JQuery干货篇之处理元素 1.1. attr 1.2. removeAttr 1.3. addClass 1.4. hasClass 1.5. toggleClass 1.6. css 1.7. text...该函数可接收并使用选择器的 index 值和当前属性值。...该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。...这就是所谓的切换效果语法： $(selector).toggleClass(class,switch) class必需的，用来规定添加或移除class的指定元素，如需规定若干 class，请使用空格来分隔类名...(e) { $("img").toggleClass('redBar blueBar'); //在两种class之间切换，如果有就删除，没有的就添加 e.preventDefault

4892 0

03-老马jQuery教程-DOM操作

fn) 为每个匹配的元素添加指定的类名，返回值是jQuery包装对象。...添加样式类，参数为字符串情况 $("p").addClass("selected"); // 添加多个样式类 $("p").addClass("selected1 selected2"); 参数是回调函数...语法:removeClass([class|fn]) 从所有匹配的元素中删除全部或者指定的类。...参数是字符串样式类 removeClass(str) // 从匹配的元素中删除 'selected' 类 $("p").removeClass("selected"); // 删除匹配元素的所有类 $(...).attr('class'); }); 3.4 切换样式类 toggleClass 语法 toggleClass(class|fn[,sw]) 如果存在（不存在）就删除（添加）一个类。

1.5K5 0

学习jQuery的基础使用

jQuery 是一个 JavaScript 库，jQuery 极大地简化了 JavaScript 编程，我们常用jQuery来处理Dom\事件\动画\AJAX jQuery Dom处理选择器选择器大家需要深入了解...append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元素之前插入内容删除元素...remove() - 删除被选元素（及其子元素） empty() - 从被选元素中删除子元素asdasd 处理class addClass() $("div").addClass("b"...) - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleClass() - 对被选元素进行添加/删除类的切换操作 $("div").toggleClass...jQuery AJAX 什么是AJAX？

1K2 0

jQuery源码解析之addClass(),removeClass(),toggleClass()和hasClass()

一、$().addClass() 作用：向目标元素添加一个或多个类名源码： //向目标元素添加一个或多个类名 //源码8401行 addClass: function( value...while ( ( clazz = classes[ j++ ] ) ) { //当前元素没有和要添加的类名重复的话就添加...a ② 如果要添加的类名 b 不重复，则将 b 添加进 a 里 ③ 最后使用elem.setAttribute("class",a)完成二、$().removeClass 作用：移除类，如果没有参数...this ).removeClass( value.call( this, j, getClass( this ) ) ); } ); } //如果没有规定参数，则删除所有类...：切换类源码： //stateVal为true，则添加类，false则移除类 //源码8497行 toggleClass: function( value, stateVal

6593 0

jQuery(一)

'); //给p的父元素为h1的元素添加两个类 $('h1').addClass((n) => { return "section" + n; }); // 其中n表示当前遍历到的索引值 // 删除css...类 $('p').removeClass("hilite"); // 删除一个类 $('p').removeClass('hilite first'); // 删除多个类 $('p').removeClass...((n) => { return "section" + n }); // 通过函数删除 $('p').removeClass(); //删除所有的自定义类 // 切换css类,即第一次执行显示，第二次执行消失...$('tr:odd').toggleClass('oddrow'); // 匹配列表中的奇数序列的元素，然后进行添加 $('h1').toggleClass('big bold'); //切换为这个类...); // 添加 $('h1').toggleClass('hilite', false); // 移出 // 检测css类 $('p').hasClass('first'); // 确定是否有该类 $

2.1K4 0

jQuery第十七篇操作类相关的方法

min.js"> $(function() { /*1.addClass(class|fn) 作用: 添加一个类...如果要添加多个, 多个类名之间用空格隔开即可 2.removeClass([class|fn]) 作用: 删除一个类...如果想删除多个, 多个类名之间用空格隔开即可 3.toggleClass(class|fn[,sw]) 作用: 切换类 */...("class2 class1"); //有就消失(有的话,相当于删除功能把),没有就出现(添加) } }); ...添加类删除类切换类

3421 0

03-老马jQuery教程-DOM操作(上）

|fn) 为每个匹配的元素添加指定的类名，返回值是jQuery包装对象。...添加样式类，参数为字符串情况 $("p").addClass("selected"); // 添加多个样式类 $("p").addClass("selected1 selected2"); 参数是回调函数...语法:removeClass([class|fn]) 从所有匹配的元素中删除全部或者指定的类。...参数是字符串样式类 removeClass(str) // 从匹配的元素中删除 'selected' 类 $("p").removeClass("selected"); // 删除匹配元素的所有类 $(...).attr('class'); }); 3.4 切换样式类 toggleClass 语法 toggleClass(class|fn[,sw]) 如果存在（不存在）就删除（添加）一个类。

1.6K0 0

jQuery中不同元素的作用

删除元素 remove() - 删除被选元素（及其子元素） $("#div1").remove(); empty() - 从被选元素中删除子元素获取并设置 CSS 类 addClass() - 向被选元素添加一个或多个类...$("button").click(function(){ $("#div1").addClass("important blue"); }); removeClass() - 从被选元素删除一个或多个类...toggleClass() - 对被选元素进行添加/删除类的切换操作 css() - 设置或返回样式属性 $("p").css("background-color"); $("p").css("background-color...以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。向上遍历 DOM 树 parent() - 返回被选元素的直接父元素。...noConflict() 方法 jQuery 使用符号作为jQuery的简写。如果其他JavaScript框架也使用符号作为简写怎么办？

1.7K0 0

js常用方法

字符串2.replace(/-/g,"")：将字符串2所有的 - 替换为“”，及去掉 - 注：/ /g 代表全局的意思 var newAttr = ['a','b','c'],temp='a'; jQuery...如果一定用children我们可以这样写： $("#tb").children("tr:last").children("td:eq(1)").html() ④jQuery 操作 CSS addClass...() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleClass() - 对被选元素进行添加/删除类的切换操作 $("h1,h2,...p").toggleClass("blue"); css() - 设置或返回样式属性 ⑤jQuery 删除 remove() - 删除被选元素（及其子元素） empty() - 从被选元素中删除子元素(...不删除本身元素) ⑥js中map的存取值 var myMap = new Map(); // 添加键 myMap.set("a", "和键'a string'关联的值"); myMap.set

3.3K3 0

【Java 进阶篇】JQuery DOM操作：Class属性的舞蹈魔法

Class属性操作主要涉及三个方法：addClass()、removeClass()和toggleClass()。 addClass() 这个方法用于向元素添加一个或多个Class。...// 示例：向元素添加highlight类 $("#myElement").addClass("highlight"); 通过addClass()方法，我们为#myElement元素添加了一个名为highlight...// 示例：切换active类 $("#myElement").toggleClass("active"); 通过toggleClass()方法，如果#myElement元素原先有active类，则移除...// 通过选择器选中所有包含selected类的按钮 $("button.selected").removeClass("selected"); 多Class操作 JQuery允许我们一次性添加、移除或切换多个...小结通过本篇博客，我们深入了解了JQuery DOM操作中的Class属性操作。Class属性的操作为我们提供了在HTML元素中添加、移除、切换类的便捷方法，使得页面样式的变化更为灵活多变。

1242 0

jQuery学习笔记

类与属性控制 .addCLass().hasClass().removeClass() 添加一个类，判断是否有指定类，删除类 $('body').addClass('test'); $('body')....() 类的开关式转换 $('img').toggleClass(); //对所有类的开关 $('img').toggleClass('test'); //对指定类的开关 $('img').toggleClass...(isTrue); //根据`isTrue`判断所有类的开关 $('img').toggleClass('test', isTrue); //根据`isTrue`判断指定类的开关 //同 `$('img...').toggleClass('test');` 只是类名由函数返回 $('img').toggleClass(function (index, className, isTrue) { return...$.data() 往节点中获取/设置数据 $.removeData() 删除数据在内部实现上，jQuery会在指定节点添加一个内部标识，以此为 key，把数据存在内部闭包的一个结构中。

3.4K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭