小弟自修學習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檔案的方式，今天就到這邊下回見
沒有留言:
張貼留言