JQuery основы. Выборка элементов. Часть 1

Ромчик
4

Изучаем jqueryПрежде, чем начать работать с элементом необходимо научиться его отбирать. Выборка элементов в 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 есть фильтры выборки, о которых мы и поговорим в следующей статье. А пока все. Не забываем подписываться на мой блог.

Понравилась статья? Поделись с друзьями.
  • Add to favorites
  • Добавить ВКонтакте заметку об этой странице
  • Twitter
  • Facebook
  • Мой Мир
  • LiveJournal
  • Одноклассники
  • Блог Я.ру
  • MySpace
  • FriendFeed
  • В закладки Google
  • Google Buzz
  • Яндекс.Закладки
  • Reddit
  • StumbleUpon
  • Technorati
  • del.icio.us
  • БобрДобр
  • LinkedIn
  • Memori.ru
  • Сто закладок
  • Blogger

  • JQuery основы. Фильтр выбора элементов. Часть 2 | Все о WEB программировании - 27.06.2012 в 13:07

    […] с jQuery. Так в прошлой статье мы остановились на способах выборки элементов. Но не всегда выборка помогает нам выбрать […]

  • JQuery основы. Методы: attr, removeAttr, addClass, removeClass, css, animate. Часть 5 | Все о WEB программировании - 04.07.2012 в 13:59

    […] jQuery — это фреймворк JavaScript. И мы с Вами уже научились делать выборку элементов, делать фильтрацию выборки, производить стандартные […]

  • Жека - 28.02.2013 в 09:33

    а где рабочий пример?

  • ©2012-2017 По всем вопросам обращайтесь через форму обратной связи

    Яндекс.Метрика