JQuery是地球上最受欢迎的JavaScript库之一（JavaScript）。在JavaScript诞生之初，它的位置就完全不同了（从此处开始称为 JS ）。 jQuery在BarCampNYC上宣布的那天是2006年1月14日。 JS仍然缺少某种东西-浏览器都支持它的一部分，但是为了实现合规性，必须实施许多hack和变通方法。
JQuery随之出现并改变了一切。 jQuery使编写符合浏览器的代码变得非常容易。您可以在没有计算机科学学位的情况下对网页进行动画处理-万岁！十年过去了，jQuery仍然是王者吗，如果您以前从未使用过它，那么您可以使用它做什么呢？
除了精通JavaScript技能之外，您可能还需要阅读一些HTML和CSS教程（如果您也不熟悉它们的话）。
我们之前已经介绍过jQuery，因此本JQuery指南将侧重于实际编码。
入门
您可能熟悉从文档对象模型（ DOM ）选择ID的JS方式：
document.getElementById('foo');Well JQuery进一步迈出了这一步。您无需调用其他方法来选择类，ID或多个元素。选择ID的方法如下：
$('#bar');容易吗？选择几乎所有DOM元素的语法都完全相同。选择类别的方法如下：
$('.baz');您也可以发挥一些真正的创造力。这会选择表中除第一个元素外的所有 td 元素。
$('table td').not(':first');注意选择器名称几乎完全匹配其CSS对应项。您可以将对象分配给常规 JS变量：
var xyzzy = $('#parent .child');，也可以使用jQuery变量：
var $xyzzy = $('#parent .child');美元符号仅用于表示该变量是一个jQuery对象，对复杂项目非常有用。
您可以选择元素的父级：
$('child').parent();兄弟姐妹：
$('child').siblings();浏览器准备就绪后，您需要执行代码。操作方法如下：
$(document).ready(function() { console.log('ready!');});更多功能
现在，您已经了解了基础知识，让我们继续介绍一些更复杂的内容。给定一个html表：
<table id="cars"> <tr> <th>Make</th> <th>Model</th> <th>Color</th> </tr> <tr> <td>Ford</td> <td>Escort</td> <td>Black</td> </tr> <tr> <td>Mini</td> <td>Cooper</td> <td>Red</td> </tr> <tr id="fordCortina"> <td>Ford</td> <td>Cortina</td> <td>White</td> </tr></table>假设您要使其他所有行都使用不同的颜色（称为斑马条纹）。现在您可以为此使用CSS了。 >是CSS中定义的类。注意如何不需要类名之前的句号。通常，只有主选择器才需要这些符号。理想情况下，尽管并没什么大用处，但您应该首先使用CSS。
jQuery也可以隐藏或删除行：
$('#fordCortina').hide();$('#fordCortina').remove();您不必隐藏元素
函数
JQuery函数就像JS。它们使用花括号并可以接受参数。真正有趣的地方是通过回调。回调几乎可以应用于任何jQuery函数。他们指定了一段代码，以在核心操作完成后运行。这提供了巨大的功能。如果它们不存在，并且您编写了期望以线性方式运行的代码，那么JS将在等待上一行代码的同时继续执行下一行代码。回调确保代码仅在原始任务完成后才运行。下面是一个示例：
$('table').hide(function(){ alert('MUO rules!');});被警告-此代码为每个元素执行警报。如果选择器多次出现在页面上，则会收到多个警报。
您可以将回调函数与其他参数一起使用：
$('tr:even').addClass('even', function(){ console.log('Hello');});请注意，在右括号。 JS函数通常不需要此代码，但是此代码仍被认为在一行上（因为回调位于方括号内）。
Animation
JQuery可以做到这一点网页动画非常容易。您可以淡入或淡出元素：
$('.fade1').fadeIn('slow');$('#fade2').fadeOut(500);您可以指定三种速度（慢，中，快）或一个数字来表示速度（以毫秒为单位）（1000ms = 1秒）。您可以为几乎所有CSS元素制作几乎动画。这会将选择器的宽度从当前宽度设置为250px。
$('foo').animate({width: '250px'});无法设置颜色的动画。您还可以将回调与动画一起使用：
$('bar').animate({height: '250px'}, function(){ $('bar').animate({width: '50px'}});循环
循环在jQuery中确实发光。 Each（）用于遍历给定类型的每个元素：
$('li').each(function() { console.log($(this));});您还可以使用索引：
$('li').each(function(i) { console.log(i + ' - ' + $(this));});这将打印 0 ，然后 1 ，依此类推。
您还可以使用 each（）遍历数组，就像在JS中一样：
var cars = ['Ford', 'Jaguar', 'Lotus'];$.each(cars, function (i, value){ console.log(value);});请注意称为 value 的额外参数—这是数组元素的值。
值得注意的是 each（）有时会比普通JS循环慢。这是由于jQuery执行额外的处理开销。在大多数情况下，这不是问题。如果您担心性能或正在使用大型数据集，请考虑首先使用jsPerf对代码进行基准测试。
AJAX
异步JavaScript和XML或 AJAX 使用jQuery非常简单。 AJAX支持大量的Internet，这是我们在第5部分中介绍的内容。它提供了一种部分加载网页的方法-例如，当您只想更新足球比分时，无需重新加载整个页面。 jQuery有几种AJAX方法，最简单的方法是 load（）：
$('#baz').load('some/url/page.html');这将对指定页面执行AJAX调用（ some / url / page.html ），然后将数据推送到选择器中。简单！
您可以执行 HTTP GET 请求：
$.get('some/url', function(result) { console.log(result);});您也可以使用 POST 发送数据：
$.post('some/other/url', {'make':'Ford', 'model':'Cortina'});提交表单数据非常容易：
$.post('url', $('form').serialize(), function(result) { console.log(result);}serialize（）函数获取所有表单数据并为传输做准备。
承诺
承诺用于推迟执行。它们可能很难学习，但是jQuery使其麻烦程度略微降低。 ECMAScript 6向JS引入了原生的Promise，但是，浏览器的支持充其量是不稳定的。目前，jQuery承诺在跨浏览器支持方面要好得多。
一个承诺几乎完全像听起来那样。该代码将保证在完成时稍后返回。您的JavaScript引擎将继续执行其他代码。一旦承诺解决（返回），就可以运行其他一些代码。可以将承诺视为回调。 jQuery文档进行了更详细的解释。
下面是一个示例：
// dfd == deferredvar dfd = $.Deferred();function doThing() { $.get('some/slow/url', function() { dfd.resolve(); }); return dfd.promise();}$.when(doThing()).then(function(){ console.log('YAY, it is finished');});注意如何做出承诺（ dfd.promise（）），它仅在AJAX调用完成时解决。您可以使用变量来跟踪多个AJAX调用，并且仅在完成所有任务后才完成另一个任务。
性能提示
从浏览器中挤出性能的关键是限制对DOM的访问。这些技巧中的许多技巧也可能适用于JS，并且您可能需要分析代码以查看其速度是否令人无法接受。在当前的高性能JavaScript引擎时代，代码中的小瓶颈通常可能不会引起注意。尽管如此，仍然值得尝试编写性能最快的代码。
而不是在DOM中搜索每个操作：
$('foo').css('background-color', 'red');$('foo').css('color', 'green');$('foo').css('width', '100px');将对象存储在变量中：
$bar = $('foo');$bar.css('background-color', 'red');$bar.css('color', 'green');$bar.css('width', '100px');优化循环。给定一个普通的for循环：
var cars = ['Mini', 'Ford', 'Jaguar'];for(int i = 0; i < cars.length; ++i) { // do something}虽然天生不是很糟糕，但是可以使该循环更快。对于每次迭代，循环都必须计算cars数组的值（ cars.length ）。如果将其存储在另一个变量中，则可以提高性能，尤其是在使用大型数据集的情况下：
for(int i = 0, j = cars.length; i < j; ++i) { // do something}现在，cars数组的长度存储在 j 中。不再需要在每次迭代中都进行计算。如果使用 each（），则不需要这样做，尽管经过适当优化的原始JS可以胜过jQuery。 jQuery真正的亮点在于开发和调试的速度。如果您不是在处理大数据，那么jQuery通常会更快。
您现在应该了解足以成为jQuery忍者的基础知识！
您是否定期使用jQuery？ ？您是否出于任何原因停止使用它？在下面的评论中让我们知道您的想法！
标签: JavaScript jQuery
