Jquery выбор элементов. Селекторы jQuery. Селекторы в jQuery

Задача, которая очень часто встает перед начинающими разработчиками javascript это выбор элемента на веб-странице по его атрибуту id.

Предположим, что у нас есть код на странице.

Содержимое блока.

Каким образом можно выбрать элемент с id=»elem» и произвести с ним ряд каких-то действий?

Здесь есть несколько вариантов решения проблемы. Давайте их сейчас рассмотрим.

Вариант 1. Воспользоваться методом Javascript getElementById.

Есть способ, как можно обратиться к элементу по его id используя «чистый» javascript код, без использования каких-то сторонних библиотек. Этот способ заключается в использовании метода ggetElementById(«id_элемента»). Таким образом мы обращаемся к нужному нам элементу по его id.

Давайте посмотрим, как это работает на простом примере.

Содержимое блока. alert(document.getElementById("elem").innerHTML);

Обратите внимание, что эти строки кода (скрипт) находится ниже самого элемента. Это обязательное условие работы этого скрипта, т.к. код Javascript выполняется по мере загрузки страницы. Если расположить код выше, то мы будем обращаться к элементу на странице, который еще не подгрузился, т.е. его в коде, на момент выполнения скрипта, еще не будет. Есть способы, как этого можно избежать, но это выходит за рамки данной статьи.

В итоге, если все правильно работает, мы получим всплывающее окно. В этом окне будет выводиться текст, который находится внутри блока div.

Давайте теперь посмотрим, как можно решить эту задачу другим способом.

Вариант 2. С помощью библиотеки Jquery.

Второй вариант выбора элемента по его id, заключается в использовании библиотеки Jquery. На практике, в современных скриптах, чаще всего пользуются именно этим способом. Он намного более удобен и легче запоминается.

Для того, чтобы обратиться к элементу по его id нужно воспользоваться конструкцией:

$("#elem")

Здесь elem – имя, которое содержится в атрибуте id.

Т.к. мы будем использовать стороннюю библиотеку Javascript, которая называется Jquery, то эту библиотеку нужно сначала подключить.

Добавляется она в разделе , одним из способов, как это можно сделать, нужно добавить следующую строку кода:

Чтобы библиотека могла подгрузиться должно быть соединение с Интернет.

Содержимое блока. alert($("#elem").html());

Сам скрипт, как и в предыдущем примере, должен находиться ниже по коду того элемента, с которым вы хотите взаимодействовать.

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

JavaScript, как и CSS, обладает функционалом, позволяющим обращаться к HTML элементам для преобразования контента страниц. В CSS это достигается путём написания селекторов. В JavaScript существует несколько способов организации данного функционала, и вот один из них:

Var primaryHeadings = document.getElementsByTagName("h1");

Данный код извлекает все заголовки h1 и, грубо говоря, помещает их в переменную primaryHeadings. Если на странице присутствует несколько заголовков, то все они будут помещены в массив.

Var ou812 = document.getElementById("eddie");

Данный код выбирает элемент с id = “eddie”.

Var guitars = document.getElementsByClassName("axes");

Также мы можем выбирать элементы по названию их классов.

Добавим немного Sizzle

Различного рода JavaScript фрэймворки, предоставляют собственные возможности составления селекторов. Одним из самых успешных был Sizzle, который в последствии преобразился в jQuery. В отличие от своего потомка, Sizzle мог только работать с DOM и манипулировать им. Если вам не нужен весь остальной функционал jQuery, то и сегодня вы можете скачать Sizzle как отдельную библиотеку.

С развитием данных библиотек написание селекторов значительно сократилось и преобразилось:

$("#dave").css()

Данный код извлекает html элемент с id=”dave” и позволяет работать с его css стилями.

Sizzle - это не единственная JavaScript библиотека для манипуляции html кодом. Также существуют и другие варианты, к примеру rangy . Однако, по моему мнению, всё выше перечисленное устарело перед тем, что ждёт вас дальше в этой статье.

Новый уровень JavaScript

Многие разработчики настолько часто начали пользоваться jQuery, что даже не заметили кардинальных изменений в самом JavaScript.

“JavaScript Selector API” - это официальная часть спецификации HTML5, она может быть использована и при написании XHTML страниц. Новый синтаксис очень прост:

Document.querySelector("#eddie")

Данный код является абсолютно эквивалентным document.getElementById("eddie"). Не впечатляет? Что насчёт этого:

Document.querySelector("#eddie h1 + p")

Новый функционал позволяет манипулировать DOM-ом, используя сложные CSS выражения.

Метод querySelector извлекает только первый попавшийся элемент. Для извлечения всех необходимо воспользоваться querySelectorAll:

Var hiFrets = document.querySelectorAll("table#frets tr:nth-child(3)")

Данный код извлекает каждую третью строку из таблицы с id=”frets”.

Несколько очень важных моментов

Существует несколько ограничений, о которых вы должны знать, если будете использовать метод querySelector / All:

Не все браузеры поддерживают новый функционал. Если вам важно, чтоб код работал на IE6-7, то лучше пользоваться библиотеками, которые могут манипулировать DOM-ом: Sizzle или jQuery.

Селекторы должны быть составлены очень аккуратно, иначе браузеры их не поймут, и выше перечисленные методы вернут null. В общем, будьте очень осторожны, особенно при использовании селекторов CSS3.

В отличии от getElementsByTagName, метод querySelectorAll возвращает статический список извлечённых элементов в том виде, в которым они находятся на странице в данный момент времени. Это значит, что при внесении каких-либо динамических изменений в код (добавление, удаление элементов через JavaScript), необходимо будет заново воспользоваться методом querySelectorAll.

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

На этом уроке мы познакомимся с селекторами элементов формы, которые будем использовать в качестве аргумента функции 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 - это 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

Ячейка 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
});

Пример 3 - работа с формами

На сайте jQuery в разделе селекторов есть отдельный подраздел, посвященный работе с формами. Селекторы предоставляют удобную работату с чекбоксами, кнопками, полями ввода и так далее. Нарисуем форму.