通过jQuery对 CSS 类进行添加删除切换

官方金沙娱乐赌场网站_赌博娱乐注册送18现金,屠呦呦凭借青蒿素的发明,获得诺贝尔奖,而这一抗疟药物拯救了全球数百万人的性命;里约奥运会上,泳坛名将菲尔普斯身上的火罐烙印让世界了解到“中国印”。,特朗普女婿接受美国国会参议院质询否认通...,迫于“12月1日全面停止提车”的巨大威胁,奥迪AG同意暂停与上汽集团关于销售和网络的谈判。

jQuery 操作 CSS

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些:

    ○ addClass() - 向被选元素添加一个或多个类
    ○ removeClass() - 从被选元素删除一个或多个类
    ○ toggleClass() - 对被选元素进行添加/删除类的切换操作
    ○ css() - 设置或返回样式属性

以下所有Demo用到的样式表

  1. .important
  2. {
  3. font-weight:bold;
  4. font-size:xx-large;
  5. }
  6.  
  7. .blue
  8. {
  9. color:blue;
  10. }

jQuery addClass() 方法

下面的例子展示如何向不同的元素添加 class 属性。当然,在添加类时,您也可以选取多个元素:

  1. $("button").click(function(){
  2.  
  3. ? $("h1,h2,p").addClass("blue");
  4.  
  5. ? $("div").addClass("important");
  6.  
  7. });

实例:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="http://www.513jianzhu.com/gfjsyldcwz/jquery/1.10.2/jquery.min.js">
  5. </script>
  6. <script>
  7. $(document).ready(function(){
  8.   $("button").click(function(){
  9.     $("h1,h2,p").addClass("blue");
  10.     $("div").addClass("important");
  11.   });
  12. });
  13. </script>
  14. <style type="text/css">
  15. .important
  16. {
  17. font-weight:bold;
  18. font-size:xx-large;
  19. }
  20. .blue
  21. {
  22. color:blue;
  23. }
  24. </style>
  25. </head>
  26. <body>
  27.  
  28. <h1>Heading 1</h1>
  29. <h2>Heading 2</h2>
  30. <p>This is a paragraph.</p>
  31. <p>This is another paragraph.</p>
  32. <div>This is some important text!</div>
  33. <br>
  34. <button>Add classes to elements</button>
  35.  
  36. </body>
  37. </html>

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

  1. $("button").click(function(){
  2.  
  3.   $("#div1").addClass("important blue");
  4.  
  5. });

实例:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="http://www.513jianzhu.com/gfjsyldcwz/jquery/1.10.2/jquery.min.js">
  5. </script>
  6. <script>
  7. $(document).ready(function(){
  8.   $("button").click(function(){
  9.     $("#div1").addClass("important blue");
  10.   });
  11. });
  12. </script>
  13. <style type="text/css">
  14. .important
  15. {
  16. font-weight:bold;
  17. font-size:xx-large;
  18. }
  19. .blue
  20. {
  21. color:blue;
  22. }
  23. </style>
  24. </head>
  25. <body>
  26.  
  27. <div id="div1">This is some text.</div>
  28. <div id="div2">This is some text.</div>
  29. <br>
  30. <button>Add classes to first div element</button>
  31.  
  32. </body>
  33. </html>

jQuery removeClass() 方法

下面的例子演示如何在不同的元素中删除指定的 class 属性:

  1. $("button").click(function(){
  2.   $("h1,h2,p").removeClass("blue");
  3. });

实例:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="http://www.513jianzhu.com/gfjsyldcwz/jquery/1.10.2/jquery.min.js">
  5. </script>
  6. <script>
  7. $(document).ready(function(){
  8.   $("button").click(function(){
  9.     $("h1,h2,p").removeClass("blue");
  10.   });
  11. });
  12. </script>
  13. <style type="text/css">
  14. .important
  15. {
  16. font-weight:bold;
  17. font-size:xx-large;
  18. }
  19. .blue
  20. {
  21. color:blue;
  22. }
  23. </style>
  24. </head>
  25. <body>
  26.  
  27. <h1 class="blue">Heading 1</h1>
  28. <h2 class="blue">Heading 2</h2>
  29. <p class="blue">This is a paragraph.</p>
  30. <p>This is another paragraph.</p>
  31. <br>
  32. <button>Remove class from elements</button>
  33. </body>
  34. </html>

jQuery toggleClass() 方法

下面的例子将展示如何使用 jQuery toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作:

  1. $("button").click(function(){
  2.   $("h1,h2,p").toggleClass("blue");
  3. });

实例:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="http://www.513jianzhu.com/gfjsyldcwz/jquery/1.10.2/jquery.min.js">
  5. </script>
  6. <script>
  7. $(document).ready(function(){
  8.   $("button").click(function(){
  9.     $("h1,h2,p").toggleClass("blue");
  10.   });
  11. });
  12. </script>
  13. <style type="text/css">
  14. .blue
  15. {
  16. color:blue;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21.  
  22. <h1>Heading 1</h1>
  23. <h2>Heading 2</h2>
  24. <p>This is a paragraph.</p>
  25. <p>This is another paragraph.</p>
  26. <button>Toggle class</button>
  27. </body>
  28. </html>

发布日期:

所属分类: JavaScript/jquery 标签: