Etichetă pentru noua bibliotecă jquery. Introducere în jQuery

jQuery este o bibliotecă JavaScript care se concentrează pe Interacțiunea JavaScript, HTML și CSS.

Ce poate face jQuery

• Accesați orice element DOM ( model de obiect document) și nu numai să le manipuleze, ci și să le manipuleze.
• Lucrați cu evenimente.
• Este ușor să implementați diverse efecte vizuale.
• Lucrați cu AJAX (foarte tehnologie utila, care vă permite să comunicați cu serverul fără a reîncărca pagina, dar deocamdată nu o vom atinge).
• Are o cantitate mare pluginuri concepute pentru a crea elemente de interfață cu utilizatorul.

Cum functioneaza

În primul rând, trebuie să descărcați biblioteca în sine de pe site-ul dezvoltatorilor sau, dacă este necesar, să o dezarhivați și să o mutați (biblioteca) în același folder în care se află paginile noastre html (acest lucru este opțional, dar adresele pentru toate exemplele ulterioare va fi scris pe baza acestei structuri).

Acum trebuie să conectăm jQuery la pagina html. Pentru aceasta, după cum vă amintiți, există o etichetă în html , care este responsabil pentru conectarea fișierelor script externe (). Să adăugăm această etichetă la pagina html (am conectat și pagina script.js cu funcții js): * Atenție la numele fișierului. Biblioteca jquery-1.2.6 este folosită aici, dar puteți descărca o versiune mai recentă, astfel încât numerele dvs. pot diferi.*

Deci, în folderul nostru avem o pagină html, o pagină cu stiluri (style.css), o pagină cu funcții js (script.js) și (jquery-1.2.6.js). Să facem acest exemplu (faceți clic pe butoane):

jQuery Effects Show() Effect SlideDown() Effect Animate() Effect Să vedem cum se face acest lucru. Pe pagina html ar trebui să avem trei dreptunghiuri (div-uri) și trei butoane: jQuery effects Show() effect SlideDown() effect Animate() effect

Vom emite aspectși faceți dreptunghiurile invizibile folosind . cod style.css:

#kv1, #kv2, #kv3( lățime:80px; înălțime:100px; float:stânga; fundal:roșu; margine:5px; culoare:alb; afișare:niciuna; )

Acum, cel mai interesant lucru este că pe pagina script.js scriem codul funcțiilor care vor fi declanșate la apăsarea butoanelor:

function addEffect1())( $("#kv1:hidden").show(); ) function addEffect2())( $("#kv2:hidden").slideDown("lent"); ) function addEffect3()) ( $( "#kv3:hidden").show().animate(( fontSize:"36px" ) , 3000); )

Ce fac aceste funcții?

Funcţie addEffect1() vede $ ("#kv1:ascuns")și înțelege că trebuie să găsească un element cu id="kv1" care are proprietatea ascunsă. Apoi ea vede .spectacol()și înțelege că elementul găsit trebuie făcut vizibil.

Funcţie addEffect2() vede $ (semnul dolarului) și își dă seama că este jQuery, apoi vede ("#kv2:ascuns")și înțelege că trebuie să găsească un element cu id="kv2" care are proprietatea ascunsă. Apoi ea vede .slideDown(„lent”)și înțelege că elementul găsit trebuie să fie afișat lent („lent”) de sus în jos (slideDown).

Funcţie addEffect3() vede $ (semnul dolarului) și își dă seama că este jQuery, apoi vede ("#kv3:ascuns")și înțelege că trebuie să găsească un element cu id="kv3" care are proprietatea ascunsă. Apoi ea vede .spectacol()și înțelege că elementul găsit trebuie făcut vizibil. Apoi vede .animate((fontSize:"36px") , 3000)și înțelege că dimensiunea fontului trebuie mărită la 36 de pixeli în 3 secunde (3000) (fontSize:"36px")

Acesta este modul în care jQuery funcționează de fapt. Uită-te la cât de scurte sunt funcțiile noastre și imaginează-ți cum ar fi dacă am decide să le scriem în javascript pur. JQuery nu este uimitor? Despre cum se face efecte grafice, animația, tragerea și sortarea obiectelor și, în general, lucrul cu această bibliotecă vor fi discutate în lecțiile ulterioare.

