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 相关文章推荐
js 表格隔行颜色
Dec 02 Javascript
cnblogs TagCloud基于jquery的实现代码
Jun 11 Javascript
js 如何实现对数据库的增删改查
Nov 23 Javascript
JS图像无缝滚动脚本非常好用
Feb 10 Javascript
js实现iframe跨页面调用函数的方法
Dec 13 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
Jun 24 Javascript
javascript将url解析为json格式的两种方法
Aug 18 Javascript
layer弹出层自适应高度,垂直水平居中的实现
Sep 16 Javascript
uniapp,微信小程序中使用 MQTT的问题
Jul 11 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
Sep 12 Javascript
JS removeAttribute()方法实现删除元素的某个属性
Jan 11 Javascript
vue 把二维或多维数组转一维数组
Apr 24 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简单系统查询模块代码打包下载
2008/06/07 PHP
PHP中addcslashes与stripcslashes函数用法分析
2016/01/07 PHP
才发现的超链接js导致网页中GIF动画停止的解决方法
2007/11/02 Javascript
js escape,unescape解决中文乱码问题的方法
2010/05/26 Javascript
jquery中$.post()方法的简单实例
2014/02/04 Javascript
js创建表单元素并使用submit进行提交
2014/08/14 Javascript
js实现简单随机抽奖的方法
2015/01/27 Javascript
js利用正则表达式检验输入内容是否为网址
2016/07/05 Javascript
Extjs 点击复选框在表格中增加相关信息行
2016/07/12 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
2016/08/26 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
2017/02/09 Javascript
js省市区级联查询(插件版&amp;无插件版)
2017/03/21 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
2017/03/23 jQuery
详解webpack 打包文件体积过大解决方案(code splitting)
2018/04/10 Javascript
JS实现二维数组元素的排列组合运算简单示例
2019/01/28 Javascript
vue自定义指令directive的使用方法
2019/04/07 Javascript
JavaScript之Blob对象类型的具体使用方法
2019/11/29 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
2020/02/06 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
2020/06/10 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
2020/09/10 Javascript
基于Python实现文件大小输出
2016/01/11 Python
Python使用cx_Oracle模块操作Oracle数据库详解
2018/05/07 Python
Python实现模拟浏览器请求及会话保持操作示例
2018/07/30 Python
python多进程控制学习小结
2018/10/31 Python
Python 通过微信控制实现app定位发送到个人服务器再转发微信服务器接收位置信息
2019/08/05 Python
解决Pycharm 包已经下载,但是运行代码提示找不到模块的问题
2019/08/31 Python
Python如何自动获取目标网站最新通知
2020/06/18 Python
python 爬虫爬取京东ps4售卖情况
2020/12/18 Python
CSS中越界问题的经典解决方案【推荐】
2016/04/19 HTML / CSS
写一个函数返回1+2+3+…+n的值(假定结果不会超过长整型变量的范围)
2014/09/05 面试题
经济信息系毕业生自荐信
2014/06/02 职场文书
班级文化建设标语
2014/06/23 职场文书
六一领导慰问欢迎词
2015/01/26 职场文书
实习指导老师意见
2015/06/04 职场文书
一道JS算法面试题——冒泡、选择排序
2021/04/21 Javascript
Java基础之线程锁相关知识总结
2021/06/30 Java/Android