通过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实现动态添加小广告
Jul 11 jQuery
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
jQuery UI实现动画效果代码分享
Aug 19 jQuery
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
浅谈JS和jQuery的区别
Mar 27 jQuery
jquery实现选项卡切换代码实例
May 14 jQuery
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 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实现的返回数据格式化类实例
2014/09/22 PHP
php中静态类与静态变量用法的区别分析
2015/01/15 PHP
php为字符串前后添加指定数量字符的方法
2015/05/04 PHP
ThinkPHP使用Smarty第三方插件方法小结
2016/03/19 PHP
jquery last-child 列表最后一项的样式
2010/01/22 Javascript
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
2010/08/16 Javascript
innerHTML与jquery里的html()区别介绍
2012/10/12 Javascript
JavaScript函数详解
2014/11/17 Javascript
分享一则JavaScript滚动条插件源码
2015/03/03 Javascript
javascript实现数独解法
2015/03/14 Javascript
轻松实现javascript图片轮播特效
2016/01/13 Javascript
Vue.js每天必学之指令系统与自定义指令
2016/09/07 Javascript
Node.js连接postgreSQL并进行数据操作
2016/12/18 Javascript
Vue中的v-cloak使用解读
2017/03/27 Javascript
Canvas放置反弹效果随机图形(实例)
2017/08/17 Javascript
JS实现页面内跳转的简单代码
2017/09/03 Javascript
JavaScript数组排序reverse()和sort()方法详解
2017/12/24 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
2018/09/29 Javascript
vue项目每30秒刷新1次接口的实现方法
2018/12/04 Javascript
详解微信小程序中var、let、const用法与区别
2020/01/11 Javascript
微信小程序开发中var that =this的用法详解
2020/01/18 Javascript
[04:11]DOTA2上海特级锦标赛主赛事首日TOP10
2016/03/03 DOTA
Python爬取APP下载链接的实现方法
2016/09/30 Python
python里使用正则的findall函数的实例详解
2017/10/19 Python
Python数据结构与算法之图的最短路径(Dijkstra算法)完整实例
2017/12/12 Python
Python爬虫使用脚本登录Github并查看信息
2018/07/16 Python
django admin 自定义替换change页面模板的方法
2019/08/23 Python
python集合常见运算案例解析
2019/10/17 Python
pytorch掉坑记录:model.eval的作用说明
2020/06/23 Python
css3截图_动力节点Java学院整理
2017/07/11 HTML / CSS
曼联官方网上商店:Manchester United Direct
2017/07/28 全球购物
生产部厂长职位说明书
2014/03/03 职场文书
吃空饷专项治理工作实施方案
2014/03/04 职场文书
幼儿园中班下学期评语
2014/04/18 职场文书
党员评议个人总结
2014/10/20 职场文书
高三英语复习计划
2015/01/19 职场文书