通过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插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
jQuery UI实现动画效果代码分享
Aug 19 jQuery
jquery分页插件pagination使用教程
Oct 23 jQuery
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 jQuery
JQuery+drag.js上传图片并且实现图片拖曳
Nov 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入库和出库
2013/06/25 PHP
js url传值中文乱码之解决之道
2009/11/20 Javascript
js 未结束的字符串常量错误解决方法
2010/06/13 Javascript
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
2010/06/18 Javascript
使用Math.floor与Math.random取随机整数的方法详解
2013/05/07 Javascript
js 实现 input type=&quot;file&quot; 文件上传示例代码
2013/08/07 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
2013/09/21 Javascript
使用js操作css实现js改变背景图片示例
2014/03/10 Javascript
自己用jQuery写了一个图片的马赛克消失效果
2014/05/04 Javascript
JavaScript简单下拉菜单实例代码
2015/09/07 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
2016/03/05 Javascript
jQuery实现两列等高并自适应高度
2016/12/22 Javascript
js图片上传的封装代码
2017/08/01 Javascript
详谈表单重复提交的三种情况及解决方法
2017/08/16 Javascript
Vue中的Vux配置指南
2017/12/08 Javascript
JavaScript实现短暂提示框功能
2018/04/04 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
2018/09/14 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
2018/10/10 Javascript
Vue项目路由刷新的实现代码
2019/04/17 Javascript
解决Vue动态加载本地图片问题
2019/10/09 Javascript
Vue-cli3多页面配置详解
2020/03/22 Javascript
[46:12]完美世界DOTA2联赛循环赛 DM vs Matador BO2第一场 11.04
2020/11/04 DOTA
Python httplib,smtplib使用方法
2008/09/06 Python
Python统计python文件中代码,注释及空白对应的行数示例【测试可用】
2018/07/25 Python
python中单例常用的几种实现方法总结
2018/10/13 Python
Python多线程爬取豆瓣影评API接口
2019/10/22 Python
python super()函数的基本使用
2020/09/10 Python
Python实现LR1文法的完整实例代码
2020/10/25 Python
使用Python下载抖音各大V视频的思路详解
2021/02/06 Python
描述Cookie和Session的作用,区别和各自的应用范围,Session工作原理
2015/03/25 面试题
安卓程序员求职信
2014/02/28 职场文书
开业典礼主持词
2014/03/21 职场文书
学生不参加考试检讨书
2015/02/19 职场文书
离婚代理词范文
2015/05/23 职场文书
致创业的您:这类人不适合餐饮创业
2019/08/19 职场文书
导游词之京东大峡谷旅游区
2019/10/29 职场文书