8.1 Conectarea jQuery

În cele din urmă, am ajuns la biblioteca jQuery. În momentul în care a fost scris acest articol, este deja învechit și nu este aproape niciodată folosit în proiecte noi . Dar la un moment dat a fost foarte popular, foarte bine documentat și există o mulțime de exemple pe Internet cu utilizarea sa .

Prin urmare, dacă scrieți un mic proiect web și nu doriți să petreceți luni întregi învățând cadre moderne, vă recomand să utilizați biblioteca jQuery.

Pentru a utiliza miile de funcții jQuery, trebuie doar să le includeți în pagina dvs. O poți face astfel:


   <head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   </head>

Lucrul cu jQuery poate fi împărțit în două tipuri.

În primul rând, puteți obține un obiect de bibliotecă jQuery, care este un element HTML obișnuit împachetat într-un obiect jQuery personalizat.

În al doilea rând, jQuery are mai multe obiecte globale care nu sunt legate de elemente HTML. De asemenea, trebuie folosite.

Să începem cu primul.

8.2 Lucrul cu selectoare

jQuery folosește selectori pentru a lucra cu obiecte (vă amintiți CSS și clasele sale?). Deci, în jQuery, dacă doriți să selectați un obiect sau un grup de obiecte, trebuie să setați selectorul acestora.

Exemple:

Cod Descriere Notă
1 $(„div”) Selectează toate obiectele cu o etichetă DIV multe obiecte
2 $("img.#image123") Selectează toate obiectele cu etichetă IMG și ID == imagine123 un singur obiect
3 $("#imagine123") Selectează toate obiectele cu ID == imagine123 un singur obiect
4 $("div.articol") Selectează toate obiectele cu o etichetă DIV care au un articol de clasă multe obiecte

Să presupunem că vrem să adăugăm gestionarea evenimentelor la toate linkurile onclick, iată cum o putem face cu jQuery:


  $("a").click(function() {
    alert("Click");
  });

Aici se fac trei pași:

  1. Obține obiectele care se potrivesc cu selectorul "a".
  2. Creăm o funcție anonimă care apelează alert().
  3. Setăm această funcție ca un handler de evenimente clickpentru toate obiectele de la punctul 1.

Un alt lucru bun despre jQuery este că codul său este ușor de citit. Nu este nevoie de mult pentru a-ți da seama cum funcționează totul. Dacă există cod de lucru, atunci este destul de ușor să înțelegeți ce face.

8.3 Lucrul cu elementele documentului

Să ne uităm la câteva scenarii pentru lucrul cu un document folosind jQuery.

Obțineți valoarea unui element (pentru elementele care au valori):

var result = $ ("selector").value();

Setați valoarea elementului (pentru elementele care au valori):

$ ("selector").value(newValue);

Cum se adaugă HTML în interiorul unui element?

$ ("selector").html(newHTML);

Și cum să obțineți HTML-ul care se află în interiorul elementului?

var html = $ ("selector").html();

Ce se întâmplă dacă vreau să obțin/adaug nu HTML, ci text simplu? Nici aici nu sunt surprize.

var html = $ ("selector").text();

Ce se întâmplă dacă vreau să obțin/modific culoarea unui element?

$ ("selector").color("red");

Dacă trebuie să lucrați cu stiluri, atunci și acest lucru este ușor de făcut:

$ ("selector").css("color", "red");

Cum se adaugă un element nou?

$ (".container").append($("h3"));
Java university