JQuery

jQuery是一套跨瀏覽器的JavaScript函式庫，用于简化HTML與JavaScript之間的操作。約翰·雷西格（）在2006年1月的BarCamp NYC上釋出了第一個版本。目前由Dave Methvin领导的团队进行开发。全球前10,000个访问最高的网站中，有65%使用了jQuery，是曾經最受歡迎的JavaScript函式庫。

 簡介 
jQuery是开源软件，使用MIT许可证授权。 jQuery的语法设计使得许多操作变得容易，如操作-{zh-hans:文档对象;zh-hant:文件;}-（document）、选择文档对象模型（）元素、创建动画效果、处理事件、以及开发Ajax程序。jQuery也提供了给开发人员在其上创建插件的能力。这使开发人员可以对底层交互与动画、高级效果和高级主题化的组件进行抽象化。模块化的方式使jQuery函数库能够创建功能强大的动态网页以及网络应用程序。

微软和诺基亚已宣布在他们的平台上绑定jQuery。微软最初在Visual Studio中集成了jQuery以便在微软自己的ASP.NET AJAX框架和ASP.NET MVC Framework中使用，而诺基亚则在他的Web运行时组件开发平台中集成了jQuery。MediaWiki自从1.16版本后也开始使用jQuery。

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

特色
jQuery有下列特色：
 使用多浏览器开源选择器引擎Sizzle（jQuery项目的衍生产品）进行DOM元素选择
 基于CSS选择器的DOM操作，使用元素的名称和属性（如id和class）作为选择DOM中节点的条件
 事件
 特效和動畫
 Ajax
 Deferred和Promise对象来控制异步处理
 JSON解析
 通过插件扩展
 工具函数，如特征检测
 现代浏览器中原生的兼容性方法，但对于旧版浏览器需要后备（fallback）方法，比如inArray()和each()
 多浏览器（不要与跨浏览器混淆）支持

浏览器支持
jQuery 3.0及以后版本支持“当前−1版本” 的Firefox、Chrome、Safari、Edge（就是说当前稳定版本以及当前稳定版本之前的一个版本），另外还支持Internet Explorer 9以后的IE版本。在移动端支持iOS 7+和Android 4.0+。Browser Support | jQuery

 用法 

加載jQuery
jQuery库是包含所有公共DOM、事件、效果和Ajax函数的一个JavaScript文件。可以通过链接到本地副本或公共服务器提供的许多副本之一把jQuery包含在网页中。jQuery有一个由MaxCDN托管的內容傳遞網路（CDN）。 Google和微软也托管了jQuery。

<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>

使用风格

jQuery有两种使用风格：
 通过jQuery对象的工厂方法$函数。这些函数通常称作命令，使用方法链进行调用，因为它们都返回jQuery对象。
 通过$.开头的函数。这些是工具函数，它们不直接作用于jQuery对象。
在jQuery中访问和操作多个DOM节点通常从用CSS选择器字符串调用$函数开始。这会返回一个引用HTML页面中所有匹配元素的jQuery对象。比如$("div.test")，会返回一个拥有class test的所有div元素的jQuery对象。可以通过调用返回的jQuery对象或节点本身的方法来操作这个节点集。

无冲突模式
jQuery还有.noConflict()模式，这会释放对$的控制。如果其他的库也使用$作为标识符的话，这个模式会比较有用。在无冲突模式下，开发人员可以使用jQuery替代$而不会缺失任何功能。

典型的代码开头

通常，jQuery是通过将初始化代码和事件处理函数放入$(handler)中来使用的。当浏览器构建DOM并发送加载事件时触发。

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

或者

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

或者我们也可以使用

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

由于历史原因，$(document).ready(callback)已经成为DOM就绪时运行代码的实质性标志。但jQuery 3.0以后，鼓励开发人员使用更简短的$(handler)标志。

对尚未加载的元素进行事件处理的回调函数可以作为匿名函数在.ready()内部注册。这些事件处理函数只会在触发事件时被调用。例如，下面的代码添加了一个，用于在img图像元素上单击鼠标事件的处理函数。

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

链接（Chaining）

jQuery命令通常返回一个jQuery对象，因此命令可以链接：

