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