La sfârșitul acestei lecții aș dori să vorbesc despre conceptele de bază ale jQuery. Sintaxa operatorului jQuery poate fi reprezentată aproximativ după cum urmează:

Unde selector- un element sau elemente cu care vom face ceva.

acțiune- ce vom face exact cu elementele selectate. Putem adăuga orice efect, stil css, schimba codul html etc. Orice eveniment poate fi, de asemenea, enumerat aici.

proprietățile de acțiune- dacă sunt prevăzute de acţiune.

Atât pentru astăzi, în următoarea lecție vom studia selectoare.

Aceasta va instala jQuery în directorul node_modules. În node_modules/jquery/dist/ veți găsi o versiune necomprimată, o versiune comprimată și un fișier de hartă.

link Descărcarea jQuery folosind Bower

A doua versiune vă ajută să actualizați codul pentru a rula pe jQuery 3.0 sau o versiune ulterioară, după ce ați folosit Migrate 1.x și ați făcut upgrade la jQuery 1.9 sau o versiune ulterioară:

conectați testarea între browsere cu jQuery

Asigurați-vă că testați paginile web care folosesc jQuery în toate browserele pe care doriți să le acceptați. Site-ul pune la dispoziție mașini virtuale pentru testarea multor versiuni diferite ale Internet Explorer. Versiunile mai vechi ale altor browsere pot fi găsite la oldversion.com.

link jQuery Pre-Release Builds

Echipa jQuery lucrează constant pentru a îmbunătăți codul. Fiecare commit în depozitul Github generează o versiune în lucru a codului pe care o actualizăm pe CDN-ul jQuery. Aceste versiuni sunt uneori instabile și niciodată potrivite pentru site-urile de producție. Vă recomandăm să fie folosite pentru a determina dacă o eroare a fost deja remediată atunci când raportați erori față de versiunile lansate sau pentru a vedea dacă au fost introduse noi erori.

link Utilizarea jQuery cu o legătură CDN Alte CDN-uri

Următoarele CDN-uri găzduiesc și versiuni comprimate și necomprimate ale versiunilor jQuery. Începând cu jQuery 1.9, acestea pot găzdui și ; verifica documentatia site-ului.

Rețineți că pot exista întârzieri între o lansare jQuery și disponibilitatea acesteia acolo. Vă rugăm să aveți răbdare, ei primesc fișierele în același timp în care postarea de blog este făcută publică. Beta și lansați candidații nu sunt găzduit de aceste CDN-uri.

Bibliotecile JQuery sunt familiare pentru designeri și dezvoltatori. Este una dintre cele mai populare biblioteci JavaScript pe care le veți găsi pe web.

Fiecare designer și dezvoltator care se respectă este familiarizat cu funcțiile și capacitățile acestei biblioteci:

• jQuery este conceput pentru a rezolva aproape orice sarcină de pe un site web;
• jQuery poate elimina bătălia de a crea un site web frumos și funcțional;
• Dacă trebuie să rezolvați probleme între browsere, adăugați biblioteci JavaScript la colecția de instrumente pe care o utilizați.

Biblioteci JQuery - un instrument grozav pentru dezvoltatorii web. Există un număr mare de pluginuri gratuite pe Internet.

Puteți petrece mult timp căutându-le pe cele de care aveți nevoie, deoarece va trebui să lucrați cu fiecare site pentru a găsi cele mai recente versiuni ale bibliotecilor JQuery care vi se potrivesc.

Prin urmare, pentru a vă economisi timp, am adunat cele mai utile biblioteci jQuery în acest articol. Le puteți folosi pe site-ul dvs. pentru a adăuga efecte interesante și utile.

1. Arborele:

Pluginul Tree vă oferă posibilitatea de a crea o structură arborescentă pentru site-ul dvs. web. Este extensibil, personalizabil, puternic și foarte ușor de utilizat.

2. jQuery Vibrate:

Acesta este un plugin creat special pentru utilizare pe dispozitive mobile. Acesta permite dezvoltatorului să facă orice dispozitiv să vibreze conform unui model personalizat anumită perioadă timp.

3. Indicatori de zbor:

