/* syntax highlight */ /* end of syntax highlight */

2012年2月9日 星期四

jQuery 筆記 (五) - Hello jQuery

Bookmark and Share

image

上網無意間看到一個免費的 jQuery 線上課程

30 Days to Learn jQuery:http://tutsplus.com/course/30-days-to-learn-jquery/

主要是分 30 次的影片,引導初學者進入 jQuery 的世界

剛好我就是初學者,就來試試看吧,順便把觀念記在 blog 上面

只不過 30 天有點困難,畢竟不是每天都有空阿,希望 45 天內可以把它 k 完 :D

 

第一天的課程連結:

Hello jQuery :http://tutsplus.com/lesson/hello-jquery/

 

第一天的影片主要是在講如何安裝並 run 到 Hello world 的流程

剛開始先教下載的位置,先到官網:http://jquery.com/

 

image

右邊有下載的位置,主要有分

(1) Production (31KB):程式碼無法閱讀,但是檔案很小,適合放在 server 上使用

(2) Development (229KB):程式碼可閱讀,適合開發時使用

 

 

選擇 Development 後,按下 download ,會帶到以下頁面

image

按右鍵另存新檔 (目前版本為 1.7.1)

image

 

再來,可另開一個資料夾,把存下來的 jQuery library 放進去

並另開一個 hello.html 的檔案

image

 

首先在 hello.html 裡面鍵入以下程式碼

雙擊後可在瀏覽器看到以下畫面

image

 

說明程式的觀念:

(1) 第一步驟先在 </body> 前面插入 <script src="jquery-1.7.1.js"></script> ,原因是可以先載入 body 的內容,最後再導入 jQuery,網頁讀取速度較快

(2) var x = jQuery('ul li'); 的意思是說,用 jQuery Selector 進到 DOM 裡面,找尋所有 <ul> 下面的 <li>元素,並丟給變數 x

(3) <style>ul li { color:red};</style> 則是 CSS

(4) console.log(x); 則是利用 console 印出結果,需配合 firebug 之類的程式觀看

如果有裝 firebug ,可在 console 看到

image

 

再來,可將程式改成下面

則發現 jQuery 有快速修改 css 的能力,被選中的字都變成綠色的了,就是因為 jquery 當中 .css 的能力

image

 

再進一步,我們可以將程式碼改成如下:

這一次套用的觀念是 addclass 的概念,我們可以利用 jQuery 直接將某個 css class 套用在畫面元素上面,非常方便

 

再來,其實 jQuery 可以簡寫為 $

例如 jQuery('ul li').addClass('filter'); 可以寫成 $jQuery('ul li').addClass('filter');

 

然後有提到 CDN (Content Delivery Network ),即把程式碼放在網路上,使用者只要讀過一次之後,之後到其他有下載過這段程式碼的網站,就不用 re-download,以 google 為例

請先到這個網站:http://code.google.com/intl/zh-TW/apis/libraries/devguide.html#jquery

選到這個區域

image

最後面是 path : jquery.min.js 的就是程式碼無法閱讀但檔案小的版本

而 path(u) : jquery 則是一般版本,可以先把以下網址 copy 下來

https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js

貼到程式碼中,並將以下此行

<script src="jquery-1.7.1.js"></script>

 

取代為

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>

這樣也可以抓到 library ,但是要注意如果沒有網路的話…使用者將無法看到此份 jquery

所以要小心使用

 

第一天的內容大概是這樣,後續有看再繼續紀錄!

0 意見:

張貼留言

Related Posts Plugin for WordPress, Blogger...