首頁技術(shù)文章正文

jQuery如何操作類?

更新時(shí)間:2021-11-10 來源:黑馬程序員 瀏覽量:

IT培訓(xùn)班

類操作就是通過操作元素的類名進(jìn)行元素樣式操作,當(dāng)元素樣式比較復(fù)雜時(shí),如果通過css()方法實(shí)現(xiàn),需要在CSS里編寫很長的代碼,既不美觀也不方便。而通過寫一個(gè)類名,把類名加上或去掉就會(huì)顯得很方便。下面我們通過代碼演示類的添加、刪除和切換。

1.準(zhǔn)備工作

先準(zhǔn)備一個(gè)HTML網(wǎng)頁,然后用jQuery代碼對(duì)網(wǎng)頁進(jìn)行操作。HTML代碼如下。

<style>
    .current {background-color: red;}
</style>
<div>添加類名</div>
<div class="current">刪除類名</div>
<div class="current">切換類名</div>

2. addClass()添加類

addClass()方法向被選元素添加一個(gè)或多個(gè)類名,基本語法如下所示。

$(selector).addClass(className)

上述代碼中,className表示要添加的類名。示例代碼如下。

<script>
    $("div").click(function(){
        $(this).addClass("current");
    });
</script>

上述代碼執(zhí)行后,單擊頁面中的“添加類名”按鈕,就會(huì)在div元素上添加current類名,背景色修改為紅色。

如果添加多個(gè)類,使用空格分隔類名,示例代碼如下。

$(this).addClass("current currentl…");


3. removeClass()移除類

removeClass()方法從被選元素移除一個(gè)或多個(gè)類,基本語法如下所示。

$ (selector).removeClass(className)

上述代碼中,className參數(shù)可以傳人一個(gè)或多個(gè)類名,使用空格來分隔,如果省略該參數(shù),表示移除所有的類名。下面我們通過代碼演示。

<script>
    $("div").click(function(){
         $(this).removeClass("current");
    });
</script>

上述代碼執(zhí)行后,單擊頁面中的“刪除類名”按鈕,在div元素上的current類名會(huì)被移除,背景色消失。

4. toggleClass()切換類

toggleClass()方法用來為元素添加或移除某個(gè)類,如果類不存在,就移除該類?;菊Z法如下所示。

$(selector).toggleClass(className,switch)

上述代碼中,className表示添加或移除的一個(gè)或多個(gè)類名,多個(gè)類名用空格分隔;switch參數(shù)用來規(guī)定只刪除類或只添加類,設(shè)為true表示添加,設(shè)為false表示移除。

下面我們通過代碼演示 toggleClass()的使用。

<script>
    $("div").click(function(){
        $(this).toggleclass("current");
    });
</script>

上述代碼執(zhí)行后,單擊頁面中的“切換類名”按鈕,當(dāng)div元素上存在current類名時(shí),則被移除,否則就添加??梢詫?shí)現(xiàn)字體背景色的切換效果。



猜你喜歡

jQuery和vue的區(qū)別是什么?

什么是jQuery選擇器?jQuery選擇器有什么優(yōu)勢(shì)?

什么是jQuery對(duì)象?

黑馬程序員web前端培訓(xùn)課程

分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!