В jQuery используются стандартные CSS-селекторы. Вы наверняка с ними знакомы.
Вот несколько примеров, чтобы освежить знания:

Таким образом, для того, чтобы использовать селектор в jQuery, достаточно написать его внутри известной нам уже конструкции $(), например вот так:

Это более продвинутые селекторы, используемые для выбора дочерних элементов, элементов, следующих за другими элементами DOM и элементов с атрибутами, удовлетворяющими определенным условиям.

При использовании селектора детей (child selector) родительский и его прямой дочерний элементы разделяются символом >, например
p > a

Если ссылка будет вложенной в какой-то промежуточный элемент, она выбрана не будет.

Разберем селекторы по атрибутам (attribute selectors).

Например, мы хотим выбрать все ссылки, указывающие на сторонние ресурсы нашего сайта.
Делается это так:

Этот селектор указывает на все ссылки, значение href которых начинается на http://. Символ ^ указывает на то, что искомое выражение будет вначале строки, в которой будет вестись поиск.

Другой вариант селектора по атрибутам:

Селектор выберет все <form> у которых указан атрибут method.

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

Думаю, тут все понятно.

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

Таким образом мы выберем все <div>, title которых начинается на my.

А как насчет поиска в конце строки?
Смотрим:

C помощью этого селектора мы выберем все ссылки на PDF файлы.

Чтобы искать значение в любом месте строки делаем следующее:

Догадались? Это будут любые ссылки на сайт jquery.com.

Следующий вид селектора - это селектор контейнеров (container selector):

Этот селектор выберет все элементы <li>, содержащие <a>. При этом можно использовать до одного уровня вложений таких селекторов:

Следующий вариант работать уже не будет:

Ниже таблица основных CSS селекторов, поддерживаемых jQuery.

Иногда необходимо выбрать элементы по их позиции относительно других элементов на странице. В jQuery это предусмотрено.
Смотрим:

Ниже в таблице другие примеры выбора элементов по позиции в документе.

CSS селекторы это, конечно, хорошо, но иногда нам нужно выбрать особые элементы, например, все чекбоксы, отмеченные пользователем.
Для этого jQuery предлагает воспользоваться селектором :checked.
Например, в такой форме:

Допускается сочетание таких селекторов
Например:

или

Для инверсии фильтра используется указанный в таблице фильтр :not:

Так мы выберем все элементы input, кроме чекбоксов.

Обратите внимание, что

div p:not(:hidden) - правильно

div :not(p:hidden) - не правильно.

Создание кода делается через известную нам по первой главе функцию $().
Например,

Если мы хотим создать пустой элемент <div>, это можно сделать короче:

что эквивалентно $('<div></div>') или $('<div/>').

При этом таким укороченным способом нельзя создавать полноценные элементы <script>.

Набор вложенных элементов в jQuery очень похож на массив JavaScript.
У него даже есть свойство length, содержащее количество вложенных элементов.
Метод size() поможет нам узнать это число.
Например, подсчитаем количество ссылок на странице:

При этом поиск проходил внутри элемента с идентификатором #someDiv.
Метод html() будет рассмотрен в следующей главе, пока что примите это как есть.

Как говорилось ранее, набор вложений очень похож на массив JavaScript, поэтому допускается извлечение элементов из набора простой нумерацией элементов по индексу, например:

выдаст нам первый элемент из всех <img> на странице с атрибутом alt.

Кроме того, в jQuery есть специальная функция get(), выполняющая такое же действие:

Если индекс элемента не указывается, получим весь набор элементов.

А что делать, если нам нужно выполнить обратную операцию - найти индекс определенного элемента? Для этого есть функция index()

Так мы узнаем индекс картинки с идентификатором findMe среди всех изображений на странице.

Если искомый элемент не найден, функция вернет значение -1.

Для начала такой пример: мы хотим выбрать все изображения, у которых есть атрибут title или alt.
Сделаем это так:

