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 相关文章推荐
LBS blog sql注射漏洞[All version]-官方已有补丁
Aug 26 Javascript
jQuery实现用户注册的表单验证示例
Aug 28 Javascript
在JavaScript中处理字符串之link()方法的使用
Jun 08 Javascript
浅析JavaScript中浏览器的兼容问题
Apr 19 Javascript
CSS+jQuery实现简单的折叠菜单
Dec 20 Javascript
jQuery实现拖拽可编辑模块功能代码
Jan 12 Javascript
利用Javascript裁剪图片并存储的简单实现
Mar 13 Javascript
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
详解vue 动态加载并注册组件且通过 render动态创建该组件
May 30 Javascript
js实现转动骰子模型
Oct 24 Javascript
vue-cli3中配置alias和打包加hash值操作
Sep 04 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
日本因肺炎疫情影响,这几部动漫推延播放!
2020/03/03 日漫
同时提取多条新闻中的文本一例
2006/10/09 PHP
下载文件的点击数回填
2006/10/09 PHP
PHP中的函数嵌套层数限制分析
2011/06/13 PHP
php用header函数实现301跳转代码实例
2013/11/25 PHP
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
2012/03/01 Javascript
javascript对select标签的控制(option选项/select)
2013/01/31 Javascript
jQuery中 attr() 方法使用小结
2015/05/03 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
2015/08/13 Javascript
浅析javascript中的事件代理
2015/11/06 Javascript
Vue 短信验证码组件开发详解
2017/02/14 Javascript
微信小程序 出现47001 data format error原因解决办法
2017/03/10 Javascript
利用jQuery异步上传文件的插件用法详解
2017/07/19 jQuery
基于vue.js 2.x的虚拟滚动条的示例代码
2018/01/23 Javascript
Node.js使用MySQL连接池的方法实例
2018/02/11 Javascript
vue input输入框模糊查询的示例代码
2018/05/22 Javascript
在vue中使用SockJS实现webSocket通信的过程
2018/08/29 Javascript
nodejs require js文件入口,在package.json中指定默认入口main方法
2018/10/10 NodeJs
Python的高级Git库 Gittle
2014/09/22 Python
Django中URLconf和include()的协同工作方法
2015/07/20 Python
python开发之for循环操作实例详解
2015/11/12 Python
Python科学计算之NumPy入门教程
2017/01/15 Python
Python制作豆瓣图片的爬虫
2017/12/28 Python
python正则实现提取电话功能
2018/02/24 Python
印度尼西亚最大和最全面的网络商城:Blibli.com
2017/10/04 全球购物
WWE美国职业摔角官方商店:WWE Shop
2018/11/15 全球购物
Bibloo荷兰:女士、男士和儿童的服装、鞋子和配饰
2019/02/25 全球购物
英国索普公园票务和酒店套餐:Thorpe Breaks
2019/09/14 全球购物
英国性能汽车零件和发动机配件在线:Maxpeedingrods
2019/11/05 全球购物
后勤服务中心总经理工作职责
2014/03/03 职场文书
护理专业学生职业生涯规划范文
2014/03/11 职场文书
常务副总经理岗位职责
2014/04/12 职场文书
社区创先争优承诺书
2014/08/30 职场文书
2015年党风建设工作总结
2015/04/29 职场文书
表扬信范文
2019/04/22 职场文书
用Python将GIF动图分解成多张静态图片
2021/06/11 Python