Базовое руководство по JQuery для программистов Javascript

Если вы программист Javascript, это руководство по JQuery поможет вам начать кодировать как ниндзя

JQuery – одна из самых популярных библиотек JavaScript на планете (что такое JavaScript). В момент его создания JavaScript (далее мы будем называть его JS ) находился в совершенно другом месте. 14 января 2006 года было днем, когда jQuery был анонсирован на BarCampNYC.JS все еще немного не хватало – браузеры поддерживали некоторые его части, но для соответствия требованиям приходилось применять множество хаков и обходных путей

Появление JQuery изменило все.JQuery позволил очень легко писать код, совместимый с браузерами. Вы могли оживлять веб-страницы, не имея степени по информатике – ура! Десять лет спустя, является ли jQuery все еще королем, и если вы никогда не использовали его раньше, что вы можете с ним сделать?

Помимо совершенствования своих навыков работы с JavaScript, вы можете прочитать несколько учебников по HTML и CSS, если вы с ними не знакомы

Мы уже знакомили вас с jQuery, поэтому в этом руководстве по JQuery мы сосредоточимся на самом кодировании

Начало работы

Возможно, вы знакомы с JS-способом выбора идентификаторов из объектной модели документа ( DOM ):

document.getElementById('foo');

JQuery делает это на один шаг дальше. Вам не нужно вызывать различные методы для выбора классов, идентификаторов или нескольких элементов. Вот как можно выбрать идентификатор:

$('#bar');

Легко, правда? Точно таким же синтаксисом можно выбрать практически любой элемент DOM. Вот как вы выбираете классы:

$('.baz');

Вы также можете проявить творческий подход для получения реальной мощности. Здесь выбираются все элементы td внутри таблицы , кроме первого

$('table td').not(':first');

Обратите внимание, что имена селекторов почти полностью совпадают с их CSS-аналогами. Вы можете присваивать объекты обычным переменным JS:

varxyzzy = $('#parent.child');

Или вы можете использовать переменные jQuery:

var$xyzzy = $('#parent.child');

Знак доллара используется исключительно для обозначения того, что эта переменная является объектом jQuery, что очень полезно в сложных проектах

Вы можете выбрать родителя элемента:

$('child').parent();

Или братья и сестры:

$('child').siblings();

Вам нужно выполнить ваш код, как только браузер будет готов. Вот как это сделать:

$(document).ready(function
  console.log('ready!');
});

Больше энергии

Теперь, когда вы знаете основы, давайте перейдем к более сложным вещам. Дана html-таблица:

<tableid'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>
<trid'fordCortina'>
  <td>Ford</td>
  <td>Cortina</td>
  <td>White</td>
</tr>
</table>

Допустим, вы хотите сделать каждый второй ряд другого цвета (известный как Zebra Stripes ). Теперь для этого можно использовать CSS:

#carstr:nth-child(even)
background-colorred

Вот как этого можно добиться с помощью jQuery:

$('tr:even').addClass('even');

Это позволит добиться того же самого, при условии, что even – это класс, определенный в 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-функции, однако этот код все равно считается однострочным (поскольку обратный вызов находится внутри скобок)

Анимация

JQuery позволяет очень легко анимировать веб-страницы. Вы можете затушевывать или размывать элементы:

$('.fade1').fadeIn('slow');

$('#fade2').fadeOut(500);

Вы можете указать три скорости (медленная, средняя, быстрая) или число, представляющее скорость в миллисекундах (1000 мс = 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
console.log(i +' - '+ $(this));
});

В результате будет выведено 0 , затем 1 и так далее

Вы также можете использовать each() для итерации по массивам, как в JS:

varcars =  'Ford''Jaguar''Lotus' ;

$.each(cars,functioni, value
  console.log(value);
});

Обратите внимание на дополнительный аргумент value – это значение элемента массива

Стоит отметить, что each() иногда может работать медленнее, чем обычные циклы JS. Это связано с дополнительными накладными расходами на обработку, которые выполняет jQuery. В большинстве случаев это не является проблемой. Если вы беспокоитесь о производительности или работаете с большими массивами данных, сначала проверьте свой код с помощью jsPerf

AJAX

Асинхронный JavaScript и XML или AJAX действительно очень прост с jQuery.AJAX обеспечивает работу огромной части Интернета, и это то, что мы рассматривали в части 5 нашего учебника по jQuery. Он предоставляет возможность частичной загрузки веб-страницы – нет причин перезагружать всю страницу, когда вы, например, хотите обновить только счет в футболе. В 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(),functionresult
  console.log(result);

Функция serialize() получает все данные формы и готовит их к передаче

Обещания

Обещания используются для отложенного выполнения. Их может быть трудно изучить, однако jQuery делает это немного менее хлопотным.ECMAScript 6 вводит собственные обещания в JS, однако поддержка в браузерах в лучшем случае нестабильна. На данный момент обещания jQuery гораздо лучше поддерживают кроссбраузерность

Обещание – это почти то же самое, что и звучит. Код дает обещание вернуться позже, когда он будет завершен. Ваш JavaScript-движок перейдет к выполнению другого кода. Как только обещание разрешится (вернется), можно будет выполнить другой фрагмент кода. Обещания можно рассматривать как обратные вызовы. Документация jQuery объясняет это более подробно

Вот пример:

// dfd == deferred
vardfd = $.Deferred();

functiondoThing
  $.get('some/slow/url', function() {
    dfd.resolve();
  });
  returndfd.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:

varcars =  'Mini''Ford''Jaguar' ;

for(int i =; i < cars.length; ++i) {
  // do something

Хотя этот цикл не является плохим по своей сути, его можно сделать быстрее. На каждой итерации цикл должен вычислить значение массива cars ( cars.length ). Если хранить это значение в другой переменной, можно увеличить производительность, особенно если вы работаете с большими наборами данных:

for(int i =, j = cars.length; i < j; ++i) {
  // do something

Теперь длина массива машин хранится в j. Теперь ее не нужно вычислять в каждой итерации. Если вы используете each() , вам не нужно этого делать, хотя правильно оптимизированный vanilla JS может превзойти jQuery. Где jQuery действительно сияет, так это в скорости разработки и отладки. Если вы не работаете с большими данными, jQuery обычно более чем быстр

Теперь вы должны знать достаточно основ, чтобы стать ниндзя jQuery!

Используете ли вы jQuery регулярно? Перестали ли вы использовать его по каким-либо причинам? Сообщите нам о своих мыслях в комментариях ниже!