jQuery中的class操作

阿新 • • 發佈：2019-01-17

在jQuery中，對於元素的屬性操作相對於JavaScript來說程式碼要簡單很多，這次主要介紹幾個常用的jQuery中的屬性操作。
首先先寫一個簡單的盒子出來用作案例演示：
這個是html的部分，構造了一個盒子和幾個用於點選事件的按鈕：

<body>
    <button>新增一個紅色背景</button>
    <button>移除紅色背景</button>
    <button>判斷有沒有1px的藍色邊框<-/button>
    <button>寬度切換</button>
    <div 
 class="box border1"></div>
</body>

在css部分設定了幾個類用於演示屬性操作：

<style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            background-color: #666;
        }
        .bgr{
            background-color: red; 
        }
        .border1{
            border 
: 1px solid blue;
        }
        .border5{
            border: 5px solid green;
        }
        .width200{
            width: 200px;
        }
    </style>

沒有進行屬性操作之前，盒子是這樣的：
這裡寫圖片描述

1、addClass()

addClass()是向匹配的元素新增指定的類名。
這裡給盒子新增bgr這個類，給第一個按鈕新增點選事件，點選第一個按鈕（eq(0)），改變其背景顏色，背景顏色由#666變成了紅色。

    var 
 box = $('div');
    $('button').eq(0).click(function(){
    //給某一個元素新增類
        box.addClass('bgr');
    });

演示結果如下：
這裡寫圖片描述

2、removeClass()

removeClass()是從所有匹配的元素中刪除全部或者指定的類。
這裡給盒子移除bgr這個類，給第二個按鈕新增點選事件，點選第二個按鈕（eq(1)），改變其背景顏色，背景顏色由紅色再次變回初始的#666。

    $('button').eq(1).click(function(){
        //給某一個元素移除類
        box.removeClass('bgr')
    });

演示結果如下：
這裡寫圖片描述

3、hasClass()

hasClass()是檢查匹配的元素是否擁有指定的類。
這裡我給盒子加了一個border1的類，給第三個按鈕新增點選事件，點選第三個按鈕（eq(2)），首先判斷這個box有沒有border1這個類，如果有，則在控制檯輸出“有1px的藍色邊框”，沒有就輸出“沒有1px的藍色邊框”。

    $('button').eq(2).click(function(){
        //判斷某個元素中是否帶有某一個類
        var has1pxBorder = box.hasClass('border1');
        if(has1pxBorder){
            console.log('有1px的藍色邊框');
        }else{
            console.log('沒有1px的藍色邊框');
        }
    });

演示結果如下：
這裡寫圖片描述

4、toggleClass()

toggleClass()是從匹配的元素中新增或刪除一個類。
這裡我給盒子加了一個width200的類，並給第四個按鈕新增點選事件，點選第四個按鈕，toggleClass()首先會判斷box有沒有width200這個類，如果沒有，就新增，如果有，則移除，這樣一個屬性操作十分的好用。

    $('button').eq(3).click(function(){
        //類的切換 判斷有沒有這個類
        //如果沒有這個類，則新增，如果有，則移除
        box.toggleClass('width200');
    });

演示結果如下：
一開始是沒有width200這個類的，點選第四個按鈕，結果是這樣的：
這裡寫圖片描述
再次點選該按鈕，則會移除這個width200這個類，又恢復成初始寬度100px的狀態，如下圖：

以上，就是關於jQuery中class屬性操作的全部內容。

jQuery中的class操作

1、addClass()

2、removeClass()

3、hasClass()

4、toggleClass()

JQuery中內容操作函數、validation表單校驗

jQuery中的class操作

JQuery中的Dom操作和事件

第三章（jQuery中的DOM操作）

jquery如何判斷元素是否被點擊、屬性操作、class操作

第83天：jQuery中操作form表單

jquery 中json數組的操作增刪改

JQuery 中this和$(this)獲取對象、操作DOM對象的元素屬性

如何在js或者jquery中操作EL表達式的一個List集合

第3章 jQuery中的DOM操作

jQuery中對標簽元素操作（1）

jquery中關於滑鼠事件的操作

jquery中對錶單屬性的操作總結

Asp.Net MVC WebAPI的建立與前臺Jquery ajax後臺HttpClient呼叫詳解 Asp.Net中對操作Sql Server 簡單處理的SqlDB類

JQuery中的DOM操作(轉載)

jQuery中的DOM操作——總結了相關DOM操作的方法

jquery 中的dom操作

jQuery中的事件與DOM操作

jquery中cookie的簡單設定、獲取和刪除操作

jQuery關於class的操作

jQuery中的class操作

1、addClass()

2、removeClass()

3、hasClass()

4、toggleClass()

相關推薦