通过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监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
jQuery实现的背景颜色渐变动画效果示例
Mar 24 jQuery
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
jQuery自定义多选下拉框效果
Jun 19 jQuery
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 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中json_encode()和json_decode()
2014/05/25 PHP
php判断数组中是否存在指定键(key)的方法
2015/03/17 PHP
php根据生日计算年龄的方法
2015/07/13 PHP
ArrayList类(增强版)
2007/04/04 Javascript
js cookies 常见网页木马挂马代码 24小时只加载一次
2009/04/13 Javascript
URL地址中的#符号使用说明
2011/02/12 Javascript
Jquery Uploadify上传带进度条的简单实例
2014/02/12 Javascript
原生javascript实现简单的datagrid数据表格
2015/01/02 Javascript
Javascript核心读书有感之类型、值和变量
2015/02/11 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
2015/08/24 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
2016/02/27 Javascript
Javascript从数组中随机取出不同元素的两种方法
2016/09/22 Javascript
关于JavaScript中事件绑定的方法总结
2016/10/26 Javascript
Angularjs之filter过滤器(推荐)
2016/11/27 Javascript
Javascript中常用类型的格式化方法小结
2016/12/26 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
2017/04/25 Javascript
解决IE7中使用jQuery动态操作name问题
2017/08/28 jQuery
JavaScript中使用参数个数实现重载功能
2017/09/01 Javascript
Node.js JSON模块用法实例分析
2019/01/04 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
2019/05/10 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
2019/09/10 Javascript
针对Vue路由history模式下Nginx后台配置操作
2020/10/22 Javascript
浅析PyTorch中nn.Linear的使用
2019/08/18 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
匡威荷兰官方网站:Converse荷兰
2018/10/24 全球购物
NBA欧洲商店(西班牙):NBA Europe Store ES
2019/04/16 全球购物
给男朋友的道歉信
2014/01/12 职场文书
大学生学年自我鉴定
2014/02/10 职场文书
安全生产大检查方案
2014/05/07 职场文书
房屋过户委托书范本
2014/10/07 职场文书
2014员工聘用协议书(最新版)
2014/11/24 职场文书
公务员政审材料范文
2014/12/23 职场文书
2015暑期爱心支教策划书
2015/07/14 职场文书
教你如何使用Python开发一个钉钉群应答机器人
2021/06/21 Python
利用nginx搭建RTMP视频点播、直播、HLS服务器
2022/05/25 Servers
服务器SVN搭建图文安装过程
2022/06/21 Servers