编程 Javascript

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程序设计有所帮助。

jQuery给多个不同元素添加class样式的方法

- Author -

上大王

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery .attr()和.removeAttr()方法操作元素属性示例

Jul 16 Javascript

多个$(document).ready()的执行顺序实例分析

Jul 26 Javascript

Node.js中防止错误导致的进程阻塞的方法

Aug 11 Javascript

通过JS获取Request.QueryString()参数的值实现方法

Sep 27 Javascript

Angular2 PrimeNG分页模块学习

Jan 14 Javascript

Vue.js实现模拟微信朋友圈开发demo

Apr 20 Javascript

vue时间格式化实例代码

Jun 13 Javascript

使用svg实现动态时钟效果

Jul 17 Javascript

详解mpvue开发小程序小总结

Jul 25 Javascript

微信小程序如何利用getCurrentPages进行页面传值

Jul 01 Javascript

webgl实现物体描边效果的方法介绍

Nov 27 Javascript

JS动态显示倒计时效果

Dec 12 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