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

1. Название тега
2. Класс
3. Индентификатор

Все что записано в фигурных скобках после селектора — это свойства элемента с данным селектором.

Что на самом деле происходит? Когда браузер пользователя обращается к нашему CSS-файлу, когда он доходит до какого-то селектора, то начинает выполнять свойства соответствующие элементу с данным селектором. Например в CSS файле:

p {
 font-family: Tahoma;
 font-size:12px;
}

Теперь когда браузер дойдет до элемента <p>Привет</p>, то к нему применяться эти свойства.
Теперь давайте посмотрим как происходит выборка дочерних элементов в CSS. Например нам необходимо применить приведенные выше CSS свойства не ко всем абзацам, а к абзацам с идентификатором logo. Тогда CSS будет выглядеть следующим образом:

p  #logo{
 font-family: Tahoma;
 font-size:12px;
}

а если мы хотим применить данные свойства не только к абзацам с id=”logo”, а ко всем элементам с id=”logo”, тогда наш CSS выглядит следующим образом:

#logo{
 font-family: Tahoma;
 font-size:12px;
}

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

$(“p”);

Или если нам необходимо выбрать все элементы со страницы с id=”logo”, то запишем это следующим образом:

$(“#logo”);

Аналогично мы может отобрать все элементы по классу, например class=”logo”:

$(“.logo”);

Если же мы хотим выбрать дочерние элементы, например все абзацы <p> имеющие идентификатор logo, то нам необходимо прописать:

$(“p #logo”);

Следующий вид выборки это выбор следующего элемента. Например, у нас есть следующий html-код:

<div id=”logo”>Тест 1</div>
<p>Тест 2</p>

И нам необходимо выбрать именно тег p, в котором находиться текст “Тест 2”. Как видите сделать это не так легко, используя представленные выше выборки. Но в jQuery есть специальный селектор, который позволяет упростить нам задачу. Это селектор выбора следующего элемента +. Т.е. в нашем случае мы можем привязаться к div с id=”logo” и применив данный селектор выбрать следующий элемент:

$(“#logo + p”);

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

<div id=”content”>
 <p>Привет</p>
 <p>Мы начинаем изучать jQuery</p>
 <p>И сейчас  мы знакомимся с селекторами выборки элементов</p>
</div>

И нам необходимо выбрать все p, которые находятся внутри тега div id=”content” Наш код будет выглядеть следующим образом:

 $(“#content > p”);

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

<img src="images/1.png"  width="50" height="50">
<img src="images/2.png"  width="50" height="50">
<img src="images/3.png"  width="50" height="50">

и нам необходимо выбрать все картинки, у которых width=”50”. Тогда выборка в jQuery будет выглядеть следующим образом.

 $(“img[width=50]”);

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

<img src="images/img1.png"  width="50" height="50">
<img src="images/img2.png"  width="50" height="50">
<img src="images/img3.png"  width="50" height="50">

и нам необходимо выбрать все картинки у которых атрибут src начинается с images/img, тогда эта выборка в jQuery осуществляется следующим образом:

 $(“img[src^=images/img]”);

По аналогии мы можем сделать выборку по атрибутам значения, которых заканчиваются каким-то условием. Т.е. из предыдущего html-кода мы хотим выбрать все png картинки. Тогда выборка в jQuery будет выглядеть следующим образом:

 $(“img[src$=.png]”);

Следующая выборка в jQuery — это когда необходимо выбрать по атрибуту значение которого может быть в любом месте. Из предыдущего html-кода нам необходимо выбрать все картинки в названии, которых есть слово “img”.

 $(“img[src*=img]”);

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