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 24 Javascript
[HTML/CSS/Javascript]WWTJS
Sep 25 Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
May 14 Javascript
javascript学习笔记(一)基础知识
Sep 30 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
Mar 25 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
Oct 29 Javascript
值得分享的Bootstrap Table使用教程
Nov 23 Javascript
Bootstrap CSS组件之输入框组
Dec 17 Javascript
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
vue axios数据请求get、post方法及实例详解
Sep 11 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
Jan 21 Javascript
js HTML DOM EventListener功能与用法实例分析
Apr 27 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
thinkphp特殊标签用法概述
2014/11/24 PHP
Yii净化器CHtmlPurifier用法示例(过滤不良代码)
2016/07/15 PHP
CI框架数据库查询缓存优化的方法
2016/11/21 PHP
详解PHP发送邮件知识点
2018/05/06 PHP
JavaScript 实现??打印?理
2007/04/28 Javascript
javascript的键盘控制事件说明
2008/04/15 Javascript
常见表单重复提交问题整理及解决方法
2013/11/13 Javascript
js获取select标签选中值的两种方式
2014/01/09 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
2014/04/15 Javascript
jQuery中复合属性选择器用法实例
2014/12/31 Javascript
Javascript基础教程之函数对象和属性
2015/01/18 Javascript
BootstrapValidator超详细教程(推荐)
2016/12/07 Javascript
教你一步步用jQyery实现轮播器
2016/12/18 Javascript
JavaScript实现图像模糊化的方法实例
2017/01/15 Javascript
基于vue1和vue2获取dom元素的方法
2018/03/17 Javascript
vue 实现全选全不选的示例代码
2018/03/29 Javascript
使用vue实现多规格选择实例(SKU)
2019/08/23 Javascript
微信小程序事件流原理解析
2019/11/27 Javascript
JavaScript Html实现移动端红包雨功能页面
2021/01/10 Javascript
Python计算三角函数之asin()方法的使用
2015/05/15 Python
NumPy 基本切片和索引的具体使用方法
2019/04/24 Python
python将时分秒转换成秒的实例
2019/12/07 Python
Python多分支if语句的使用
2020/09/03 Python
谈谈对css属性box-sizing的了解
2017/01/04 HTML / CSS
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
农药学硕士毕业生自荐信
2013/09/25 职场文书
电子商务专员岗位职责
2013/12/11 职场文书
庆元旦文艺演出主持词
2014/03/27 职场文书
综艺节目策划方案
2014/06/13 职场文书
国际金融专业自荐信
2014/07/05 职场文书
2014年采购工作总结
2014/11/20 职场文书
工商局个人工作总结
2015/03/03 职场文书
公司安全管理制度范本
2015/08/05 职场文书
Canvas跟随鼠标炫彩小球的实现
2021/04/11 Javascript
Ajax是什么?Ajax高级用法之Axios技术
2021/04/21 Javascript
Java使用Unsafe类的示例详解
2021/09/25 Java/Android