Селекторы jQuery
Селекторы jQuery — одна из самых важных частей библиотеки jQuery.
Селекторы jQuery
Селекторы jQuery позволяют выбирать элементы HTML и управлять ими.
Селекторы jQuery используются для «нахождения» (или выбора) элементов HTML на основе их имени, идентификатора, классов, типов, атрибутов, значений атрибутов и многого другого. Он основан на существующих селекторах CSS и, кроме того, имеет несколько собственных селекторов.
Все селекторы в jQuery начинаются со знака доллара и круглых скобок: $().
Селектор элементов
Селектор элементов jQuery выбирает элементы на основе имени элемента.
Вы можете выбрать все <p>элементы на странице следующим образом:
$("p")
Пример
Когда пользователь нажимает на кнопку, все <p>элементы будут скрыты:
Пример
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
Селектор #id
Селектор jQuery использует атрибут 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
| Syntax | Description | Example |
|---|---|---|
| $("*") | Selects all elements | |
| $(this) | Selects the current HTML element | |
| $("p.intro") | Selects all <p> elements with class="intro" | |
| $("p:first") | Selects the first <p> element | |
| $("ul li:first") | Selects the first <li> element of the first <ul> | |
| $("ul li:first-child") | Selects the first <li> element of every <ul> | |
| $("[href]") | Selects all elements with an href attribute | |
| $("a[target='_blank']") | Selects all <a> elements with a target attribute value equal to "_blank" | |
| $("a[target!='_blank']") | Selects all <a> elements with a target attribute value NOT equal to "_blank" | |
| $(":button") | Selects all <button> elements and <input> elements of type="button" | |
| $("tr:even") | Selects all even <tr> elements | |
| $("tr:odd") | Selects all odd <tr> elements |
Используйте наш тестер селекторов jQuery , чтобы продемонстрировать различные селекторы.
Полную информацию обо всех селекторах jQuery см. в нашем Справочнике по селекторам jQuery .
Функции в отдельном файле
Если ваш веб-сайт содержит много страниц и вы хотите, чтобы ваши функции jQuery было легко поддерживать, вы можете поместить свои функции jQuery в отдельный файл .js.
Когда мы демонстрируем jQuery в этом руководстве, функции добавляются непосредственно в <head>
раздел. Однако иногда предпочтительнее разместить их в отдельном файле, подобном этому (используйте атрибут src для ссылки на файл .js):
Пример
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="my_jquery_functions.js"></script>
</head>