Выборки jQuery: используемые принципы и функционал

Введение


Прежде всего, нужно понимать одну простую вещь: выборка элементов, осуществляемая с помощью jQuery, отличается от традиционной выборки JavaScript.
Чуть яснее: допустим, вы делаете выборку традиционным способом JavaScript, к примеру, тем же getElementsByTagName(), в итоге вы получаете "псевдомассив" элементов.
Но, делая ту же выборку через jQuery, допустим:

Код
$('#menu a')

вы получаете выборку элементов, применимую только в jQuery, методы объектной модели документа (DOM) к ним не применимы, они их "не поймут".
На этот случай в jQuery есть свои, эквивалентные методам и свойствам DOM, решения. Но есть у выборок библиотеки jQuery два огромных отличия от принципов работы DOM.

Автоматические циклы



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

Код
$('#slideshow img').hide();

И сколько бы их там ни было в этом блоке, все они скроются, за счёт того, что функция hide() автоматически пройдёт через весь список этих изображений и скроет каждое из них. Так, с помощью всего одной лишь строки кода мы заменили целую кучу кода JavaScript по созданию того же цикла for

Связывание функций



Звучит угрожающе! А на самом деле всё просто: если вы к выбранному элементу хотите применить одновременно несколько действий, например, для тега div с идентификатором popUp задать значения ширины и высоты.
Делается это так:

Код
$('#popUp').width(400).height(400);

Что получилось: вы выбираете элемент с id = "popUp", затем применяете к нему последовательно сначала одну, затем другую функции, разделив их между собой точкой. Первая функция изменит ширину выбранного элемента, вторая высоту.
Такое "прикрепление паровозиком" нескольких функций одну за другой, и называется связыванием функций. При этом все эти функции применяются к одному и тому же элементу.

в коде выше мы можем добавить еще пару функций, к примеру, функцию text() и функцию fadeIn(), первая из них добавит нужный нам текст внутрь элемента, вторая заставит элемент появиться на странице через 1000 миллисекунд (если он до этого, к примеру, был на странице скрыт)

Код
$('#popUp').width(400).height(400).text('Здесь нужный нам текст').fadeIn(1000);

допустимо написание связывания не только в одну строку, но и в несколько, так, наш пример выше можно записать следующим образом:

Код
$('#popUp').width(400)
.height(400)
.text('Здесь нужный нам текст')
.fadeIn(1000);

Одно маленькое замечание: в связывании функций вы можете использовать только функции jQuery (функции JavaScript или же ваши собственные в цепочку вы добавлять не можете).

Добавление на страницу сайта нового содержимого с помощью функций jQuery



Функция .html() - считывает и возвращает HTML-код, находящийся внутри выбранного элемента, а также заменяет его другим кодом.
Рассмотрим, как работает эта функция. Допустим, у нас есть такой код на странице сайта:

Код

<div id = "container">
  <div id = "errors">
  <h2>Ошибки:</h2>
  </div>
</div>

Чтобы "считать" код внутри блока с идентификатором errors, выбираем его и после выборки добавляем функцию .html():

Код
$('#errors').html()

Функция .html() вернёт вам содержимое элемента с id = "errors". И это содержимое мы можем использовать, например, можем вывести его в модальное окно:

Код
alert($('#errors').html());

В результате в модальном окне будет текст

Код
<h2>Ошибки:</h2>

то есть мы получаем точную копию HTML-кода, который был внутри выбранного нами элемента.

Чтобы заменить содержимое выбираемого элемента на своё, например, в нашем блоке с id = "errors" давайте заменим содержимое на такой вот абзац с тексом:

Код
<p>Ошибок не найдено</p>

Для этого этот абзац с текстом мы в качестве аргумента сообщаем функции .html():

Код
$('#errors').html('<p>Ошибок не найдено</p>');

И теперь на странице сайта вместо заголовка второго уровня с текстом "Ошибки" будет отображаться абзац с текстом "Ошибок не найдено".

Таким образом, мы можем видеть, что функция .html() заменяет не только текст внутри выбранного элемента, но и сущесвующие в нём теги.

Функция .text() похожа по принципу работы на предыдущую, с той лишь разницей, что не принимает HTML-теги, и поэтому, если внутри выбранного элемента вам нужно заменить только текст, используйте её.

В том же коде, который мы рассматривали выше:

Код

<div id = "container">
  <div id = "errors">
  <h2>Ошибки:</h2>
  </div>
</div>

мы можем заменить текст в заголовке h2 на другой, передав функции .text() строку с новым текстом:

Код
$('#errors h2').text('Ошибок не найдено');

обратите внимание, что в данном случае выборка идёт по селектору потомка, поскольку нам нужно заменить текст не просто внутри блока с id = "errors", а внутри именно заголовка h2, находящегося в этом блоке.

Если вы попробуете в качестве аргумента передать функции .text() текст, заключённый в теги, например, как мы это делали выше с функцией .html():

Код
$('#errors h2').text('<p>Ошибок не найдено</p>');

то эти теги также будут видимыми на странице сайта в виде текста, поскольку любые HTML-теги, передаваемые функции .text() экранируются, превращаясь в комбинации символов.

Функция .append() добавляет HTML-код как последний дочерний элемент для выбранного нами элемента.
Возьмём в качестве примера наш код:

Код

<div id = "container">
  <div id = "errors">
  <h2>Ошибки:</h2>
  </div>
