jQuery-給視覺設計師的語法教學-1-基本認識jQuery

  •  
  •  
  •  
  •  

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

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

Welcome to wanchen travel blog website : )
歡迎來到玩轉芋圓部落格網站,最新豐富的美食餐廳與飯店心得,讓你熟知旅行大小事,跟著玩轉芋圓旅遊去!

首先要了解網頁構成的三個架構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的撰寫

玩轉芋圓讀者優惠專區

★喜歡玩轉芋圓旅遊手札嗎?歡迎下載APP 把部落格文章帶著走!

玩轉芋圓app

★信用卡推薦
台新Richart開戶優惠 限量健身包連結登記或輸入專屬代碼「PIXNET111」

★wanchen畫的line貼圖
實用橘貓貼圖 Orange cat オレンジ ねこ→前往貼圖

★預訂門票行程推薦klook

★買藥妝必領 2020日本藥妝家電優惠
松本清藥妝品項齊全藥妝店
日本札幌藥妝1萬日圓折500日圓、3萬日圓折2000日圓
唐吉訶德折價券滿額免稅享折扣
Japantaxi 「88DFB5」日本計程車折價券 ¥500jpy
Amazon 日本亞馬遜 挖寶購物好好買
BicCamera優惠券 日本家電電器折價券
樂天銀座優惠券 樂天免稅店折價券

★飯店訂房
agoda限定優惠台灣人高使用率訂房網站
booking中文訂房全球旅遊玩透透
relux 新用戶領取好友邀請9折優惠券
stay japan 預訂合法日本民宿
airbnb優惠 領1100旅遊金

★機票預訂
skyscanner機票比價快速好用找便宜機票

★其他優惠
日本電器家電優惠券 EDION免稅+93折優惠
餐廳訂位eztable 新會員優惠 抽紅包壽星優惠餐廳
Willer Travel預訂日本高速巴士車票
otomo travel日本導遊預約「MLKLX0PR」 折扣300元
GLOBAL WiFi上網分享器租借8折

★外送叫餐app/台北叫車
foodpanda外送優惠 輸入手機號碼領優惠
ubereats優惠「eats-7vh9sk」2次NT$100元折扣
uber優惠「wanchen120」首次搭乘uber省120


  •  
  •  
  •  
  •  

One thought on “jQuery-給視覺設計師的語法教學-1-基本認識jQuery

Add yours

發表迴響

Up ↑