通过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中map函数的两种方式
Apr 07 jQuery
jQuery加密密码到cookie的实现代码
Apr 18 jQuery
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
jQuery中extend函数简单用法示例
Oct 11 jQuery
jquery实现企业定位式导航效果
Jan 01 jQuery
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
jquery使用FormData实现异步上传文件
Oct 25 jQuery
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
JQuery事件冒泡和默认行为代码实例
May 13 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
Laravel源码解析之路由的使用和示例详解
2018/09/27 PHP
JS取文本框中最小值的简单实例
2013/11/29 Javascript
jquery.cookie用法详细解析
2013/12/18 Javascript
深入分析JSONP跨域的原理
2014/12/10 Javascript
javascript实现拖放效果
2015/12/16 Javascript
浅析js绑定事件的常用方法
2016/05/15 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
微信小程序中hidden不生效原因的解决办法
2017/04/26 Javascript
bootstrap paginator分页前后台用法示例
2017/06/17 Javascript
vue中改变选中当前项的显示隐藏或者状态的实现方法
2018/02/08 Javascript
如何理解Vue的v-model指令的使用方法
2018/07/19 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
2018/07/25 Javascript
微信小程序实现原生步骤条
2019/07/25 Javascript
NodeJS 文件夹拷贝以及删除功能
2019/09/03 NodeJs
微信小程序之 catalog 切换实现解析
2019/09/12 Javascript
简单实现节流函数和防抖函数过程解析
2019/10/08 Javascript
Python编写屏幕截图程序方法
2015/02/18 Python
Python实现把xml或xsl转换为html格式
2015/04/08 Python
Python简单实现查找一个字符串中最长不重复子串的方法
2018/03/26 Python
button在IE6/7下的黑边去除方案
2012/12/24 HTML / CSS
HTML5实现QQ聊天气泡效果
2017/06/26 HTML / CSS
关于解决iframe标签嵌套问题的解决方法
2020/03/04 HTML / CSS
新加坡最早生产电动滑板车的制造商之一:FunsToTheFore
2020/09/08 全球购物
国际商务专业学生个人的自我评价
2013/09/28 职场文书
工商管理专业实习生自我鉴定
2013/09/29 职场文书
环境工程大学生自荐信
2013/10/21 职场文书
机电一体化毕业生求职信
2013/11/02 职场文书
国贸专业的职业规划范文
2014/01/23 职场文书
酒店辞职书范文
2015/02/26 职场文书
办公室岗位职责范本
2015/04/11 职场文书
2015年数学教研组工作总结
2015/05/23 职场文书
2015年高校教师个人工作总结
2015/05/25 职场文书
推广普通话的宣传语
2015/07/13 职场文书
遗嘱格式范本
2015/08/07 职场文书
团队执行力培训心得体会
2015/08/15 职场文书
PostgreSQL将数据加载到buffer cache中操作方法
2021/04/16 PostgreSQL