JQuery實作樣式設定、追加、移除與切換的方法_jquery

本文實例講述了JQuery實作樣式設定、追加、移除與切換的方法。分享給大家供大家參考。具體分析如下：

有了JQuery，元素的樣式操作會變得相當簡易。下面我們來看看如何使用JQuery來實現元素樣式的取得、設定、追加、刪除以及其它一些操作。

取得與設定樣式

取得class和設定class都可以使用attr()方法來完成。例如使用attr()方法來取得p元素的class，JQuery程式碼如下：

var p_class = $("p").attr("class");
//获取p元素的class

使用attr()方法來設定p元素的class，JQuery程式碼如下：

$("p").attr("'class", "high");
//设置p元素的class为 "high"

在大多數情況下，它是將原來的class替換為新的class，而不是在原來的基礎上追加新的class。

追加樣式

什麼是追加class呢？假如p元素原本的class為myClass，那麼追加一個名叫high的class後，class屬性變成“myClass high”，也就是myClass和high兩種樣式的疊加。 JQuery提供了專門的addClass()方法來追加樣式。為了讓例子更容易理解，首先在style標籤裡加入另一組樣式：

.high{ color:red; }
.another{ font-style:italic; color:blue; }

然後在網頁中加入一個「追加class類」的按鈕，按鈕的事件代碼如下：

$("#btn_3").click(function(){
  $("#nm_p").addClass("another");
  // 追加样式
});

最後當點選「追加class」按鈕時，p元素樣式就會變成斜體，而先前的紅色字體也會變成藍色。此時p元素同時擁有兩個class值，即"high"和"another"。在CSS中有以下兩條規定。

1. 如果為一個元素增加了多個class值，那麼就等於合併了它們的樣式。
2. 如果有不同的class設定了同一樣式屬性，則後者覆寫前者。

在上例中，相當於為p元素添加瞭如下樣式：

color : red;  /* 字体颜色设置红色*/ 
font-style:italic; 
color:blue;

在以上的樣式中，存在兩個“color”屬性，而後面的“color”屬性會覆蓋前面的“color”屬性，因此最終的“color”屬性的值為“blue”，而不是“ red」。

移除樣式

如果使用者點擊某個按鈕時，要刪除class的某個值，那麼可以使用與addClass()方法相反的removeClass()方法來完成，它的作用是從匹配的元素中刪除全部或指定的class。例如可以使用如下的JQuery程式碼來刪除p元素中值為「high」的class:

$("p").removeClass("high");
//移除p元素中值为"high"的class

如果要把p元素的兩個class都刪除，就要使用兩次removeClass()方法，程式碼如下：

複製程式碼 程式碼如下:

$("p").removeClass("high").removeClass("another ");

JQuery提供了更簡單的方法。可以以空格的方式刪除多個class名，程式碼如下：

複製程式碼 程式碼如下:

$("p").removeClass("high another");

$("p").removeClass("high another");

另外，還可以利用removeClass()方法的一個特性來完成同樣的效果。當它不帶參數時，就會將class的值全部刪除，JQuery程式碼如下：

$("p").removeClass();
//移除p元素的所有class

切換樣式

JQuery中有一個方法toggle()，JQuery程式碼如下：

toggleBtn.toggle(function(){
  //元素显示 代码③
}, function(){
  //元素隐藏 代码④
})

toggle()方法此處的作用是交替執行程式碼③和程式碼④兩個函數，如果元素原來是顯示的，則隱藏它：如果元素原來是隱藏的，則顯示它。此時，toggle()方法主要是控制行為上的重複切換。

另外JQuery也提供了一個toggleClass()方法控制樣式上的重複切換。如果類別名稱存在則刪除它，如果類別名稱不存在則新增它。例如對p元素進行toggleClass()方法運算。

$("p").toggleClass("another");
//重复切换类名“another”

當不斷點選「切換樣式」按鈕時，p元素的class的值就會在「myClass」和「myClass another」之間重複切換。

判斷是否含有某個樣式

hasClass()可以用來判斷元素中是甭含有某個class，如果有，則傳回true，否則回傳false。例如可以使用下面的程式碼來判斷p元素中是否含有「another」的class：

複製程式碼

程式碼如下:

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

這個方法是為了增強程式碼可讀性面所產生的。在JQuery內部其實是呼叫了is()方法來完成這個功能的．此方法等價於以下程式碼：

複製程式碼 程式碼如下:

$("p").is(".another");//is ("." class);

希望本文所述對大家的jQuery程式設計有所幫助。