# jQuery: поиск элементов

Когда-то давным давно, когда деревья были большими, один молодой парень по имени <a href="http://ejohn.org/">Джон Ресиг</a> решил создать библиотеку для поиска элементов в DOM.
[cut]

## Немного истории

Браузеры тогда не давали возможности искать по CSS-селекторам, поэтому библиотеку назвали "jQuery" (**J**avaScript **Query**). 

Поиск получился хорошо, и Джон стал прикручивать к библиотеке новые возможности, и со временем jQuery стала такой, как мы видим её сейчас. 

[smart header="Sizzle"]
...А функционал поиска со временем был выделен в отдельный проект: [движок Sizzle](http://sizzlejs.com/).

Это позволяет взять от jQuery только поиск и встроить в другую библиотеку. Например, фреймворк [Dojo Toolkit](http://dojotoolkit.org) можно собрать со своим поиском, а можно и с Sizzle.
[/smart] 

## Поиск в jQuery

"Сердцем" jQuery является функция `$()`. Все вызовы делаются через `$`. Это самая обычная функция, которая объявлена библиотекой. Как мы помним, символ `"$"` является допустимым символом для имён в JavaScript. 

Простейший поиск элементов выглядит так:

```js
var result = $('...CSS-селектор...');
```

Например, `$("div a")` -- ссылки `a` внутри `div`. 

Возможны и более сложные запросы, например:

```js
var list = $('li > a:odd:not([href^="http://"])');
// расшифровка: нечётные (:odd) ссылки внутри li,
// кроме тех (:not), у которых атрибут href начинается c http://
```

Вызов `$(селектор)` аналогичен `document.querySelectorAll(селектор)`, но:
<ol>
<li>Во-первых, поддерживается всеми браузерами, включая старые IE. Список CSS3-селекторов можно найти в главе [](/css-selectors).</li>
<li>Во-вторых, jQuery предоставляет свои поисковые расширения, например псевдофильтр `:checked` -- выбранные элементы `input` и `option`, `:header` -- заголовок `h1..6`, и другие, более полный список которых доступен [в документации](http://api.jquery.com/category/selectors/).</li>
</ol>

[warn header="Поиск: `querySelectorAll` и Sizzle"]

При выполнении выборки jQuery сначала определяет, имеет ли селектор простой вид, например `#menu` или `body`, то есть можно ли получить результат сразу вызовом `getElementById` или через `document.body`. Проверяется и ряд других простейших случаев. Если да -- отлично, если нет -- jQuery пытается получить результат вызовом `querySelectorAll`. 

Если и `querySelectorAll` не срабатывает, то jQuery задействует свой поисковой движок [Sizzle](http://sizzlejs.com).

Обычно "не срабатывает", когда либо браузер старый, либо запрос использует jQuery-расширения, не входящие в CSS3. Стоит ли говорить, что поиск по Sizzle обычно медленнее, чем встроенный браузерный? Поэтому к использованию jQuery-расширений стоит подходить осторожно и не применять их в "узких" местах.
[/warn]

## Перебор результатов

Результатом поиска является jQuery-объект. Он похож на массив: в нём есть нумерованные элементы и `length`.

jQuery-объект также называют "jQuery-коллекцией", "элементами, обёрнутыми в jQuery" и десятком других жаргонных терминов.

Используем jQuery, чтобы выбрать все элементы по селектору `li > a` и перебрать их:

```html
<!--+ run -->
<!-- подключить библиотеку -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<ul>
  <li><a href="http://jquery.com">jQuery</a></li>
  <li><a href="http://jqueryui.com">jQuery UI</a></li>
  <li><a href="http://blog.jquery.com">jQuery Blog</a></li>
</ul>

<script>
*!*
  var links = $('li > a');
*/!*

  // перебор результатов
  for (var i = 0; i < links.length; i++) {
    alert( links[i].href );
  }
</script>
```

## Поиск внутри элемента

Для поиска внутри какого-либо элемента -- можно передать его вторым аргументом `$`.

Например, найдём все `a` внутри `#menu`:

```js
var menu = document.getElementById('menu');
*!*
$('a', menu); // поиск аналогичен menu.querySelectorAll('a')
*/!*
```

Второй аргумент в этом случае называются "контекстом поиска". 

В качестве контекста можно передать не только DOM-элемент, но и селектор:

```js
//+ no-beautify
   
$('a', '#menu' );
```

Также можно передать результат другого поиска:

```js
var menu = $('#menu');
$('a', menu);
```

**Не важно, в каком виде мы хотим указать контекст: DOM-элемент, строка или результат поиска -- jQuery понимает всё.**

А что, если контекст поиска содержит много элементов? Например, как будет работать запрос `$('a', 'li')`, если `<li>` в документе много? 

Здесь все немного сложнее, но, тем не менее, интуитивно понятно.

**Если в контексте много элементов, то поиск будет произведён в каждом из них. А затем результаты будут объединены.** 

Повторы элементов при этом отфильтровываются, то есть два раза один и тот же элемент в результате не появится.

Например, найдём `$('a', 'li')` в многоуровневом списке:

```html
<!--+ run -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<ul>
  <li>
    <a href="http://jquery.com">jQuery</a>
    <ul>
      <li><a href="http://blog.jquery.com">jQuery Blog</a></li>
    </ul>
  </li>
  <li><a href="http://sizzlejs.com">Sizzle</a></li>
</ul>

<script>
*!*
  var links = $('a', 'li');
*/!*

  for (var i = 0; i < links.length; i++) {
    alert( i + ": " + links[i].href ); // 3 ссылки по очереди
  }
</script>
```

## Метод each 

Для более удобного перебора у jQuery-коллекции есть метод [each](http://api.jquery.com/each/). Его синтаксис похож на [forEach](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/forEach) массива:

```js
.each(function(index, item))
```

Он выполняет для каждого элемента коллекции перед точкой функцию-аргумент, и передаёт ей номер `index` и  очередной элемент `item`.

Используем его вместо `for`, чтобы перебрать коллекцию найденных ссылок:

```js
$('li a').each(function(i, a) {
  alert( i + ": " + a.href );
});
```

**У `.each` есть важная возможность, которой нет в `forEach`: возврат `false` из функции прекращает перебор.**

Например:

```html
<!--+ run -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<a href="http://wikipedia.ru">Википедия</a>

<ul>
  <li><a href="http://jquery.com">jQuery</a></li>
  <li><a href="http://sizzlejs.com">Sizzle</a></li>
  <li><a href="http://blog.jquery.com">jQuery Blog</a></li>
</ul>

<script>
  var links = $('li a'); // найти все ссылки на странице внутри LI

*!*
  links.each(function(i, a) {
    alert( i + ': ' + a.innerHTML );

    if (i == 1) return false; // стоп на элементе коллекции с индексом 1
  });
*/!*
</script>
```

**При переборе `each`, текущий элемент передаётся как `this`.**

Можно было бы использовать это, чтобы сделать код короче:

```js
$('li a').each(function(i) {
  alert(i + ': ' + *!*this*/!*.innerHTML);

  if (i == 1) return false; 
});
```

## Получение конкретного элемента

Даже если элемент найден только один, всё равно результатом поиска будет jQuery-коллекция.

Если нам нужен один элемент из неё -- есть много способов его получить. Рассмотрим основные:

<ol>
<li>**Прямой доступ по номеру:**

```js
//+ run
alert( $('body')[0] ); // BODY
```

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

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

</li>
<li>**Метод [get(индекс)](http://api.jquery.com/get/), работает так же, как прямой доступ:**

```js
//+ run
alert( $('body').get(0) ); // BODY
```

Если элемента с таким номером нет -- вызов `get` возвратит `undefined`.

</li>
<li>**Метод [eq(индекс)](http://api.jquery.com/eq/) возвращает коллекцию из одного элемента -- с данным номером.**

Он отличается от метода [get(индекс)](http://api.jquery.com/get/) и прямого обращения по индексу тем, что возвращает именно jQuery-коллекцию с одним элементом, а не сам элемент.

Например:

```js
// DOM-элемент для первой ссылки
$('a').get(0);

// jQuery-объект из одного элемента: первой ссылки
$('a').eq(0);
```

Во втором случае вызов `eq` создаёт новую jQuery-коллекцию, добавляет в нее нулевой элемент и возвращает. Это удобно, если мы хотим дальше работать с этим элементом, используя методы jQuery.

Если элемента с таким номером нет -- `eq` возвратит пустую коллекцию.
</li>
</ol>


## "Сцепление" вызовов

Почти все методы jQuery-объекта возвращают jQuery-объект -- либо новый, либо тот  на котором вызваны.

**Поэтому можно вызывать методы один за другим.**

Это называют *"сцепление"* вызовов, или *"чейнинг"* (от англ. "chaining"):

```js
$('li a[href$=".pdf"]') // ссылки, оканчивающиеся на pdf
*!*
  .each(function() {
*/!*
    this.className = "pdf"; // дать им класс
  })
*!*
  .each(function() {
*/!*
    alert( this.href ); // вывести
  });
```

Для удобства чтения каждый новый вызов в чейнинге идёт с отступом и с новой строки.

## Итого

Для поиска элементов можно вызвать `$(CSS-селектор[, контекст])`. Результатом будет jQuery-объект, который можно:
<ul>
<li>Перебирать как массив.</li>
<li>Перебирать методом [each](http://api.jquery.com/each/).</li>
<li>Получить один элемент прямым доступом по индексу, либо вызовом [get](http://api.jquery.com/get/) или  [eq](http://api.jquery.com/eq/).</li>
</ul>

Для поиска используется, по возможности, `querySelectorAll`, либо если он не может обработать запрос -- встроенный движок Sizzle.