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 刷新页面的代码小结 推荐
Apr 02 Javascript
js之onload事件的一点使用心得
Aug 14 Javascript
js判断浏览器类型及设备(移动页面开发)
Jul 30 Javascript
JS刷新父窗口的几种方式小结(推荐)
Nov 09 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
Nov 17 Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
Feb 22 Javascript
详解js模板引擎art template数组渲染的方法
Oct 09 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
Sep 25 Javascript
JavaScript变量基本使用方法实例分析
Nov 15 Javascript
微信小程序中使用 async/await的方法实例分析
May 06 Javascript
vue全局使用axios的操作
Sep 08 Javascript
如何将Node.js中的回调转换为Promise
Nov 10 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
虫族 Zerg 魔法科技
2020/03/14 星际争霸
php通过字符串调用函数示例
2014/03/02 PHP
PHP中spl_autoload_register()和__autoload()区别分析
2014/05/10 PHP
php的慢速日志引起的Mysql错误问题分析
2014/05/13 PHP
PHP实现采集中国天气网未来7天天气
2014/10/15 PHP
PHP 使用memcached简单示例分享
2015/03/05 PHP
基于php实现的php代码加密解密类完整实例
2016/10/12 PHP
laravel 实现用户登录注销并限制功能
2019/10/24 PHP
一个基于jquery的图片切换效果
2010/07/06 Javascript
js监听输入框值的即时变化onpropertychange、oninput
2011/07/13 Javascript
ExtJs Excel导出并下载IIS服务器端遇到的问题
2011/09/16 Javascript
Javascript中常见的校验如域名、手机、邮箱等等
2014/01/02 Javascript
js出生日期 年月日级联菜单示例代码
2014/01/10 Javascript
浅谈JavaScript 的执行顺序
2015/08/07 Javascript
jQuery插件uploadify实现ajax效果的图片上传
2016/06/18 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
2016/06/28 Javascript
NodeJs的优势和适合开发的程序
2016/08/14 NodeJs
BootStrapTable 单选及取值的实现方法
2017/01/10 Javascript
JavaScript实现图片拖曳效果
2017/09/08 Javascript
详解element-ui日期时间选择器的日期格式化问题
2019/04/08 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
2020/03/23 Javascript
[01:09:20]NB vs NAVI Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
Python编程实现蚁群算法详解
2017/11/13 Python
pytorch cnn 识别手写的字实现自建图片数据
2018/05/20 Python
Python并发:多线程与多进程的详解
2019/01/24 Python
pandas中read_csv的缺失值处理方式
2019/12/19 Python
python实现批处理文件
2020/07/28 Python
如何一键升级Python所有包
2020/11/05 Python
韩国休闲女装品牌网站:ANAIS
2016/08/24 全球购物
Move Free官方海外旗舰店:美国骨关节健康专业品牌
2017/12/06 全球购物
介绍一下mysql的日期和时间函数
2013/03/28 面试题
《祁黄羊》教学反思
2014/04/22 职场文书
学校关爱留守儿童活动方案
2014/08/27 职场文书
社会体育专业大学生职业生涯规划书
2014/09/17 职场文书
2014年内勤工作总结
2014/11/24 职场文书
2016先进集体事迹材料范文
2016/02/25 职场文书