JQuery 樣式設定 追加 移除與切換

2021-06-19 18:42:14 字數 2525 閱讀 4291

獲取與設定樣式

獲取class和設定class都可以使用attr()方法來完成。例如使用attr()方法來獲取p元素的class,jquery**如下:

varp_class = $(

"p").attr(

"class"

); //獲取p元素的class

使用attr()方法來設定p元素的class,jquery**如下:1$(

"p").attr(

"'class"

, "high"

); 

//設定p元素的class為 "high"

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

追加樣式

什麼是追加class呢?假如p元素原本的class為myclass,那麼追加乙個名叫high的class後,class屬性變為 「myclass high」,即myclass和high兩種樣式的疊加。jquery提供了專門的addclass()方法來追加樣式。為了使例子更容易理解,首先在 style標籤裡新增另一組樣式:

1.high 2

.another

然後在網頁中新增乙個「追加class類」的按鈕,按鈕的事件**如下:1$(

"#btn_3"

).click(

function

());

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

如果給乙個元素新增了多個class值,那麼就相當於合併了它們的樣式。

如果有不同的class設定了同一樣式屬性,則後者覆蓋前者。

在上例中,相當於給p元素新增了如下樣式:

1color : red;       

/* 字型顏色設定紅色*/ 2

font-style:italic;   3

color:blue;

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

移除樣式

如果使用者單擊某個按鈕時,要刪除class的某個值,那麼可以使用與addclass()方法相反的removeclass()方法來完成,它的 作用是從匹配的元素中刪除全部或者指定的class。例如可以使用如下的jquery**來刪除p元素中值為「high」的class:1$(

"p").removeclass(

"high"

); 

//移除p元素中值為"high"的class

如果要把p元素的兩個class都刪除,就要使用兩次removeclass()方法,**如下:1$(

"p").removeclass(

"high"

).removeclass(

"another");

jquery提供了更簡單的方法。可以以空格的方式刪除多個class名,**如下:1$(

"p").removeclass(

"high another");

另外,還可以利用removeclass()方法的乙個特性來完成同樣的效果。當它不帶引數時,就會將class的值全部刪除,jquery**如下:1$(

"p").removeclass(); 

//移除p元素的所有class

切換樣式

jquery中有乙個方法toggle(),jquery**如下:

1togglebtn.toggle(

function

(),

function

())

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

另外jquery還提供了乙個toggleclass()方法控制樣式上的重複切換。如果類名存在則刪除它,如果類名不存在則新增它。例如對p元素進行toggleclass()方法操作。1$(

"p").toggleclass(

"another"

); 

//重複切換類名「another」

當不斷單擊「切換樣式」按鈕時,p元素的class的值就會在「myclass」和「myclass another」之間重複切換。

判斷是否含有某個樣式

hasclass()可以用來判斷元素中是甭含有某個class,如果有,則返回true,否則返回false。例如可以使用下面的**來判斷p元素中是否含有「another」的class:1$(

"p").hasclass(

"another");

這個方法是為了增強**可讀性面產生的。在jquery內部實際上是呼叫了is()方法來完成這個功能的.該方法等價於如下**:

view source

print?1

$("p"

).is(

".another"

); 

//is("."+class);

jQuery設定元素樣式

jquery可以使用css 方法來修改簡單元素樣式 也可以操作類,修改多個樣式。1 引數只寫屬性名,則返回屬性值 this css color 2 引數是屬性名,屬性值,逗號分隔,是設定一組樣式,屬性名必須加引號,值如果是數字可以不用跟單位和引號 this css color red 3 引數可以是...

jQuery樣式與動畫

css document ready function 這裡需要 px speech.css fontsize num px 廠商在引入 試驗性的樣式屬性 時,會在其達到css規範要求之前加乙個字首。webkit property name value moz property name value...

jQuery學習 DOM 移除與替代

detach 描述 從dom中去掉所有匹配的元素。detach 方法和.remove 一樣,除了.detach 儲存所有jquery資料和被移走的元素相關聯。當需要移走乙個元素,不久又將該元素插入dom時,這種方法很有用。刪除dom中所有段落 hello how are you?attach det...