Pages

系列文章

2015/01/09

【JQuery】《第一回》什麼是JQuery?該如何使用JQuery?


小弟自修學習JQuer也有一段時間了
因此透過Blogger來做一個學習記錄,跟大家分享我的學習成果
如果大家再瀏覽這一系列文章有疑問或有任何建議,也希望大家多多指教
未來有機會再將這些學習歷程整理成電子書供大家自修學習使用~!

什麼是JQuery?

有很多朋友在一開始學習的時候會把JavaScript跟JQuery當成是不一樣的東西
所以在開始學習之前先讓我們來了解一下JavaScript跟JQuery之間的關係吧~!
官方定義的JQuery
原文:

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

GOOGLE翻譯版:

jQuery是一個快速,小巧,功能豐富的JavaScript庫。這使事情變得像HTML文檔遍歷和操作,事件處理,動畫和Ajax和一個易於使用的API跨多種瀏覽器的工作原理非常簡單。隨著通用性和可擴展性的結合,jQuery的已經改變了數以百萬計的人寫的JavaScript。

從上面的敘述我們可以了解到JavaScript跟JQuery之間
絕對不是毫無關係,反而是關係甚密
這也是會什麼很多書上都會建議要有JavaScript基礎在學JQuery會比較好上手
不過前提是你有去買書來看才會看到這一段話
如果你跟我一樣是在網路上Google自修的話,其實在一開始都會有點混亂

JQuery就是JavaScript的函示庫,它將原本複雜的JavaScript Code
變得更簡單、更簡短,而且包含許多寫好的套件功能,縮短了開發時間
重複貼上程式碼的時間還有文件的檔案大小,就是這樣各位鄉親有沒有了解~!

最後讓我們來看看JQuery有哪些特色(以下特色都是自己的經驗)
JQuery特點

元素選擇器 : 不用再像JavaScript一樣要打很多行程式才能找到元素
動態更改CSS樣式 :JavaScript會因為不同瀏覽器而對CSS控制有所不同,JQuery則提供了跨瀏覽器的標準
動態更改元素 :JavaScript變更元素屬性或文字內容要打比較多的Code,而JQuery則是比較簡短
事件回應控制 :JQuery的事件函式比較簡短好記,比較不需要考慮瀏覽器相容性問題
函式庫 :JQuery將一些JavaScript常用的function都做成函式庫,只需要呼叫函式就可以直接使用
實現即時更新/通訊的功能 :JQuery可以透過AJAX進行頁面局部及時刷新的動作

如果你想要了解更多JQuery的特色那就到Google搜尋關鍵字「jquery 特點」看看吧
希望上述內容能讓大家更了解JQuery,如果有看不懂或發現我有打錯的話也可以跟我說喔

該如何使用JQuery?



接著要來介紹該如何使用JQuery的library了
首先我們要先到官網下載JQuery的library的套件

JQuery官網路徑 : http://jquery.com/

進入官網後按下下圖中的 Download JQuery V1.11.2 or V2.1.3
然後看你要下載哪一個版本就抓哪一個
接著要建立一個HTML檔案並將下載回來的JQuery library載入至HTML檔案中
並且寫一個簡單的function做測試,詳情請參考下面Code中的註解
快速建立簡單的純HTML檔

1.先在桌面按滑鼠右鍵→新增→文字文件
2.檔名取為index.txt
3.開啟index.txt檔並將下面的Code寫入檔案中並且存檔
4.更改副檔名為.html變成index.html即可變成網頁檔案
<html>
  <head>
    
    <script type="text/javascript" src="jquery-1.11.1.js"></script>
    
    <script>
      //頁面載入後執行
      $(function(){
        alert("123");//跳出提示視窗並顯示「123」
      });
    </script>
  </head>
  <body></body>
</html>

溫馨小提醒

如果你的JQuery library檔案跟index.html不是在同一層目錄記得要修改script的src屬性如果沒有修改可能會造成錯誤唷~!

src屬性 : 指向存放JQuery library檔案的位置路徑

最後顯示結果如下圖

以上就是基本使用JQuery檔案的方式,今天就到這邊下回見




沒有留言:

張貼留言