通过jquery toggleClass()属性制作文章段落更改背景颜色


Posted in jQuery onMay 21, 2018

定义和用法

toggleClass() 方法对添加和移除被选元素的一个或多个类进行切换。

该方法检查每个元素中指定的类。如果不存在则添加类,如果已设置则删除之。这就是所谓的切换效果。

然而,通过使用 "switch" 参数,您能够规定只删除或只添加类。

语法

$(selector).toggleClass(classname,function(index,currentclass),switch)

参数 描述
classname 必需。规定添加或移除的一个或多个类名。如需规定若干个类,请使用空格分隔类名。
function(index,currentclass) 可选。规定返回需要添加/删除的一个或多个类名的函数。 index - 返回集合中元素的 index 位置。 currentclass - 返回被选元素的当前类名。
switch 可选。布尔值,规定是否仅仅添加(true)或移除(false)类。

用法简介:

jQuery制作文章段落更改背景颜色属性jquery toggleClass()属性。

效果图如下所示:

通过jquery toggleClass()属性制作文章段落更改背景颜色

效果展示      源码下载

文件引用:

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("input").click(function(){
  $("p").toggleClass("main");
 });
});
</script>

总结

以上所述是小编给大家介绍的通过jquery toggleClass()属性制作文章段落更改背景颜色,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery实现一个简单的验证码功能
Jun 26 jQuery
jQuery列表检索功能实现代码
Jul 17 jQuery
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
关于jquery中attr()和prop()方法的区别
May 28 jQuery
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
jquery.pager.js实现分页效果
Jul 29 jQuery
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 jQuery
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
详解jQuery的核心函数和事件处理
Feb 18 jQuery
jQuery获取随机颜色的实例代码
May 21 #jQuery
如何用input标签和jquery实现多图片的上传和回显功能
May 16 #jQuery
jQuery中元素选择器(element)简单用法示例
May 14 #jQuery
jQuery中的类名选择器(.class)用法简单示例
May 14 #jQuery
基于jQuery实现无缝轮播与左右点击效果
May 13 #jQuery
jQuery实现模糊查询的方法分析
May 10 #jQuery
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 #jQuery
You might like
用PHP伪造referer突破网盘禁止外连的代码
2008/06/15 PHP
Zend studio for eclipse中使php可以调用mysql相关函数的设置方法
2008/10/13 PHP
PHP学习笔记 IIS7下安装配置php环境
2012/10/29 PHP
ThinkPHP模板比较标签用法详解
2014/06/30 PHP
五款PHP代码重构工具推荐
2014/10/14 PHP
codeigniter实现get分页的方法
2015/07/10 PHP
简单解决微信文章图片防盗链问题
2016/12/17 PHP
JavaScript的eval JSON object问题
2009/11/15 Javascript
为超链接加上disabled后的故事
2010/12/10 Javascript
Jquery树插件zTree用法入门教程
2015/02/17 Javascript
jQuery实现图片局部放大镜效果
2016/03/17 Javascript
最佳的JavaScript错误处理实践
2016/07/16 Javascript
AngularJS基础 ng-dblclick 指令用法
2016/08/01 Javascript
微信小程序 网络API Websocket详解
2016/11/09 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
2017/01/13 Javascript
原生JS实现垂直手风琴效果
2017/02/19 Javascript
关于JavaScript 数组你应该知道的事情(推荐)
2019/04/10 Javascript
Vue 3.0 全家桶抢先体验
2020/04/28 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
2020/05/19 Javascript
js 数组当前行添加数据方法详解
2020/07/28 Javascript
python实现批量转换文件编码(批转换编码示例)
2014/01/23 Python
Python文件和目录操作详解
2015/02/08 Python
Python的Django框架使用入门指引
2015/04/15 Python
在Python中操作字典之setdefault()方法的使用
2015/05/21 Python
MySQL适配器PyMySQL详解
2017/09/20 Python
python实现分页效果
2017/10/25 Python
Python实现查找最小的k个数示例【两种解法】
2019/01/08 Python
Python进阶之全面解读高级特性之切片
2019/02/19 Python
详解django中url路由配置及渲染方式
2019/02/25 Python
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
2021/03/17 Javascript
PHP高级工程师面试问题推荐
2013/01/18 面试题
检举信的格式及范文
2014/04/04 职场文书
环保倡议书50字
2014/05/15 职场文书
初中同学会活动方案
2014/08/22 职场文书
2014年大堂经理工作总结
2014/11/21 职场文书
2016七夕情人节寄语
2015/12/04 职场文书