jQuery 函式

jQuery()，也可以寫成$()，兩者相同，jQuery 的起手式，也是最重要的函式核心，專門用來創建 jQuery 物件的加工廠，回傳的是特化過後 jQuery 物件。它不是一般我們認知的 JavaScript 物件，它可能會是一或多個的 DOM 元素集合。

jQuery 介紹

jQuery 的作者是 John Resig，橫空出世於 2006 年 1 月瀏覽器紛爭的戰場，當時各家瀏覽器對設計者來說相容是個難題，jQuery 解決了這方面的問題。它是 JavaScript 的函式庫，封裝並簡化了 JavaScript 的功能，可以輕鬆找出文件元素 DOM、新增元素內容、編輯 HTML 與 CSS 屬性，定義事件處理，或是加上動畫效果等等，它使得操作元素變得容易，而且，它也有完善的 Ajax 工具，還有一般用途的函式方法用來處理物件與陣列。這些功能對於當時網站開發都帶來相當的便利，因此 jQuery 很快成為一個時代很重要的函式庫，而如其名稱所示，jQuery 它專注於 Query（查詢）及使用各種功能。

框架介紹

Component UI

Bootstrap 是 Component UI 型的 CSS Framework，使用過 Bootstrap 都知道它擁有強大的網格系統與 Components UI 提供設計者使用，另外也有貼心的 Utility 工具調整內容、寬度、距離等等，但在操作切版的自由靈活度上稍嫌不足，多組件設計的方便性讓製作出的版型常常長得很像，不過，它之所以成為全球著名的 CSS Framework 之一，設計的核心就是希望被普遍大眾接受且容易使用，它確實做到了，使用組件來設計 RWD 版型，Bootstrap 非常快速。

偽類與偽元素

偽類（Pseudo-classes ）與偽元素（Pseudo-element）兩者都是 CSS 為了擴張變化性而衍生出的選擇器，偽類以元素狀態、結構為主要的選擇方式：

動畫 - Animation

「轉場」與「動畫」可說是兄弟，兩人分工負責了 CSS 世界的動態效果。轉場可以在觸發狀態時，讓起始、結束狀態兩組樣式產生一組簡單的補間動畫，它是容易且強大的效果，但若要製作較為複雜的效果時，這就不是轉場的工作囉，因為它屬於一次性的動畫，例如黑色與白色的補間動畫。若是要黑色變成黃色，再變成白色，再變其他顏色，這時候就是動畫（animation）登場的時候。

轉場 - transition

轉場指的是從一個初始狀態到另一個結束狀態，兩種狀態樣式轉變補間的過程。它通常發生於與使用者的互動，但也有可能是程式改變了 class、ID 或使用了其他狀態。當觸發條件發生，瀏覽器會套用轉場效果，在兩種樣式間漸進發生。最好的例子就是 :hover 偽類，也就是當滑鼠移到元素時所發生的狀態改變。無論轉場或動畫的使用，關係到與使用者的互動感受，因此 duration 時間拿捏非常重要。

變形 - transform

transform（變形）、translate（平移）、transition（轉場） 是剛學習 CSS 常搞混的三個名詞，transform 是改變盒子的形狀與行為，translate 是 transform 的其中一個函式，而 transition 指的是樣式屬性兩種狀態的變化。變形（transform）的出現在於早期網頁設計只有四四方方的矩形所組合成版型，而隨著人們的想法，開始有人覺得如果不再是矩形呢？有了想打破這矩形的限制，transform 就這樣誕生了。

變形有四個函式，分別是平移（translate）、縮放（scale）、旋轉（rotate）、歪斜（skew）。

定位 - position

定位（position）在 CSS 扮演了指定元素盒在視埠（瀏覽器視窗）的某個位置，它會根據某個元素或是父元素為基準而進行偏移。常用的定位分為相對定位（relative）、絕對定位（absolute）以及固定定位（fixed）。其中，相對定位、絕對定位之間的關係，是必須要了解的重點，也就是它們在元素中所扮演的腳色，尤其是以父元素為基準時兩者關係所產生的偏移。定位有著別人沒有的特性，當元素進行定位後，元素會升至「定位層」（position-level），它是比正常流向（normal-flow）與浮動層（float-level）還高的 z 軸層級（z-index）。

浮動 - float

浮動（float）屬性的初衷是希望用來設計「文繞圖」，但是，技術始終來自創意，網頁設計師天馬行空的想法，讓 float 屬性有了新的出路，設計師發現原來浮動厲害的很，可以用來佈局設計版型，也因此一股「浮動流」旋風式颳起，在彈性盒（flex box）穩定前，浮動是排版布局的好幫手。

盒模型 - Box Model

CSS 在視覺的呈現是創意無限，就我所知，沒有一本書可以涵蓋介紹完他的屬性與效果間的組合，在這些組合技上，CSS 有時是很容易接近的朋友，但有時會鬧鬧脾氣，需要一段時間了解他。而本篇主題盒模型（Box-Model）的是其中一。

在 CSS 的世界裡，是由各式各樣的盒子組成，而這些盒子指的是網頁最基礎的 HTML 元素，也就是說，當我們建立一個 HTML 元素其實等於建立一個 CSS 盒子，一個矩形的盒子，他通常被稱為元素盒（element box）。每個元素盒的中心是內容區域（content area），也就是放文字、圖片的區域，內容區域的周圍還有內距（padding）、邊框（border）、外距（margin），由這些屬性來形成盒模型。