您好,登錄后才能下訂單哦!
取與設(shè)置樣式 獲取class和設(shè)置class都可以使用attr()方法來完成。例如使用attr()方法來獲取p元素的class,jquery代碼如下:
復(fù)制代碼 代碼如下:
var p_class = $("p").attr("class"); //獲取p元素的class
[html]
使用attr()方法來設(shè)置p元素的class,JQuery代碼如下:
[code]
1 $("p").attr("'class", "high"); //設(shè)置p元素的class為 "high"
大多數(shù)情況下,它是將原來的class替換為新的class,而不是在原來的基礎(chǔ)上追加新的class。
追加樣式 什么是追加class呢?假如p元素原本的class為myClass,那么追加一個名叫high的class后,class屬性變?yōu)?“myClass high”,即myClass和high兩種樣式的疊加。JQuery提供了專門的addClass()方法來追加樣式。為了使例子更容易理解,首先在 style標(biāo)簽里添加另一組樣式:
復(fù)制代碼 代碼如下:
1 .high{ color:red; }
2 .another{ font-style:italic; color:blue; }
后在網(wǎng)頁中添加一個“追加class類”的按鈕,按鈕的事件代碼如下:
1 $("#btn_3").click(function(){
2 $("#nm_p").addClass("another"); // 追加樣式
3 });
后當(dāng)單擊“追加class類”按鈕時,p元素樣式就會變?yōu)樾斌w,而先前的紅色字體也會變?yōu)樗{色。此時p元素同時擁有兩個class值,即"high"和"another"。在CSS中有以下兩條規(guī)定。
1.如果給一個元素添加了多個class值,那么就相當(dāng)于合并了它們的樣式。 2.如果有不同的class設(shè)定了同一樣式屬性,則后者覆蓋前者。 在上例中,相當(dāng)于給p元素添加了如下樣式:
復(fù)制代碼 代碼如下:
1 color : red; /* 字體顏色設(shè)置紅色*/
2 font-style:italic;
3 color:blue;
以上的樣式中,存在兩個“color”屬性,而后面的“color”屬性會覆蓋前面的“color”屬性,因此最終的“color”屬性的值為“blue”,而不是“red”。
移除樣式 如果用戶單擊某個按鈕時,要刪除class的某個值,那么可以使用與addClass()方法相反的removeClass()方法來完成,它的 作用是從匹配的元素中刪除全部或者指定的class。例如可以使用如下的JQuery代碼來刪除p元素中值為“high”的class:
復(fù)制代碼 代碼如下:
1 $("p").removeClass("high"); //移除p元素中值為"high"的class
果要把p元素的兩個class都刪除,就要使用兩次removeClass()方法,代碼如下:
1 $("p").removeClass("high").removeClass("another");
Query提供了更簡單的方法??梢砸钥崭竦姆绞絼h除多個class名,代碼如下:
1 $("p").removeClass("high another");
外,還可以利用removeClass()方法的一個特性來完成同樣的效果。當(dāng)它不帶參數(shù)時,就會將class的值全部刪除,JQuery代碼如下:
1 $("p").removeClass(); //移除p元素的所有class
換樣式 JQuery中有一個方法toggle(),JQuery代碼如下:
1 toggleBtn.toggle(function(){
2 //元素顯示 代碼③
3 }, function(){
4 //元素隱藏 代碼④
5 })
oggle()方法此處的作用是交替執(zhí)行代碼③和代碼④兩個函數(shù),如果元素原來是顯示的,則隱藏它:如果元素原來是隱藏的,則顯示它。此時,toggle()方法主要是控制行為上的重復(fù)切換。
另外JQuery還提供了一個toggleClass()方法控制樣式上的重復(fù)切換。如果類名存在則刪除它,如果類名不存在則添加它。例如對p元素進行toggleClass()方法操作。
復(fù)制代碼 代碼如下:
1 $("p").toggleClass("another"); //重復(fù)切換類名“another”
不斷單擊“切換樣式”按鈕時,p元素的class的值就會在“myClass”和“myClass another”之間重復(fù)切換。
判斷是否含有某個樣式 hasClass()可以用來判斷元素中是甭含有某個class,如果有,則返回true,否則返回false。例如可以使用下面的代碼來判斷p元素中是否含有“another”的class:
復(fù)制代碼 代碼如下:
1 $("p").hasClass("another");
個方法是為了增強代碼可讀性面產(chǎn)生的。在JQuery內(nèi)部實際上是調(diào)用了is()方法來完成這個功能的.該方法等價于如下代碼:
復(fù)制代碼 代碼如下:
view sourceprint? 1 $("p").is(".another"); //is("."+class);
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。