8.1 Podłączanie jQuery
W końcu dotarliśmy do biblioteki jQuery. W momencie pisania tego artykułu jest już przestarzały i prawie nigdy nie jest używany w nowych projektach . Ale swego czasu był bardzo popularny, bardzo dobrze udokumentowany, a w Internecie jest mnóstwo przykładów jego użycia .
Dlatego jeśli piszesz mały projekt internetowy i nie chcesz spędzać miesięcy na nauce nowoczesnych frameworków, polecam skorzystanie z biblioteki jQuery.
Aby korzystać z tysięcy funkcji jQuery, wystarczy umieścić je na swojej stronie. Możesz to zrobić w ten sposób:
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>Pracę z jQuery można podzielić na dwa rodzaje.
Po pierwsze, możesz uzyskać obiekt biblioteki jQuery, który jest zwykłym elementem HTML zawiniętym w niestandardowy obiekt jQuery.
Po drugie, jQuery ma kilka obiektów globalnych, które nie są powiązane z elementami HTML. Ich też trzeba używać.
Zacznijmy od pierwszego.
8.2 Praca z selektorami
jQuery używa selektorów do pracy z obiektami (pamiętasz CSS i jego klasy?). Tak więc w jQuery, jeśli chcesz wybrać jakiś obiekt lub grupę obiektów, musisz ustawić ich selektor.
Przykłady:
| Kod | Opis | Notatka | |
|---|---|---|---|
| 1 | $("dział") | Zaznacza wszystkie obiekty ze znacznikiem DIV | wiele obiektów |
| 2 | $("obraz.#obraz123") | Wybiera wszystkie obiekty ze znacznikiem IMG i identyfikatorem == image123 | jeden przedmiot |
| 3 | $("#obraz123") | Wybiera wszystkie obiekty o ID == image123 | jeden przedmiot |
| 4 | $("dzieł.artykuł") | Wybiera wszystkie obiekty ze znacznikiem DIV, które mają artykuł klasy | wiele obiektów |
Powiedzmy, że chcemy dodać obsługę zdarzeń do wszystkich linków onclick, oto jak możemy to zrobić za pomocą jQuery:
$("a").click(function() {
alert("Click");
});Wykonuje się tutaj trzy kroki:
- Pobiera obiekty pasujące do selektora
"a". - Tworzymy anonimową funkcję, która wywołuje metodę
alert(). - Ustawiliśmy tę funkcję jako obsługę zdarzeń
clickdla wszystkich obiektów z punktu 1.
Kolejną dobrą rzeczą w jQuery jest to, że jego kod jest łatwy do odczytania. Nie trzeba wiele, aby dowiedzieć się, jak to wszystko działa. Jeśli istnieje działający kod, łatwo jest zrozumieć, co robi.
8.3 Praca z elementami dokumentu
Przyjrzyjmy się kilku scenariuszom pracy z dokumentem przy użyciu jQuery.
Uzyskaj wartość elementu (dla elementów, które mają wartości):
var result = $ ("selector").value();Ustaw wartość elementu (dla elementów, które mają wartości):
$ ("selector").value(newValue);Jak dodać HTML do jakiegoś elementu?
$ ("selector").html(newHTML);A jak uzyskać kod HTML znajdujący się w elemencie?
var html = $ ("selector").html();Co jeśli chcę uzyskać/dodać nie HTML, ale zwykły tekst? Tutaj również bez niespodzianek.
var html = $ ("selector").text();Co jeśli chcę uzyskać/zmienić kolor elementu?
$ ("selector").color("red");Jeśli musisz pracować ze stylami, jest to również łatwe do zrobienia:
$ ("selector").css("color", "red");Jak dodać nowy element?
$ (".container").append($("h3"));