Introducere
HTML, CSS și JavaScript sunt cele trei limbi fundamentale ale web-ului. Ne structurăm site-urile web cu HTML, le stilăm cu CSS și adăugăm funcționalități interactive cu JavaScript. De fapt, cele mai multe animații și orice acțiune care se întâmplă ca urmare a unui utilizator clic, situându-se, sau defilare sunt construite cu JavaScript.
jQuery este” scrie mai puțin, face mai mult ” biblioteca JavaScript. Nu este un limbaj de programare, ci mai degrabă un instrument folosit pentru a face scrierea sarcinilor comune JavaScript mai concise., jQuery are avantajul suplimentar de a fi cross-browser compatibil, ceea ce înseamnă că puteți fi sigur că ieșirea codului dvs. va face așa cum este prevăzut în orice browser modern.prin compararea unui simplu ” Bună ziua, lume!”program în ambele JavaScript și jQuery, putem vedea diferența de modul în care acestea sunt ambele scrise.
document.getElementById("demo").innerHTML = "Hello, World!";$("#demo").html("Hello, World!");Acest scurt exemplu demonstrează cum jQuery poate ajunge la același rezultat final, ca simplu JavaScript într-un mod succint.,acest ghid nu presupune cunoștințe anterioare despre jQuery și va acoperi următoarele subiecte:
- cum se instalează jQuery într-un proiect web.
- definițiile conceptelor importante de dezvoltare web, cum ar fi API, DOM și CDN.
- selectori Jquery comune, evenimente, și efecte.
- exemple pentru a testa conceptele învățate pe parcursul articolului.
cerințe preliminare
înainte de a începe acest ghid, veți avea nevoie de următoarele:
- cunoștințe de bază despre HTML și CSS., Ar trebui să știți deja cum să configurați un site web simplu și să înțelegeți selectorii CSS, cum ar fi ID-urile, clasele și pseudo-elementele.
- o înțelegere a fundamentelor programării. Deși este posibil să începeți să scrieți jQuery fără cunoștințe avansate de JavaScript, familiarizarea cu conceptele de variabile și tipuri de date, precum și matematica și logica va ajuta în mod semnificativ.
Configurarea jQuery
jQuery este un fișier JavaScript pe care le va lega la în HTML. Există două moduri de a include jQuery într-un proiect:
- descărcați o copie locală.,
- Link către un fișier prin Content Delivery Network (CDN).
Notă: O rețea de livrare de conținut (CDN) este un sistem de servere multiple care livrează conținut web unui utilizator în funcție de locația geografică. Când vă conectați la un fișier jQuery găzduit prin CDN, acesta va ajunge potențial mai rapid și mai eficient pentru utilizator decât dacă l-ați găzduit pe propriul server.
vom folosi CDN pentru a face referire la jQuery în exemplele noastre. Puteți găsi cea mai recentă versiune de jQuery în bibliotecile găzduite Google., Dacă în schimb doriți să-l descărcați, puteți obține o copie a jQuery de pe site-ul oficial.vom începe acest exercițiu prin crearea unui mic proiect web. Acesta va consta din style.css în css/ director, scripts.js în js/ director, și un principal index.html în rădăcina proiectului.
project/├── css/| └── style.css├── js/| └── scripts.js└── index.htmlPentru a începe, face un HTML schelet și salvați-l ca index.html.
<!doctype html><html lang="en"><head> <title>jQuery Demo</title> <link rel="stylesheet" href="css/style.css"></head><body></body></html>Link-ul de la jQuery CDN chiar înainte de închidere </body> tag-ul, urmat de propriul dvs. personalizat JavaScript fișier, scripts.js.
scripts.js) trebuie să fie incluse sub biblioteca jQuery în document sau nu va funcționa.
Notă: Dacă ai descărcat o copie locală a jQuery, salvați-l în js/ folder și link-ul de la a la js/jquery.min.js.,în acest moment, biblioteca jQuery este acum încărcată în site-ul dvs. și aveți acces complet la API-ul jQuery.Notă: O interfață de programare a aplicațiilor (API) este o interfață care permite programelor software să interacționeze între ele. În acest caz, API-ul pentru jQuery conține toate informațiile și documentația necesară pentru a accesa jQuery.
folosind jQuery
la baza sa, jQuery este utilizat pentru a se conecta cu elemente HTML în browser prin intermediul DOM.,
modelul de obiect document (DOM) este metoda prin care JavaScript (și jQuery) interacționează cu HTML-ul într-un browser. Pentru a vedea exact ce este DOM, în browserul dvs. web, faceți clic dreapta pe pagina web curentă selectați inspectați. Acest lucru va deschide Instrumente pentru dezvoltatori. Codul HTML pe care îl vedeți aici este DOM.fiecare element HTML este considerat un nod în DOM – un obiect pe care JavaScript îl poate atinge. Aceste obiecte sunt aranjate într-o structură arborescentă, cu <html> fiind mai aproape de rădăcină, și fiecare element imbricat fiind o ramură mai departe de-a lungul arborelui., JavaScript poate adăuga, elimina și modifica oricare dintre aceste elemente.dacă faceți din nou clic dreapta pe site și faceți clic pe Vizualizare sursă pagină, veți vedea ieșirea HTML brut a site-ului web. Este ușor la început să confundați DOM cu sursa HTML, dar acestea sunt diferite – sursa paginii este exact ceea ce este scris în fișierul HTML. Este static și nu se va schimba și nu va fi afectat de JavaScript. DOM este dinamic și se poate schimba.
stratul exterior al DOM, stratul care înfășoară întregul nod <html>, este obiectul documentului., Pentru a începe manipularea paginii cu jQuery, trebuie să ne asigurăm că documentul este „gata” mai întâi.
Creați fișierul scripts.js în js/ director, și introduceți următorul cod:
$(document).ready(function() { // all custom jQuery will go here}); tot codul jQuery pe care îl scrieți va fi înfășurat în codul de mai sus. jQuery va detecta această stare de pregătire, astfel încât codul inclus în această funcție va rula doar o dată DOM este gata pentru codul JavaScript pentru a executa., Chiar dacă în unele cazuri JavaScript nu va fi încărcat până când elementele nu sunt redate, inclusiv acest bloc este considerat a fi cea mai bună practică.în introducerea acestui articol, ați văzut un simplu ” Bună ziua, lume!”scenariu. Pentru a iniția acest script și a imprima text în browser cu jQuery, mai întâi vom crea un element de paragraf gol la nivel de bloc cu ID-ul demo aplicat acestuia.
...<body><p></p>...jQuery este numit și reprezentat de semnul dolar ($)., Accesăm DOM cu jQuery folosind în mare parte sintaxa CSS și aplicăm o acțiune cu o metodă. Un exemplu de bază jQuery urmează acest format.
$("selector").method();Deoarece ID-ul este reprezentat de un simbol hash (#) în CSS, vom accesa demo-ul ID-ul cu selectorul #demo. html() este o metodă care schimbă HTML într-un element.
acum vom pune obiceiul nostru „Bună ziua, lume!”program în interiorul jQuery ready() înveliș., Adăugați această linie la fișierul scripts.js în cadrul funcției existente:
$(document).ready(function() { $("#demo").html("Hello, World!");});după ce ați salvat fișierul, puteți deschide fișierul index.html în browserul dvs. Dacă totul a funcționat corect, veți vedea ieșirea Hello, World!.
selectorii
selectorii sunt modul în care îi spunem lui jQuery pe care elemente dorim să lucrăm. Cele mai multe selectoare jQuery sunt la fel ca ceea ce sunteți familiarizat cu CSS, cu câteva adăugiri specifice jQuery., Puteți vizualiza lista completă a selectorilor jQuery pe paginile lor oficiale de documentare.
Pentru a accesa un selector, utilizați jQuery simbol $, urmat de paranteze ().
$("selector")siruri de caractere dublu-Citat sunt preferate de ghidul de stil jQuery, deși siruri de caractere single-Citat sunt adesea folosite, de asemenea.
mai jos este o scurtă trecere în revistă a unora dintre cele mai frecvent utilizate selectoare.,
În general, clasele și ID — urile sunt ceea ce veți întâlni cel mai mult-clase atunci când doriți să selectați Mai multe elemente și ID-uri atunci când doriți să selectați doar unul.
jQuery evenimente
În ” Bună ziua, lume!”exemplu, codul a rulat imediat ce pagina a fost încărcată și documentul a fost gata și, prin urmare, nu a necesitat nicio interacțiune cu utilizatorul. În acest caz, am fi putut scrie textul direct în HTML fără a deranja cu jQuery. Cu toate acestea, va trebui să utilizeze jQuery dacă vrem să facă textul să apară pe pagina cu un clic pe un buton.,
reveniți la fișierulindex.html și adăugați un element<button>. Vom folosi acest buton pentru a asculta evenimentul nostru click.
...<body><button>Click me</button><p></p>Vom folosi click() metoda pentru a apela o funcție cu „Bună ziua, Lume!”Cod.
$(document).ready(function() { $("#trigger").click();});function() { $("#demo").html("Hello, World!");}Iată codul final.
$(document).ready(function() { $("#trigger").click(function() { $("#demo").html("Hello, World!"); });});Salvați scripts.js fișier, și reîmprospăta index.html în browser-ul., Acum, când faceți clic pe butonul, ” Bună ziua, lume!”va apărea textul.un eveniment este oricând utilizatorul interacționează cu browserul. De obicei, acest lucru se face cu mouse-ul sau tastatura. Exemplul pe care tocmai l-am creat a folosit un eveniment click. Din documentația oficială jQuery, puteți vizualiza o listă completă a metodelor de eveniment jQuery. Mai jos este o scurtă trecere în revistă a unora dintre cele mai frecvent utilizate metode de eveniment.
pentru a anima sau estompa imaginile în timp ce un utilizator derulează pe ecran, utilizați metoda scroll()., Pentru a ieși dintr-un meniu folosind tasta ESC, utilizați metoda keydown(). Pentru a crea un meniu derulant de acordeon, utilizați metoda click().înțelegerea evenimentelor este esențială pentru crearea conținutului dinamic al site-ului cu jQuery.efectele jQuery lucrează mână în mână cu evenimente, permițându-vă să adăugați animații și să manipulați altfel elementele de pe pagină.
vom face un exemplu în care deschidem și închidem o suprapunere pop-up., În timp ce am putea folosi două ID – uri – unul pentru a deschide suprapunerea și altul pentru a o Închide-vom folosi în schimb o clasă pentru a deschide și închide suprapunerea cu aceeași funcție.
Ștergeți curent <button>și <p> tag-uri din cadrul corpului de index.html fișier, și se adaugă următoarele la document HTML:
...<body><button class="trigger">Open</button><section class="overlay"> <button class="trigger">Close</button></section>...În style.css fișier, vom folosi o cantitate minimă de CSS pentru a ascunde overlay cu display: none și centru de pe ecran.,
.overlay { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 200px; width: 200px; background: gray;}în scripts.js fișier, vom folosi toggle() metoda, care va comuta CSS display proprietate între none și block, ascunde și arată suprapunerea atunci cand este apasat.
$(document).ready(function() { $(".trigger").click(function() { $(".overlay").toggle(); });});Refresh index.html. Acum veți putea comuta vizibilitatea modalului făcând clic pe butoane., Puteți schimba toggle() și fadeToggle() sau slideToggle() pentru a vedea alte câteva built-in efecte jQuery.
mai jos este o scurtă trecere în revistă a unora dintre cele mai frecvent utilizate metode de efect.
-
toggle()– Toggle: comută vizibilitatea unui element sau a unor elemente.show()șihide()sunt efectele unidirecționale aferente. -
fadeToggle()– Fade Toggle: comută vizibilitatea și animă opacitatea unui element sau elemente.,fadeIn()șifadeOut()sunt efectele unidirecționale aferente. -
slideToggle()– Slide Toggle comută vizibilitatea unui element sau elemente cu efect de alunecare.slideDown()șislideUp()sunt efectele unidirecționale aferente. -
animate()– Animate efectuează efecte de animație personalizate pe proprietatea CSS a unui element.,
folosim evenimente jQuery pentru a asculta o interacțiune cu utilizatorul, cum ar fi apăsarea unui buton, și folosim efecte jQuery pentru a manipula în continuare elemente odată ce acțiunea are loc.în acest ghid, am învățat cum să selectăm și să manipulăm elementele cu jQuery și cum evenimentele și efectele lucrează împreună pentru a face o experiență web interactivă pentru utilizator.de aici, ar trebui să aveți o înțelegere mai profundă a capacităților jQuery și să fiți pe cale să vă scrieți propriul cod.