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() 函数详解 #### 一、概述 `toggleClass()` 是 jQuery 库中的一个常用函数，用于切换（添加或移除）一个或多个 CSS 类名到被选元素上。此方法允许开发者根据条件动态地改变网页的样式。 #...
本文将深入解析`toggleClass`的用法，并通过一个具体的实例来展示其工作原理。 首先，`toggleClass`的基本语法如下： ```javascript $(selector).toggleClass(classname); ``` 在这里，`selector`是选择器，用于...
`Jquery特效.pdf`涵盖了如何使用`.fadeIn()`, `.slideUp()`, `.animate()`等函数创建平滑的过渡效果，以及如何利用`.toggleClass()`, `.show()`, `.hide()`控制元素的可见性。 4. **15天学会jquery(完整版).pdf** ...
**jQuery 期末习题解析** jQuery 是一个广泛应用于前端开发的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。在本篇内容中，我们将深入探讨jQuery的优势及其在实际开发中的...
本文将对其中的关键内容进行详细解析，帮助开发者更好地理解和使用jQuery UI。 一、jQuery UI 主要组件 1. **Effect（特效）** jQuery UI 提供了一系列预定义的动画效果，如淡入淡出（fadeIn/fadeOut）、滑动...
4. **CSS和样式操作**：讲解如何通过jQuery修改元素的样式，包括获取和设置CSS属性，以及使用addClass、removeClass和toggleClass操作类名。 5. **特效与动画**：涵盖fadeIn、fadeOut、slideToggle等基本动画效果，...
本文将深入解析标题提及的“jquery8个很漂亮的特效”，通过这些实例，帮助读者更好地理解和运用jQuery，提升网页动态效果的制作水平。 1. **代码1：淡入淡出效果（jq22-code1.html）** jQuery中的fadeIn()和...
《jQuery 1.5到2.1.3的全面解析》 jQuery，作为一个广泛使用的JavaScript库，极大地简化了网页的DOM操作、事件处理、动画设计和Ajax交互。自1.5版本以来，jQuery经历了多次迭代，不断优化性能，增强功能，以适应日...
这个“jQuery经典例子大全”集合了多种实用示例，涵盖了jQuery的核心功能和常见应用场景，以下将对其中的关键知识点进行详细解析。 1. **选择器（Selectors）** jQuery的选择器允许我们高效地选取DOM元素。例如，`...
《jQuery API全方位解析》 jQuery，作为一款广泛应用于前端开发的JavaScript库，因其简洁的语法和强大的功能，深受开发者喜爱。这份"jquery.chm"文档是关于jQuery API的详尽参考，旨在帮助开发者深入理解并熟练运用...
《锋利的jQuery》(第2版)是一本专注于jQuery库深入学习的书籍，它针对JavaScript框架中的jQuery进行了详尽的解析和实例演示。这本书旨在帮助开发者提高在网页开发中的效率，通过简洁的代码实现复杂的交互效果。...
与Prototype、YUI、Mootools等其他JavaScript库相比，jQuery更加注重实用性，去除了一些花哨但不常用的功能，从而使其成为Web开发中的首选工具之一。 #### 二、构建jQuery对象 ##### 2.1 jQuery的设计理念 jQuery...
《jQuery-1.7.js：JavaScript的神器与深入解析》 jQuery，作为一款广泛使用的JavaScript库，自2006年发布以来，以其简洁的API和强大的功能深受开发者喜爱。在这一版本，jQuery 1.7，我们看到了一系列重要的改进和...
`addClass()`, `removeClass()`, 和`toggleClass()`用于切换CSS类。 ### 7. 插件与扩展 jQuery 社区提供了大量的插件，如滑动插件`jQuery UI`，轮播插件`Bootstrap Carousel`等，这些插件大大丰富了jQuery的功能。...
通过CSS和jQuery的`toggleClass()`方法，我们可以轻松地控制这些元素的可见性和状态。 8. **页面过渡效果**：iPad应用在页面切换时通常有平滑的过渡动画。使用jQuery的`addClass()`, `removeClass()`和CSS3的`...
本篇文章将详细解析如何使用jQuery来实现这一效果，让网页呈现出如同真实书籍翻页般的立体感。 一、jQuery简介 jQuery是一款广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和Ajax交互。其简洁...
《锋利的jQuery》这本书是jQuery学习者的重要参考资料，它以丰富的实例和深入的解析，帮助读者掌握这一强大JavaScript库的精髓。实例源码的提供更是让理论与实践相结合，加速了学习过程。这里，我们将深入探讨jQuery...
《jQuery API 深度解析》 在编程领域，jQuery 是一个极其重要的JavaScript库，它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。本篇将详细探讨jQuery API，帮助开发者深入理解并有效利用这个强大的工具。 ...
《jQuery太阳星系轨道行星运行动画特效解析》 在Web开发中，视觉效果往往能够提升用户的体验感，其中动画效果扮演着至关重要的角色。"jQuery太阳星系轨道行星运行动画特效"就是一个很好的例子，它巧妙地利用了...