Азы jQuery

Библиотека jQuery позволяет легко манипулировать кодом HTML после его отображения в браузере. Она также предоставляет инструменты, которые помогут пользователю взаимодействовать с вашей страницей; инструменты, которые помогут вам создавать анимацию; и инструменты, которые позволяют вам общаться с сервером без перезагрузки страницы. Мы вскоре до всего этого доберёмся. Для начала рассмотрим некоторые основы jQuery, а также применим jQuery для его основной работы: получить какие-то элементы и что-то с ними сделать.

Это руководство предполагает, что вы знакомы с HTML и селекторами CSS. Если вы не знаете, как применять селекторы к определённым элементам, то должны потратить некоторое время и быстро войти в курс дела, прежде чем приступать к работе с этим руководством.

Почему $, а не что-то ещё?

Библиотека jQuery предоставляет функцию jQuery, которая позволяет вам выбирать элементы с помощью селекторов CSS.

var listItems = jQuery( 'li' );

Конечно, если вы уже видели любой jQuery-код, то, вероятно, больше привыкли к чему-то вроде этого:

var listItems = $( 'li' );

Как обсуждалось в разделе Основы JavaScript, корректные имена в JavaScript могут быть достаточно произвольны, если только они не начинаются с цифры и не включают в себя дефис. Таким образом, $ в коде просто более короткое и удобное имя для функции jQuery. На деле в конце исходного кода jQuery вы найдёте:

window.jQuery = window.$ = jQuery;

При вызове функции $() и передаче в неё селектора вы создаёте новый объект jQuery. Конечно, в JavaScript функции тоже объекты, это означает что у $ (и jQuery, естественно) также есть свойства и методы. Например, вы можете обратиться к свойству $.support за информацией о том, что поддерживает текущий браузер, а с помощью метода $.ajax сделать запрос через AJAX.

Далее в руководстве мы будем использовать $ вместо jQuery для краткости. Обратите внимание, что если ваша страница содержит более одной библиотеки JavaScript, то $ может применяться другой библиотекой и это может привести к тому, что jQuery перестанет работать. Если вы столкнулись с подобным, то должны рассмотреть использование jQuery.noConflict перед загрузкой других библиотек.

$(document).ready()

Перед безопасным использованием jQuery для выполнения чего-либо на странице, вы должны убедиться, что страница находится в состоянии, когда она готова к манипуляциям. С jQuery мы должны поместить наш код в функцию, а затем эту функцию в $(document).ready(). Как вы можете видеть мы используем анонимную функцию.

$( document ).ready(function() {
  console.log( 'готов!' );
});

Как только документ будет готов, выполнится функция, которую мы передали в .ready(). Что здесь происходит? Мы используем $(document) для создания jQuery-объекта document, а затем вызываем функцию .ready() для этого объекта, передавая ему функцию, которую мы хотим выполнить.

Поскольку такое часто где встречается, можете при желании использовать сокращённый метод — функция $() делает двойную работу как псевдоним для $(document).ready(), если вы передаёте функцию:

$(function() {
  console.log( 'готов!' );
});

Дальше в данном руководстве будем подразумевать, что рассматриваемый код заключён в $(document).ready(function() { ... }), но для краткости эту часть не указываем.

Получаем некоторые элементы

Самое простое, что мы можем делать с jQuery — это получить некоторые элементы и что-то ними выполнить. Если вы знакомы с селекторами CSS, получить произвольные элементы очень легко: вы просто передаёте соответствующий селектор в $().

$( '#header' ); // выбрать элемент с идентификатором header
$( 'li' );      // выбрать все пункты списков на странице
$( 'ul li' );   // выбрать все пункты маркированного списка
$( '.person' ); // выбрать все элементы с классом person

Важно понимать, что любая сделанная выборка будет содержать только те элементы, которые существовали на странице на момент выбора. Иными словами, если вы пишете var anchors = $( 'a' ), а затем позже добавите ещё один элемент <a> на свою страницу, то переменная anchors не будет содержать этот новый элемент.

Другие способы создания объекта jQuery

Кроме передачи простого селектора в $(), вы можете создавать объекты jQuery и другими способами:

// создать jQuery-объект из элемента DOM
$( document.body.children[0] );
  
// создать jQuery-объект из списка элементов DOM
$( [ window, document ] );
  
// сделать выборку в контексте элемента DOM
var firstBodyChild = document.body.children[0];
$( 'li', firstBodyChild );
  
// сделать выборку из предыдущей
var paragraph = $( 'p' );
$( 'a', paragraph );

Моя выборка содержит что-нибудь?

Иногда вам требуется что-то сделать, только когда вашему выбору соответствует несколько элементов. Поскольку функция $() всегда возвращает объект jQuery и он всегда истинный, вы должны проверить содержимое вашей выборки, чтобы определить, было ли что-то найдено.

Внимание! Ошибочный код

if ( $( '#nonexistent' ) ) {
  // Неверно! Этот код будет выполняться всегда!
}
  
if ( $( '#nonexistent' ).length > 0 ) {
  // Правильно! Этот код будет выполняться, только если на странице
  // есть элемент с идентификатором nonexistent
}

Мы можем сократить проверку ещё больше, если вспомним, что 0 это ложное значение:

if ( $( '#nonexistent' ).length ) {
  // Этот код будет работать только, если имеется соответствующий элемент
}

Получение отдельных элементов из выборки

Если вам нужно работать с исходным элементом DOM из выборки, то следует получить доступ к элементу из объекта jQuery. Например, если вы хотите напрямую получить доступ к свойству value элемента <input>, то должны работать с исходным элементом DOM.