То же самое делается специальным методом add():

То есть метод соединяет селекторы вместе, объединяя их логическим ИЛИ. Внутри метода add() может быть строка-селектор, фрагмент кода HTML (в этом случае элементы будут созданы и добавлены к набору) или элементы DOM (которые будут добавлены к набору).
Например:

Исключить элемент из набора по какому-либо параметру позволяет метод not().

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

Стоит отметить, что в метод not() не передается тип элемента, а только параметр, по которому элемент следует исключить из набора (то есть мы написали not('[title*=puppy]') вместо not('img[title*=puppy]')).

А что делать, если нужнол отфильтровать набор каким-нибудь выражением? Для этого есть метод filter(), который применяет переданную ему функцию каждому элементу набора.
Например, выберем все элементы таблицы, содержащие только численные значения:

Если функция вернет false, элемент будет исключен из набора.

Иногда возникает потребность выделить из нашего набора часть элементов, основываясь на их порядке в наборе.
Для этого в jQuery есть специальный метод slice(), который возвращает новый набор элементов (при этом старый остается без изменений).
Синтакс его следующий:

где begin - номер первого элемента, с которого начинать выделять новый поднабор (нумерация начинается с 0), а end - соответственно номер элемента, который уже не будет включен в набор (если его не писать, в поднабор будет выделена вся оставшаяся часть набора).
Например, выберем первые четыре элемента набора:

jQuery позволяет создавать новый набор на основе старого, основываясь на положении вложенного элемента относительно других.
Ниже в таблице приведены эти методы и их описание.

Например, $('li').children() вернет нам набор элементов, вложенных в <li>.

Метод find() возвращает новый набор, содержащий элементы, удовлетворяющие селектору.

Например, выберем все цитаты <cite> внутри параграфа <p> из набора, содержащегося в переменной wrappedSet:

Метод contains() вернет нам набор элементов, внутри которых содержиться переданная методу строка.
Например:

Пример вернет нам набор элементов <p>, содержащих текст «Lorem ipsum».

И последний метод в данном разделе помогает проверить, содержит ли набор по крайней мере один элемент, соответствующий переданному ему селектору.

Метод is() вернет true если хотя бы один элемент соответствует или false если не соответствует селектору.
Пример:

Таким образом переменной hasImage будет присвоено значение true, если на странице есть элемент <img>.

В jQuery есть возможность соединять методы в цепочки, что дает нам выполнять эффективные операции. Рассмотрим пару методов, которые помогут нам в дальнейшем управлять этими цепочками методов.

Для примера возьмем метод clone() (подробнее о нем будет рассказано в следующей главе, сейчас же он нам нужен для того, чтобы увидеть возможности другого метода). Этот метод создает копию элементов набора. Посмотрим следующий пример:

В результате будет создано два набора: один из всех элементов <img> на странице, а второй из копии этих элементов.
Метод clone() вернет нам этот второй набор и к нему будет применен метод appendTo().

А что делать, если мы хотим, например, изменить класс оригинального набора после того, как он будет продублирован.
То есть сделать какое-либо действие не с копией, а с оригиналом? Ведь после метода clone() работать мы будем именно с копией.

В такой ситуации нам на помощь придет метод end(). С помощью него мы вновь переключимся на работу с исходным набором.
Смотрим пример:

В данном случае addClass() будет применен к оригинальному набору, тогда как без end() он был бы применен к клону.

И последний метод в данной главе andSelf(), применяет метод к двум предшествующим наборам.
Хороший пример отсюда (в книге очень мало информации):

Мы ищем все элементы div и все все элементы p внутри них, а затем назначаем им два имени класса.
Но, обратите внимание, если в первой строке мы добавили к набору элементов p еще и предыдущий div, то во второй строке мы добавили класс, определяющий цвет фона только для элементов p внутри div, но никак не для самого элемента div.