Plugin foarte ușor de utilizat. Veți putea afișa indicatoare de zbor de înaltă calitate cu folosind HTML, CSS3, JQuery și imagini SVG.

4. jQuery LightSlider:

jQuery LightSlider este un glisor tactil foarte personalizabil pentru afișarea conținutului site-ului dvs. Sunt disponibile efecte de alunecare și estompare. Este compatibil cu toate browserele majore.

5. jQuery GoUp!

Foarte usor de folosit. Permite vizitatorilor site-ului dvs. să se deplaseze în partea de sus a paginii cu un singur clic.

6. Decuparea imaginii:

Acest plugin JQuery vă permite să decupați imagini de pe site-ul dvs. Există opțiuni de setări și previzualizare. De asemenea, veți putea seta înălțimea și lățimea.

7. Slider Devrama:

Devrama complet glisor adaptiv imagini din oportunități unice. Suportă atât imagini, cât și conținut HTML. Există mai multe opțiuni pentru efectele de schimbare a imaginii.

8.jQFader:

jQFader este un plugin simplu pentru aplicarea unui efect de fade out elementelor de pe site-ul dvs. Ușor de folosit. Ușor de utilizat pe orice site web.

9.Forkit:

Forkit.js este un plugin jQuery animat care acționează ca o perdea în spatele căreia vă puteți ascunde continut suplimentar. De obicei situat în colțul din dreapta sus.

10. Slider Vertical News:

După cum sugerează și numele, este un glisor vertical bazat pe jQuery și CSS 3 care afișează titluri de știri. Există o funcție de previzualizare și prezentare scurtaștiri.

11. Caut:

Acest plugin jQuery vă permite să căutați text în listele disponibile pe o pagină. Ascunde elementele care nu se potrivesc cu interogarea de căutare.

12. Glisare în browser:

Acest plugin creează un efect de touchpad pentru derularea paginilor atunci când derularea este dezactivată pe site. Evenimentul are loc atunci când roata mouse-ului este derulată.

13. Cina cu pui:

ChickenDinner este un plugin unic jQuery. Vă permite să încărcați imagini dintr-o matrice de imagini creată pe partea clientului, prin etichete img sau imagini de fundal.

14. Placă de pâlpâire:

Plugin complet receptiv și foarte ușor de utilizat. Vă permite să creați o aparență de defilare pagină cu pagină prin conținutul de pe site.

15. SVGMagic:

Cum se convertesc imaginile SVG în format PNG? Profită de asta jQuery simplu bibliotecă. Acesta caută imagini în format SVG pe site, iar dacă browserul nu acceptă SVG, le convertește în PNG.

16. lazyYT:

Acest plugin poate fi folosit pentru adăugare rapidă video de pe YouTube. Când este încărcat pentru prima dată, stratul va conține o imagine de previzualizare a videoclipului, iar când se face clic, videoclipul va fi redat.

17. ScrollMagic:

Cu acest plugin, puteți fixa un element de pagină într-un anumit loc, puteți activa animația și în momentul în care utilizatorul derulează pagina într-un anumit loc.

18. RowGrid:

RowGrid este un plugin jQuery conceput pentru a prezenta elementele paginii ca tabel. Instrument mic și ușor de utilizat.

19. Remodalizare:

Acest plugin jQuery este folosit pentru a crea ferestre modale cu urmărire hash. Design complet receptiv stil platși foarte ușor de configurat.

20. Vizualizator panoramă:

Acest plugin jQuery poate fi foarte util pentru site-ul dvs. Vă permite să adăugați imagini panoramice, ceea ce, fără îndoială, va face pagina și mai unică.

21. Etichete flotante:

Acest plugin, construit pe jQuery, este familiar pentru mulți dezvoltatori. Sarcina sa este de a afișa un text implicit în câmpul de introducere și de a-l schimba atunci când utilizatorul începe să tasteze.

22. Cutie fluidă:

Plugin jQuery foarte util. Extinde și îmbunătățește capacitățile modulului cutie luminoasă fluidă. Funcționează ca link către o imagine mai mare.

23. Înălțime:

Headroom.js vă va ajuta să ascundeți navigarea (sau alt conținut din antet) pe site. Când un vizitator derulează în jos pe pagină, navigarea dispare și apare când utilizatorul revine în partea de sus a paginii.

