通过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插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
jQuery用noConflict代替$的实现方法
Apr 12 jQuery
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
jQuery常用选择器详解
Jul 17 jQuery
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
关于jquery中attr()和prop()方法的区别
May 28 jQuery
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
jquery实现选项卡切换代码实例
May 14 jQuery
jQuery 查找元素操作实例小结
Oct 02 jQuery
jQuery实现简单轮播图效果
Dec 27 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实现求相对时间函数
2015/06/15 PHP
PHP连接及操作PostgreSQL数据库的方法详解
2019/01/30 PHP
mongodb和php的用法详解
2019/03/25 PHP
jquery $.ajax入门应用二
2008/11/19 Javascript
JavaScript设置FieldSet展开与收缩
2009/05/15 Javascript
javascript中HTMLDOM操作详解
2014/12/11 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
2015/09/16 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
2015/11/21 Javascript
正则中的回溯定义与用法分析【JS与java实现】
2016/12/27 Javascript
jQuery加载及解析XML文件的方法实例分析
2017/01/22 Javascript
vue router路由嵌套不显示问题的解决方法
2017/06/17 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
2017/08/25 Javascript
快速解决vue-cli不能初始化webpack模板的问题
2018/03/20 Javascript
详解处理bootstrap4不支持远程静态框问题
2018/07/20 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
2018/12/28 Javascript
vue基础之v-bind属性、class和style用法分析
2019/03/11 Javascript
每周一练 之 数据结构与算法(Stack)
2019/04/16 Javascript
Vue源码学习之关于对Array的数据侦听实现
2019/04/23 Javascript
JQuery的加载和选择器用法简单示例
2019/05/13 jQuery
解决VUE项目使用Element-ui 下拉组件的验证失效问题
2020/11/07 Javascript
python解决字典中的值是列表问题的方法
2013/03/04 Python
详解Python中的变量及其命名和打印
2016/03/11 Python
Python的mysql数据库的更新如何实现
2017/07/31 Python
python实现随机调用一个浏览器打开网页
2018/04/21 Python
Python函数参数操作详解
2018/08/03 Python
python实现图片筛选程序
2018/10/24 Python
在Python运行时动态查看进程内部信息的方法
2019/02/22 Python
浅谈Python中os模块及shutil模块的常规操作
2020/04/03 Python
python-图片流传输的思路及示例(url转换二维码)
2020/12/21 Python
webView加载html图片遇到的问题解决
2019/10/08 HTML / CSS
JD Sports德国官网:英国领先的运动鞋和运动服饰零售商
2018/02/26 全球购物
交通专业个人自荐信格式
2013/09/23 职场文书
领导干部考察材料
2014/02/08 职场文书
相亲活动方案
2014/08/26 职场文书
辞职信如何写
2015/02/27 职场文书
nginx lua 操作 mysql
2022/05/15 Servers