一、addClass() - 向被选元素添加一个或多个类

  1. <script src="jquery-1.11.1.min.js"></script>
  2. <script>
  3. $(function(){
  4.   $("button").click(function(){
  5.     　　$("h1,h2,p").addClass("blue");
  6.     　　$("div,p").addClass("important");
  7.   });
  8. });
  9. </script>
  10. <style type="text/css">
  11. 　　.important{font-weight:bold; font-size:xx-large;}
  12. 　　.blue{color:blue;}
  13. </style>
  14. </head>
  15. <body>
  16. 　　<h1>标题 1</h1>
  17. 　　<h2>标题 2</h2>
  18. 　　<p>这是一个段落。</p>
  19. 　　<p>这是另一个段落。</p>
  20. 　　<div>这是非常重要的文本！</div><br>
  21. 　　<button>向元素添加类</button>
  22. </body>

也可以在 addClass() 方法中规定多个类：

  1. <script src="jquery-1.11.1.min.js"></script>
  2. <script>
  3. $(function(){
  4.   $("button").click(function(){
  5.     　　$("#div1").addClass("important blue");
  6.   });
  7. });
  8. </script>
  9. <style type="text/css">
  10. 　　.important{font-weight:bold; font-size:xx-large;}
  11. 　　.blue{color:blue;}
  12. </style>
  13. </head>
  14. <body>
  15. 　　<div id="div1">这是一些文本。</div>
  16. 　　<div id="div2">这是一些文本。</div><br>
  17. 　　<button>向第一个 div 元素添加多个类</button>
  18. </body>

二、removeClass() - 从被选元素删除一个或多个类

  1. <script src="jquery-1.11.1.min.js"></script>
  2. <script>
  3. $(function(){
  4.   $("button").click(function(){
  5.     $("h1,h2,p").removeClass("blue");
  6.   });
  7. });
  8. </script>
  9. <style type="text/css">
  10. .important{font-weight:bold; font-size:xx-large;}
  11. .blue{color:blue;}
  12. </style>
  13. </head>
  14. <body>
  15. <h1 class="blue">标题 1</h1>
  16. <h2 class="blue">标题 2</h2>
  17. <p class="blue">这是一个段落。</p>
  18. <p>这是另一个段落。</p><br>
  19. <button>从元素上删除类</button>
  20. </body>

三、hasClass() - 对被选元素进行判断是否有该类

  1. <script src="jquery-1.11.1.min.js"></script>
  2. <script>
  3. $(function(){
  4.   $("h1").click(function(){
  5.     　if($(this).hasClass("blue")){
  6.         $(this).removeClass("important");
  7.       }else{
  8.         /*...............*/
  9.       }
  10.   });
  11. });
  12. </script>
  13. <style type="text/css">
  14. 　　.important{font-weight:bold; font-size:xx-large;}
  15. 　　.blue{color:blue;}
  16. </style>
  17. </head>
  18. <body>
  19. 　　<h1 class="blue important">标题 1</h1>
  20. 　　<h2>标题 2</h2>
  21. 　　<p>这是一个段落。</p>
  22. 　　<p>这是另一个段落。</p>
  23. 　　<button>切换 CSS 类</button>
  24. </body>

四、toggleClass() - 对被选元素进行添加/删除类的切换操作

  1. <script src="jquery-1.11.1.min.js"></script>
  2. <script>
  3. $(function(){
  4.   $("button").click(function(){
  5.     　　$("h1,h2,p").toggleClass("blue");//切换css类，当类存在时，就删除，不存在时就添加，必须要有点击动作
  6.   });
  7. });
  8. </script>
  9. <style type="text/css">
  10. 　　.important{font-weight:bold; font-size:xx-large;}
  11. 　　.blue{color:blue;}
  12. </style>
  13. </head>
  14. <body>
  15. 　　<h1>标题 1</h1>
  16. 　　<h2>标题 2</h2>
  17. 　　<p>这是一个段落。</p>
  18. 　　<p>这是另一个段落。</p>
  19. 　　<button>切换 CSS 类</button>
  20. </body>

默认的 CSS 类切换只能是无样式和指定样式之间的切换，如果想实现样式 red和样式 blue之间的切换还必须自己写一些逻辑。

  1. <script src="jquery-1.11.1.min.js"></script>
  2. <script>
  3. $(function(){
  4.     $('div').click(function () {
  5.         $(this).toggleClass('red'); //一开始切换到样式 red
  6.         if ($(this).hasClass('red')) { //判断样式 red 存在后
  7.             $(this).removeClass('blue'); //删除样式 blue
  8.         } else {
  9.             $(this).toggleClass('blue'); //添加样式 blue，这里也可以 addClass
  10.         }
  11.    });
  12. });
  13. </script>
  14. <style type="text/css">
  15.     .blue{ color:blue;}
  16.     .red{ color:red;}
  17.     .size{ font-size:36px;}
  18.     .green{ color:green;}
  19. </style>
  20. </head>
  21. <body>
  22.     <div>JQuery1</div>
  23.     <div>JQuery2</div>
  24. </body>

