類操作是什麼意思?jQuery的類操作教程
類操作就是透過操作元素的類名進行元素樣式操作,當元素樣式比較複雜時,如果透過css()方法實現,需要在CSS裡編寫很長的程式碼,既不美觀也不方便。而透過寫 一個類名,把類名加上或去掉就會顯得很方便。下面透過程式碼演示類的新增、刪除和切換。
1. 準備工作
先準備一個HTML網頁,然後用jQuery程式碼對網頁進行操作。HTML程式碼如下。
<style>
.current { background-color: red; }
</style>
<div>新增類名</div>
<div class="current">刪除類名</div>
<div class="current">切換類名</div>
上述程式碼中,第2行定義current類的樣式為背景色為紅色,第5行和第6行定義了兩個類名 為current的div元素。
2. addClass()新增類
addClass()方法向被選元素新增一個或多個類名,基本語法如下所示。
$(selector).addClass(className)
上述程式碼中,className表示要新增的類名,示例程式碼如下
<script>
$("div").click(function() {
$(this).addClass("current");
});
</script>
上述程式碼執行後,單擊頁面中的“新增類名”按鈕,就會在div元素上新增current類名,背景色修改為紅色。
如果新增多個類,使用空格分隔類名,示例程式碼如下。
$(this).addClass("current current1 …");
3. removeClass()移除類
removeClass()方法從被選元素移除一個或多個類,基本語法如下所示。
$(selector).removeClass(className)
上述程式碼中, className引數可以傳入一個或多個類名,使用空格來分隔,如果省略該引數,表示移除所有的類名。下面透過程式碼演示。
<script>
$("div").click(function() {
$(this).removeClass("current");
});
</script>
上述程式碼執行後,單擊頁面中的“刪除類名”按鈕,在div元素上的current類名會被移除,背景色消失。
4. toggleClass()切換類
toggleClass()方法用來為元素新增或移除某個類,如果類不存在,就新增該類,如果類存在,就移除該類。基本語法如下所示。
$(selector).toggleClass(className, switch)
上述程式碼中,className表示新增或移除的一個或多個類名,多個類名用空格分隔;switch引數用來規定只刪除類或只新增類,設為true表示新增,設為false表示移除。
下面透過程式碼演示toggleClass()的使用。
<script>
$("div").click(function() {
$(this).toggleClass("current");
});
</script>
上述程式碼執行後,單擊頁面中的“切換類名”按鈕,當div元素上存在current類名時,則被移除,否則就新增。可以實現字型背景色的切換效果。
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69996644/viewspace-2781562/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 類操作是什麼意思?jQuery的類操作教程分享jQuery
- jquery庫是什麼意思jQuery
- jquery操作類似tab佈局jQuery
- JQ操作類與JS操作類的區別JS
- JQuery中$(document)是什麼意思有什麼作用jQuery
- 什麼是如何把握波段操作?波段操作的原則是什麼
- redis操作類Redis
- PHP常用操作類實現——資料庫操作類PHP資料庫
- DriveInfo類的基本操作
- FileInfo類的基本操作
- File類的基本操作
- 如何把握波段操作?波段操作的原則是什麼
- 什麼是JavaScript類庫JavaScript
- Androidsqlite操作類AndroidSQLite
- webclient類_操作uriWebclient
- jquery實現的操作class樣式類簡單介紹jQuery
- 什麼是原子操作?Java如何實現原子操作?Java
- 對類物件的方法操作物件
- ITIL是什麼意思?ITIL是什麼?
- 周線波段操作有什麼技巧,什麼是周線波段操作有什麼技巧
- python新式類是什麼Python
- Rust 列舉類是什麼Rust
- HTML是什麼意思?HTML
- Fastboot是什麼意思?ASTboot
- java培訓教程:什麼是匿名內部類?怎樣建立匿名內部類?Java
- Mysql操作方法類MySql
- LocalDate類操作時間LDA
- MySql 資料操作類MySql
- 檔案操作類FileUtil
- 怎麼實現File類的相關操作啊?
- mysql中的“=”是什麼意思MySql
- C#中URL的操作類C#
- C# Array類的基本操作C#
- mysql類似merge的操作MySql
- 什麼是抽象類?怎麼定義?抽象
- 什麼是API介面,具體是什麼意思?API
- 請問【版主】是什麼分類?
- Util應用程式框架公共操作類(八):Lambda表示式公共操作類(二)框架