六角學院 jQuery 課程筆記

發表於 更新於 分類於 Disqus：

本文為觀看用 jQuery 打造互動性網頁動畫效果的紀錄。

jQuery 入門

簡介

jQuery是由JS寫成，兼容許多瀏覽器的函式庫。

用Chorme測試與偵錯

  • 可以用Chrome的console直接寫jquery測試；Chrome是用V8引擎，渲染JS很快。
  • 可以觀察inline css的變化

安裝

  • 下載壓縮版本，節省網頁空間。

slim版本會少一些功能。

載入及使用

1
2
<!--載入-->
<script type="text/javascript" src="位址"></script>
1
2
//使用（等待 HTML DOM 都載入後才執行ready裡的程式碼）
$(document).ready(function() {程式碼});

jQuery插件

選擇器與事件

Click、Show、Hide、Toggle

hide()和css(“display”,“none”)的差異是，hide()會記錄原本的值，使用show()會變回原本的屬性

See the Pen JQ3.13~16 練習 by Lynn Huang (@chiaya710623) on CodePen.

jQuery Quick API Reference

更多動畫效果

Sliding 和 Fading

See the Pen JQ 3.18~19 練習 slide fade by Lynn Huang (@chiaya710623) on CodePen.

Class Attibute、CSS Transitions

See the Pen JQuery 4.20練習 by Lynn Huang (@chiaya710623) on CodePen.

「overflow: hidden」+「transition」組合技

See the Pen JQ 4.21練習 by Lynn Huang (@chiaya710623) on CodePen.

鏈式寫法

method可以相連，會連續產生效果。

Chrome 開發人員工具

可以用chrome開發人員工具sources的部分幫助調整動畫效果。

CSS + jQuery 的動畫效果

.preventDefalt()

.preventDefalt()可以取消預設事件，例如改變瀏覽器大小、點擊、滾輪、送出表單等。

即使寫<a herf="">不會連結到別的畫面，還是有跳到id錨點或瀏覽器頂部的效果，所以可以利用preventDefalt一併取消。

.css()

1
$("p").css({"background-color": "yellow", "font-size": "200%"});

可以用「""」移除css()加上去的屬性

下拉式選單設計

  • 透過toggle類型的method，切換選單顯示與否，也可以同時切換選單的樣式。
  • 在同時有多個選單時，可以用「this」等selector指定作用的對象。
  • 使用setTimeout可以延遲CSS改變的時間，但內部無法直接使用「this」，所以需要存在變數中。
  • 可以利用「event.stopPropagation();」和選擇html，使點擊選單以外的地方時，會將選單收起來。

See the Pen jQuery 5.27 下拉式選單 by Lynn Huang (@chiaya710623) on CodePen.

.delay()

.delay()能延遲後續的動畫效果。

  • show()之類的要寫秒數
  • removeClass等無法使用，可以用setTimeout()

同時用toggleClass跟jQuery的動畫可能會有一些衝突

See the Pen jQuery 5.28 delay練習 by Lynn Huang (@chiaya710623) on CodePen.

字體切換功能：使用css()

See the Pen 5.29 字體切換功能 by Lynn Huang (@chiaya710623) on CodePen.

用range的數值調整字體大小

See the Pen 用range調整字體大小 by Lynn Huang (@chiaya710623) on CodePen.

可關閉廣告設計

See the Pen jQuerfy 5.30關閉廣告 by Lynn Huang (@chiaya710623) on CodePen.

.stop()

如果按很多下動畫，但只按一次stop()，就只會停止當下的動畫，而繼續跑後面的動畫；
使用.stop(true).jumpToEnd(true)可以直接跳到整個動畫最後而停止。

See the Pen jQuery 5.31 .stop() by Lynn Huang (@chiaya710623) on CodePen.

off-Canvas Menu

See the Pen jQuery 5.32 用offCanvas製作選單 by Lynn Huang (@chiaya710623) on CodePen.

Animate.css

  • 元素含有animated和動畫名稱的類別時會發生動畫
  • 利用事件加上類別名稱產生動畫
  • 單純加上事件而不消除的話，會只能點擊一次，可以透過兩種方法解決：

See the Pen jQuery 5.33 Animate.css by Lynn Huang (@chiaya710623) on CodePen.

操控網頁元素

Tree Traversal

  • this：我（觸發函式的元素）
  • 「.~~()」※沒有參數
    • .offsetParent()：從長輩中找positioned（position為relative、absolute或fixed）且最近的一個人
  • 「.~~(FILTER)」
    • .parents()：所有長輩
    • .parent()：父母
    • .siblings()：所有兄弟姊妹
    • .prevAll()：所有兄姊
    • .prev()：前一個兄姊
    • .next()：後一個弟妹
    • .nextAll()：所有弟妹
    • .children()：兒子女兒
    • .find() ：子孫後代們
    • .closest()：從我開始往長輩中找符合選擇器且最近的一個人
  • 「.~~Until(不包含的人, FILTER)」
    • .parentsUntil()：所有長輩但不包含括號的人跟再往上的長輩
    • .prevUntil()：所有兄姊但不包含括號的人跟更大的兄姊
    • .nextUntil()：所有弟妹但不包含括號的人跟更小的弟妹

利用Tree Traversal設計選單

See the Pen jQuery 6.38 QA選單練習 by Lynn Huang (@chiaya710623) on CodePen.

DOM Insertion, Inside

  • .html()：取得html內容
  • .html(程式碼)：以文字或function的回傳值放入html內容
  • .text()：取得文字內容（xml也可以用）
  • .text(程式碼)：以文字或function的回傳值放入文字

See the Pen jQuery 6.40 DOM Insertion, Inside by Lynn Huang (@chiaya710623) on CodePen.

.on()

監聽特定區塊的事件，才能產生效果。

See the Pen jQuery 6.41 on() by Lynn Huang (@chiaya710623) on CodePen.

常用小技巧

General Attributes

.attr()：取得或放入屬性

DOM Removal

.remove()：移除html標籤

真正從畫面中消失，而非隱藏，方便管理畫面中的資料

See the Pen jQuery 7.45 remove() by Lynn Huang (@chiaya710623) on CodePen.

.scrollTop()

See the Pen 7.46 Top anchor滾動效果 by Lynn Huang (@chiaya710623) on CodePen.

Font Awesome

用「[attribute$=value]」之類的選擇器，指定特定連結

See the Pen jQuery 7.47 Font Awesome by Lynn Huang (@chiaya710623) on CodePen.

第三方Plugin

  • 商品圖等等經常是使用小圖，讓使用者可以看大圖。
  • 透過官網裡提供的設定方法，或自己修改css，更改成想要的樣式；要暴力壓過權重可以使用!important。

See the Pen jQuery 7.49~50 Lightbox by Lynn Huang (@chiaya710623) on CodePen.

Swiper

上線的網頁用min的版本比較節省資源

See the Pen jQuery 8.51 Swiper by Lynn Huang (@chiaya710623) on CodePen.

  • 引用jQuery的順序：jQuery本人→第三方插件→自己寫的jQuery
  • 引用CSS的順序：Reset→自己寫的CSS→第三方插件
  • 利用on:…使Swiper生成後，移除複本，避免被Lightbox計算到

See the Pen 8.55 Lightbox + Swiper by Lynn Huang (@chiaya710623) on CodePen.

如何更精進

類別管理撇步

一般的CSS類別名稱就直接取；jQuery中要用到的類別名稱可以加個jq-前綴。

證書

證書