JQuery основы. Выборка элементов. Часть 1
Прежде, чем начать работать с элементом необходимо научиться его отбирать. Выборка элементов в jQuery построена также как и выборка в CSS.
Для того, чтобы понять как происходит выборка элементов в jQuery давайте рассмотрим CSS файл:
Все что идет до фигурных скобок называется селектор.
- Название тега
- Класс
- Индентификатор
Все что записано в фигурных скобках после селектора — это свойства элемента с данным селектором.
Что на самом деле происходит? Когда браузер пользователя обращается к нашему 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 есть фильтры выборки, о которых мы и поговорим в следующей статье. А пока все. Не забываем подписываться на мой блог.
[…] с jQuery. Так в прошлой статье мы остановились на способах выборки элементов. Но не всегда выборка помогает нам выбрать […]
[…] […]
[…] jQuery — это фреймворк JavaScript. И мы с Вами уже научились делать выборку элементов, делать фильтрацию выборки, производить стандартные […]
а где рабочий пример?