視覺類型的網頁設計師，應該都有聽過HTML、CSS，更甚至多少會撰寫一些HTML、CSS，但是對於javaScript可能就很頭大了，看著那密密麻麻的程式語法不知道從何入手，但是對於工作的要求?自我進修要求?多少都了解網頁的javaScript是什麼，如何開始開始入門?

芋圓我自己是網頁視覺類型的設計師，再精進學習javaScript跟jQuery、VUE，目的主要是想要獨立開發網頁小遊戲、小工具、APP開發，因此學習歷程會比較清楚視覺偏重的設計師會遇到什麼問題，因此此系列文章適合給非資訊類工程類型的人學習jQuery閱讀。

---

首先要了解網頁構成的三個架構HTML、CSS、javascript分別是什麼：

1.HTML = 就類似人體的骨頭，將整個人拼裝起來。如下範例，單純的用HTML寫出了三個DOM，在DOM內寫字而已，就像是骨架一樣，沒有任何裝飾。

---

2.CSS = 就類似人體的外表皮膚樣式，對網頁增加了外觀的裝飾，如下範例，增加了CSS後，就可以對寫好的HTML進行外觀的設定。

---

3.javaScript = 就類似人體的神經網路，他可以在使用者進入網頁後改變網頁內容，或者使用者對網頁進行了特定動作時，產生反應。

請用以下範例點擊”頭部”看看。

點擊”頭部”後彈出彈跳視窗，這就是javaScript的功用，可以在使用者進入網頁後，或者對網頁做了動作後，產生反饋。

---

那麼jQuery是什麼?

jQuery簡單的說就是簡易版本的javaScript，更適合視覺設計師學習，優點如下。

• jQuery縮短了javaScript的代碼，減少撰寫時間。
• jQuery增加了許多原本javaScript沒有的方法，更方便寫出目的功能。
• jQuery解決了瀏覽器對於javaScript兼容性問題，減少除bug時間，增快開發速度。
• jQuery便利的可擴充性，可以在網路上找到許多外掛，方便增加網頁功能或效果，也可以自行開發外掛都方便。

jQuey就是要你，語法寫的越少，但功能可以做到更多。

jQuery的缺點

但是jQuery也是有缺點的，它最令人詬病的就是網頁效能的問題。在使用jQuery前，因為瀏覽器是無法看懂jQuery的，瀏覽器只看懂javaScript、HTML、CSS，因此要使用jQuery的話，需要在網頁內載入jQuery的Library，jQuery就是javaScript的函式庫。

用白話文一點的說法，對於視覺設計師了解的說法，就是jQuery是javaScript的外掛，網頁載入jQuery後大大簡便了javaScript的撰寫。