通过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 22 jQuery
jQuery返回定位插件详解
May 15 jQuery
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
jQuery实现键盘回车搜索功能
Jul 25 jQuery
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
jquery分页插件pagination使用教程
Oct 23 jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 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入门基础之php代码写法
2011/12/30 PHP
php实现在站点里面添加邮件发送的功能
2020/04/28 PHP
PHP实现一个轻量级容器的方法
2019/01/28 PHP
PHP实用小技巧之调用录像的方法
2019/12/05 PHP
一步一步制作jquery插件Tabs实现过程
2010/07/06 Javascript
纯Javascript实现Windows 8 Metro风格实现
2013/10/15 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
2013/10/24 Javascript
javascript中声明函数的方法及调用函数的返回值
2014/07/22 Javascript
js实现飞入星星特效代码
2014/10/17 Javascript
javascript删除元素节点removeChild()用法实例
2015/05/26 Javascript
AngularJS 实现JavaScript 动画效果详解
2016/09/08 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
2017/01/26 Javascript
深入理解js中的加载事件
2017/02/08 Javascript
重新理解JavaScript的六种继承方式
2017/03/24 Javascript
bootstrap弹出层的多种触发方式
2017/05/10 Javascript
js实现关闭网页出现是否离开提示
2017/12/07 Javascript
解决vue页面刷新,数据丢失的问题
2020/11/24 Vue.js
vue element实现表格合并行数据
2020/11/30 Vue.js
[54:09]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
用Python编写脚本使IE实现代理上网的教程
2015/04/23 Python
详解基于django实现的webssh简单例子
2018/07/17 Python
win10 64bit下python NLTK安装教程
2018/09/19 Python
Python解析、提取url关键字的实例详解
2018/12/17 Python
anaconda中更改python版本的方法步骤
2019/07/14 Python
Python用来做Web开发的优势有哪些
2020/08/05 Python
印尼最大的网上书店:Gramedia.com
2018/09/13 全球购物
德国高端单身人士交友网站:ElitePartner
2018/12/02 全球购物
英国川宁茶官方网站:Twinings茶
2019/05/21 全球购物
Tenstickers法国:墙贴和装饰贴纸
2019/08/26 全球购物
计算机通信专业推荐信
2014/02/22 职场文书
节能减耗标语
2014/06/21 职场文书
代领学位证书毕业证书委托书
2014/09/30 职场文书
清洁工岗位职责
2015/02/13 职场文书
图解排序算法之希尔排序Java实现
2021/06/26 Java/Android
javascript之Object.assign()的痛点分析
2022/03/03 Javascript
Python批量解压&压缩文件夹的示例代码
2022/04/04 Python