热门问题
时间线
聊天
视角

jQuery

JavaScript函式庫 来自维基百科,自由的百科全书

Remove ads

jQuery是一套跨瀏覽器JavaScript函式庫,用於簡化HTML與JavaScript之間的操作。[2]約翰·雷西格John Resig)在2006年1月的BarCamp NYC上釋出了第一個版本。目前由Dave Methvin領導的團隊進行開發。全球前10,000個訪問最高的網站中,有65%使用了jQuery,是曾經最受歡迎的JavaScript函式庫[3][4]

事实速览 原作者, 開發者 ...
Remove ads

簡介

jQuery是開源軟件,使用MIT許可證授權。[5] jQuery的語法設計使得許多操作變得容易,如操作文件(document)、選擇文檔對象模型DOM)元素、創建動畫效果、處理事件、以及開發Ajax程序。jQuery也提供了給開發人員在其上創建插件的能力。這使開發人員可以對底層交互與動畫、高級效果和高級主題化的組件進行抽象化。模塊化的方式使jQuery函數庫能夠創建功能強大的動態網頁以及網絡應用程序

微軟諾基亞已宣布在他們的平台上綁定jQuery。[6]微軟最初在Visual Studio中集成了jQuery[7]以便在微軟自己的ASP.NET AJAX框架和ASP.NET MVC Framework中使用,而諾基亞則在他的Web運行時組件開發平台中集成了jQuery[8]MediaWiki自從1.16版本後也開始使用jQuery[9]

jQuery 1.3版以後,引入全新的層疊樣式表CSS)選擇器引擎Sizzle。[10]同時不再提供Packed版本,因為解壓縮所消耗的時間,遠大於所節省的下載時間,且不利於除錯,且已有Google AJAX Libraries API等公開站台提供jQuery的js的引用服務,故Packed版本原本的優點已蕩然無存。

Remove ads

特色

jQuery有下列特色:

  • 使用多瀏覽器開源選擇器引擎Sizzle(jQuery項目的衍生產品)進行DOM元素選擇[11]
  • 基於CSS選擇器的DOM操作,使用元素的名稱和屬性(如id和class)作為選擇DOM中節點的條件
  • 事件
  • 特效和動畫
  • Ajax
  • Deferred和Promise對象來控制異步處理
  • JSON解析
  • 通過插件擴展
  • 工具函數,如特徵檢測
  • 現代瀏覽器中原生的兼容性方法,但對於舊版瀏覽器需要後備(fallback)方法,比如inArray()each()
  • 多瀏覽器(不要與跨瀏覽器混淆)支持

瀏覽器支持

jQuery 3.0及以後版本支持「當前−1版本」 的FirefoxChromeSafariEdge(就是說當前穩定版本以及當前穩定版本之前的一個版本),另外還支持Internet Explorer 9以後的IE版本。在移動端支持iOS 7+和Android 4.0+。[12]

用法

加載jQuery

jQuery庫是包含所有公共DOM、事件、效果和Ajax函數的一個JavaScript文件。可以通過鏈接到本地副本或公共服務器提供的許多副本之一把jQuery包含在網頁中。jQuery有一個由MaxCDN託管的內容傳遞網路(CDN)。[13] Google和微軟也託管了jQuery。[14][15]

<script src="jquery.js"></script>

也可以直接從CDN中加載jQuery:

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
Remove ads

使用風格

jQuery有兩種使用風格:

  • 通過jQuery對象的工廠方法$函數。這些函數通常稱作命令,使用方法鏈進行調用,因為它們都返回jQuery對象。
  • 通過$.開頭的函數。這些是工具函數,它們不直接作用於jQuery對象。

在jQuery中訪問和操作多個DOM節點通常從用CSS選擇器字符串調用$函數開始。這會返回一個引用HTML頁面中所有匹配元素的jQuery對象。比如$("div.test"),會返回一個擁有class test的所有div元素的jQuery對象。可以通過調用返回的jQuery對象或節點本身的方法來操作這個節點集。

無衝突模式

jQuery還有.noConflict()模式,這會釋放對$的控制。如果其他的庫也使用$作為標識符的話,這個模式會比較有用。在無衝突模式下,開發人員可以使用jQuery替代$而不會缺失任何功能。[16]

典型的代碼開頭

通常,jQuery是通過將初始化代碼和事件處理函數放入$(handler)中來使用的。當瀏覽器構建DOM並發送加載事件時觸發。

