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 використовує атрибут 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.
Функції в окремому файлі
Якщо ваш вебсайт містить багато сторінок і ви хочете, щоб ваші функції 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>
