jQuery Селекторы
Селекторы jQuery - одна из самых важных частей библиотеки jQuery.
jQuery Селекторы
Селекторы jQuery позволяют выбирать элементы HTML и управлять ими.
jQuery селекторы используются для "поиска" (или выбора) HTML элементов на основе их имени, id, классов, типов, атрибутов, значений атрибутов и многого другого. Они основаны на существующих CSS селекторах, и кроме того, имеют несколько собственных настраиваемых селекторов.
Все селекторы в jQuery начинаются со знака доллара и скобок: $().
Селектор элемента
Селектор элементов jQuery выбирает элементы на основе имени элемента.
Вы можете выбрать все элементы <p> на странице, например так:
$("p")
Пример
Когда пользователь нажимает кнопку, все элементы <p> будут скрыты:
Пример
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
Попробуйте сами »
Селектор #id
jQuery селектор #id использует атрибут id HTML тега для поиска конкретного элемента.
Идентификатор (id) должен быть уникальным на странице, поэтому вы должны использовать селектор #id, когда хотите найти единственный уникальный элемент.
Чтобы найти элемент с определенным идентификатором, напишите символ решетки, за которым следует идентификатор элемента HTML:
$("#test")
Пример
Когда пользователь нажимает кнопку, элемент с id="test" будет скрыт:
Пример
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
Попробуйте сами »
Селектор .class
jQuery селектор .class находит элементы с определенным классом.
Чтобы найти элементы с определенным классом, напишите символ точки, за которым следует имя класса:
$(".test")
Пример
Когда пользователь нажимает кнопку, элементы с class="test" будут скрыты:
Пример
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
Попробуйте сами »
Больше примеров jQuery селекторов
| Синтаксис | Описание | Пример |
|---|---|---|
| $("*") | Выбирает все элементы | Попробуй это |
| $(this) | Выбирает текущий элемент HTML | Попробуй это |
| $("p.intro") | Выбирает все <p> элементы с class="intro" | Попробуй это |
| $("p:first") | Выбирает первый <p> элемент | Попробуй это |
| $("ul li:first") | Выбирает первый элемент <li> из первого <ul> | Попробуй это |
| $("ul li:first-child") | Выбирает первый элемент <li> из каждого <ul> | Попробуй это |
| $("[href]") | Выбирает все элементы с атрибутом href | Попробуй это |
| $("a[target='_blank']") | Выбирает все <a> элементы с атрибутом target со значением "_blank" | Попробуй это |
| $("a[target!='_blank']") | Выбирает все <a> элементы с атрибутом target со значением НЕ "_blank" | Попробуй это |
| $(":button") | Выбирает все <button> элементы и <input> элементы с type="button" | Попробуй это |
| $("tr:even") | Выбирает все четные <tr> элементы | Попробуй это |
| $("tr:odd") | Выбирает все нечетные <tr> элементы | Попробуй это |
Воспользуйтесь нашим Тестер селектора jQuery чтобы продемонстрировать различные селекторы.
Полный справочник по всем селекторам jQuery см. в Справочник jQuery селекторов на нашем сайте W3Schools на русском.
Функции в отдельном файле
Если ваш веб-сайт содержит много страниц и вы хотите, чтобы ваши функции jQuery было легко поддерживать, вы можете поместить свои функции jQuery в отдельный файл .js.
Когда мы демонстрируем jQuery в этом учебнике, функции добавляются непосредственно в раздел <head>. Однако иногда предпочтительнее поместить их в отдельный файл, например этот (используйте атрибут src для ссылки на файл .js):
Пример
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="my_jquery_functions.js"></script>
</head>
Примечание. Название файла функций с расширением .js можете придумать своё.