24. A-Clider:

A-Slider este un glisor adaptiv și simplu care acceptă și conținut audio. Foarte ușor de utilizat și destul de flexibil personalizabil folosind HTML.

25. CoverflowJS:

Acesta este un proiect coverflow care va recrea efectul „CoverFlow” folosind componente jQuery UI și transformări CSS3.

26. jQuery URLive:

Capacitățile acestui plugin jQuery sunt foarte asemănătoare cu funcționalitatea atașamentului din fereastra de creare a postărilor de pe Facebook. Vă permite să creați previzualizări rapide ale oricărei adrese URL pe baza proprietăților

Pluginul permite aplicațiilor web să încarce imagini pentru diferite rezoluții de ecran.

28. jQuery Collapser:

Acest plugin jQuery vă permite să ascundeți textul după cuvinte, litere sau linii folosind un API destul de flexibil. Există multe opțiuni pentru ascunderea paragrafelor.

29. Parallax ImageScroll:

Un plugin care creează un efect de deplasare a imaginii. Ușor de folosit. Morman opțiuni suplimentare pentru modificare. Animația se face în CSS3.

30. Defilare bloc:

Plugin JQuery care descompune conținutul site-ului web în pagini pentru performanță mai bunăși apoi le afișează în blocuri.

31. Prezentare de diapozitive de imagine pe întreaga pagină:

Un plugin jQuery de pagină completă care realizează o prezentare de diapozitive care umple automat întreg spațiul ecranului cu o imagine. Dimensiunile imaginii sunt ajustate automat pentru a se potrivi cu zona de vizualizare.

32. EasyTree

Pluginul EasyTree jQuery este conceput pentru a converti listele UL sau JSON într-un meniu arbore pentru site-ul dvs. Ușor de utilizat și absolut gratuit.

33. Cartografiat:

Mapsed simplifică procesul de marcare a locurilor pe o hartă. Puteți, de asemenea, să adăugați și să editați locuri dacă acestea nu se află Google Locații API.

34. Scroller radiant:

Acest plugin jQuery vă permite să creați scrollere (carusele) receptive cu grilă și machete orizontale simple. Radiant Scroller acceptă o serie de opțiuni de personalizare și oferă, de asemenea, un API pentru management.

35. Caseta luminosă a imaginii:

Lightbox minimalistă pentru imagini. Pluginul, implicit, nu are etichete și butoane de navigare, ceea ce îl face simplu, dar ascetic. Receptiv și susținător dispozitive tactile, rulează pe majoritatea sistemelor de operare mobile.

36. Mr.JsonTable:

Acest plugin este foarte ușor de utilizat. Cu ajutorul acestuia, puteți aranja datele JSON sub forma unui tabel HTML, cu posibilitatea de a pagina și sorta. De asemenea, puteți ascunde coloanele.

37. ImageFit:

ImageFit poate fi foarte util pentru dezvoltatori. Făcută simplu. Are o dimensiune mică. Vă va ajuta să potriviți orice imagine oriunde pe site-ul dvs.

38. Validator Bootstrap:

Acest plugin va fi foarte util atunci când doriți să adăugați capacități de validare site-ului dvs. Are multe opțiuni încorporate și este foarte ușor de utilizat.

39. Redimensionare End Plugin:

Acest plugin este folosit pentru a afișa mesaje după redimensionarea ferestrei browserului.

40. Fundaluri adaptive:

Pluginul folosește culoarea dominantă în imaginea de fundal și adaugă această culoare la fundalul elementului părinte.

41.FormChimp:

Pluginul jQuery, care este un formular Mailchimp Ajax complet personalizabil, permite utilizatorului să se conecteze cu ușurință la Mailchimp.

42. Parola Peekaboo:

Pluginul vă va permite să afișați temporar parola introdusă utilizatorului, dacă acesta dorește.

Melnikova 620000 Rusia, regiunea Sverdlovsk, Ekaterinburg. +7 953 039 559 1 info@site-ul web

Cum să includeți biblioteca JQuery

JQuery

Avantajele CDN

Notă

Contra ale CDN-ului

Notă

