天天看點

jQuery的介紹

筆者是剛入前端行業的時候做過一個稍微大型的jQuery項目,現在以及很久沒用過了,但是感覺應該還會有不少朋友會去維護老的項目,可能還是會接觸到jQuery,是以筆者想了想就還是寫jQuery的文章來幫助更多的朋友來認識jQuery吧。

jQuery的官網網址:https://jquery.com/

其他同類型的:

  1. prototype.js - 連結:prototypeJS
  2. YUIjs - 連結:YUIlibrary
  3. zepto.js - 連結:Zepto.js
  4. 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特征:

  1. 簡單易用、輕量級
  2. DOM操作、事件處理、運動效果、ajax操作更友善
  3. 跨多浏覽器使用(不用再解決浏覽器相容問題)
  4. 支援CSS選擇器查找元素
  5. 完善的插件
  6. 豐富的插件
  7. 經過嚴格測試的JS庫
  8. 鍊式程式設計風格
  9. 隐式疊代

    。。。。。

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);
  • 可多次調用(因為它屬于事件監聽)
  • 頁面内容(包括圖像資源)加載完成後執行事件回調函數
  • 不可重複調用,重複調用的話後面的會覆寫前面的(因為它是事件綁定)