jQuery 添加/移除CSS類實現(xiàn)代碼
更新時間：2010年02月11日 12:25:14 作者：
在網(wǎng)頁設(shè)計中，我們常常要使用Javascript來改變頁面元素的樣式。
其中一種辦法是改變頁面元素的CSS類(Class)，這在傳統(tǒng)的Javascript里，我們通常是通過處理HTML Dom的classname特性來實現(xiàn)的；而jQuery里提供三種方法來實現(xiàn)這個功能，雖然它們和傳統(tǒng)方法的思想相通，但是卻節(jié)省了許多代碼。還是那句話 - “jQuery讓JavaScript代碼變得簡潔！”
1. addClass() - 添加CSS類
$("#target").addClass("newClass");
//#target 指的是需要添加樣式的元素的ID
//newClass 指的是CSS類的名稱
2. removeClass() - 移除CSS類
$("#target").removeClass("oldClass");
//#target 指的是需要移除CSS類的元素的ID
//oldClass 指的是CSS類的名稱
3. toggleClass() - 添加或者移除CSS類：如果CSS類已經(jīng)存在，它將被移除；相反，如果CSS類不存在，它將被加上。
$("#target").toggleClass("newClass")
//如果ID為“target”的元素已經(jīng)定義了CSS樣式，它將被移除；
//反之，CSS類”newClass“將被賦給該ID。
4.hasClass("className") - 判斷是否已經(jīng)存在CSS
在實際運用中，我們常常先定義好這些CSS類，然后通過Javascript事件觸發(fā)（比如點擊某個鏈接）來改變頁面元素樣式。此外，jQuery還提供一種方法 hasClass("className")，用來判斷某個元素是否已經(jīng)被賦予某個CSS類。
1. addClass() - 添加CSS類
復(fù)制代碼 代碼如下:
$("#target").addClass("newClass");
//#target 指的是需要添加樣式的元素的ID
//newClass 指的是CSS類的名稱
2. removeClass() - 移除CSS類
復(fù)制代碼 代碼如下:
$("#target").removeClass("oldClass");
//#target 指的是需要移除CSS類的元素的ID
//oldClass 指的是CSS類的名稱
3. toggleClass() - 添加或者移除CSS類：如果CSS類已經(jīng)存在，它將被移除；相反，如果CSS類不存在，它將被加上。
復(fù)制代碼 代碼如下:
$("#target").toggleClass("newClass")
//如果ID為“target”的元素已經(jīng)定義了CSS樣式，它將被移除；
//反之，CSS類”newClass“將被賦給該ID。
4.hasClass("className") - 判斷是否已經(jīng)存在CSS
在實際運用中，我們常常先定義好這些CSS類，然后通過Javascript事件觸發(fā)（比如點擊某個鏈接）來改變頁面元素樣式。此外，jQuery還提供一種方法 hasClass("className")，用來判斷某個元素是否已經(jīng)被賦予某個CSS類。
相關(guān)文章
這些jQuery插件同樣可以實現(xiàn)圖片和內(nèi)容的滑塊效果。下面的這些jQuery插件的Demo網(wǎng)站我都測試了一些，都可以正常訪問，我相信那么多款插件中總會有你喜歡的2014-12-12
本文給大家分享的是個人在使用jQuery的過程中總結(jié)的5點比較重要的知識點，這里推薦給小伙伴們，有需要的童鞋可以參考下。2015-05-05
Jquery 最近瀏覽過的商品的功能實現(xiàn)代碼，需要的朋友可以參考下。2010-05-05
本文給大家匯總介紹了幾個常用的jquery實現(xiàn)簡易的移動端驗證表單，非常的實用，有需要的小伙伴可以進來參考下。2015-11-11
有時候需要設(shè)置iframe的src屬性，下面是基于jquery的實現(xiàn)代碼。2010-11-11
這篇文章主要介紹了jquery多級樹形下拉菜單的實例代碼，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-07-07
jQuery 行背景顏色的交替顯示(隔行變色)實現(xiàn)代碼
主要是利用了jquery的attr為行添加樣式來實現(xiàn)的，具體的代碼如下。2009-12-12
本篇文章介紹10款新鮮、有用的jQuery內(nèi)容導(dǎo)航插件，肯定是免費的了，希望對你有幫助。2011-09-09
jquery?追加元素append、prepend、before、after用法與區(qū)別分析
在jquery中append、prepend、before、after方法是對數(shù)據(jù)元素節(jié)點的操作系列方法了，這些方法大家了解嗎？如果不了解就可以和小編來看看它們用法2016-12-12
這篇文章主要為大家詳細介紹了基于jquery實現(xiàn)五子棋游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05