De pe jquery.com/download

1. Deschide code.jquery.com în browser.

jQuery este Biblioteca JavaScript, care permite interacțiunea între JavaScript și HTML. Datorită JQuery, puteți accesa și manipula orice element DOM. Dezvoltatorii furnizează mai multe versiuni ale acestei biblioteci:

• pentru lansare (o versiune comprimată în care toate comentariile și spațiile sunt eliminate - are o greutate mai mică);
• pentru dezvoltare (versiunea necomprimată pentru dezvoltatori cu structură și spații păstrate - are mai multă greutate)

Există două moduri de a conecta JQuery la un site, care diferă semnificativ unul de celălalt și au avantajele și dezavantajele lor. Să ne uităm mai întâi la cea mai simplă metodă, apoi să trecem la cea mai complexă.

Conectarea JQuery folosind CDN

CDN (Content Delivery Network) - distribuit geografic infrastructura retelei pentru a livra conținut utilizatorilor. CDN vă permite să accelerați livrarea conținutului către utilizatorul final.

Avantajele CDN

• îmbunătățește performanța site-ului dvs. prin încărcarea bibliotecii de pe Internet și nu din stocarea locală.

Notă: dacă utilizatorul a vizitat un alt site care folosește și un CDN, atunci accesând site-ul nostru biblioteca JQuery va fi încărcată din memoria cache a browserului.

Contra ale CDN-ului

• dacă serverul CDN nu este disponibil dintr-un motiv oarecare, biblioteca JQuery nu va fi conectată la site-ul dvs.

Notă: există un procent foarte minim în care serverele de infrastructură CDN nu sunt disponibile.

Pe pagina jquery.com/download ni se oferă mai multe servere CDN (Google CDN, Microsoft CDN, CDNJS CDN și JsDelivr CDN) de pe care putem descărca și conecta biblioteca. Vom folosi CDN-ul standard JQuery. Pentru a conecta JQuery, urmați câțiva pași simpli:

1. Deschide code.jquery.com în browser.

2. Selectați versiunea cerutăși stilul bibliotecii.

3. Adăugați următorul cod pentru a include biblioteca într-o zonă a site-ului dvs.

Atributele de integritate și de origine încrucișată sunt utilizate pentru a verifica integritatea unui fișier. Acest lucru permite browserelor să se asigure că fișierele sunt găzduite resurse ale terților nu au fost manipulate.

4. Biblioteca este conectată cu succes la site-ul dvs.

Conectarea bibliotecii locale JQuery

Biblioteca locală este o bibliotecă pe care ați descărcat-o de pe site-ul oficial și apoi ați conectat-o ​​din directorul rădăcină al site-ului dvs.

Avantajele unei biblioteci locale

• Biblioteca JQuery va fi întotdeauna disponibilă pentru vizitatorii site-ului dvs., deoarece va fi încărcată din directorul rădăcină.

Dezavantajele unei biblioteci locale

• Când un vizitator vizitează site-ul, browserul va încărca automat biblioteca JQuery în cache. Acest lucru, la rândul său, va afecta performanța site-ului.

Pentru a conecta biblioteca în acest fel, urmați câțiva pași conform următoarelor instrucțiuni:

1. Deschideți jquery.com/download în browser.

2. Găsiți antetul JQuery și selectați versiunea dorită.

3. Plasați fișierul de bibliotecă descărcat în directorul rădăcină al site-ului dvs.

4. Adăugați următorul cod pentru a include biblioteca într-o zonă a site-ului dvs.

Prima întrebare care apare atunci când începeți să lucrați cu biblioteca jQuery este cum să o conectați? Este ciudat că nu am scris despre asta mai devreme și acum am decis să umplu acest gol.

În acest articol vă voi spune cum să adăugați corect jQuery pe un site web html obișnuit și pe motoarele populare.

Conectarea jQuery de pe pagina site-ului dvs

