通过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 dataTable 获取某行数据
May 05 jQuery
jquery实现图片轮播器
May 23 jQuery
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
jQuery实现checkbox的简单操作
Nov 18 jQuery
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
jQuery 移除事件的方法
Jun 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 冒泡排序 二分查找 顺序查找 二维数组排序算法函数的详解
2013/06/25 PHP
php 表单提交大量数据发生丢失的解决方法
2014/03/03 PHP
PHP的Socket通信之UDP通信实例
2015/07/02 PHP
TP5(thinkPHP5框架)基于bootstrap实现的单图上传插件用法示例
2019/05/29 PHP
javascript面向对象的方式实现的弹出层效果代码
2010/01/28 Javascript
js页面跳转常用的几种方式
2010/11/25 Javascript
使用jquery读取html5 localstorage的值的方法
2013/01/04 Javascript
javascript根据像素点取位置示例
2014/01/27 Javascript
回车直接实现点击某按钮的效果即触发单击事件
2014/02/27 Javascript
用jquery仿做发微博功能示例
2014/04/18 Javascript
jQuery常用知识点总结以及平时封装常用函数
2016/02/23 Javascript
JavaScript中的this引用(推荐)
2016/08/05 Javascript
详细讲解JavaScript中的this绑定
2016/10/10 Javascript
js对字符串进行编码的方法总结(推荐)
2016/11/10 Javascript
AngularJs表单校验功能实例代码
2017/02/09 Javascript
详解Vue.js Mixins 混入使用
2017/09/15 Javascript
js实现图片上传并预览功能
2018/08/06 Javascript
浅谈JSON5解决了JSON的两大痛点
2020/12/14 Javascript
[52:00]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs Optic
2018/04/02 DOTA
wxpython中利用线程防止假死的实现方法
2014/08/11 Python
python中的常量和变量代码详解
2018/07/25 Python
python提取具有某种特定字符串的行数据方法
2018/12/11 Python
python配置文件写入过程详解
2019/10/19 Python
PYQT5 vscode联合操作qtdesigner的方法
2020/03/24 Python
Python HTTP下载文件并显示下载进度条功能的实现
2020/04/02 Python
基于注解实现 SpringBoot 接口防刷的方法
2021/03/02 Python
工程造价管理专业大专生求职信
2013/10/06 职场文书
感恩节活动方案
2014/01/27 职场文书
财务简历的自我评价
2014/03/05 职场文书
物业管理工作方案
2014/05/10 职场文书
学校欢迎标语
2014/06/18 职场文书
自我工作评价范文
2015/03/06 职场文书
pycharm无法导入lxml的解决办法
2021/03/31 Python
SpringBoot集成Redis,并自定义对象序列化操作
2021/06/22 Java/Android
Python自动化工具之实现Excel转Markdown表格
2022/04/08 Python
MySQL索引失效十种场景与优化方案
2023/05/08 MySQL