<MyRusakov.ru />

React JS, Redux, ES2015 с Нуля до Гуру

React JS, Redux, ES2015 с Нуля до Гуру

Данный курс - это обширный курс по JavaScript и фреймворку React, который позволит Вам с нуля создавать мощные современные, динамические JavaScript-приложения.

Вы узнаете о тонкостях работы с "профессиональным" JavaScript, а так же узнаете о нововведениях в его новый стандарт ES2015, Вы узнаете, как организовать профессиональное окружение для FrontEnd, изучите профессиональный фреймворк - ReactJS.

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

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

Подписавшись по 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. Чтобы дальше такие были! Молодец!

Ответить

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