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:

  1. Pobiera obiekty pasujące do selektora "a".
  2. Tworzymy anonimową funkcję, która wywołuje metodę alert().
  3. 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"));
Java webinar