Yutex - Платный хостинг PHP.
Advego.ru - система покупки и продажи контента для сайтов, форумов и блогов

Технические фишки инфобизнеса 2014

Статьи для сайтов!!!
Функция jquery() - Селектор Выборка вложенных элементов Начало работы с jQuery

Функция jquery() - Выборка вложенных, следующих и дочерних элементов - Контекстный селектор

Выборка элементов страницы

Урок №3 Выборка вложенных элементов

В прошлом уроке мы рассмотрели, как при помощи функции jquery() делать выборку элементов страницы по id идентификатору, по имени класса и по названию элемента (имени тега).

Здесь поговорим о выборке вложенных,следующих и дочерних элементов.

Нужно будет снова обратиться к CSS и вспомнить, что такое контекстный селектор?

Выборка вложенных элементов - Контекстный селектор

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

Выборка вложенных элементов - Контекстный селектор

Немного комментариев...

  • $('p strong'); - выборка всех тегов strong, содержащихся внутри тегов p;
  • $('.sky em'); - выборка тега em, если он находится внутри элемента с именем класса .sky;
  • $('#tree span'); - выборка тегов span, если они располагаются внутри элементов с id-идентификатором three.

Выбор следующего элемента

Рассмотрим ситуацию, когда известен id-идентификатор какого-либо тега, нужно выбрать следующий за ним произвольный тег, никак не обозначенный (не имеющий ни класса, ни id-идентификатора).

Выбор следующего элемента

Итак, каков синтаксис в jQuery, позволяющий при помощи функции jquery() выбрать следующий тег?

<p id ="three">Forest</p>
<p>Unknow</p>

$("#three + p");

Указываем сначала id-идентификатор начального тега three.

Затем после знака "+" имя следующего за ним элемента - тега p.

Таким образом, тег, следующий за каким-либо элементом, может не иметь ни id-идентификатор, ни класса. И для его выбора, обязательно указать его имя (в нашем случае - это тег p).

Выбор дочерних элементов

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

В jQuery тоже есть такая возможность, которая реализуется при помощи свойства jquery().

Выбор дочерних элементов

Для выборки дочерних элементов...

  • Сначала указывается класс родительского элемента (в нашем случае это класс #current тега div).
  • Затем после символа ">" название дочернего элемента, который необходимо выбрать - в нашем случае это img.
  • Тем самым проводится выборка всех дочерних тегов img относительно родительского тега div, имеющего класс #current.

Казалось бы, можно то же самое сделать, используя контекстный селектор, т.е. сделать выборку вложенных тегов img

1. Выбираем дочерние элементы - теги img:
<div id="current">
<img id="a">
<img id=
"b">
</div>

$("#current > img"); Будут выбраны оба тега img

2. Выбираем теги img, используя контекстный селектор (т.е. делаем выборку изображений, как вложенных тегов):
<div id="current">
<img id="a">
<img id=
"b">
</div>

$("#current img"); Будут выбраны оба тега img

3. Но что если один из тегов img будет вложенным в еще один тег?

В этом случае, используя синтаксис для выбора дочерних элементов, мы сделаем выборку лишь одного тега img, так как второй уже не будет дочерним, по отношению к div
<div id="current">
<img id="a">
<p> <img id="b"></p> Вложенный тег img
</div>

$("#current > img"); Будет выбран один тег img

*** В то время как использование контекстного селектора и в этом случае сделает выборку всех тегов img, так как все они все равно вложены в div.

Такие тонкости следует учитывать при программировании на jQuery.

Домашнее задание - Селектор CSS - Выборка элементов

Домашнее задание - Селектор CSS - Выборка элементов

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


1. Есть блок div c id="div_for_img", внутри которого расположены 4 изображения.
2. Одно из них расположено внутри абзаца – тег p.
3. За блоком div также следует абзац – тег p.
4. Используя таблицу стилей, проделайте следующие манипуляции:

- создайте CSS-селектор и пропишите CSS-правило, которое будет задавать сплошную рамку красного цвета толщиной в 1px всем изображениям;

- измените селектор таким образом, чтобы рамка появлялась только у дочерних по отношению к блоку div изображений;

 - измените селектор таким образом, чтобы рамка появлялась у абзаца, который следует за блоком div.

Далее следует решение поставленной задачи...

<div id="div_for_img">

<img src="img/peng_32.gif" />
<img src=
"img/peng_32.gif" />
<img src=
"img/peng_32.gif" />
<p><img src="img/peng_32.gif" /></p>

</div>

<p>Абзац за блоком div</p>

Сплошная рамка для всех изображений

#div_for_img img{
border:#C00 solid 1px;
}

Рамка только у дочерних по отношению к блоку div изображений

#div_for_img > img{
border:#C00 solid 1px;
}

Рамка у абзаца, который следует за блоком div.

#div_for_img + p{
border:#C00 solid 1px;
}

Главная Изучаем jQuery Выборка вложенных элементов Начало работы с jQuery
jQuery
Дизайн сайтов
ПОИСК ПО САЙТУ:

Моё имя Антон. Связаться со мною Вы можете по e-mail: averagev@mail.ru