JQuery селекторы
jQuery - это Javascript библиотека, которая упрощает работу с DOM, событиями, CSS и AJAX, а также позволяет легко создавать анимации. Главная особенность jQuery - это кроссбраузерность (да, и Internet Explorer 6 тоже:).Слоган jQuery звучит так: "Write less, do more", что в переводе на русский означает "Пиши меньше, делай больше" (или "Тише едешь - дальше будешь" :). Эти слова идеально подходят к описанию этой библиотеки и полностью себя оправдывают.
Первые шаги с jQueryДля начала Вам понадобится скачать одноименную библиотеку. Сделать это можно на официальном сайте jQuery . После этого следует подключить jQuery к Вашей HTML страничке. Сделать это можно с помощью добавления тега script в head документа:
Подключаем jQuery
После этого Вы уже можете начинать использовать jQuery.
Селекторы в jQueryПришло время рассказать о селекторах. Селекторы в jQuery - это те же самые селекторы CSS, только модифицированные. Модифицированные они потому, что программисты jQuery добавили много полезных селекторов для удобного поиска нужных элементов.
Рассмотрим пример кода:
Пример 1Параграф 1
Параграф 2
Параграф 3
// здесь будет ваш javascript код
Примеры получения каждого элемента документа:
$(document.body) - элемент body
$("div") - селектор возвращает все элементы div
$("p") или $("div p") - все параграфы p (3 штуки)
$("div > p") - возвращает параграфы, которые являются непосредственными дочерними нодами элемента div
$("p:first") - параграф №1
$("#pEl") или $("p#pEl") - возвратит параграф с идентификатором (id) "pEl"
$("p.second") - возратит параграф с классом "second"
$("p:eq(1)") - возвратит параграф с индексом 1 (индексы начинаются с 0, возвратится параграф №2)
$("p:last") - возвратит последний параграф
$("p.third#third") - возвратит параграф №3
Обратите внимание как легко найти нужный нам элемент. Забудьте про document.getElementById("id") и document.getElementsByTagName("p"), они нам больше не понадобятся.
Пример 2Рассмотрим более сильные возможности jQuery. Для этого нарисуем таблицу
| Ячейка 1 | Ячейка 2 |
| Ячейка 3 | Ячейка 4 |
| Ячейка 5 | Ячейка 6 |
| Ячейка 7 | Ячейка 8 |
В этом примере я использовал селектор ":odd", который выбирает все нечетные элементы и применил его к рядкам таблицы (тегам tr). ":even" в свою очередь выбирает четные (0, 2, 4, ...).
И так нам надо выбрать все нечетные рядки таблицы, но мы не хотим чтобы первый рядок, который является хедером (элементы th) менял свой цвет и полосы начинались с третьего рядка. В этом случае нам пригодится селектор ":not(selector)". Используется он так:
$("table tr:not(:first):odd") - выбираем все четные элементы tr кроме первого
Вот исходный javascript:
$("button").toggle(function() {
$("table tr:not(:first):odd").css("background", "#eee");
// 1-е нажатие, проставляем серый фон
},function() {
$("table tr:not(:first)").css("background", "none");
// 2-е нажатие, убираем фон со всех tr
});
На сайте jQuery в разделе селекторов есть отдельный подраздел, посвященный работе с формами. Селекторы предоставляют удобную работату с чекбоксами, кнопками, полями ввода и так далее. Нарисуем форму.
В прошлых уроках мы разбирали вопрос общих понятий jQuery и способов его подключения.
В этой статье речь пойдёт об применении селекторов в jQuery (CSS и XPath), которые позволяют с лёгкостью и точностью выбрать один или несколько элементов DOM. К каждому селектору будет приведён код, пример применения. Использование jQuery селекторов не вызывает проблем с работой в старый браузерах, например IE 6, так как содержит в себе механизмы работы CSS 1-3.
Пример jQuery кода
$(selector).function(parameters);
Селекторы в jQuery В данном уроке мы остановимся подробно на вопросе селекторов. Что же это такое?Селектор (от англ. select - выбирать) - это элементы DOM (объектной модели документа, например, теги или специально размеченные блоки), к которым мы обращаемся с запросом. Данное понятие существует и в JavaScript, и в CSS, и других языках, где нужно выбрать конкретный элемент и поработать с его свойствами.
Идентификаторы (id).
Если Вы хотите поработать с конкретным элементом, и только один раз (в теории, так как на практике некоторые браузеры не побрезгуют повторным использованием идентификатора), то присваиваем ему уникальный id.
Код HTML
#id - выбирает единственный элемент с переданным идентификатором (id). В данном случае special
Код jQuery
$("#special").css("border", "1px solid black");
В дальнейшем буду писать без тегов
, надеюсь понятно, что JavaScript надо заключать именно в них. В примере мы выбираем элемент с id special
, в данном случае это div. В нём мы используем функцию css
и создаём чёрную непрерывную (solid) границу (border) в 1 пиксель.
Классы (class).
.class - выбираем все элементы с указанным классом. Всё правильно, их может быть несколько. Главное, чтобы название класса было одинаковым.
Код HTML
Первый блок
Второй блок
Как видите, элемента (div) два и классы у них одинаковые.
Код jQuery
$(".spec_class").css("border", "1px solid red");
У всех элементов, где значение класса spec_class
также создаются такие же границы, как и в прошлом примере, но уже красные.
Элементы (elements).
Выбираются все элемента определённого типа. Это либо body , либо все div , либо все table и так далее.
Код jQuery
$("div").css("border", "1px solid green");
У всех div
появится зелёная рамка.
* (все элементы) - выбираем абсолютно все элементы. Даже head и body .
Код jQuery
$("*").css("border", "1px solid blue");
У всех элементов Вашего документа появится синяя рамка.
$("*", document.body).css("border", "2px solid black");
Выбираем все элементы в body и делаем им чёрную границу в 2 пикселя.
По типу: selector1, selector2, ..., selectorN - перечисляем все элементы. Ниже интересный пример совместного использования селекторов.
Код jQuery
$("div, span, p.spec_class").css("border", "1px solid red");
Выбирает все элементы div, span и p, у которых указан класс spec_class. Все селекторы просто указывается через запятую.
Выбирается главный элемент (родительский элемент) и элементы включённые в него (потомки). Рассмотрим на примере ниже родителя form и потомков select .
Код jQuery
$("form select").css("border", "1px dashed black");
У всех элементов select, потомков form будет установлена чёрная пунктирная граница.
parent - child
Теперь выберем всех потомков родителького элемента.
Код jQuery
$("#id > *").css("border", "1px double black");
В начале выбираем всех наследников элемента с идентификатором id
, а потом создаём им двойную границу чёрного цвета.
prev и next (предыдущий и следующий)
Указываем элементы, идущие следующими (next) за элементом, обозначенным в качестве предыдущего (prev).
Код jQuery
$("label + input").css("color", "blue").val("Готово!");
Выбираем элементы input, идущие за label. Устанавливаем им свойства CSS - цвет в форме чёрного цвета, а значение (.val) установлено Готово!
prev ~ siblings
Теперь работаем с сестринскими элементами. Выюираем всех сестёр, следующих за предыдущим элементом (prev).
Код jQuery
$("#prev ~ div").css("border", "3px groove blue");
Ищем все элементы div, которые являются сестринскими по отношению друг к другу и следуют сразу за элементом с идентификатором #prev. Обратите внимание, что в примере не будут отобраны элементы span, поскольку отбор идет только для элементов div.
Будет выбран первый элемент с указанным селектором.
Код jQuery
$("tr:first").css("font-style", "bold");
В первой строке (tr) в таблице текст будет выделен полужирным (bold).
Теперь будем выбирать последний элемент с указанным селектором.
Код jQuery
$("tr:last").css({backgroundColor: "yellow",fontWeight: "bolder"});
Находим последнюю строчку (tr) в таблице и красим фон в жёлтый цвет и также устанавливаем жирный шрифт (bolder).
:not(selector)
Используя отрицание отфильтровывает элементы. Выбираем все input, в которых не стоит флажка (checkbox), а также span, следующие за ними
Код jQuery
$("input:not(:checked) + span").css("background-color", "yellow");
Значение чекбоксов при этом не меняется.
Внимание! Интересный пример , который применяет каждый второй в своей практике. Как выбрать чётный или нечётный элементы? Нужно затем, чтобы строки в тексте или даже коде делать читаемыми. Стартовое значение 0.
Код jQuery
$("tr:even").css("background-color", "#с1с1с1");
Отбираем чётные строки в таблице. Выделена будет первая, третья и тд строки. Внимание! Отсчёт идёт по индексам, а в них первая строка имеет значение 0. Далее отбираются строки с индексами 0, 2, 4 и т.д.).
Теперь выбираем нечётные элементы. Считается значение индекса, начиная с 0. Соответственно будут выбраны значения 1,3,5,7 и тд. Это соответствует 2,4,6 и тд строчкам, так как их отсчёт идёт по факту, с первой.
Код jQuery
$("tr:odd").css("background-color", "#с1с1с1");
Фон нечётных строк окрашиваем в серый.
:eq(index)
Выбираем конкретный индекс элемента. В примере покрасим только одну строку таблицы.
Код jQuery
$("td:eq(2)").css("color", "blue");
Выбираем по индексу элемент 2. Напоминаю, это будет 3-я строка, так как тэо будет третий по счёт индекс (0,1,2).
:gt(index)
Теперь выбираем значения индекса, которые больше указанного в селекторе.
Код jQuery
$("td:gt(4)").css("text-decoration", "line-through");
Выбираем строки в таблице, индекс элемента которых больше 4, то есть их индекс равен 5,6 и тд. Это соответствует 6, 7 и тд встречающимся элементам, в нашем случае строкам таблицы.
:lt(index)
Теперь выбираем значения индекса, которые меньше указанного в селекторе.
Код jQuery
$("td:lt(3)").css("color", "red");
Выбираются все элементы td с индексом мНапример ищем все элементы TD, с индексом меньше 3. Поскольку отсчёт, ещё раз напоминаю, ведётся с нуля, то это строки таблицы (td) 1,2,3.
Будут выбраны все элементы, которые являются заголовками (h1,h2,h3 и тд)
Код jQuery
$(":header").css({ background:"#c1c1c1", color:"#0085cc" });
Для всех заголовков (элементов h) мы установим синий шрифт и светло-сервый фон.
:animated
Будут отобраны все элементы, являющиеся в тот момент анимированными.
Код HTML
Сделать первый div красным
Код jQuery
$("#run").click(function(){
$("div:animated").toggleClass("colored");
});
function animateIt() {
$("#mover").slideToggle("slow", animateIt);
}
animateIt();
Здесь пример немного посложнее. После клика по кнопке меняем цвет анимированного элемента (div). С не анимированными элементами изменений не происходит.
jQuery
#polosa1{ position: relative; background:white; width: 200px; height: 50px; border-top: solid 1px #000; }
#polosa2{ position: relative; background:blue; width: 200px; height: 50px; }
#polosa3{ position: relative; background:red; width: 200px; height: 50px; border-bottom: solid 1px #000; }
function addFlag1(){
$("div:eq(0)").css("background", "white");
$("div:eq(1)").css("background", "green");
$("div:eq(2)").css("background", "red");
}
function addFlag2(){
$("#polosa1, #polosa3").css("background", "red");
$("#polosa2").css("background", "white");
}
function addFlag3(){
$("div").css("background", "red");
}
Пример работы селекторов jQuery
Флаг Болгарии
Флаг Австрии
Флаг СССР
Демонстрация
Скачать исходники
Спасибо за внимание! Удачи в начинаниях!
На этом уроке мы познакомимся с селекторами элементов формы, которые будем использовать в качестве аргумента функции jQuery("селектор") для выбора элементов.
Назначение селекторов элементов формыСелекторы элементов формы предназначены для выбора элементов в зависимости от:
- их типа (значения атрибута type) - :button , :checkbox , :file , :image , :password , :radio , :reset , :submit , :text .
- того, является ли их тег input , textarea , select или button - :input .
- того, находится ли элемент в фокусе или нет - :focus .
- того, находятся ли элементы в активном состоянии (:enabled) или не активном (:disabled).
- того, находятся ли элементы option в состоянии selected или нет - :selected .
- того, находятся ли элементы checkbox , select и radio в состоянии selected или нет - :checked .
:button - выбирает все элементы button и элементы с type="button" . Селектор $(":button") эквивалентен $("button, input") .
Селектор:button не является частью спецификации CSS, он реализован исключительно в jQuery. Поэтому когда Вы используете его в селекторе для фильтрации элементов, увеличение производительности, которая обеспечивается нативным DOM-методом querySelectorAll() , получена не будет. Для увеличения производительности запроса в современных браузерах, используйте следующую конструкцию: $("селектор").filter(":button");
Например, выбрать все элементы button или элементы с type="button" , которые расположены внутри формы:
Обновить данные $("form:button"); //или с помощью метода filter $("form *").filter(":button");
:checkbox - выбирает все элементы с type="checkbox" . Селектор $(":checkbox") эквивалентен $("") .
Перед селектором:checkbox как и перед селекторами псевдоклассов (т.е. теми которые начинаются со знака " : ") рекомендуется указывать тег или другой селектор (например, имя класса). Если перед знаком " : " ничего не указывать, то подразумевается использование универсального селектора (*). Другими словами, $(":checkbox") эквивалент $("*:checkbox") . Но более правильно в этом случае вместо * использовать тег input: $("input:checkbox") .
Селектор:checkbox не является частью спецификации CSS, он реализован исключительно в jQuery. Поэтому когда Вы используете его в селекторе для фильтрации элементов, увеличение производительности, которая обеспечивается нативным DOM-методом querySelectorAll() , получена не будет. Для увеличения производительности запроса в современных браузерах, используйте следующую конструкцию: $("input");
Например, выбрать все элементы input , которые имеют атрибут type="checkbox" , т.е. являются флаговыми кнопками:
$("input:checkbox"); //или с помощью селектора атрибута $("input");
:checked - выбирает все элементы с состоянием checked или selected . Селектор:checked предназначен для элементов checkbox , select и кнопок radio .
Linux Windows Chrome Firefox Значение 1 Значение 2 Значение 3
:disabled - выбирает все элементы, которые отключены (disabled).
Перед селектором:disabled как и перед селекторами псевдоклассов (т.е. теми которые начинаются с " : ") рекомендуется указывать тег или другой селектор (например, имя класса). Если Вы перед знаком " : " ничего не указываете, то подразумевается использование универсального селектора (" * "). Другими словами, $(":disabled") эквивалентен $("*:disabled") . Но в этом случае более правильно вместо " * " использовать тега input: $("input:disabled") .
Селектор:disabled отличается от селектора атрибута . Селектор:disabled проверяет логическое значение (истина/ложь) свойства disabled элемента, в то время как селектор атрибута просто проверяет наличие атрибута disabled у элемента.
Селектор:disabled можно использовать только для выбора HTML-элементов, которые поддерживают атрибут disabled: , , , , и .
$("input:disabled");
:enabled - выбирает все элементы, которые включены (enabled).
Перед селектором:enabled как и перед селекторами псевдоклассов (т.е. теми которые начинаются с " : ") рекомендуется указывать тег или другой селектор (например, имя класса). Если Вы перед знаком " : " ничего не указываете, то подразумевается использование универсального селектора (" * "). Другими словами, $(":enabled") эквивалентен $("*:enabled") . Но более правильно в этом случае вместо " * " использовать тег input: $("input:enabled") .
Селектор:enabled отличается от:not() . Селектор:enabled выбирает элементы, у которых логическое свойство disabled имеет значение false . В то время как:not() выбирает элементы, у которых атрибут disabled не установлен.
Селектор:enabled можно использовать только для выбора HTML-элементов, которые поддерживают атрибут disabled: , , , , , и .
$("input:enabled");
:file - выбирает все элементы с type="file" . Селектор:file эквивалентен .
Перед селектором:file как и перед селекторами псевдоклассов (т.е. теми которые начинаются с " : ") рекомендуется указывать тег или другой селектор (например, имя класса). Если Вы перед знаком " : " ничего не указываете, то подразумевается использование универсального селектора (" * "). Другими словами, $(":file") эквивалент $("*:file") . Но более правильно в таких случаях вместо " * " использовать тег input: $("input:file") .
Селектор:file не является частью спецификации CSS, он реализован исключительно в jQuery. Поэтому когда Вы используете его в селекторе для фильтрации элементов, увеличение производительности, которая обеспечивается нативным DOM-методом querySelectorAll() , получена не будет. Для увеличения производительности запроса в современных браузерах, используйте селектор атрибута .
$("input:file"); // $("input");
:focus - выбирает элемент, находящийся в фокусе.
Перед селектором:focus как и перед селекторами псевдоклассов (т.е. теми которые начинаются с " : ") рекомендуется указывать тег или другой селектор (например, имя класса). Если Вы перед знаком " : " ничего не указываете, то подразумевается использование универсального селектора (" * "). Другими словами, $(":focus") эквивалентен $("*:focus") . Если Вам необходимо получить текущий элемент, находящийся в фокусе, то воспользуйтесь следующим кодом: $(document.activeElement) . Данный способ получает элемент, минуя его поиск в DOM-дереве.
:image - выбирает все элементы с type="image" . Селектор:image эквивалентен .
Селектор:image не является частью спецификации CSS, он реализован исключительно в jQuery. Поэтому когда Вы используете его в селекторе для фильтрации элементов, увеличение производительности, которая обеспечивается нативным DOM-методом querySelectorAll() , получена не будет. Для увеличения производительности запроса в современных браузерах, используйте .
$("input:image"); // $("input");
:input - выбирает все элементы input , textarea , select и button в документе. Т.е. он выбирает все элементы управления формы.
Селектор:input не является частью спецификации CSS, он реализован исключительно в jQuery. Поэтому когда Вы используете его в селекторе для фильтрации элементов, увеличение производительности, которая обеспечивается нативным DOM-методом querySelectorAll() , получена не будет. Для увеличения производительности запроса в современных браузерах, используйте следующую конструкцию: $("селектор").filter(":input");
Параметр 1 Параметр 2 $("*:input"); // $("form *).filter(":input");
:password - выбирает все элементы с type="password" . Селектор:password" эквивалентен .
Перед селектором:password как и перед селекторами псевдоклассов (т.е. теми которые начинаются с " : ") рекомендуется указывать тег или другой селектор (например, имя класса). Если Вы перед знаком " : " ничего не указываете, то подразумевается использование универсального селектора (" * "). Другими словами, $(":password") эквивалентен $("*:password") . Но более правильно в таких случаях вместо " * " использовать тега input: $("input:password") .
Селектор:password не является частью спецификации CSS. Он реализован исключительно в jQuery. Поэтому когда Вы используете его в селекторе для фильтрации элементов, увеличение производительности, которая обеспечивается нативным DOM-методом querySelectorAll() , получена не будет. Для увеличения производительности запроса в современных браузерах, используйте .
$("*:password"); // $("");
:radio - выбирает все элементы с type="radio" . Селектор:radio эквивалентен .
Перед селектором:radio как и перед селекторами псевдоклассов (т.е. теми которые начинаются с " : ") рекомендуется указывать тег или другой селектор (например, имя класса). Если Вы перед знаком " : " ничего не указываете, то подразумевается использование универсального селектора (" * "). Другими словами, $(":radio") эквивалентен $("*:radio") . Но более правильно этом случае вместо " * " использовать тег input: $("input:radio") .
Селектор:radio не является частью спецификации CSS, он реализован исключительно в jQuery. Поэтому когда Вы используете его в селекторе для фильтрации элементов, увеличение производительности, которая обеспечивается нативным DOM-методом querySelectorAll() , получена не будет. Для увеличения производительности запроса в современных браузерах, используйте .
$(":radio"); // $("");
:reset - выбирает все элементы с type="reset" . Селектор:reset эквивалентен .
Селектор:reset не является частью спецификации CSS, он реализован исключительно в jQuery. Поэтому когда Вы используете его в селекторе для фильтрации элементов, увеличение производительности, которая обеспечивается нативным DOM-методом querySelectorAll() , получена не будет. Для увеличения производительности запроса в современных браузерах, используйте .
$(":reset"); // $("");
:selected - выбирает все элементы, которые находятся в состоянии selected . Селектор:selected работает только с элементами option и не работает с элементами checkbox и radio . Для работы с последними используйте селектор:checked .
Селектор:selected не является частью спецификации CSS, он реализован исключительно в jQuery. Поэтому когда Вы используете его в селекторе для фильтрации элементов, увеличение производительности, которая обеспечивается нативным DOM-методом querySelectorAll() получена не будет. Для увеличения производительности запроса в современных браузерах, используйте следующую конструкцию: $("селектор").filter(":selected");
Цветы Кустарники Деревья Земля Трава $(":selected"); // $("*").filter(":selected");
:submit - выбирает все элементы с type="submit" . Селектор:submit предназначен для элементов button или input .
Селектор:submit не является частью спецификации CSS, он реализован исключительно в jQuery. Поэтому когда Вы используете его в селекторе для фильтрации элементов, увеличение производительности, которая обеспечивается нативным DOM-методом querySelectorAll() , получена не будет. Для увеличения производительности запроса в современных браузерах, используйте input, button
$(":submit"); // $("input,button");
:text - выбирает все элементы с type="text" .
jQuery функция $(":text") позволяет нам выбрать элементы . Перед селектором:text как и перед селекторами псевдоклассов (т.е. теми которые начинаются с " : ") рекомендуется указывать тег или другой селектор (например, имя класса). Если Вы перед знаком " : " ничего не указываете, то подразумевается использование универсального селектора (" * "). Другими словами, $(":text") эквивалентен $("*:text") . Но более правильно этом случае вместо " * " использовать тег input: $("input:text") .
Начиная с версии jQuery 1.5.2, селектор:input также выбирает элементы input , у которых не указан атрибут type (в этом случае подразумевается, что элемент имеет type="text").
Разницу между $(":text") и $("") продемонстрируем на следующем примере:
$("").is(""); // false $("").is(":text"); // true
Селектор:text не является частью спецификации CSS, он реализован исключительно в jQuery. Поэтому когда Вы используете его в селекторе для фильтрации элементов, увеличение производительности, которая обеспечивается нативным DOM-методом querySelectorAll() , получена не будет. Для увеличения производительности запроса в современных браузерах, используйте .
$(":text"); // $("input");
JQuery селекторы являются одним из наиболее важных частей библиотеки JQuery.
JQuery селекторыJQuery селекторы позволяют выбирать и манипулировать HTML-элемент (ы).
JQuery селекторы используются для "найти" (или выберите) HTML элементы, основанные на их имя, ID, классы, типы, атрибуты, значения атрибутов и многое другое. Он основан на существующих CSS селекторов , а кроме того, у него есть некоторые собственные селекторы.
Все селекторы в JQuery начинаются с знака доллара и скобки: $ ().
Элемент выбораСелектор JQuery элемент выбирает элементы на основе имени элемента.
Вы можете выбрать все элементы
На странице, как это:
пример
Когда пользователь нажимает на кнопку, все
Элементы будут скрыты:
#id SelectorСелектор #id JQuery использует атрибут идентификатор HTML-тега, чтобы найти определенный элемент.
Идентификатор должен быть уникальным в пределах страницы, так что вы должны использовать селектор #ID, если вы хотите, чтобы найти единственный, уникальный элемент.
Чтобы найти элемент с определенным идентификатором, написать хэш-символ, за которым следует идентификатор HTML-элемента:
пример
Когда пользователь нажимает на кнопку, элемент с идентификатором = "тест" будут скрыты:
.class SelectorСелектор класса Jquery находит элементы с определенным классом.
Чтобы найти элементы с определенным классом, написать период символа, за которым следует имя класса:
пример
Когда пользователь нажимает на кнопку, элементы с классом = "тест" будут скрыты:
Другие примеры JQuery селекторы| $("*") | Selects all elements | Try it |
| $(this) | Selects the current HTML element | Try it |
| $("p.intro") | Selects all Elements with class="intro" |
Try it |
| $("p:first") | Selects the first Element |
Try it |
| $("ul li:first") | Selects the first |
Try it |
| $("ul li:first-child") | Selects the first |
Try it |
| $("") | Selects all elements with an href attribute | Try it |
| $("a") | Selects all elements with a target attribute value equal to "_blank" | Try it |
| $("a") | Selects all elements with a target attribute value NOT equal to "_blank" | Try it |
| $(":button") | Selects all elements and elements of type="button" | Try it |
| $("tr:even") | Selects all even | |
| Try it | ||
| $("tr:odd") | Selects all odd | |
| Try it |
Если ваш сайт содержит много страниц, и вы хотите, чтобы ваши функции Jquery будет легко поддерживать, вы можете поместить свои функции JQuery в отдельный файл.js.