`

jQuery之toggleClass解析

阅读更多
toggleClass(classname[,boolean]),其中第二个参数是可选的。当只传递一个参数时,toggleClass的原理如下:首先判断选择器是否有classname,如果有则动用removeClass(classname);否则动用addClass。当传递第二个参数(true)时,相当于调用addClass(classname);第二个参数传递(false)时,相当于调用removeClass(classname)。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 demo1
  $("button").click(function(){
    $("p").toggleClass("main");
    alert($("p").hasClass("main"));
  });

  demo2
  $("button").click(function(){
    var $p = $("p");
    var is_main_class = $p.hasClass("main");
    if(is_main_class == true){
       $p.removeClass("main");
    }else{
       $p.addClass("main");
   }
  });

  demo3
  $("button").click(function(){
    $("p").toggleClass("main");
  });


});
</script>
<style type="text/css">
.main
{
font-size:120%;
color:red;
}
</style>
</head>

<body>
<h1 id="h1">This is a heading</h1>
<p class="main">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">切换段落的 "main" 类</button>
</body>
</html>





分享到:
评论

相关推荐

    jQuery.toggleClass() 函数详解

    ### jQuery.toggleClass() 函数详解 #### 一、概述 `toggleClass()` 是 jQuery 库中的一个常用函数,用于切换(添加或移除)一个或多个 CSS 类名到被选元素上。此方法允许开发者根据条件动态地改变网页的样式。 #...

    jQuery使用toggleClass方法动态添加删除Class样式的方法

    本文将深入解析`toggleClass`的用法,并通过一个具体的实例来展示其工作原理。 首先,`toggleClass`的基本语法如下: ```javascript $(selector).toggleClass(classname); ``` 在这里,`selector`是选择器,用于...

    jQuery学习资料

    `Jquery特效.pdf`涵盖了如何使用`.fadeIn()`, `.slideUp()`, `.animate()`等函数创建平滑的过渡效果,以及如何利用`.toggleClass()`, `.show()`, `.hide()`控制元素的可见性。 4. **15天学会jquery(完整版).pdf** ...

    JQuery 期末习题

    **jQuery 期末习题解析** jQuery 是一个广泛应用于前端开发的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。在本篇内容中,我们将深入探讨jQuery的优势及其在实际开发中的...

    jQuery.ui.1.7.2中文文档

    本文将对其中的关键内容进行详细解析,帮助开发者更好地理解和使用jQuery UI。 一、jQuery UI 主要组件 1. **Effect(特效)** jQuery UI 提供了一系列预定义的动画效果,如淡入淡出(fadeIn/fadeOut)、滑动...

    精通jquery(中文第二版)_扫描版_以及源代码

    4. **CSS和样式操作**:讲解如何通过jQuery修改元素的样式,包括获取和设置CSS属性,以及使用addClass、removeClass和toggleClass操作类名。 5. **特效与动画**:涵盖fadeIn、fadeOut、slideToggle等基本动画效果,...

    jquery8个很漂亮的特效

    本文将深入解析标题提及的“jquery8个很漂亮的特效”,通过这些实例,帮助读者更好地理解和运用jQuery,提升网页动态效果的制作水平。 1. **代码1:淡入淡出效果(jq22-code1.html)** jQuery中的fadeIn()和...

    jquery 1.5 到2.13 全套

    《jQuery 1.5到2.1.3的全面解析》 jQuery,作为一个广泛使用的JavaScript库,极大地简化了网页的DOM操作、事件处理、动画设计和Ajax交互。自1.5版本以来,jQuery经历了多次迭代,不断优化性能,增强功能,以适应日...

    jQuery经典例子大全

    这个“jQuery经典例子大全”集合了多种实用示例,涵盖了jQuery的核心功能和常见应用场景,以下将对其中的关键知识点进行详细解析。 1. **选择器(Selectors)** jQuery的选择器允许我们高效地选取DOM元素。例如,`...

    jquery.chm

    《jQuery API全方位解析》 jQuery,作为一款广泛应用于前端开发的JavaScript库,因其简洁的语法和强大的功能,深受开发者喜爱。这份"jquery.chm"文档是关于jQuery API的详尽参考,旨在帮助开发者深入理解并熟练运用...

    锋利的jQuery(第2版)

    《锋利的jQuery》(第2版)是一本专注于jQuery库深入学习的书籍,它针对JavaScript框架中的jQuery进行了详尽的解析和实例演示。这本书旨在帮助开发者提高在网页开发中的效率,通过简洁的代码实现复杂的交互效果。...

    jquery 源码分析

    与Prototype、YUI、Mootools等其他JavaScript库相比,jQuery更加注重实用性,去除了一些花哨但不常用的功能,从而使其成为Web开发中的首选工具之一。 #### 二、构建jQuery对象 ##### 2.1 jQuery的设计理念 jQuery...

    jQuery-1.7.js

    《jQuery-1.7.js:JavaScript的神器与深入解析》 jQuery,作为一款广泛使用的JavaScript库,自2006年发布以来,以其简洁的API和强大的功能深受开发者喜爱。在这一版本,jQuery 1.7,我们看到了一系列重要的改进和...

    JQuery 页面文档及实例

    `addClass()`, `removeClass()`, 和`toggleClass()`用于切换CSS类。 ### 7. 插件与扩展 jQuery 社区提供了大量的插件,如滑动插件`jQuery UI`,轮播插件`Bootstrap Carousel`等,这些插件大大丰富了jQuery的功能。...

    jquery仿IPad应用

    通过CSS和jQuery的`toggleClass()`方法,我们可以轻松地控制这些元素的可见性和状态。 8. **页面过渡效果**:iPad应用在页面切换时通常有平滑的过渡动画。使用jQuery的`addClass()`, `removeClass()`和CSS3的`...

    jquery翻书效果源码

    本篇文章将详细解析如何使用jQuery来实现这一效果,让网页呈现出如同真实书籍翻页般的立体感。 一、jQuery简介 jQuery是一款广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互。其简洁...

    锋利的JQUERY实例源码

    《锋利的jQuery》这本书是jQuery学习者的重要参考资料,它以丰富的实例和深入的解析,帮助读者掌握这一强大JavaScript库的精髓。实例源码的提供更是让理论与实践相结合,加速了学习过程。这里,我们将深入探讨jQuery...

    jQueryAPI-090129.rar_jqueryapi

    《jQuery API 深度解析》 在编程领域,jQuery 是一个极其重要的JavaScript库,它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。本篇将详细探讨jQuery API,帮助开发者深入理解并有效利用这个强大的工具。 ...

    Jquery 1.11.0 API

    《jQuery 1.11.0 API 深度解析》 jQuery,作为一款轻量级、功能强大的JavaScript库,自发布以来就深受开发者喜爱。本文将深入探讨jQuery 1.11.0版本的API,帮助开发者更好地理解和运用这个版本中的各种功能。 一、...

Global site tag (gtag.js) - Google Analytics