</div>

и добавим в блок с id="errors" с помощью функции .append() абзац с текстом "Ошибок не найдено":

Код
$('#errors').append('<p>Ошибок не найдено</p>');

в результате он добавится перед закрывающим тегом выбранного нами блока и фактически мы получим уже такую структуру HTML-кода на странице:

Код

<div id = "container">
  <div id = "errors">
  <h2>Ошибки:</h2>
  <p>Ошибок не найдено</p>
  </div>
</div>

С помощью этой функции удобно, к примеру, добавлять новый элемент li в конец ul-списка или ol-списка.

Функция .prepend() добавляет HTML-код сразу после открывающего тега выбранного элемента, поэтому запись:

Код
$('#errors').prepend('<p>Найдено 2 ошибки</p>');

даст нам следующую структуру HTML-кода:

Код

<div id = "container">
  <div id = "errors">
  <p>Найдено 2 ошибки</p>
  <h2>Ошибки:</h2>
  </div>
</div>

Функции before() и after() позволяют добавить HTML-код вне выбранного элемента (вне выборки): либо до открывающего тега выбранного элемента, либо после закрывающего .
Например, есть какое-то поле формы:

Код
<input type="text" name="userName" id="userName">

Добавим перед ним текстовую подсказку:

Код
$('#userName').before('<span class="prompt_text">Введите Ваше имя</span>');


Прочие функции jQuery можно найти на сайте api.jquery.com

Замена и удаление выбранных элементов страницы сайта



Функция remove() позволяет удалить выбранный элемент. Например, блок div с id="popUp" удаляется следующим образом:

Код
$('#popUp').remove();

Всё просто: сначала мы выбираем на странице блок с id="popUp", а потом добавляем к выбранному блоку функцию remove().

Аналогично можно удалить, к примеру, все теги span с классом .error на странице:

Код
$('span.error').remove();

Функция replaceWith() позволяет заменить выбранный(е) элемент(ы) страницы другим(и).
Как пример, сайт интернет-магазина, товары на странице представлены изображениями. При клике по изображению оно исчезает, а вместо него появляется надпись "Добавлено в корзину".
То есть, в данном случае при клике происходит замена изображения текстом. Пусть изображение имеет id="image-1", тогда замена оформляется так:

Код
$('#image-1').replaceWith('<p>Добавлено в корзину</p>');

Функция clone() - создаёт копию выбранного элемента страницы вместе с вложенными внутри него элементами.

Например, имеем список элементов:

Код

<ul class="first_list">
  <li class="first_list_items"><a href="#">Ссылка</a></li>
  <li><a href="#">Ссылка</a></li>
  <li><a href="#">Ссылка</a></li>
  <li><a href="#">Ссылка</a></li>
  <li><a href="#">Ссылка</a></li>
  <li><a href="#">Ссылка</a></li>
</ul>

У первой ссылки в списке назначен класс .first_list_items, давайте выберем её, клонируем и вставим в конец списка ссылок:

Код
$('.first_list_items').clone().appendTo('.first_list');

Что мы сделали? Выбрали элемент с классом .first_list_items, затем с помощью функции clone() сделали его копию, а затем вставили эту копию с помощью функции appendTo() в конец списка ссылок.
В данном примере вы опять же можете наблюдать связывание функций в действии. В итоге наш список ссылок будет таким:

Код

<ul class="first_list">
  <li class="first_list_items"><a href="#">Ссылка</a></li>
  <li><a href="#">Ссылка</a></li>
  <li><a href="#">Ссылка</a></li>
  <li><a href="#">Ссылка</a></li>
  <li><a href="#">Ссылка</a></li>
  <li><a href="#">Ссылка</a></li>
  <li class="first_list_items"><a href="#">Ссылка</a></li>
</ul>

И это ещё не всё! Работаем с атрибутами тега: установка и чтение.



Функция addClass() добавляет элементу конкретный класс. Просто добавьте её после выборки, а в качестве аргумента вы передаёте функции тот класс, который хотите добавить выбранному элементу.

Добавим класс goLink всем ссылкам, ведущим за пределы вашего сайта:

Код

$('a[href^="http://"]').addClass('goLink');

в результате все выбранные ссылки обзаведутся новым классом (обратите внимание, что имя класса указывается без точки в начале):

Код
<a href="http://www.site.ru" class="goLink" title="">Ссылка</a>

Функция removeClass() удаляет у выбранного элемента указанный класс.
Например, есть блок div с идентификатором id="main" и классом container, чтобы у этого блока удалить класс, выбираем его и добавляем к выборке функцию removeClass():

Код
$('#main').removeClass('container');

Функция toggleClass() - это функция-переключатель, которая либо добавляет, либо удаляет класс при возникновении какого-то события (например,при клике на элементе).

Как пример, можно рассмотреть такой вариант: элемент, при клике на который будет изменяться внешний вид страницы (например, её фон), имеет id="change", добавлять или удалять класс .bodyStyle мы будем для тега body:

Код

  $('#change').click(function() {
  $('body').toggleClass('bodyStyle');
  });

Что мы тут имеем: мы выбираем элемент с id="change" и говорим, что при клике по нему срабатывает функция, а именно: выбирается элемент body и к нему применяется класс bodyStyle.
При повторном клике этот класс, наоборот, у тега body убирается и так повторяется каждый раз при возникновении события click() на выбранном элементе.

Комментарии к материалу: