捐血一袋救人一命

捐血救人

2013年7月25日 星期四

初學jQuery 1-1

下午3:34  ,  No comments

jQuery是什麼

講白了，jQuery就是一堆JavaScript函式庫，美其名叫做Framwork，只是jQuery將JavaScript語法、指令簡化。
網路上可以找到一大堆各式各樣的JavaScript Framework，例如：bootstrap、Kendo、Ext JS、…實在太多了，族繁不及備載…

為什麼要用jQuery

  1. 因為jQuery幫你把你想做的事都預先寫好了函式庫，你只要簡單幾個指令就可做到本來一大串指令才能做到的事。
    例如：讀取/設定表單欄位值、新增/移除表單元素(text、checkbox、radio、select、…)、設定/移除某標籤、類別、ID，來套用CSS樣式、抓取滑鼠鍵盤動作、顯現/隱藏元素、改變元素屬性值，例如座標位置、或大小寬高、設定觸發事件、執行傳值給伺服器端程式、接收伺服器資訊…
  2. 針對不同的瀏覽器、版本處理，讓你設計的網站能相容各家瀏覽器，能呈現一致的效果
  3. 針對不同的硬體平台，也幫你處理的好好的
  4. 常用的特效及功能都幫你處理好了

該如何下手學習 jQuery ？

建議各位使用以下兩個網站來進行學習

  1. http://jsfiddle.net/
  2. http://codepen.io/

jsfiddle.net 在使用前，必須先申請帳號，然後 Create a New Fiddle

就可以開始進行練習，左邊長條形區域，可以讓你選擇你要使用的 jQuery 版本，請直接選最新版

它也提供其他 JavaScript Framworks

右邊四個窗框

HTML CSS/SCSS
JavaScript Result
 
你可以直接在 HTML 窗框中輸入 HTML 語法，不需要輸入 <html><head><title></title><body></body></html>
 
在JavaScript窗框中，就直接輸入 JavaScript/jQuery 程式碼，不需要再輸入<script></script>
 
CSS 的部份就直接填 CSS 語法，如果你想用 SCSS，請在左邊長條形區域的 Languages 裡選擇 SCSS
當你輸入完畢之後，就可以按下，頁面上方的 Run，就可以在 Result 窗框看到結果。
  1. 確定滿意後，你就可以按下 Save 存檔，有任何修改，可以按下 Update更新存檔
  2. 如果你要利用現有的存檔，改寫不同功能的程式，可以按 Fork，它會幫你把現有的內容複製成一份新的
  3. 在Dashboard 可以看到所有你存檔過的網頁，也可以產新全新空白的 Fiddle
  4. 你也可以在網路上搜尋到別人用Fiddle 寫的網頁，如果覺得不錯，或是需要修改，也可以修改，然後存到你的帳號下
  5. 按下 Share，就可以取得分享這個網頁的連結
至於Codepen 用法類似 jsFiddle，
相異處：
  1. jQuery 的部份，你必須自己在 HTML 窗框中寫入引用 CDN 的 jQuery 檔案，例如：
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  2. 可以不用申請帳號，但如果不申請帳號，就不能存到你的帳號下
  3. 這裡不用按Run，一打好就會自動執行

0 意見:

張貼留言

訂閱： 張貼留言 (Atom)