Селекторы и фильтры 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 и взаимодействовать с ним. Выбирайте тот способ, который вам подходит, и используйте его на практике.

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

В прошлых уроках мы разбирали вопрос общих понятий jQuery и способов его подключения.
В этой статье речь пойдёт об применении селекторов в jQuery (CSS и XPath), которые позволяют с лёгкостью и точностью выбрать один или несколько элементов DOM. К каждому селектору будет приведён код, пример применения. Использование jQuery селекторов не вызывает проблем с работой в старый браузерах, например IE 6, так как содержит в себе механизмы работы CSS 1-3.

Структура кода jQuery Знак доллара $ - обозначает использование jQuery , selector - элемент DOM с которым работаем и специальная функция jQuery с её параметрами (например, анимация, развёртывание, перемещение и тд).

Пример 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. Все селекторы просто указывается через запятую.

Иерархические селекторы в jQueryancestor descendant

Выбирается главный элемент (родительский элемент) и элементы включённые в него (потомки). Рассмотрим на примере ниже родителя 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.

Базовые фильтры:first

Будет выбран первый элемент с указанным селектором.

Код 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. Файл полностью готов к работе, достаточно просто скопировать код целиком в созданный html-файл. Бибилотека в примере подключается с сервера Google, поэтому для корректной работы файла потребуется подключение к интернету. Под кодом есть Демо-версия для просмотра.

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; }

Пример работы селекторов 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 селекторыSyntax Description Example elements elements

$("*")	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 element of the first	Try it
$("ul li:first-child")	Selects the first element of every	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.