通過(guò)jquery toggleClass()屬性制作文章段落更改背景顏色

更新時(shí)間：2018年05月21日 14:54:15 投稿：mrr

jQuery制作文章段落更改背景顏色屬性jquery toggleClass()屬性。文中給大家附實(shí)例代碼和源碼，感興趣的朋友參考下吧

定義和用法

toggleClass() 方法對(duì)添加和移除被選元素的一個(gè)或多個(gè)類(lèi)進(jìn)行切換。

該方法檢查每個(gè)元素中指定的類(lèi)。如果不存在則添加類(lèi)，如果已設(shè)置則刪除之。這就是所謂的切換效果。

然而，通過(guò)使用 "switch" 參數(shù)，您能夠規(guī)定只刪除或只添加類(lèi)。

語(yǔ)法

$(selector).toggleClass(classname,function(index,currentclass),switch)

參數(shù)	描述
classname	必需。規(guī)定添加或移除的一個(gè)或多個(gè)類(lèi)名。如需規(guī)定若干個(gè)類(lèi)，請(qǐng)使用空格分隔類(lèi)名。
function(index,currentclass)	可選。規(guī)定返回需要添加/刪除的一個(gè)或多個(gè)類(lèi)名的函數(shù)。 index - 返回集合中元素的 index 位置。 currentclass - 返回被選元素的當(dāng)前類(lèi)名。
switch	可選。布爾值，規(guī)定是否僅僅添加（true）或移除（false）類(lèi)。

用法簡(jiǎn)介：

jQuery制作文章段落更改背景顏色屬性jquery toggleClass()屬性。

效果圖如下所示：

效果展示源碼下載

文件引用：

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("input").click(function(){
  $("p").toggleClass("main");
 });
});
</script>

總結(jié)

以上所述是小編給大家介紹的通過(guò)jquery toggleClass()屬性制作文章段落更改背景顏色，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

擴(kuò)展jQuery 鍵盤(pán)事件的幾個(gè)基本方法
擴(kuò)展jQuery 鍵盤(pán)事件的幾個(gè)基本方法(練習(xí)jQuery插件擴(kuò)展)
2009-10-10
jQuery的12招常用技巧分享
jquery是輕量級(jí)的js庫(kù)(壓縮后只有21k) ，它兼容CSS3，還兼容各種瀏覽器。由于jQuery對(duì)象本身是一個(gè)集合。所以如果jQuery對(duì)象要轉(zhuǎn)換為dom對(duì)象則必須取出其中的某一項(xiàng)，一般可通過(guò)索引取出。
2011-08-08
js jquery獲取當(dāng)前元素的兄弟級(jí) 上一個(gè) 下一個(gè)元素
js獲取方法要比jq的方法麻煩的多，主要是因?yàn)镕F瀏覽器，因?yàn)镕F瀏覽器也會(huì)把換行當(dāng)作dom元素，下面跟著小編一起來(lái)學(xué)習(xí)js jquery獲取當(dāng)前元素的兄弟級(jí) 上一個(gè) 下一個(gè)元素的，需要的朋友一起來(lái)學(xué)習(xí)吧
2015-09-09
jQuery事件綁定用法詳解(附bind和live的區(qū)別)
這篇文章主要介紹了jQuery事件綁定用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了jQuery事件綁定的實(shí)現(xiàn)原理與相關(guān)注意事項(xiàng),并附帶了相關(guān)綁定方法的使用說(shuō)明,重點(diǎn)介紹了bind和live的區(qū)別,需要的朋友可以參考下
2016-01-01
jquery插件制作提示框插件實(shí)現(xiàn)代碼
今天我們介紹的是提示框插件tooltip的制作，其中還會(huì)介紹到自定義選擇器插件的開(kāi)發(fā)
2012-08-08
得到j(luò)Query detach()后節(jié)點(diǎn)中的某個(gè)值實(shí)現(xiàn)代碼
需要jQuery -detach 后的dom 結(jié)構(gòu)或某個(gè)值，如何獲取到呢？一直困惑著我們，不過(guò)本文將為大家解開(kāi)疑惑，感興趣的朋友可以了解下，或許本文對(duì)你有所幫助
2013-02-02
jquery select(列表)的操作（取值/賦值）
jquery對(duì)<select>的操作比較麻煩，我把常用的收集如下
2011-03-03
jquery 插件學(xué)習(xí)（二）
除了全局函數(shù)外，jquery中的大多數(shù)插件都是通過(guò)jquery對(duì)象的方法提供的
2012-08-08
jquery.Jwin.js 基于jquery的彈出層插件代碼
測(cè)試頁(yè)面需要引用jquery的js文件插件文件jquery.Jwin.js jquery.Jwin插件的使用參數(shù)都有詳細(xì)說(shuō)明
2012-05-05
jQuery獲得內(nèi)容和屬性示例代碼
獲得內(nèi)容 - text()、html() 以及 val()，attr()方法用于獲取屬性值，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下
2014-01-01