01-JQuery概述

JQuery概述

作者:曾慶林

jQuery由美國人John Resig于2006年初創建,至今已吸引了來自世界各地的眾多javascript高手加入其team。

jQuery是一個快速的,簡潔的javaScript庫,使用戶能更方便地處理HTML documents、events、實現動畫效果,并且方便地為網站提供AJAX交互。

jQuery能夠使用戶的html頁保持代碼和html內容分離,也就是說,不用再在html里面插入一堆js來調用命令了,只需定義id即可。

jQuery是一個優秀的JavaScript庫,它憑借簡潔的語法和跨平臺的兼容性,極大地簡化了JavaScript開發人員遍歷HTML文檔,操作DOM、處理事件、執行動畫和開發Ajax的操作。

2006 年 8 月發布了 jQuery1.0,第一個穩定版本,具有對 CSS 選擇符、事件處理和 Ajax 交互的支持
j現在最新的版本是jQuery3.0

jQuery 優點

能夠使程序員從設計和書寫繁雜的JS應用中解脫出來,將關注點轉向功能需求而非實現細節上,從而提高項目的開發速度。

  1. 像 CSS 那樣訪問和操作 DOM
  2. 修改 CSS 控制頁面外觀
  3. 簡化 JavaScript 代碼操作
  4. 事件處理更加容易
  5. 各種動畫效果使用方便
  6. 讓 Ajax 技術更加完美
  7. 基于 jQuery 大量插件
  8. 自行擴展功能插件

jQuery 最大的優勢,就是特別的方便。比如模仿 CSS 獲取 DOM,比原生的 JavaScript 要方便太多。并且在多個 CSS 設置上的集中處理非常舒服,而最常用的 CSS 功能又封裝到 單獨的方法,感覺非常有心 最重要的是 jQuery 的代碼兼容性非常好,你不需要總是頭疼 著考慮不同瀏覽器的兼容問題。

jQuery2.0以上的版本不兼容IE8

主流的JavaScript框架

  • Angular 誕生于2009年,由Misko Hevery 等人創建,后為Google所收購。是一款優秀的前端JS框架,已經被用于Google的多款產品當中。AngularJS有著諸多特性,最為核心的是:MVC、模塊化、自動化雙向數據綁定、語義化標簽、依賴注入等等。
  • React React 起源于 Facebook 的內部項目,因為該公司對市場上所有 JavaScript MVC 框架,都不滿意,就決定自己寫一套,用來架設Instagram 的網站。做出來以后,發現這套東西很好用,就在2013年5月開源了
  • Vue 作者(尤雨溪) 是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是,Vue 采用自底向上增量開發的設計。Vue 的核心庫只關注視圖層,并且非常容易學習,非常容易與其它庫或已有項目整合。另一方面,Vue 完全有能力驅動采用單文件組件和Vue生態系統支持的庫開發的復雜單頁應用
  • Backbone為復雜Javascript應用程序提供模型(models)、集合(collections)、視圖(views)的結構。其中模型用于綁定鍵值數據和自定義事件;集合附有可枚舉函數的豐富API; 視圖可以聲明事件處理函數,并通過RESTful JSON接口連接到應用程序。
  • Underscore是一個 JavaScript 工具庫,它提供了一整套函數式編程的實用功能,但是沒有擴展任何 JavaScript 內置對象。 他解決了這個問題:“如果我面對一個空白的 HTML 頁面,并希望立即開始工作,我需要什么?” 他彌補了 jQuery 沒有實現的功能,同時又是 Backbone 必不可少的部分。
  • D3.js 數據可視化和圖表是web應用程序的一種常規需求。當涉及到任何數據操作和可視化時,D3.js 就是事實上的標準。它是 GitHub 上最受歡迎的項目之一,并被數百個組織機構所采用。大量的圖形、圖標和可視化庫都是構件于 D3 之上的。
    D3 讓你可以操作任何來源的數據文檔,并將數據進行轉換后應用到 DOM、SVG 和 CSS上。D3 專注于現代的 web 標準,以及確保你可以不受到任何像 Flash 或者 Silverlight 這樣的專有格式的限制。
  • YUI,是雅虎公司開發的一套完備的、擴展性良好的富交互網頁工具集。
  • Prototype,是最早成型的 JavaScript 庫之一,對 JavaScript 內置對象做了大量的擴展。
  • Dojo,Dojo 強大之處在于提供了其他庫沒有的功能。離線存儲、圖標組件等等。
  • Mootools,輕量、簡潔、模塊化和面向對象的 JavaScript 框架。
  • ExtJS,簡稱 Ext,原本是對 YUI 的一個擴展,主要創建前端用戶界面。(付費的)

jquery 基本結構

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/jquery-1.10.1.js" ></script>
        <script>
            $(function(){
                 //所有的js操作都放在這個 方法里面        
            })
        </script>
    </head>
    <body>
        <h1>內容</h1>
    </body>
</html>

一個頁面只要引用 一個 jquery-*.js文件即可

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容