.toggleClass()方法提供了传递匿名函数的方式，来设置你所需要切换的规则。

  1. <script src="jquery-1.11.1.min.js"></script>
  2. <script>
  3. $(function(){
  4.     /* $('div').click(function () {
  5.         $(this).toggleClass(function () {     //传递匿名函数，返回要切换的样式
  6.             return $(this).hasClass('red') ? 'blue' : 'red';        //这里有个缺陷red添加进去后就删除不了
  7.         });
  8.     });
  9.     */
  10.  
  11.     $('div').click(function () {
  12.         $(this).toggleClass(function () {
  13.             if ($(this).hasClass('red')) {
  14.                 $(this).removeClass('red');
  15.                 return 'blue';
  16.             } else {
  17.                 $(this).removeClass('blue');
  18.                 return 'red';
  19.             }
  20.         });
  21.     });
  22.  
  23. });
  24. </script>
  25. <style type="text/css">
  26.     .blue{ color:blue;}
  27.     .red{ color:red;}
  28.     .size{ font-size:36px;}
  29.     .green{ color:green;}
  30. </style>
  31. </head>
  32. <body>
  33.     <div class="blue">JQuery1</div>
  34.     <div>JQuery2</div>
  35. </body>

五、css() - 设置或返回被选元素的一个或多个样式属性

1、返回指定的 CSS 属性的值：

  1. <script src="jquery-1.11.1.min.js"></script>
  2. <script>
  3. $(function(){
  4.   alert("Background color = " + $("p").eq(1).css("background-color"));//这里可以通过eq()这个方法来选择第几个p标签
  5. });
  6. </script>
  7. </head>
  8. <body>
  9. <p style="background-color:#ff0000">这是一个段落。</p>
  10. <p style="background-color:#00ff00">这是一个段落。</p>
  11. <p style="background-color:#0000ff">这是一个段落。</p>
  12. </body>

