Selektory jQuery
Selektory jQuery to jedna z najważniejszych części biblioteki jQuery.
Selektory jQuery
Selektory jQuery pozwalają wybierać i manipulować elementami HTML.
Selektory jQuery są używane do "znajdowania" (lub wybierania) elementów HTML na podstawie ich nazwy, identyfikatora, klas, typów, atrybutów, wartości atrybutów i wielu innych. Jest oparty na istniejących selektorach CSS , a dodatkowo ma kilka własnych selektorów niestandardowych.
Wszystkie selektory w jQuery zaczynają się od znaku dolara i nawiasów: $().
Selektor elementu
Selektor elementów jQuery wybiera elementy na podstawie nazwy elementu.
Możesz wybrać wszystkie <p>elementy na stronie w ten sposób:
$("p")
Przykład
Gdy użytkownik kliknie przycisk, wszystkie <p>elementy zostaną ukryte:
Przykład
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
Selektor #id
Selektor jQuery używa atrybutu id tagu HTML, aby znaleźć określony element.#id
Identyfikator powinien być unikalny w obrębie strony, więc powinieneś użyć selektora #id, gdy chcesz znaleźć pojedynczy, unikalny element.
Aby znaleźć element o określonym identyfikatorze, napisz znak hash, a następnie identyfikator elementu HTML:
$("#test")
Przykład
Gdy użytkownik kliknie przycisk, element z id="test" zostanie ukryty:
Przykład
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
Selektor .class
Selektor jQuery .classznajduje elementy z określoną klasą.
Aby znaleźć elementy z określoną klasą, wpisz kropkę, a następnie nazwę klasy:
$(".test")
Przykład
Gdy użytkownik kliknie przycisk, elementy z class="test" zostaną ukryte:
Przykład
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
Więcej przykładów selektorów 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 |
Użyj naszego Testera selektorów jQuery , aby zademonstrować różne selektory.
Aby uzyskać pełne informacje na temat wszystkich selektorów jQuery, przejdź do naszej dokumentacji dotyczącej selektorów jQuery .
Funkcje w osobnym pliku
Jeśli Twoja witryna zawiera wiele stron i chcesz, aby funkcje jQuery były łatwe w utrzymaniu, możesz umieścić funkcje jQuery w osobnym pliku .js.
Kiedy demonstrujemy jQuery w tym samouczku, funkcje są dodawane bezpośrednio do <head>
sekcji. Czasami jednak lepiej jest umieścić je w osobnym pliku, tak jak ten (użyj atrybutu src, aby odwołać się do pliku .js):
Przykład
<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>