筆者是剛入前端行業的時候做過一個稍微大型的jQuery項目,現在以及很久沒用過了,但是感覺應該還會有不少朋友會去維護老的項目,可能還是會接觸到jQuery,是以筆者想了想就還是寫jQuery的文章來幫助更多的朋友來認識jQuery吧。
jQuery的官網網址:https://jquery.com/
其他同類型的:
- prototype.js - 連結:prototypeJS
- YUIjs - 連結:YUIlibrary
- zepto.js - 連結:Zepto.js
- mootools - 連結:MooTools
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.
漢語意思:
jQuery是一個快速,小巧,功能豐富的JavaScript庫。它通過易于使用的API在大量浏覽器中運作,使得HTML文檔周遊和操作,事件處理,動畫和Ajax更加簡單。通過多功能性和可擴充性的結合,jQuery改變了數百萬人編寫JavaScript的方式。
jQuery特征:
- 簡單易用、輕量級
- DOM操作、事件處理、運動效果、ajax操作更友善
- 跨多浏覽器使用(不用再解決浏覽器相容問題)
- 支援CSS選擇器查找元素
- 完善的插件
- 豐富的插件
- 經過嚴格測試的JS庫
- 鍊式程式設計風格
-
隐式疊代
。。。。。
jQuery的代碼下載下傳位址:
https://code.jquery.com/
使用方法:
1.直接引用:
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
2.子產品化
說明:
jQuery是以面向對象的方式設計的,jQuery對象執行個體中通常包裝的是DOM元素對象,jQuery對象是一個類似于數組的對象,可以通過數字下标通路jQuery對象中包裝的DOM元素。
使用jQuery庫時,在全局範圍内,$與jQuery是等價的。
核心:
$() ---- jQuery對象生産工廠 - - 可以傳遞選擇器、DOM元素、函數、html字元串。。。
注意點:
jQuery的ready()與原生JS的window.onload的差別:
ready();
$(document).ready(callback);
- callback函數在頁面DOM結構加載結束後執行
- 有簡寫的方式:$(callback);
- 可多次調用(因為它屬于事件監聽)
- 頁面内容(包括圖像資源)加載完成後執行事件回調函數
- 不可重複調用,重複調用的話後面的會覆寫前面的(因為它是事件綁定)