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 相关文章推荐
javascript克隆对象深度介绍
Nov 20 Javascript
js 动态加载事件的几种方法总结
Dec 25 Javascript
JavaScript设计模式之外观模式介绍
Dec 28 Javascript
jquery结合CSS使用validate实现漂亮的验证
Jan 29 Javascript
JQuery动态添加和删除表格行的方法
Mar 09 Javascript
jQuery实现的登录浮动框效果代码
Sep 26 Javascript
详解JavaScript的变量和数据类型
Nov 27 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
Jul 12 Javascript
微信小程序tabBar底部导航中文注解api详解
Aug 16 Javascript
JS中获取 DOM 元素的绝对位置实例详解
Apr 23 Javascript
详解ES7 Decorator 入门解析
Feb 18 Javascript
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
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字符串 ==比较运算符的副作用
2009/10/21 PHP
PHP var_dump遍历对象属性的函数与应用代码
2010/06/04 PHP
destoon实现调用自增数字从1开始的方法
2014/08/21 PHP
PHP之浮点数计算比较以及取整数不准确的解决办法
2015/07/29 PHP
PHP常见的6个错误提示及解决方法
2016/07/07 PHP
Javascript - HTML的request类
2006/07/15 Javascript
javascript下有关dom以及xml节点访问兼容问题
2007/11/26 Javascript
JavaScript 学习笔记(九)call和apply方法
2010/01/11 Javascript
jQuery 全选/反选以及单击行改变背景色实例
2013/07/02 Javascript
javascript 小数取整简单实现方式
2014/05/30 Javascript
JS中prototype的用法实例分析
2015/03/19 Javascript
select获取下拉框的值 下拉框默认选中方法
2018/02/28 Javascript
Node.js文件编码格式的转换的方法
2018/04/27 Javascript
vue系列之requireJs中引入vue-router的方法
2018/07/18 Javascript
Vue 组件注册实例详解
2019/02/23 Javascript
node省市区三级数据性能测评实例分析
2019/11/06 Javascript
d3.js 地铁轨道交通项目实战
2019/11/27 Javascript
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
2020/04/28 Javascript
Python利用multiprocessing实现最简单的分布式作业调度系统实例
2017/11/14 Python
python编写朴素贝叶斯用于文本分类
2017/12/21 Python
Python队列、进程间通信、线程案例
2019/10/25 Python
Python字符串格式化f-string多种功能实现
2020/05/07 Python
Python使用socketServer包搭建简易服务器过程详解
2020/06/12 Python
一个非常简单好用的Python图形界面库(PysimpleGUI)
2020/12/28 Python
介绍一下EJB的分类及其各自的功能及应用
2016/08/23 面试题
介绍下static、final、abstract区别
2015/01/30 面试题
中学教师实习自我鉴定
2013/09/28 职场文书
汽车维修专业个人求职信范文
2014/01/01 职场文书
教师演讲稿范文
2014/01/08 职场文书
财务主管自我鉴定
2014/01/17 职场文书
机关财务管理制度
2014/01/17 职场文书
小学家长会邀请函
2014/01/23 职场文书
2015年学校禁毒工作总结
2015/05/27 职场文书
红色故事汇观后感
2015/06/18 职场文书
运动会广播稿50字
2015/08/19 职场文书
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
2021/06/15 Javascript