通过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为某个div加入行样式
Jun 09 jQuery
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
jquery+css实现下拉列表功能
Sep 03 jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
jquery实现下载图片功能
Jul 18 jQuery
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
jquery+css3实现的经典弹出层效果示例
May 16 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实现阻止用户上传成人照片或者裸照
2014/12/25 PHP
Laravel框架实现的批量删除功能示例
2019/01/16 PHP
使用tp框架和SQL语句查询数据表中的某字段包含某值
2019/10/18 PHP
Javascript 继承机制的实现
2009/08/12 Javascript
JavaScript实现的日期控件具体代码
2013/11/18 Javascript
node.js中使用q.js实现api的promise化
2014/09/17 Javascript
原生Javascript封装的一个AJAX函数分享
2014/10/11 Javascript
jQuery实现的在线答题功能
2015/04/12 Javascript
Javascript实现前端简单的路由实例
2016/09/11 Javascript
uploader秒传图片到服务器完整代码
2017/04/22 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
2017/07/10 Javascript
nuxt.js 缓存实践
2018/06/25 Javascript
vue+vue-router转场动画的实例代码
2018/09/01 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
2018/09/26 Javascript
[54:53]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第二场
2014/05/23 DOTA
python解析模块(ConfigParser)使用方法
2013/12/10 Python
Python中isnumeric()方法的使用简介
2015/05/19 Python
Python 多进程并发操作中进程池Pool的实例
2017/11/01 Python
python无限生成不重复(字母,数字,字符)组合的方法
2018/12/04 Python
Python生成个性签名图片获取GUI过程解析
2019/12/16 Python
Python线程条件变量Condition原理解析
2020/01/20 Python
python读取当前目录下的CSV文件数据
2020/03/11 Python
利用Python实现Excel的文件间的数据匹配功能
2020/06/16 Python
Python绘制词云图之可视化神器pyecharts的方法
2021/02/23 Python
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
2017/08/15 HTML / CSS
HTML5的自定义属性data-*详细介绍和JS操作实例
2014/04/10 HTML / CSS
西班牙家用电器和电子产品购物网站:Mi Electro
2019/02/25 全球购物
说出一些常用的类,包,接口
2014/09/22 面试题
车辆安全检查制度
2014/01/12 职场文书
年会搞笑主持词
2014/03/27 职场文书
司法局群众路线教育实践活动整改措施
2014/09/17 职场文书
计算机实训报告范文
2014/11/05 职场文书
2015年人事专员工作总结
2015/04/29 职场文书
2016公务员年度考核评语
2015/12/01 职场文书
Redis特殊数据类型bitmap位图
2022/06/01 Redis
Spring Cloud OpenFeign模版化客户端
2022/06/25 Java/Android