$('div.test').add('p.quote').addClass('blue').slideDown('slow');
这行代码找到了所有class属性为test的div标签，以及所有class属性为quote的p标签的并集，对于所有匹配的元素都增加一个blue的class属性，并用一个动画增加了它们的高度。函数$与add影响匹配的元素有哪些，而addClass和slideDown影响了引用的节点。

一些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=John和location=Boston发布到服务器上的/process/submit.php。当这个请求结束时，会调用success函数来提醒用户。如果请求失败，它会提醒用户，告知该请求的状态以及特定的错误。

异步
请注意，上面的例子使用$.ajax() 的延期性来处理它的异步特性：.done()和.fail()创建仅在异步过程完成时才运行的回调。

 發佈版本 
JQuery目前分成1.x版、2.x版、3.x版，這三種發佈版本，後两种不再支援IE 6/7/8，前者透過jQuery Migrate plugin與先前版本保持相容。
 版本号 发布日期 最新更新 大小（KB） 备注 1.0  第一个稳定版本 1.1  1.2  1.2.6 54 1.3  1.3.2 55.9 将Sizzle选择器引擎引入核心 1.4  1.4.4 76 1.5  1.5.2 83 延迟回调管理，ajax模块重写 1.6  1.6.4 89 显著改善attr()与val()的性能 1.7  1.7.2 () 92 新的事件API：.on()和.off()，而旧的API仍然支持。 1.8  1.8.3 () 91.4 重写Sizzle选择器引擎，改善动画和$(html, props)的灵活性。 1.9  1.9.1 () 90 移除弃用接口，清理代码 1.10  1.10.2 () 91 修复了1.9和2.0 beta版本周期的bug和差异 1.11  1.11.3 () 95.9 1.12  1.12.4 () 95 2.0  2.0.3 () 81.1 除去对IE 6-8的支持以提高性能，并降低文件大小 2.1  2.1.4 () 82.4 2.2  2.2.4 () 85.6 3.0  3.0.0 () 86.3 Deferred、$.ajax、$.when支持Promises/A+，令.data()兼容HTML5 3.1  3.1.1 () 86.3 加入jQuery.readyException，ready handler错误现在不会不显示了 3.2  3.2.1 () 84.6 增加了对检索<template>元素内容的支持，弃用了多种旧方法。 3.3  3.3.1 () 84.8 弃用旧函数，函数现在可以接受类，并支持其写成数组格式。 3.4  3.4.1 () 86.1 改進性能，增加nonce及nomodule，修復radio elements。 3.5  3.5.1 () 87.4 安全性更新，以.even()及.odd()代替:even及:odd，棄用jQuery.trim。3.63.6.4 ()88.2错误修正，当发生JSONP错误时返回JSON，兼容新版Chrome选择器。3.73.7.1 ()85.4添加了 .uniqueSort() 方法，性能优化，优化 .outerWidth(true) 和 .outerHeight(true) 对负边距的处理，焦点修复。

 子项目 
以下项目均是源自于Interface插件
 jQuery UI 

基于jQuery的用户界面库，包括拖放、缩放、对话框、标签页等多个组件。

 jQuery Tools 
jQuery Tools是一個第三方的套件，基於jQuery。包括了标签页、表單驗證、滑鼠滾輪事件等多个组件。

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

 参阅 

 jQuery UI
 競品 
 Prototype JavaScript框架


 参考文献 

 相關書籍 
英文

 Learning jQuery, ISBN 1-84719-250-5
 jQuery in Action, ISBN 1-933988-35-5
 Pro JavaScript Techniques, ISBN 1-59059-727-3

中文

 锋利的jQuery , ISBN 978-7-115-20701-2
 網頁設計？愛上jQuery, ISBN 978-986-6850-84-4
 Learning jQuery中文版，ISBN 978-986-6761-60-7
 jQuery UI & Plugins, ISBN 978-986-6551-11-6
你不能錯過的 jQuery 指南 ISBN 9789572244173

 外部連結 
 jQuery官方网站
 jQuery UI官方网站
 jQuery - Google Code （各版本JQuery的下載處）
 （2008年4月3日，Google Tech Talks）
 Github上的jQuery 原始碼 

Category:JavaScript函式庫
Category:AJAX
Category:用JavaScript編程的自由軟體