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:
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 для этого:
#cars tr:nth-child(even) { background-color: red; }
Вот как этого можно добиться с помощью jQuery:
$('tr:even').addClass('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. Это оживляет ширину селектора от его текущей ширины до 250 пикселей.
$('foo').animate({width: '250px'});
Невозможно оживить цвета. Вы также можете использовать обратные вызовы с анимацией:
$('bar').animate({height: '250px'}, function(){ $('bar').animate({width: '50px'} });
Loops
Петли действительно блестят в 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 — это значение элемента массива.
Стоит отметить, что каждый () иногда может быть медленнее, чем ванильные циклы JS. Это связано с дополнительными издержками обработки, которые выполняет jQuery. В большинстве случаев это не проблема. Если вы беспокоитесь о производительности или работаете с большими наборами данных, сначала попробуйте сравнить ваш код с jsPerf .
AJAX
Асинхронный JavaScript и XML или AJAX действительно очень прост с jQuery. AJAX поддерживает огромное количество Интернета, и это то, что мы рассмотрели в части 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, однако поддержка браузеров в лучшем случае ненадежна. На данный момент обещания jQuery намного лучше в кросс-браузерной поддержке.
Обещание почти так же, как звучит. Код обещает вернуться на более поздней стадии, когда он будет завершен. Ваш движок JavaScript перейдет к выполнению некоторого другого кода. Как только обещание разрешается (возвращается), может быть запущен другой фрагмент кода. Об обещаниях можно думать как обратные вызовы. Документация по jQuery объясняется более подробно.
Вот пример:
// dfd == deferred var 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');
Оптимизируйте свои циклы. Учитывая ваниль для цикла:
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 }
Теперь длина массива автомобилей хранится в j . Это больше не нужно рассчитывать на каждой итерации. Если вы используете each () , вам не нужно этого делать, хотя должным образом оптимизированный vanilla JS может превзойти jQuery. Где действительно блестит jQuery, так это скорость разработки и отладки. Если вы не работаете с большими данными, jQuery обычно более чем быстр.
Теперь вы должны знать достаточно основ, чтобы стать ниндзя jQuery!
Вы регулярно используете jQuery? Вы перестали использовать его по каким-либо причинам? Дайте нам знать ваши мысли в комментариях ниже!