jQuery使用addClass()方法给元素添加多个class样式


Posted in Javascript onMarch 26, 2015

本文实例讲述了jQuery使用addClass()方法给元素添加多个class样式的方法。分享给大家供大家参考。具体如下:

jQuery通过addClass()方法给元素添加多个class,只需要在添加的class中用空格分开多个class既可

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
 $("button").click(function(){
  $("#div1").addClass("important blue");
 });
});
</script>
<style type="text/css">
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>
</head>
<body>
<div id="div1">This is some text.</div>
<div id="div2">This is some text.</div>
<br>
<button>Add classes to first div element</button>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
js读取注册表的键值示例
Sep 25 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
Jun 26 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
Jan 13 Javascript
详解JavaScript的变量和数据类型
Nov 27 Javascript
jquery+php实现滚动的数字特效
Nov 29 Javascript
AngularJS基础 ng-focus 指令简单示例
Aug 01 Javascript
jQuery操作json常用方法示例
Jan 04 Javascript
vue+Element-ui实现分页效果实例代码详解
Dec 10 Javascript
Vue修改项目启动端口号方法
Nov 07 Javascript
基于vue.js实现购物车
Jan 15 Javascript
JS简单表单验证功能完整示例
Jan 26 Javascript
vue中路由跳转不计入history的操作
Sep 21 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
jQuery获得document和window对象宽度和高度的方法
Mar 25 #Javascript
jQuery设置指定网页元素宽度和高度的方法
Mar 25 #Javascript
You might like
随时给自己贴的图片加文字的php水印
2007/03/16 PHP
采用ThinkPHP中F方法实现快速缓存实例
2014/06/13 PHP
LAMP环境使用Composer安装Laravel的方法
2017/03/25 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
PHP封装的page分页类定义与用法完整示例
2018/12/24 PHP
php7性能提升的原因详解
2019/10/13 PHP
jquery统计输入文字的个数并对其进行判断
2014/01/07 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
2015/01/27 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
2015/02/23 Javascript
JavaScript中window.open用法实例详解
2015/04/15 Javascript
JavaScript实现多个重叠层点击切换效果的方法
2015/04/24 Javascript
JavaScript中的闭包
2016/02/24 Javascript
Javascript 链式作用域详细介绍
2017/02/23 Javascript
js评分组件使用详解
2017/06/06 Javascript
使用use注册Vue全局组件和全局指令的方法
2018/03/08 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
2018/10/08 Javascript
加快Vue项目的开发速度的方法
2018/12/12 Javascript
Node.js之readline模块的使用详解
2019/03/25 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
2020/07/22 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
2020/11/26 Vue.js
Python编程中使用Pillow来处理图像的基础教程
2015/11/20 Python
python搭建虚拟环境的步骤详解
2016/09/27 Python
Flask框架响应、调度方法和蓝图操作实例分析
2018/07/24 Python
python实现XML解析的方法解析
2019/11/16 Python
Python中Subprocess的不同函数解析
2019/12/10 Python
Django数据库操作之save与update的使用
2020/04/01 Python
用python获取txt文件中关键字的数量
2020/12/24 Python
联想美国官方商城:Lenovo美国
2017/06/19 全球购物
奥地利度假券的专家:we-are.travel
2019/04/10 全球购物
试用期转正员工自我评价
2014/09/18 职场文书
党的群众路线对照检查材料范文
2014/09/24 职场文书
政协会议宣传标语
2014/10/09 职场文书
离婚被告答辩状
2015/05/22 职场文书
MySQL基础(一)
2021/04/05 MySQL
JavaWeb 入门篇(3)ServletContext 详解 具体应用
2021/07/16 Java/Android
Spring Data JPA框架自定义Repository接口
2022/04/28 Java/Android