JQuery селекторы являются одним из наиболее важных частей библиотеки JQuery.
JQuery селекторы
JQuery селекторы позволяют выбирать и манипулировать HTML-элемент (ы).
JQuery селекторы используются для "найти" (или выберите) HTML элементы, основанные на их имя, ID, классы, типы, атрибуты, значения атрибутов и многое другое. Он основан на существующих CSS селекторов , а кроме того, у него есть некоторые собственные селекторы.
Все селекторы в JQuery начинаются с знака доллара и скобки: $ ().
Элемент выбора
Селектор JQuery элемент выбирает элементы на основе имени элемента.
Вы можете выбрать все элементы <p> на странице, как это:
$("p")
пример
Когда пользователь нажимает на кнопку, все <p> элементы будут скрыты:
пример
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
Попробуй сам " #id Selector
Селектор #id JQuery использует атрибут идентификатор HTML-тега, чтобы найти определенный элемент.
Идентификатор должен быть уникальным в пределах страницы, так что вы должны использовать селектор #ID, если вы хотите, чтобы найти единственный, уникальный элемент.
Чтобы найти элемент с определенным идентификатором, написать хэш-символ, за которым следует идентификатор HTML-элемента:
$("#test")
пример
Когда пользователь нажимает на кнопку, элемент с идентификатором = "тест" будут скрыты:
пример
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
Попробуй сам " .class Selector
Селектор класса Jquery находит элементы с определенным классом.
Чтобы найти элементы с определенным классом, написать период символа, за которым следует имя класса:
$(".test")
пример
Когда пользователь нажимает на кнопку, элементы с классом = "тест" будут скрыты:
пример
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
Попробуй сам " Другие примеры JQuery селекторы
| Syntax | Description | Example |
|---|---|---|
| $("*") | Selects all elements | Try it |
| $(this) | Selects the current HTML element | Try it |
| $("p.intro") | Selects all <p> elements with class="intro" | Try it |
| $("p:first") | Selects the first <p> element | Try it |
| $("ul li:first") | Selects the first <li> element of the first <ul> | Try it |
| $("ul li:first-child") | Selects the first <li> element of every <ul> | Try it |
| $("[href]") | Selects all elements with an href attribute | Try it |
| $("a[target='_blank']") | Selects all <a> elements with a target attribute value equal to "_blank" | Try it |
| $("a[target!='_blank']") | Selects all <a> elements with a target attribute value NOT equal to "_blank" | Try it |
| $(":button") | Selects all <button> elements and <input> elements of type="button" | Try it |
| $("tr:even") | Selects all even <tr> elements | Try it |
| $("tr:odd") | Selects all odd <tr> elements | Try it |
Используйте нашу Jquery Selector Tester для демонстрации различных селекторов.
Для полного ведения всех селекторов JQuery, пожалуйста , перейдите на наш JQuery Селекторы Reference .
Функции в отдельном файле
Если ваш сайт содержит много страниц, и вы хотите, чтобы ваши функции Jquery будет легко поддерживать, вы можете поместить свои функции JQuery в отдельный файл .js.
Когда мы демонстрируем Jquery в этом учебнике, функции добавляются непосредственно в секцию <HEAD>. Тем не менее, иногда желательно размещать их в отдельном файле, как это (используйте атрибут SRC, чтобы обратиться к .js файлу):
пример
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>
Проверьте себя с упражнениями!
Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4» Упражнение 5 » Упражнение 6»