Jquery выбор элементов с неполным названием. Селекторы и фильтры jQuery. Сужение набора до элементов, имеющих определенных потомков
Сохраните эту страницу для тестирования приведенных ниже примеров.
В большинстве случаев работа с jQuery осуществляется в два этапа, следуя одному и тому же шаблону:
первый этап заключается в выборе с помощью функции $() начального набора элементов страницы, соответствующих определенному критерию отбора, которые возвращаются в виде содержащего их объекта jQuery;
а второй - в выполнении над каждым элементом набора одной или нескольких операций, приводящих к созданию конечного набора.
В этой статье мы сосредоточим свое внимание на первом из этапов. Будут рассмотрены методы jQuery, позволяющие управлять выбранным набором и корректировать его состав в точном соответствии с конкретными задачами. Обычно исходят из некоего предварительно выбранного набора элементов, воздействуя на который, добиваются того, чтобы в нем остались лишь действительно необходимые элементы.
Расширение набора выбранных элементовМетод add() позволяет добавить в существующий объект jQuery дополнительные элементы. Различные варианты вызова этого метода приведены в таблице ниже:
Подобно многим методам jQuery, метод add() возвращает объект jQuery, который можно использовать для вызова других методов, в том числе и для последующих вызовов метода add(). Пример использования метода add() для расширения ранее найденного набора приведен в ниже:
$(function() { var labelElems = document.getElementsByTagName("label"); var jq = $("img"); $("img:even").add("img").add(jq) .add(labelElems).css("border", "thick double red"); });
В этом сценарии для добавления элементов в первоначальный набор используются три подхода: с помощью другого селектора, с помощью объектов HTMLElement и с помощью другого объекта jQuery. Построив нужный набор объектов, мы вызываем метод css(), устанавливая для их свойств border значения, обеспечивающие окружение надписей рамками, прорисованными толстыми двойными линиями, как показано на рисунке:
Сужение набора выбранных элементовСуществует ряд методов, позволяющих удалять элементы из существующего набора. Их краткое описание приведено в таблице ниже. Каждый из этих методов возвращает новый объект jQuery, содержащий урезанный набор элементов. Объект jQuery, для которого вызывается метод, остается неизменным:
| eq(индекс) | Исключает из набора все элементы, кроме элемента с указанным индексом |
| filter(условие) | Исключает из набора элементы, не соответствующие указанному условию. Подробное описание допустимых типов аргументов приводится далее |
| first() | Исключает из набора все элементы, кроме первого |
| has(), has(jQuery), has(HTMLElement), has(HTMLElement) |
Исключает из набора элементы, у которых отсутствуют потомки, соответствующие указанному селектору или объекту jQuery, или потомки, не включающие указанные Объекты HTMLElement |
| last() | Исключает из набора все элементы, кроме последнего |
| not(условие) | Исключает из набора все элементы, соответствующие указанному условию |
| slice(начало, конец) | Исключает из набора все элементы, индексы которых выходят за пределы указанного диапазона |
Простейшими методами, с помощью которых можно сократить набор выбранных элементов, являются методы first() , last() и eq() . Эти три метода позволяют выбрать конкретный элемент на основании его позиции в наборе элементов, содержащихся в объекте jQuery. Соответствующий пример приведен ниже:
$(function() { var jq = $("label"); // выбор первого элемента и воздействие на него jq.first().css("border", "thick double red"); // выбор последнего элемента и воздействие на него jq.last().css("border", "thick double green"); // выбор элемента с указанным индексом и воздействие на него jq.eq(2).css("border", "thick double black"); jq.eq(-2).css("border", "thick double black"); });
Обратите внимание, что метод eq() вызывается дважды. Если аргумент имеет положительное значение, отсчет индексов начинается с первого элемента в наборе, содержащемся в объекте jQuery. В случае отрицательного значения аргумента индексы отсчитываются в обратном направлении, начиная с последнего элемента. Результат работы сценария приведен на рисунке:
Если необходимо оставить в выбранном наборе лишь элементы, индексы которых принадлежат к заданному диапазону, используется метод slice() . Соответствующий пример приведен ниже:
$(function() { var jq = $("label"); jq.slice(0, 2).css("border", "thick double black"); jq.slice(4).css("border", "thick solid red"); });
В качестве аргументов метод slice() принимает значения начального и конечного индексов. Отсчет индексов ведется от нуля, причем элемент, которому соответствует конечный индекс, в результирующий набор не включается. Поэтому аргументам 0 и 2 соответствует выбор первых двух элементов.
Если второй аргумент опущен, то выбор элементов продолжается до конца существующего набора. Следовательно, использованию единственного аргумента 4 для набора из шести элементов соответствует выбор последних двух элементов (с индексами 4 и 5). Результат представлен на рисунке:
Метод filter() позволяет задать условие. Элементы, не удовлетворяющие заданному условию, исключаются из набора. Возможные варианты использования метода filter(), соответствующие различным способам задания условия, описаны в таблице ниже:
Пример использования всех четырех вариантов задания аргументов метода filter() приведен ниже:
$(function() { // выборка элементов, в значении атрибута src которых // содержится строка "astor" $("img").filter("").css("border", "thick double red"); // выборка элементов, содержащих строку "daffodil" var jq = $(""); $("label").filter(jq).css("color", "blue"); // выборка элементов, являющихся указанным элементом var elem = document.getElementsByTagName("label"); $("label").filter(elem).css("font-size", "1.5em"); // фильтрация элементов с использованием функции $("img").filter(function(index) { return this.getAttribute("src").indexOf("peony.png") > -1 || index == 5; }).css("border", "thick solid red") });
Первые три методики не нуждаются в особых пояснениях. Фильтры в них определяются с помощью селектора, другого объекта jQuery и объекта HTMLElement. Четвертая методика, основанная на использовании функции, требует дополнительных пояснений.
Предоставляемая jQuery функция выполняется по одному разу для каждого элемента набора, содержащегося в объекте jQuery. Если эта функция возвращает true, то элемент, для которого она была вызвана, остается в наборе. Если же возвращаемым значением является false, то элемент удаляется из набора. Функция принимает единственный аргумент - индекс элемента, для которого она вызывается. Кроме того, переменная this устанавливается так, что она указывает на текущий обрабатываемый объект HTMLElement. В данном примере значение true возвращается в тех случаях, когда атрибут src или индекс элемента имеют указанные значения.
Метод not() работает аналогично методу filter(), но обращает процесс фильтрации. Возможные варианты вызова метода not(), аналогичны вызовам метода filter().
Сужение набора до элементов, имеющих определенных потомковМетод has() можно использовать для того, чтобы оставить в наборе выбранных элементов только те из них, у которых есть определенные потомки, указываемые либо с помощью селектора, либо с помощью одного или нескольких объектов HTMLElement. Пример использования метода has() приведен ниже:
$(function() { $("div.dcell").has("img").css("border", "thick solid red"); var jq = $(""); $("div.dcell").has(jq).css("border", "thick solid blue"); });
В этом сценарии из выбранного набора исключаются элементы, у которых отсутствуют определенные потомки. В первом случае, когда используется селектор, из набора удаляются элементы, не имеющие ни одного потомка img, атрибут src которого был бы равен astor. Во втором случае, когда используется объект jQuery, то же самое происходит с элементами, не имеющими ни одного потомка со значением атрибута for, содержащим букву р. Результат работы сценария показан на рисунке:
Метод map() обеспечивает гибкий способ использования одного объекта jQuery для создания другого. В качестве аргумента методу map() передается функция. Эта функция вызывается для каждого из элементов, входящих в исходный объект jQuery, а возвращаемые ею объекты HTMLElement включаются в результирующий объект jQuery.
Пример использования метода map() приведен ниже:
$(function() { $("div.dcell").map(function(index, elem) { return elem.getElementsByTagName("img"); }).css("border", "thick solid red"); $("div.dcell").map(function(index, elem) { return $(elem).children(); }).css("border", "thick solid blue"); });
В этом сценарии выполняются две операции преобразования. Первая из них, в которой используется программный интерфейс DOM, возвращает первый из элементов img, встречающихся в каждом элементе набора. Вторая операция, в которой используются возможности объекта jQuery, возвращает первый элемент набора, содержащегося в объекте jQuery, который возвращается методом children() (этот метод возвращает дочерние узлы каждого из элементов, содержащихся в объекте jQuery).
Чтобы выяснить, соответствует ли хотя бы один из выбранных элементов заданному условию, можно использовать метод is() . Возможные варианты использования метода is(), аналогичны методам фильтрации not() и filter().
Если в качестве аргумента передается функция, то jQuery вызывает эту функцию для каждого элемента в объекте jQuery, передавая ей индекс данного элемента в качестве аргумента и устанавливая переменную this так, чтобы она указывала на сам элемент. Пример использования метода is() приведен ниже:
$(function() { var isResult = $("img").is(function(index) { return this.getAttribute("src").indexOf("rose.png") != -1; }); console.log("Результат: " + isResult); });
В этом сценарии мы проверяем, содержит ли объект jQuery элемент со значением атрибута src, который включает строку "rose.png".
Возврат к предыдущему состоянию измененного набора выбранных элементовВ jQuery предусмотрено сохранение состояний выбранного набора элементов при его изменении путем вызова методов цепочки. Из этого обстоятельства можно извлечь выгоду с помощью двух методов, описанных в таблице ниже:
Метод end() можно использовать для возврата предыдущего выбранного набора, что позволяет выбрать некоторые элементы, расширить или сузить его, выполнить некоторые операции, а затем вернуться к исходному набору, как показано в примере ниже:
$(function() { $("label").first().css("border", "thick solid blue") .end().css("font-size", "1.5em"); });
В этом сценарии мы начинаем с того, что выбираем все элементы label в документе. Далее мы сужаем выборку, вызывая метод first() (для получения первого подходящего элемента), а затем устанавливаем значение CSS-свойства border с помощью метода css().
Следующим вызывается метод end() для возврата предыдущего выбранного набора (в результате чего вам вновь предоставляются все элементы label, а не только первый), а затем опять вызывается метод css(), на этот раз для установки значения свойства font-size. Результат выполнения сценария показан на рисунке.
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("селектор") для выбора элементов.
Назначение селекторов элементов формыСелекторы элементов формы предназначены для выбора элементов в зависимости от:
- их типа (значения атрибута 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.
