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 相关文章推荐
dojo 之基础篇
Mar 24 Javascript
js AspxButton的客户端操作
Jun 26 Javascript
js点击页面其它地方将某个显示的DIV隐藏
Jul 12 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
May 05 Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
Jun 05 Javascript
js使用post 方式打开新窗口
Feb 26 Javascript
jquery操作angularjs对象
Jun 26 Javascript
微信小程序 animation API详解及实例代码
Oct 08 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
Oct 15 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
Feb 10 Javascript
JavaScript中值类型和引用类型的区别
Feb 23 Javascript
js实现页面图片消除效果
Mar 24 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
最小化数据传输――在客户端存储数据
2006/10/09 PHP
ubuntu 编译安装php 5.3.3+memcache的方法
2010/08/05 PHP
php array_intersect比array_diff快(附详细的使用说明)
2011/07/03 PHP
PHP函数http_build_query使用详解
2014/08/20 PHP
session 加入redis的实现代码
2016/07/15 PHP
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
2011/03/03 Javascript
表单元素与非表单元素刷新区别详细解析
2013/11/06 Javascript
JS 操作Array数组的方法及属性实例解析
2014/01/08 Javascript
javascript实现仿IE顶部的可关闭警告条
2015/05/05 Javascript
BootStrap和jQuery相结合实现可编辑表格
2016/04/21 Javascript
angularjs实现天气预报功能
2020/06/16 Javascript
详解js模板引擎art template数组渲染的方法
2018/10/09 Javascript
基于Vue实现电商SKU组合算法问题
2019/05/29 Javascript
javascript合并两个数组最简单的实现方法
2019/09/14 Javascript
在Python中使用next()方法操作文件的教程
2015/05/24 Python
完美解决python遍历删除字典里值为空的元素报错问题
2016/09/11 Python
Python中的TCP socket写法示例
2018/05/11 Python
django ajax json的实例代码
2018/05/29 Python
Python面向对象之继承和组合用法实例分析
2018/08/27 Python
python 将有序数组转换为二叉树的方法
2019/03/26 Python
详解python--模拟轮盘抽奖游戏
2019/04/12 Python
Python 进程操作之进程间通过队列共享数据,队列Queue简单示例
2019/10/11 Python
python 如何将office文件转换为PDF
2020/09/22 Python
详解CSS3的图层阴影和文字阴影效果使用
2016/06/09 HTML / CSS
详解H5 活动页之移动端 REM 布局适配方法
2017/12/07 HTML / CSS
TripAdvisor越南:全球领先的旅游网站
2017/09/21 全球购物
Christys’ Hats官网:英国帽子制造商
2018/11/28 全球购物
香奈儿美国官网:CHANEL美国
2020/05/20 全球购物
银行职员思想汇报
2013/12/31 职场文书
创建服务型党组织实施方案
2014/02/25 职场文书
大班开学家长寄语
2014/04/04 职场文书
高考励志标语
2014/06/05 职场文书
银行求职自荐信
2014/06/30 职场文书
2014年行政人事工作总结
2014/12/09 职场文书
pandas中pd.groupby()的用法详解
2022/06/16 Python
vue递归实现树形组件
2022/07/15 Vue.js