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