var listItems = $( 'li' );
var rawListItem = listItems[0]; // или listItems.get( 0 )
var html = rawListItem.innerHTML;

Заметьте, что вы не можете вызвать методы jQuery для исходных элементов DOM. Поэтому следующий пример работать не будет:

var listItems = $( 'li' );
var rawListItem = listItems[0];
var html = rawListItem.html();
// Объект #<HTMLInputElement> не содержит метод html

Если вам требуется работать с одним элементом в выборке и вы хотите использовать методы jQuery для этого элемента, то можете получить новый объект jQuery, содержащий единственный элемент, через .eq(), передавая ему индекс элемента.

var listItems = $( 'li' );
  var secondListItem = listItems.eq( 1 );
  secondListItem.remove();

Создание новых элементов

У функции $ есть также последняя роль: создание новых элементов. Если в $() передаётся фрагмент HTML, то это создаст новый элемент в памяти — иными словами, элемент будет создан, но не добавлен на страницу, пока вы этого не сделаете.

$( '<p>' ); // создание нового элемента <p> без содержимого
$( '<p>Привет!</p>' ); // создание нового элемента <p> с текстом
$( '<p class="greet">Привет!</p>' ); // создание нового элемента <p> с текстом и классом

Вы также можете создать элемент, передавая объект с информацией о его создании:

$( '<p>', {
  html: 'Привет!',
  'class': 'greet'
});

Обратите внимание, что мы должны указать свойство class в кавычках, поскольку class это зарезервированное слово в JavaScript и написание без кавычек вызовет ошибки в некоторых браузерах. Смотрите документацию jQuery для получения подробной информации о разных свойствах, которые можно включать в объект.

Мы рассмотрим как добавлять созданные элементы на страницу в следующем разделе, в котором рассказывается о передвижении по документу и манипуляции c ним.

Работа с выборкой

После создания объекта jQuery содержащего вашу выборку, вы, вероятно, хотите что-то с ней сделать. Но до этого рассмотрим несколько принципов, которые являются ключевыми для понимания того, что делает jQuery.

Проверка выборки

Мы можем определить, соответствует ли выборка определённому критерию, с помощью метода .is(). Этот метод наиболее часто используется, чтобы предоставить селектор в качестве единственного аргумента. Он возвращает true или false в зависимости от того, соответствует ли выборка селектору:

$( 'li' ).eq( 0 ).is( '.special' ); // false
$( 'li' ).eq( 1 ).is( '.special' ); // true

Вы также можете передать в метод .is() объект jQuery, исходный элемент DOM или даже функцию, если вам нужна комплексная проверка. Смотрите документацию для получения подробной информации.

Получение, установка и неявный перебор

Есть много методов, которые вы можете вызвать после создания выборки. Эти методы, как правило, делятся на две категории: метод чтения (геттер) и устанавливающий метод (сеттер). Методы чтения извлекают фрагмент информации из выборки, а методы установки в некотором роде изменяют выборку. Практически во всех случаях методы чтения оперируют только первым элементом в выборке (.text() является известным исключением); методы установки же работают для всех элементов в выборке используя то, что известно как неявный перебор.

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

Предположим, что вы хотите изменить HTML у всех пунктов списка на странице. Чтобы сделать это мы должны использовать метод .html(), который изменит HTML у всех выбранных пунктов списка.

$( 'li' ).html( 'Новый HTML' );

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

$( 'li' ).html(function( index, oldHtml ) {
  return oldHtml + '!!!'
});

Явный перебор

Иногда задача, которую вы пытаетесь решить, не вписываются ни в один из существующих методов jQuery и тогда вы должны сделать явный перебор выборки с помощью метода .each(). В следующем коде в начало пункта списка мы добавляем тег <b> содержащий индекс элемента списка.

$( 'li' ).each(function( index, elem ) {
  // this: текущий, исходный элемент DOM
  // index: индекс текущего элемента в выборке
  // elem: текущий, исходный элемент DOM (также как this)
  $( elem ).prepend( '<b>' + index + ': </b>' );
});

Заметьте, что внутри функции, которую мы передаём в .each(), у нас есть два способа доступа к текущему исходному элементу DOM: через this и через elem. Как обсуждалось в разделе «Основы JavaScript», this — специальное ключевое слово в JavaScript, указатель на объект, который является текущим контекстом функции. В jQuery this почти всегда относится к исходному элементу DOM, с которым функция в данный момент работает. Так, в случае .each(), this относится к текущему элементу в наборе элементов которые мы перебираем.

Цепочки

Одной из самых выгодных частей jQuery является способность «сцеплять» методы вместе. Это означает, что мы можем вызвать набор методов для выборки без её повторения или сохранения выборки в переменной. Мы даже можем сделать новые выборки на основе предыдущих и всё без разрыва цепочки.

$( 'li' )
  .click(function() {
    $( this ).addClass( 'clicked' );
  })
  .find( 'span' )
  .attr( 'title', 'Наведи на меня' );

Цепочки возможны, потому что каждый устанавливающий метод в jQuery возвращает выборку, с которой он был вызван. Это чрезвычайно мощная особенность и многие библиотеки взяли её на вооружение. Тем не менее, она должна применяться с осторожностью. Большие цепочки могут сделать код чрезвычайно трудным для чтения, изменения и отладки. Нет жёстких правил, насколько длинной должна быть цепочка, но даже для простой цепочки выше, вероятно, следует провести рефакторинг для удобства чтения.

var listItems = $( 'li' );
var spans = listItems.find( 'span' );

listItems
  .click(function() {
    $( this ).addClass( 'clicked' );
  });
  
spans.attr( 'title', 'Наведи на меня' );