jQuery给多个不同元素添加class样式的方法


Posted in Javascript onMarch 26, 2015

本文实例讲述了jQuery给多个不同元素添加class样式的方法。分享给大家供大家参考。具体分析如下:

jQuery可以通过addClass()方法给多个不同的html元素同时添加相同的class

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
 $("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
 });
});
</script>
<style type="text/css">
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<div>This is some important text!</div>
<br>
<button>Add classes to elements</button>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
IE8 chrome中table隔行换色解决办法
Jul 09 Javascript
兼容IE和FF的图片上传前预览js代码
May 28 Javascript
JavaScript获取flash对象与网上的有所不同
Apr 21 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
Sep 10 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
May 11 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
May 26 Javascript
jQuery实现淡入淡出的模态框
Feb 09 Javascript
详解webpack之图片引入-增强的file-loader:url-loader
Oct 08 Javascript
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
Jun 14 Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
Oct 26 Javascript
实现vuex与组件data之间的数据同步更新方式
Nov 12 Javascript
quickjs 封装 JavaScript 沙箱详情
Nov 02 Javascript
Js实现自定义右键行为
Mar 26 #Javascript
jQuery使用addClass()方法给元素添加多个class样式
Mar 26 #Javascript
Jquery异步提交表单代码分享
Mar 26 #Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
Mar 26 #Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
Mar 26 #Javascript
12306验证码破解思路分享
Mar 25 #Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
Mar 25 #Javascript
You might like
如何隐藏你的.php文件
2007/01/04 PHP
php中用数组的方法设置cookies
2011/04/21 PHP
JS简单实现文件上传实例代码(无需插件)
2013/11/15 Javascript
基于NodeJS的前后端分离的思考与实践(五)多终端适配
2014/09/26 NodeJs
在父页面得到zTree已选中的节点的方法
2015/02/12 Javascript
浅谈js中的闭包
2015/03/16 Javascript
JQuery显示、隐藏div的几种方法简明总结
2015/04/16 Javascript
jquery设置表单元素为不可用的简单代码
2016/07/04 Javascript
JS实现的简单拖拽功能示例
2017/03/13 Javascript
jQuery实现web页面樱花坠落的特效
2017/06/01 jQuery
Underscore之Array_动力节点Java学院整理
2017/07/10 Javascript
浅谈ES6 模板字符串的具体使用方法
2017/11/07 Javascript
优雅的使用javascript递归画一棵结构树示例代码
2019/09/22 Javascript
JavaScript 作用域scope简单汇总
2019/10/23 Javascript
vue组件入门知识全梳理
2020/09/21 Javascript
[00:34]TI7不朽珍藏III——纯金地穴编织者饰品展示
2017/07/15 DOTA
wxPython框架类和面板类的使用实例
2014/09/28 Python
Python基础中所出现的异常报错总结
2016/11/19 Python
python 杀死自身进程的实现方法
2019/07/01 Python
python实现kNN算法识别手写体数字的示例代码
2019/08/16 Python
python 正则表达式参数替换实例详解
2020/01/17 Python
python判断链表是否有环的实例代码
2020/01/31 Python
python与c语言的语法有哪些不一样的
2020/09/13 Python
如何利用python 读取配置文件
2021/01/06 Python
HTML5 新旧语法标记对我们有什么好处
2012/12/13 HTML / CSS
Data URI scheme详解和使用实例及图片base64编码实现方法
2014/05/08 HTML / CSS
HTML5的postMessage的使用手册
2018/12/19 HTML / CSS
网络工程专业毕业生推荐信
2013/10/28 职场文书
资产经营总监岗位职责
2013/12/04 职场文书
中专三年学习的个人自我评价
2013/12/12 职场文书
团日活动总结报告
2014/06/25 职场文书
销售区域经理岗位职责
2015/04/10 职场文书
大学生敬老院活动总结
2015/05/07 职场文书
《扇形统计图》教学反思
2016/02/17 职场文书
详解Django中 render() 函数的使用方法
2021/04/22 Python
Python读写yaml文件
2022/03/20 Python