Cel mai comun mod de a conecta o bibliotecă. Mai întâi trebuie să descărcați cea mai recentă versiune de pe site-ul web al dezvoltatorului. Pagina de descărcare prezintă mai multe opțiuni de bibliotecă, de exemplu, oferă acum să descărcați „Compressed, production jQuery 3.1.1” și „Uncompressed, development jQuery 3.1.1”. Prima opțiune este o versiune comprimată a bibliotecii, toate comentariile au fost eliminate din ea, în acest caz biblioteca ocupă mult mai puțin spațiu, prin urmare pagina pe care va fi conectată se va încărca mai repede. A doua opțiune este, aproximativ vorbind, sursă bibliotecă, este structurat într-o formă ușor de citit cu comentarii și este destinat în primul rând dezvoltatorilor. Prin urmare, recomand să utilizați versiunea comprimată a bibliotecii.

După ce biblioteca este descărcată, trebuie să o plasați pe serverul pe care se află fișierele site-ului. De obicei, creez un folder „js” în rădăcina site-ului în care îl copiez bibliotecile necesareși plasez acolo un fișier cu funcțiile mele.

Acum puteți merge direct la conexiunea jQuery. Structura paginii web la care conectați jQuery poate varia. Dar cu siguranță conține Etichete HTML, CAPUL și CORPUL. Deci, pentru a conecta jQuery, trebuie să adăugați o etichetă SCRIPT cu un link către biblioteca din interior Eticheta HEAD.

Titlul Site-ului

În unele cazuri, biblioteca este inclusă înainte de eticheta de închidere a corpului, care este legată de ordinea de procesare pagini html browser. Deoarece browserul citește linii secvențial, atunci când se conectează jQuery la sfârșitul fișierului, browserul va afișa mai întâi site-ul și apoi va conecta dinamica. Cu o conexiune lentă, această abordare asigură o creștere a vitezei de încărcare a site-ului și abia apoi munca glisoarelor și restul. Codul pentru această conexiune arată astfel:

Titlul Site-ului

Atenţie! Este recomandabil să nu schimbați numele fișierului bibliotecă jQuery (deseori schimbat în jquery.js), deoarece în viitor se salvează nume oficial fișierul vă va ajuta să vedeți ce versiune a bibliotecii pe care o utilizați (în exemplul meu, este folosită versiunea 3.1.1).

Conectarea jQuery la paginile site-ului dvs. din surse externe

Această metodă este bună deoarece biblioteca este conectată de la site și nu se află pe hard disk. Acest lucru este valabil mai ales când cantitati mari proiecte mici și pentru învățare.

Această metodă de conectare se numește „Conectarea cu CDN”. O rețea de livrare de conținut, sau așa cum este mai frecvent numită CDN (Content Delivery Network), este o rețea de servere din întreaga lume. Acestea ajută la îmbunătățirea performanței serverului dvs. web și la reducerea încărcării traficului dvs.

Cele mai populare CDN-uri pentru conectarea jQuery:

De obicei folosesc conexiunea de la Google Developers. Mai multe fragmente au fost deja pregătite pentru noi pe pagina proiectului; doar copiați linia celui de care avem nevoie și includeți-o în fișier. Cu această metodă de conectare, codul va arăta astfel:

Titlul Site-ului

< ! DOCTYPE html > < html > < head > < meta charset = "utf-8" > < title >Titlul Site-ului< / title > < / head > < body > < / body > < / html >

Avantaj aceasta metoda, este că multe site-uri conectează jQuery prin API-ul Google, ceea ce înseamnă că, cu un grad ridicat de probabilitate, această bibliotecă este deja prezentă în memoria cache a browserului utilizatorului și nu va fi încărcată deloc a doua oară.

Conectarea jQuery la WordPress

jQuery este inclus automat în WordPress, deci nu este nevoie să includeți manual biblioteci din alte versiuni. Acest lucru se întâmplă în șablon cu folosind php cod:

Acest lucru va avea ca rezultat un șir de conexiune jQuery în interiorul etichetei HEAD.

La momentul scrierii, WordPress este livrat cu jQuery v1.12.4.Dar, după cum puteți vedea, versiunea bibliotecii este foarte diferită de cea inclusă în exemplele de mai sus. Este posibil să conectați cea mai recentă versiune a bibliotecii, dar există șansa unui conflict.

Pentru a evita conflictul, dar totuși folosiți versiunea bibliotecii care este necesară, trebuie să utilizați calea cea buna Conexiuni jQuery în fișierul functions.php: