JQ的編程之美----選項(xiàng)卡及tab

JQ極好的DOM封裝,豐富的選擇器,藝術(shù)的鏈?zhǔn)骄幊潭际呛懿诲e(cuò)的體驗(yàn),本文將講述幾個(gè)項(xiàng)目中常用的功能模塊和簡(jiǎn)化寫法。

1.全選和反選功能的實(shí)現(xiàn)

功能要求:

(1)選擇點(diǎn) 全選 下面 五項(xiàng)選中。

(2)選擇反選全部不選,如果部分選中,反選就選擇之前未選的。

(3)下面五項(xiàng)選中,全選按鈕自動(dòng)被選中。

樣板

HTML結(jié)構(gòu)

html

JS部分

功能實(shí)現(xiàn)

2.標(biāo)簽頁(yè)tab

很常見的的功能要求就不介紹了,直接上樣板和代碼。

樣板

HTML

html

html

JS部分

js

可以看出js基本都是一兩行完成的,這就是JQ的良好的DOM封裝功能。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 內(nèi)容回顧 JS開發(fā)步驟確定事件(onclick鼠標(biāo)點(diǎn)擊事件,onsubmit表單的提交事件,onload頁(yè)面加載完...
    chcvn閱讀 573評(píng)論 0 3
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,828評(píng)論 25 709
  • 1.幾種基本數(shù)據(jù)類型?復(fù)雜數(shù)據(jù)類型?值類型和引用數(shù)據(jù)類型?堆棧數(shù)據(jù)結(jié)構(gòu)? 基本數(shù)據(jù)類型:Undefined、Nul...
    極樂(lè)君閱讀 5,869評(píng)論 0 106
  • 今天是周一,原本這個(gè)時(shí)候我應(yīng)該在公司,或者在去客戶那的路上。可我在家里寫文章,等會(huì)兒還要演說(shuō)產(chǎn)品。 平??偸窃诖?..
    婷下來(lái)思考閱讀 252評(píng)論 0 0
  • 搞了幾個(gè)小時(shí),都是總結(jié)人家的東西,不正確的地方,歡迎指正。
    vidianzzh閱讀 326評(píng)論 0 1

友情鏈接更多精彩內(nèi)容