<MyRusakov.ru />

Своя Web-студия за 55 дней

Своя Web-студия за 55 дней

Система "Своя Web-студия за 55 дней" поможет Вам открыть свою собственную успешную Web-студию всего за 55 дней. Обучение построено на теории, плюс практике, то есть я прямо на Ваших глазах буду абсолютно с нуля открывать свою Web-студию, нанимать специалистов, принимать и выполнять заказы. Это настоящее реалити-шоу. Плюс весь курс разбит по дням, в каждый из которых Вам необходимо будет посмотреть небольшое количество видеоуроков, выполнить задания по этим урокам и проставить галочки о выполнении. Каждый из дней у Вас будет отнимать не более 1-го часа в день.

Таким образом, выполняя ежедневно маленькие шажки, Вы через 55 дней станете владельцем уже прибыльной Web-студии, заработав при этом первые 100 000 рублей.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Выборка элементов в jQuery

Выборка элементов в jQuery

Есть 2 основных задачи jQuery: выборка элементов и управление элементами. Например, может быть такая задача: выбрать все div с определённым классом и увеличить в них шрифт. Увеличение шрифта - это уже управление выборкой. А в этой статье Вы научитесь делать выборку элементов на jQuery.

Не сыскала бы популярности библиотека jQuery, если бы не потрясающий механизм выборки элементов. В основе лежат селекторы CSS. Общий вид выборки элементов следующий:

var elements = $("селекторы");

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

<div class="red">Красный блок</div>
<div class="blue">Синий блок</div>
<div class="red">Красный блок</div>
<script type="text/javascript">
  var elements = $(".red");
  for (var i = 0; i < elements.length; i++)
    alert(elements[i].className);
</script>

В данном примере мы делаем выборку всех элементов с class="red", дальше их через цикл перебираем и выводим имя класса. Очевидно, что там везде будет "red".

Абсолютно любые селекторы, которые Вы использовали в CSS так же можно использовать в jQuery для выборки: контекстные селекторы, селектор ID, селектор класса, селектор параметров, а также всевозможные их комбинации.

Вместо псевдоэлементов из CSS в jQuery имеются фильтры (иногда их так же называют псевдоэлементами). Их цель та же, что и у псевдоэлементов: уточнить выборку. Разберём пример:

<div class="red"><span>Красный блок</span></div>
<div class="blue"><span>Синий блок</span></div>
<div class="green"><span>Зелёный блок</span></div>
<script type="text/javascript">
  var elements = $("div:not(.green) span");
  for (var i = 0; i < elements.length; i++)
    alert(elements[i].innerHTML);
</script>

В данном примере мы делаем выборку всех span внутри тех div, у которых class не равен "green" (это делает фильтр not).

Есть и масса других фильтров, наиболее популярные из них:

  • focus - элемент, который находится в фокусе.
  • even - элементы с чётными номерами позиции.
  • odd - элементы с нечётными номерами позиции.
  • hidden - невидимые элементы.
  • visible - видимые элементы.
  • checked - отмеченные элементы (checkbox и radio).

Безусловно, в данной статье разобраны далеко не все возможные селекторы. Их даже больше, чем в CSS. Однако, на практике применяется только небольшая часть из них, а полный список, если потребуется, всегда можно будет посмотреть в справочнике.

А более подробно выборка элементов с помощью jQuery разобрана в этом курсе.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (5):

lev_100rus lev_100rus 11.10.2013 14:31:42

Опечатка: " выборку все элементов с class='red'"

Ответить

ssamars ssamars 11.10.2013 20:24:04

Михаил добрый день, помоги пожалуйста, нужна такая карусель. Можешь объяснить как создать такую вот пример - http://fullserv.ru/service.htm где каждый значок ссылка.Заранее благодарю.

Ответить

Admin Admin 11.10.2013 21:18:10

1) Можно посмотреть исходный код. 2) Можно поискать плагин jQuery.

Ответить

Admin Admin 11.10.2013 21:16:58

Спасибо, исправил!

Ответить

pashara pashara 11.10.2013 22:48:27

Не в обиду Михаил, но пока это самоя нормальная статья по jquery. Чтобы дальше такие были! Молодец!

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.