在 CSS 获取上，我们也可以获取多个 CSS 样式，而获取到的是一个对象数组，如果用传统方式进行解析需要使用 for in 遍历。

  1. <script src="jquery-1.11.1.min.js"></script>
  2. <script>
  3. $(function(){
  4.       var box = $('p').css(['color', 'height', 'width']); //得到多个 CSS 样式的数组对象
  5.     　alert(box);//返回的是一个对象数组object
  6.  
  7.     /*
  8.     for (var i in box) {     //逐个遍历出来
  9.         alert(i + ':' + box[i]);
  10.     }
  11.     */
  12.  
  13.     //上面使用了js的原生方法，这里jQuery 提供了一个遍历工具专门来处理这种对象数组，$.each()方法，这个方法可以轻松的遍历对象数组。
  14.     $.each(box, function (attr, value) { //遍历 JavaScript 原生态的对象数组
  15.         alert(attr + ':' + value);
  16.     });
  17.  
  18.     //使用$.each()可以遍历原生的 JavaScript 对象数组，如果是 jQuery 对象的数组怎么使用.each()方法呢？
  19.     $('p').each(function (index, element) {     //index 为索引，element 为元素 DOM对象
  20.         alert(index + ':' + element);
  21.     });
  22. });
  23. </script>
  24. <style type="text/css">
  25.     p{ background-color:#ff0000;}
  26. </style>
  27. </head>
  28. <body>
  29. <p>这是一个段落。</p>
  30. <p>这是一个段落。</p>
  31. <p>这是一个段落。</p>
  32. <p>这是一个段落。</p>
  33. </body>

2、设置指定的 CSS 属性：

  1. <script src="jquery-1.11.1.min.js"></script>
  2. <script>
  3. $(function(){
  4.   $("p").eq(0).css("background-color","#FF0");//这里可以通过eq()这个方法来选择第几个p标签
  5. });
  6. </script>
  7. </head>
  8. <body>
  9. <p style="background-color:#ff0000">这是一个段落。</p>
  10. <p style="background-color:#00ff00">这是一个段落。</p>
  11. <p style="background-color:#0000ff">这是一个段落。</p>
  12. <p>这是一个段落。</p>
  13. </body>

在需要设置多个样式的时候，我们可以传递多个 CSS 样式的键值对即可。

  1. <script src="jquery-1.11.1.min.js"></script>
  2. <script>
  3. $(function(){
  4.       $("p").eq(0).css({
  5.         "background-color":"#FF0",
  6.         "font-size":"36px"
  7.     });//这里可以通过eq()这个方法来选择第几个p标签
  8. });
  9. </script>
  10. </head>
  11. <body>
  12. <p style="background-color:#ff0000">这是一个段落。</p>
  13. <p style="background-color:#00ff00">这是一个段落。</p>
  14. <p style="background-color:#0000ff">这是一个段落。</p>
  15. <p>这是一个段落。</p>
  16. </body>

如果想设置某个元素的 CSS 样式的值， 但这个值需要计算我们可以传递一个匿名函数。

  1. <script src="jquery-1.11.1.min.js"></script>
  2. <script>
  3. $(function(){
  4.       $('p').css('width', function (index, value) {
  5.         alert(value);
  6.         return (parseInt(value) - 500) + 'px';
  7.     });
  8. });
  9. </script>
  10. </head>
  11. <body>
  12. <p style="background-color:#ff0000">这是一个段落。</p>
  13. <p style="background-color:#00ff00">这是一个段落。</p>
  14. <p style="background-color:#0000ff">这是一个段落。</p>
  15. <p>这是一个段落。</p>
  16. </body>

JQuery_给元素添加或删除类等以及CSS()方法的更多相关文章

  1. 原生JS动态添加和删除类

    原生JS动态添加和删除类 由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等 ...

  2. 原生js添加和删除类

    原生js添加和删除类: this.className +=" "; this.className = this.className.replace(" 原来的类" ...

  3. 使用 jQuery 选择器获取页面元素后，利用 jQuery 对象的 css() 方法设置其样式。

    查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素后,利用 jQuery 对象的 css() 方法设置其样式. 要求如下: 点击页面的"更改样式"按钮后, ...

  4. 使用 jQuery 选择器获取页面元素，然后利用 jQuery 对象的 css() 方法设置其 display 样式属性，从而实现显示和隐藏效果。

    查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果. 具体要求如下: ...

  5. 使用 jQuery 基本选择器获取页面元素，然后利用 jQuery 对象的 css() 方法动态设置 ＜span＞ 和 ＜a＞ 标签的样式

    查看本章节 查看作业目录 需求说明: 使用 jQuery 基本选择器获取页面元素,然后利用 jQuery 对象的 css() 方法动态设置 <span> 和 <a> 标签的样式 ...

  6. 原生js查询、添加、删除类

    1.添加类 为标签添加一个class的类 如:<div id="box" class="box">内容</div> document.g ...

  7. jQ HTML之捕获 设置 元素添加与删除

    捕获 设置修改 添加元素 删除元素

  8. TreeMap和TreeSet在排序时如何比较元素？Collections工具类中的sort()方法如何比较元素？

    TreeSet要求存放的对象所属的类必须实现Comparable接口,该接口提供了比较元素的compareTo()方法,当插入元素时会回调该方法比较元素的大小.TreeMap要求存放的键值对映射的键必 ...

  9. TreeMap和TreeSet在排序时如何比较元素，Collections工具类中的sort()方法如何比较元素

    TreeSet和TreeMap排序时比较元素要求元素对象必须实现Comparable接口 Collections的sort方法比较元素有两种方法: 元素对象实现Comparable接口 实体类Dog ...

随机推荐

  1. sublime 3 注册码

    Sublime_Text_Build_3080_x64_Setup.e... 下载地址: http://download.csdn.net/detail/hyz301/8529945 注册码 Subl ...

  2. Java检查型异常和非检查型异常

    1.代码 public class ExcepTest { /** * @param args */ public static void main(String[] args) { System.e ...

  3. 如何使用CSS3创建一个漂亮的图标

    演示 下载 今天,我想展示给你一个巧妙的花招.我们将创建一个纯CSS3文本图标.更让人震惊的是,这效果将只需要一个HTML元素. 游戏的计划 创建一个矩形盒子 设置圆角 使用伪类元素创建一个卷角效果 ...

  4. Python日志输出——logging模块

    Python日志输出——logging模块 标签: loggingpythonimportmodulelog4j 2012-03-06 00:18 31605人阅读 评论(8) 收藏 举报 分类: P ...

  5. 小圣求职记A：腾讯篇

    本人普通985高校计算机专业研究生一枚,从9月12号开始正式找工作,一个月过去了,参加了能参加的各个互联网公司的宣讲.笔试.面试,现用两篇随笔分享所见所闻.随笔A将以腾讯为例详细展示整个过程,随笔B将 ...

  6. JQuery原理及深入解析--转载

    总体架构 jQuery是个出色的javascript库,最近结合它写javascript,看了下源码. 先从整体.全局的看,jQuery的源码几乎都在下面的代码中: (function() { //… ...

  7. POJ 1236

    Network of Schools Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 10500   Accepted: 41 ...

  8. POJ 1316

    #include<iostream> using namespace std; #define NUM 10000 int main(){ }; int i; ; int j; ;i< ...

  9. OleDbType.Decimal在插入DB2后会默认赋值0.00，改为OleDbType.Double则正常

    private void InsertShopClaimsTarget(ContinueTargetData.RT_SHOPCLAIMSTARGETRow aRow) { StringBuilder ...

  10. linux下对普通用户设置文件访问控命令之setfacl

    命令名 setfacl  -设置文件访问控制列表 常用用法:setfacl [-bkRd] [{-m|-x} acl参数] 目标文件名 命令的常用参数 -m 设置后续的acl参数给文件使用(常用). ...