通过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实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
简单实现jQuery弹幕效果
May 06 jQuery
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
jQuery实现获取多选框的值示例
Feb 07 jQuery
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
jQuery实现推拉门效果
Oct 19 jQuery
jQuery列表动态增加和删除的实现方法
Nov 05 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
珊瑚虫IP库浅析
2007/02/15 PHP
mysql 字段类型说明
2007/04/27 PHP
PHP中的extract的作用分析
2008/04/09 PHP
PHP中使用正则表达式提取中文实现笔记
2015/01/20 PHP
全面解析PHP验证码的实现原理 附php验证码小案例
2016/08/17 PHP
php变量与JS变量实现不通过跳转直接交互的方法
2017/08/25 PHP
js 实现的可折叠留言板(附源码下载)
2014/07/01 Javascript
Node.js实现Excel转JSON
2015/04/24 Javascript
Javascript使用function创建类的两种方法(推荐)
2016/11/19 Javascript
利用vueJs实现图片轮播实例代码
2017/06/03 Javascript
JavaScript 有用的代码片段和 trick
2018/02/22 Javascript
详解JS实现简单的时分秒倒计时代码
2019/04/25 Javascript
Django模板继承 extend标签实例代码详解
2019/05/16 Javascript
vue中组件通信的八种方式(值得收藏!)
2019/08/09 Javascript
vue-cli点击实现全屏功能
2020/03/07 Javascript
[02:17]DOTA2亚洲邀请赛 RAVE战队出场宣传片
2015/02/07 DOTA
Python3基础之函数用法
2014/08/13 Python
python中的__slots__使用示例
2015/02/26 Python
如何处理Python3.4 使用pymssql 乱码问题
2016/01/08 Python
Python查看微信撤回消息代码
2018/06/07 Python
Python3.5 Pandas模块之DataFrame用法实例分析
2019/04/23 Python
Django处理Ajax发送的Get请求代码详解
2019/07/29 Python
python多进程并行代码实例
2019/09/30 Python
Python图像处理库PIL的ImageFilter模块使用介绍
2020/02/26 Python
python实现简单俄罗斯方块
2020/03/13 Python
Invicta手表官方商店:百年制表历史的瑞士腕表品牌
2019/09/26 全球购物
二年级数学教学反思
2014/01/21 职场文书
优秀中学生事迹材料
2014/01/31 职场文书
电子工程求职信
2014/07/17 职场文书
培训师岗位职责
2015/02/14 职场文书
酒店辞职书范文
2015/02/26 职场文书
安全保证书格式
2015/02/28 职场文书
2015清明节祭奠英烈寄语大全
2015/03/04 职场文书
深度好文:50条没人告诉你的人生经验,句句精辟
2019/08/22 职场文书
Python数据可视化之用Matplotlib绘制常用图形
2021/06/03 Python
nginx sticky实现基于cookie负载均衡示例详解
2022/12/24 Servers