今天小編給大家分享一下jquery怎么動(dòng)態(tài)添加或刪除class樣式的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

公司主營(yíng)業(yè)務(wù)：網(wǎng)站設(shè)計(jì)制作、做網(wǎng)站、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。創(chuàng)新互聯(lián)推出陽(yáng)泉免費(fèi)做網(wǎng)站回饋大家。

獲取與設(shè)置樣式 獲取class和設(shè)置class都可以使用attr()方法來(lái)完成。例如使用attr()方法來(lái)獲取p元素的class

取與設(shè)置樣式 獲取class和設(shè)置class都可以使用attr()方法來(lái)完成。例如使用attr()方法來(lái)獲取p元素的class，JQuery代碼如下：

var p_class = $("p").attr("class"); //獲取p元素的class 
[html] 
使用attr()方法來(lái)設(shè)置p元素的class，JQuery代碼如下： 
[code] 
1 $("p").attr("'class", "high"); //設(shè)置p元素的class為 "high"

大多數(shù)情況下，它是將原來(lái)的class替換為新的class，而不是在原來(lái)的基礎(chǔ)上追加新的class。

追加樣式 什么是追加class呢？假如p元素原本的class為myClass，那么追加一個(gè)名叫high的class后，class屬性變?yōu)?“myClass high”，即myClass和high兩種樣式的疊加。JQuery提供了專(zhuān)門(mén)的addClass()方法來(lái)追加樣式。為了使例子更容易理解，首先在 style標(biāo)簽里添加另一組樣式：

1 .high{ color:red; } 
2 .another{ font-style:italic; color:blue; } 
后在網(wǎng)頁(yè)中添加一個(gè)“追加class類(lèi)”的按鈕，按鈕的事件代碼如下： 
1 $("#btn_3").click(function(){ 
2 $("#nm_p").addClass("another"); // 追加樣式 
3 });

后當(dāng)單擊“追加class類(lèi)”按鈕時(shí)，p元素樣式就會(huì)變?yōu)樾斌w，而先前的紅色字體也會(huì)變?yōu)樗{(lán)色。此時(shí)p元素同時(shí)擁有兩個(gè)class值，即"high"和"another"。在CSS中有以下兩條規(guī)定。

1.如果給一個(gè)元素添加了多個(gè)class值，那么就相當(dāng)于合并了它們的樣式。 2.如果有不同的class設(shè)定了同一樣式屬性，則后者覆蓋前者。 在上例中，相當(dāng)于給p元素添加了如下樣式：

1 color : red; /* 字體顏色設(shè)置紅色*/ 
2 font-style:italic; 
3 color:blue;

以上的樣式中，存在兩個(gè)“color”屬性，而后面的“color”屬性會(huì)覆蓋前面的“color”屬性，因此最終的“color”屬性的值為“blue”，而不是“red”。

移除樣式 如果用戶單擊某個(gè)按鈕時(shí)，要?jiǎng)h除class的某個(gè)值，那么可以使用與addClass()方法相反的removeClass()方法來(lái)完成，它的 作用是從匹配的元素中刪除全部或者指定的class。例如可以使用如下的JQuery代碼來(lái)刪除p元素中值為“high”的class:

1 $("p").removeClass("high"); //移除p元素中值為"high"的class 
果要把p元素的兩個(gè)class都刪除，就要使用兩次removeClass()方法，代碼如下： 
1 $("p").removeClass("high").removeClass("another"); 
Query提供了更簡(jiǎn)單的方法?？梢砸钥崭竦姆绞絼h除多個(gè)class名，代碼如下： 
1 $("p").removeClass("high another"); 
外，還可以利用removeClass()方法的一個(gè)特性來(lái)完成同樣的效果。當(dāng)它不帶參數(shù)時(shí)，就會(huì)將class的值全部刪除，JQuery代碼如下： 
1 $("p").removeClass(); //移除p元素的所有class 
換樣式 JQuery中有一個(gè)方法toggle()，JQuery代碼如下： 
1 toggleBtn.toggle(function(){ 
2 //元素顯示 代碼③ 
3 }, function(){ 
4 //元素隱藏 代碼④ 
5 })

oggle()方法此處的作用是交替執(zhí)行代碼③和代碼④兩個(gè)函數(shù)，如果元素原來(lái)是顯示的，則隱藏它：如果元素原來(lái)是隱藏的，則顯示它。此時(shí)，toggle()方法主要是控制行為上的重復(fù)切換。

另外JQuery還提供了一個(gè)toggleClass()方法控制樣式上的重復(fù)切換。如果類(lèi)名存在則刪除它，如果類(lèi)名不存在則添加它。例如對(duì)p元素進(jìn)行toggleClass()方法操作。

1 $("p").toggleClass("another"); //重復(fù)切換類(lèi)名“another”

不斷單擊“切換樣式”按鈕時(shí)，p元素的class的值就會(huì)在“myClass”和“myClass another”之間重復(fù)切換。

判斷是否含有某個(gè)樣式 hasClass()可以用來(lái)判斷元素中是甭含有某個(gè)class，如果有，則返回true，否則返回false。例如可以使用下面的代碼來(lái)判斷p元素中是否含有“another”的class：

1 $("p").hasClass("another");

這個(gè)方法是為了增強(qiáng)代碼可讀性面產(chǎn)生的。在JQuery內(nèi)部實(shí)際上是調(diào)用了is()方法來(lái)完成這個(gè)功能的．該方法等價(jià)于如下代碼：

view sourceprint? 1 $("p").is(".another"); //is("."+class);

以上就是“jquery怎么動(dòng)態(tài)添加或刪除class樣式”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。