jQuery添加/改變/移除CSS類及判斷是否已經(jīng)存在CSS
更新時間：2014年08月20日 17:51:59 投稿：whsnow
正如標題所言會用到removeClass移除CSS類、addClass添加CSS類、toggleClass添加或者移除CSS類，hasClass判斷是否已經(jīng)存在CSS
改變頁面元素樣式使用Javascript也可實現(xiàn)，但有沒有更簡潔的辦法，答案是肯定的，現(xiàn)在有了jQuery，似乎讓Js代碼瘦身了不少，應(yīng)驗了那句話：“jQuery讓JavaScript代碼變得簡潔！”，言歸正傳，來看jquery如何添加、移除CSS類：
1. removeClass() - 移除CSS類
$("#target").removeClass("oldClass");
//#target 指的是需要移除CSS類的元素的ID
//oldClass 指的是CSS類的名稱
2.addClass() - 添加CSS類
$("#target").addClass("newClass");
//#target 指的是需要添加樣式的元素的ID
//newClass 指的是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類。順便告訴前端開發(fā)的新手，jquery是值得擁有的，有空了好好研究吧。
相關(guān)文章
jQuery通過ajax快速批量提交表單數(shù)據(jù)
這篇文章主要為大家詳細介紹了jQuery通過ajax快速批量提交表單數(shù)據(jù)的相關(guān)資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要為大家詳細介紹了jquery ui sortable拖拽后保存位置的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
jquery ajaxSubmit 異步提交的簡單實現(xiàn)
這篇文章主要介紹了jquery ajaxSubmit 異步提交的簡單實現(xiàn)。需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
jquery 可排列的表實現(xiàn)代碼 在Table標簽上設(shè)置 class="sortable" 且Table要設(shè)置ID.2009-11-11
這篇文章主要介紹了jQuery查找節(jié)點方法,結(jié)合完整實例形式分析了jQuery針對DOM節(jié)點屬性的相關(guān)操作技巧,需要的朋友可以參考下2016-09-09
jQuery基于ajax操作json數(shù)據(jù)簡單示例
這篇文章主要介紹了jQuery基于ajax操作json數(shù)據(jù)的方法,結(jié)合簡單實例形式分析了jQuery的ajax基本使用方法及json數(shù)據(jù)傳輸操作相關(guān)技巧,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了jquery實現(xiàn)保存已選用戶,需要的朋友可以參考下2014-07-07
jquery ajaxfileuplod 上傳文件 essyui laoding 效果【防止重復(fù)上傳文件】
點擊一次上傳, 當(dāng)上傳操作結(jié)束后才能操作界面，實現(xiàn)方式是通過 ajaxfileuplod 上傳文件，需要的朋友參考下吧2018-05-05
JQuery將字符串轉(zhuǎn)為json對象的四種方法
本文主要介紹了JQuery將字符串轉(zhuǎn)為json對象的四種方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
Bootstrap 時間日歷插件bootstrap-datetimepicker配置與應(yīng)用小結(jié)
這篇文章主要介紹了Bootstrap 時間日歷插件bootstrap-datetimepicker配置與應(yīng)用小結(jié)，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05