","","",";From Google Libraries API","",":其中1.10.2若改為1.10,可獲取1.10.x最新版本","",":改為1,可獲取1.x.x最新版本","",":或","","","也可以直接从CDN中加载jQuery:",";From cdnjs.cloudflare.com","","","===使用风格===","jQuery有两种使用风格:","* 通过jQuery对象的[[工厂方法]]$函数。这些函数通常称作''命令'',使用[[方法链]]进行调用,因为它们都返回jQuery对象。","* 通过$.开头的函数。这些是''工具函数'',它们不直接作用于jQuery对象。","在jQuery中访问和操作多个DOM节点通常从用CSS选择器字符串调用$函数开始。这会返回一个引用[[HTML]]页面中所有匹配元素的jQuery对象。比如$(\"div.test\"),会返回一个拥有class test的所有div元素的jQuery对象。可以通过调用返回的jQuery对象或节点本身的方法来操作这个节点集。","===无冲突模式===","jQuery还有.noConflict()模式,这会释放对$的控制。如果其他的库也使用$作为标识符的话,这个模式会比较有用。在无冲突模式下,开发人员可以使用jQuery替代$而不会缺失任何功能。{{cite web|url=//api.jquery.com/jquery.noconflict/|title=jQuery.noConflict() jQuery API Documentation|accessdate=2020-09-26|archive-date=2014-09-14|archive-url=https://web.archive.org/web/20140914212252/http://api.jquery.com/jQuery.noConflict/|dead-url=no}}","===典型的代码开头===","通常,jQuery是通过将初始化代码和事件处理函数放入$(''handler'')中来使用的。当浏览器构建DOM并发送加载事件时触发。","","$(function() {"," // 这个匿名函数是页面加载完成时要调用的函数。"," // jQuery代码,事件处理回调写在这里。","});","或者","$(fn); // 在其他地方定义的名为fn的函数,是页面加载完成时要调用的函数。","或者我们也可以使用","$(document).ready(function() {"," // 这是页面完成加载时要调用的函数。","由于历史原因,$(document).ready(callback)已经成为DOM就绪时运行代码的实质性标志。但jQuery 3.0以后,鼓励开发人员使用更简短的$(handler)标志。{{cite web|url=https://jquery.com/upgrade-guide/3.0/#deprecated-document-ready-handlers-other-than-jquery-function|title=jQuery Core 3.0 Upgrade Guide - jQuery|first=jQuery Foundation -|last=jquery.org|publisher=|accessdate=2018-05-19|archive-date=2021-01-21|archive-url=https://web.archive.org/web/20210121060158/https://jquery.com/upgrade-guide/3.0/#deprecated-document-ready-handlers-other-than-jquery-function|dead-url=no}}","对尚未加载的元素进行事件处理的回调函数可以作为[[匿名函数]]在.ready()内部注册。这些事件处理函数只会在触发事件时被调用。例如,下面的代码添加了一个,用于在img图像元素上单击鼠标事件的处理函数。"," $('img').on('click', function() {"," // 处理页面中任何img元素上的click事件。"," });","===链接(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($('