Выборка элементов в 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 разобрана в этом курсе.
-
Создано 11.10.2013 12:08:47
-
Михаил Русаков
Комментарии (5):
Опечатка: " выборку все элементов с class='red'"
Ответить
Михаил добрый день, помоги пожалуйста, нужна такая карусель. Можешь объяснить как создать такую вот пример - http://fullserv.ru/service.htm где каждый значок ссылка.Заранее благодарю.
Ответить
1) Можно посмотреть исходный код. 2) Можно поискать плагин jQuery.
Ответить
Спасибо, исправил!
Ответить
Не в обиду Михаил, но пока это самоя нормальная статья по jquery. Чтобы дальше такие были! Молодец!
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.