iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 21
1
Modern Web

For 前端小幼苗的圖解筆記系列 第 21

[jQuery] 基礎語法起手式

來寫 code 之前,先用比較白話的方式去理解語法。
記住這三件事:

  1. When: 什麼情況下執行?(事件觸發)
  2. Who: 指定誰?(抓取物件)
  3. How: 執行什麼動作?

事件觸發 (event)

指定「當發生什麼事件時」執行……

如下列:當 button 被點擊時,將執行...

$('button').click(function(){
   ...
})

.click() 為一個事件(event)

參考官方文件 events 列表:jQuery-Events


選定物件(對象)

基本語法:

  1. $('selector')

    括號內直接以最熟悉的 CSS 選擇器寫法,就可以指定了!超方便 der
    欸?為什麼說「方便」?來復習一下前N篇提到 JavaScript要抓取 DOM 物件時的語法:

    • document.querySelector('.class')
    • document.getElementById('id')
    • document.getElementsByClassName('class')

    用 jQuery 只要寫這樣:$('.class') 。 真是簡潔清爽啊~

    jQuery 不是一個程式語言,而是一種 JavaScript 函式庫。讓我們能以更精簡、直覺的語法去實作 JavaScript。 (參考 MDN


    來顆栗子:

    • 假設我有 1 篇文章列表,HTML 結構如下:

        <div class="post">
          <p>title1</p>
          <span class="btn-more">ReadMore</span>
          <article>content content ...</article>
        </div>
      

      • 文章(.post)裡面有:
        • 標題(.title)
        • 閱讀更多的觸發按鈕(.btn-more)
        • 預設隱藏的內文區塊(article)
            

    • 以 jQuery 操控:當 .btn-more 被 click 時,將原先隱藏的 article 顯示;若 article 本來就顯示,則需隱藏:

      $('.btn-more').click(function(){
          $('article').slideToggle();
      })
      

    但如果今天我的文章不只一篇呢?

    來看看變化的栗子:

      <div class="post">
        <p>title1</p>
        <span class="btn-more">ReadMore</span>
        <article>content content ...</article>
      </div>
    
      <div class="post">
        <p>title2</p>
        <span class="btn-more">ReadMore</span>
        <article>content content ...</article>
      </div>
    
      <div class="post">
          ...
      </div>
      ...
    

    這時 jQuery 如果保持前顆栗子的寫法,則點任何一篇文章的 btn-more,會將「所有」文章都展開。

    jQuery 應改寫如下:

    $('.btn-more').click(function(){
        $(this).next('article').slideToggle();
    })
    

    改了 $(this) 以及後面接著的 .next(' ')


  2. jQuery 遍歷方法 (Traversing Methods)

    上段 code $('.selector1'). next('selector2 ') 取得selector1的同輩元素selector2。
    jQuery 提供我們更多比 CSS Selector 更多、更彈性的方法去抓取對應的元素。
    完整方法列表傳送門:jQuery-Traversing

  3. $(this)

    在栗子中,$('article') 有很多個,但我只想限定被 click 的那一個 $('.btn-more') 鄰近的$('article') 執行動作,故使用 $(this) 可只抓到觸發該事件( .click() )的那一個 $('article')


>> Codepen Demo

好囉,看懂最基本的語法結構,就可以來實作不少網頁常見的互動效果了~下篇將實作幾個常用範例嘿!


參考資料


個人 Blog: https://eudora.cc/


上一篇
[心得] 轉職工程師的內心戲
下一篇
[jQuery] 實例 Slideshow
系列文
For 前端小幼苗的圖解筆記30

尚未有邦友留言

立即登入留言