$(function() {
    // 这个匿名函数是页面加载完成时要调用的函数。
    // jQuery代码,事件处理回调写在这里。
});

或者

$(fn); // 在其他地方定义的名为fn的函数,是页面加载完成时要调用的函数。

或者我們也可以使用

$(document).ready(function() {
    // 这是页面完成加载时要调用的函数。
    // jQuery代码,事件处理回调写在这里。
});

由於歷史原因,$(document).ready(callback)已經成為DOM就緒時運行代碼的實質性標誌。但jQuery 3.0以後,鼓勵開發人員使用更簡短的$(handler)標誌。[17]

對尚未加載的元素進行事件處理的回調函數可以作為匿名函數.ready()內部註冊。這些事件處理函數只會在觸發事件時被調用。例如,下面的代碼添加了一個,用於在img圖像元素上單擊鼠標事件的處理函數。

$(function() {
    $('img').on('click', function() {
        // 处理页面中任何img元素上的click事件。
    });
});
Remove ads

鏈接(Chaining)

jQuery命令通常返回一個jQuery對象,因此命令可以鏈接:

$('div.test').add('p.quote').addClass('blue').slideDown('slow');

這行代碼找到了所有class屬性為testdiv標籤,以及所有class屬性為quotep標籤的併集,對於所有匹配的元素都增加一個blue的class屬性,並用一個動畫增加了它們的高度。函數$add影響匹配的元素有哪些,而addClassslideDown影響了引用的節點。

一些jQuery函數返回特定的值(例如$('#input-user-email').val())。在這些情況下,由於該值沒有引用jQuery對象,鏈接將不起作用。

創建新的DOM元素

除了通過jQuery對象層次結構訪問DOM節點外,如果作為參數傳遞給$()的字符串看起來像HTML,也可以創建新的DOM元素。例如,這行代碼找到ID為carmakes的HTML select元素,並會增加一個value屬性為"VAG"、文字為"Volkswagen"的option元素:

$('select#carmakes')
    .append($('<option>')
    .attr({
        value:"VAG"
    })
    .append("Volkswagen"));

工具函數

帶有$.前綴的jQuery函數是工具函數,或者說是影響全局屬性和行為的函數。下面的例子使用了函數each()來遍歷數組:

$.each([1,2,3], function() {
    console.log(this + 1);
});

這會將「2」,「3」,「4」寫入控制台。

Ajax

使用$.ajax()可以執行跨瀏覽器Ajax請求。其相關方法可用於加載和處理遠程數據。

$.ajax({
    type: 'POST',
    url: '/process/submit.php',
    data: {
        name : 'John',
        location : 'Boston'
    },
}).done(function(msg) {
    alert('Data Saved: ' + msg);
}).fail(function(xmlHttpRequest, statusText, errorThrown) {
    alert('Your form submission failed.\n\n'
      + 'XML Http Request: ' + JSON.stringify(xmlHttpRequest)
      + ',\nStatus Text: ' + statusText
      + ',\nError Thrown: ' + errorThrown);
});

本示例將數據name=Johnlocation=Boston發布到服務器上的/process/submit.php。當這個請求結束時,會調用success函數來提醒用戶。如果請求失敗,它會提醒用戶,告知該請求的狀態以及特定的錯誤。

異步

請注意,上面的例子使用$.ajax() 的延期性來處理它的異步特性:.done().fail()創建僅在異步過程完成時才運行的回調。

發佈版本

JQuery目前分成1.x版、2.x版、3.x版,這三種發佈版本,後兩種不再支援IE 6/7/8,前者透過jQuery Migrate plugin與先前版本保持相容。

更多信息 版本號, 發布日期 ...

子項目

以下項目均是源自於Interface插件

jQuery UI

基於jQuery的用戶界面庫,包括拖放縮放對話框標籤頁等多個組件。

jQuery Tools

jQuery Tools是一個第三方的套件,基於jQuery。包括了標籤頁、表單驗證、滑鼠滾輪事件等多個組件。[30]

jQuery Mobile

基於jQuery的手機網頁製作工具,jQuery Mobile的網站上包含了網頁的設計工具、主題設計工具。另外jQuery Mobile的js插件包含了換頁、事件等的多項功能。[31]

參閱

競品

參考文獻

相關書籍

外部連結

Loading related searches...

Wikiwand - on

Seamless Wikipedia browsing. On steroids.

Remove ads