zoukankan      html  css  js  c++  java
  • JQuery:JQuery操作CSS类

    JQuery:CSS类
    jQuery - 获取并设置 CSS 类,通过 jQuery,可以很容易地对 CSS 元素进行操作。
    jQuery 操作 CSS
    jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些:
      addClass() - 向被选元素添加一个或多个类
      removeClass() - 从被选元素删除一个或多个类
      toggleClass() - 对被选元素进行添加/删除类的切换操作
      css() - 设置或返回样式属性

    1、jQuery addClass() 方法
    实例1:下面的例子展示如何向不同的元素添加 class 属性。当然,在添加类时,您也可以选取多个元素:
    $("button").click(function(){
      $("h1,h2,p").addClass("blue");
      $("div").addClass("important");
    });
    代码如下:

    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
        <meta charset="utf-8">
        <title>JQuery的使用!!!</title>
        <script src="jquery-3.1.0.js"></script>
        <script>
            $(document).ready(function(){
                //为元素添加class
                $("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>标题 1</h1>
        <h2>标题 2</h2>
        <p>这是一个段落。</p>
        <p>这是另外一个段落。</p>
        <div>这是一些重要的文本!</div><br>
        <button>为元素添加class</button>
    </body>
    </html>

     


    实例2:也可以在 addClass() 方法中规定多个类:
    $("button").click(function(){
      $("#div1").addClass("important blue");
    });
    代码如下:

    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
        <meta charset="utf-8">
        <title>JQuery的使用!!!</title>
        <script src="jquery-3.1.0.js"></script>
        <script>
            $(document).ready(function(){
                //为第一行文本添加多个class
                $("button").click(function(){
                    $("#div1").addClass("blue important");
                });
            });
        </script>
    
        <style type="text/css">
            .important
            {
                font-weight:bold;
                font-size:xx-large;
            }
            .blue
            {
                color:blue;
            }
        </style>
    </head>
    <body>
        <div id="div1">第一行文本!</div><br>
        <div id="div2">第二行文本!</div><br>
        <button>为第一行文本添加多个class</button>
    </body>
    </html>

     

    2、jQuery removeClass() 方法
    下面的例子演示如何在不同的元素中删除指定的 class 属性:
    实例:
    $("button").click(function(){
      $("h1,h2,p").removeClass("blue");
    });
    代码如下:

    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
        <meta charset="utf-8">
        <title>JQuery的使用!!!</title>
        <script src="jquery-3.1.0.js"></script>
        <script>
            $(document).ready(function(){
                //为元素移除class
                $("button").click(function(){
                    $("h1,h2,p").removeClass("blue");
                });
            });
        </script>
    
        <style type="text/css">
            .important
            {
                font-weight:bold;
                font-size:xx-large;
            }
            .blue
            {
                color:blue;
            }
        </style>
    </head>
    <body>
        <h1 class="blue">标题 1</h1>
        <h2 class="blue">标题 2</h2>
        <p class="blue">这是一个段落。</p>
        <p>这是另外一个段落。</p>
        <button>为元素移除class</button>
    </body>
    </html>

     

    3、jQuery toggleClass() 方法
    下面的例子将展示如何使用 jQuery toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作:
    实例:
    $("button").click(function(){
      $("h1,h2,p").toggleClass("blue");
    });
    代码如下:

    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
        <meta charset="utf-8">
        <title>JQuery的使用!!!</title>
        <script src="jquery-3.1.0.js"></script>
        <script>
            $(document).ready(function(){
                //为元素切换class
                $("button").click(function(){
                    $("h1,h2,p").toggleClass("blue");
                });
            });
        </script>
    
        <style type="text/css">
            .important
            {
                font-weight:bold;
                font-size:xx-large;
            }
            .blue
            {
                color:blue;
            }
        </style>
    </head>
    <body>
        <h1 class="blue">标题 1</h1>
        <h2 class="blue">标题 2</h2>
        <p class="blue">这是一个段落。</p>
        <p>这是另外一个段落。</p>
        <button>为元素切换class</button>
    </body>
    </html>

     

     

  • 相关阅读:
    ionic的start-y属性初始化页面
    AngularJS时间轴指令
    [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys
    常用CSS样式
    angularjs ng-click
    不是SELECTed表达式
    跨域资源共享(CORS)问题解决方案
    AngularJS身份验证:Cookies VS Tokens
    Javascript跨域
    Vmware虚拟机centos7命令登录模式与成桌面模式切换
  • 原文地址:https://www.cnblogs.com/XYQ-208910/p/5891179.html
Copyright © 2011-2022 走看看