JQuery - Descrierea bibliotecii. Ce este jQuery: unde este utilizat și ce avantaje oferă dezvoltatorilor principalele caracteristici ale bibliotecii jQuery?
jQuery este o bibliotecă javascript, a cărei utilizare face dezvoltarea codului javascript mult mai rapidă și mai ușoară.
În trecutul recent, această bibliotecă a făcut posibilă dezvoltarea rapidă a scripturilor. În zilele noastre, javascriptul pur a avansat atât de mult încât utilizarea jQuery pentru multe proiecte devine inutilă. De exemplu: cum să faci fără jQuery.Conectarea jQuery la site-ul dvs
Puteți descărca biblioteca jQuery de pe site-ul oficial și o puteți pune pe site-ul dvs., apoi conectați-o cu următoarea comandă:
Puteți utiliza găzduirea bibliotecii de la Google sau Yandex, apoi apelul va fi după cum urmează: //sau
Acest lucru este valabil mai ales dacă utilizați valori sau analize...Caracteristicile bibliotecii jQuery
Formatul de solicitare jQuery arată astfel:
| $("*") | Găsirea unui element pe o pagină (selectori) |
| va returna toate elementele de pe pagină | $("div") |
| va returna toate elementele div de pe pagină | $(".someBlock") |
| va returna toate elementele cu clasa someBlock | $("#conținut") |
| va returna elementul cu conținut id | $(Obiect) legați toate funcționalitățile jQuery la obiectele element DOM deja existente. Exemplu: |
| var el = document.getElementById("some_id"); $(el).css("marja", "5px"); | $("#conținut2 div.someBlock") |
| va returna elemente div cu clasa someBlock care sunt în interiorul unui element cu id content2 | $("div:odd") |
| va returna elemente div cu numere impare pe pagină | $("div:ascuns") |
| $("") | va returna elemente div ascunse |
| va returna toate elementele cu un atribut valoare egal cu 5 | $("div, span, p.lok").css("border", "1px solid red"); |
Selectoare de combinație
Selectorii din aceeași expresie interacționează unul cu celălalt în același mod ca în regulile CSS| "" | Selectori de atribute |
| "" | elemente care conțin un atribut nume |
| "" | elemente a căror valoare de atribut nume se potrivește cu valoarea |
| "" | elemente a căror valoare de atribut nume nu se potrivește cu valoarea |
| "" | elemente ale căror nume atribut valoare începe cu valoare |
| "" | elemente a căror valoare de atribut nume conține valoarea subșirului |
| "" | elemente al căror atribut nume conține cuvântul valoare |
| "" | elemente ale căror nume atribut valoare este prefixată cu valoare (egale cu valoare sau de forma: „valoare-*”) |
| "[..." | elemente care îndeplinesc toate condițiile de atribut specificate simultan |
Filtre care pot fi folosite pentru a rafina rezultatele altor selectoare. Ele sunt foarte asemănătoare ca scop și sintaxă cu pseudo-clasele din CSS
| ":focus" | element în focalizare |
| ":primul" | primul element găsit |
| ":dura" | ultimul element găsit |
| „:eq()” | element care trece sub un anumit număr dintre cele selectate |
| „:nu(selector)” | toate elementele găsite, cu excepția celor specificate în selector |
| ":chiar" | elemente cu numere de poziție pare, în setul de elemente selectate |
| ":ciudat" | elemente cu numere de poziție impare, în setul de elemente selectate |
| „:gt()” | elemente cu indice mai mare de n |
| ":lt()" | elemente cu indice mai mic de n |
| „:header” | elemente care sunt titluri (cu etichete h1, h2 etc.) |
| ":animat" | elemente care sunt implicate în prezent în animație |
| ":ascuns" | elemente invizibile ale paginii |
| ":vizibil" | elemente vizibile ale paginii |
| ":lang(limba)" | elemente care indică limbajele de conținut |
| ":rădăcină" | elementul care este rădăcina în document |
Acești selectori filtrează elementele în funcție de poziția lor în elementele părinte
| „:primul copil” | elementele plasate primul în elementele lor părinte |
| „:ultimul-copil” | elementele plasate ultimele în elementele lor părinte |
| „:nth-child()” | elemente situate într-un anumit mod în elementele părinte (pare, impar, mergând sub un anumit număr) |
| „:nth-child-last()” | |
| „:copilul singur” | elemente care sunt singurii copii ai elementelor lor părinte |
| „:numai-de-tip” | elemente care sunt singurii copii care se potrivesc selector în elementele lor părinte |
| „:primul de tip” | cele ale elementelor selectate care apar mai întâi în elementele lor părinte |
| „:ultimul-tip” | cele ale elementelor selectate care apar ultimele în elementele lor părinte |
| „:nth-first-of-type()” | cele ale elementelor selectate care apar într-o anumită ordine în elementele lor părinte |
| „:nth-ultimul-de-tip()” |
| ":buton" | elemente cu etichetă de buton sau tip buton |
| ":radio" | elemente care sunt întrerupătoare |
| „:checkbox” | elemente care sunt casete de selectare |
| ":text" | elemente care sunt câmpuri de text |
| ":parolă" | elemente care sunt câmpuri de introducere a parolei |
| ":fişier" | elemente care sunt câmpuri de încărcare a fișierelor |
| ":trimite" | elemente care sunt butoane de trimitere |
| ":resetare" | elemente care formează butoane clare |
| ":imagine" | elemente care sunt imagini pentru trimiterea formularului (intrare de tip imagine) |
| ":input" | elemente care sunt elemente de formular (cu etichete de intrare, zonă de text sau butoane) |
| „:selectat” | elementele selectate (cu starea selectată). Acestea pot fi elemente de tip . |
| ":focus" | elemente ale formei care sunt în focus. |
| ":verificat" | elementele selectate (cu starea verificată). Acestea pot fi elemente de tip sau . |
| „:activat” | elemente de formular active (cu starea activată) |
| ":dezactivat" | elemente de formular inactive (cu starea dezactivată) |
| .mamă() | va returna elementele părinte ale tuturor elementelor selectate. |
| .părinţi() | Găsește toți strămoșii elementelor selectate, de ex. nu doar părinți direcți, ci și bunici, străbunici, și așa mai departe, până la începutul arborelui DOM. |
| .parintiUntil() | Găsește strămoși precum .parents(), dar oprește căutarea înaintea unui element care se potrivește cu selectorul dat. |
| .offsetParent() | Returnează cel mai apropiat strămoș cu o altă poziție decât static (poziționarea implicită). |
| .copii() | va returna copiii tuturor elementelor selectate. |
| .Următorul() | va returna elementul imediat după elementele selectate. |
| .nextAll() | Găsește elementele care se află după fiecare dintre elementele selectate. |
| .nextUntil() | Găsește elemente care sunt după fiecare dintre cele selectate, dar nu mai departe de elementul care se potrivește cu selectorul dat. |
| .prev() | va returna elementele înaintea elementelor selectate. |
| .prevAll() | Găsește elementele care vin înaintea fiecăruia dintre elementele selectate. |
| .prevUntil() | Găsește elemente care sunt înaintea fiecăruia dintre cele selectate, dar nu mai departe de elementul care se potrivește cu selectorul dat. |
| .frați() | Găsește toate elementele adiacente (învecinare înseamnă elemente cu un părinte comun). |
| .eq(i) | va returna elementul cu indicele i din set. Metodele jQuery sunt disponibile pentru acesta. |
| .get(i) | va returna obiectul DOM al elementelor selectate, cu indicele i. Metodele jQuery nu sunt disponibile pentru acesta. |
| .obţine() | va returna o serie de obiecte DOM ale tuturor elementelor selectate |
| .dimensiune() | va returna dimensiunea setată (numărul de elemente selectate). |
| .each(func) | execute func pentru fiecare element. |
| .hartă() | Apelează funcția dată pe fiecare element al mulțimii, creând în cele din urmă un nou set format din valorile returnate de acea funcție. |
| .cel mai apropiat() | Găsește cel mai apropiat element care se potrivește cu selectorul dat, dintre următoarele: elementul selectat în sine, părintele său, bunicul său și așa mai departe, până la începutul arborelui DOM. |
| .găsi() | Găsește elemente după un selector dat, în interiorul elementelor selectate. |
| .filtra() | Filtrează un set de elemente selectate folosind selectorul sau funcția specificată. |
| .primul() | Returnează primul element dintr-un set. |
| .are() | Filtrează setul de elemente selectate, reținându-le pe cele care au copii care se potrivesc cu selectorul. |
| .este() | Verifică dacă setul conține cel puțin un element care se potrivește cu selectorul dat. |
| .dura() | Returnează ultimul element dintr-un set. |
| .nu() | Returnează elemente care nu corespund condițiilor specificate. |
| .felie() | Returnează elemente cu indici dintr-o anumită regiune (de exemplu, de la 0 la 5). |
| .adăuga() | Adaugă elementele specificate la set. |
| .and Self() | Adaugă elemente din setul anterior la cel curent (vorbim despre un lanț de metode). |
| .conținut() | Găsește toate elementele secundare ale elementelor selectate. Ca urmare, pe lângă elemente, este inclus și text. |
| .Sfârşit() | Returnează setul anterior de elemente din lanțul de metode curent. |
| .ascunde() | Ascunde elementul. .hide(„lent”) - ascunde elementul încet. |
| „lent”, „normal”, „rapid” sau număr de milisecunde. Al doilea parametru poate fi setat la o Funcție care este lansată după terminarea efectelor de animație. Execut o dată pentru fiecare element. | .spectacol() Element de afișare. |
| .show(„lent”) - ascunde elementul încet. | .css(„înălțime”) |
| va returna valoarea înălțimii elementului cu identificatorul bigIt. | .css(„lățime”, „20px”) |
| va seta o nouă valoare a lățimii | .attr(„clasa”) |
| va returna valoarea clasei elementului | .attr("clasa", "cutie") |
| va seta o nouă valoare pentru atributul de clasă al elementului | .html(„Nou”) |
| va schimba tot conținutul html al elementului cu cel specificat în metoda html | .text() |
| va returna textul din interiorul elementului | .gol() |
| elemente clare din conținut .offset() | .poziţie() |
| vă va permite să aflați sau să modificați poziția elementului selectat. .lăţime() | .înălţime() |
| vă va permite să aflați sau să modificați dimensiunile elementului selectat. | .animate(proprietăți, , , ) animaţie. proprietăți - o listă de proprietăți CSS implicate în animație și valorile lor finale. Sunt specificate de un obiect, în format (cheie:valoare), de exemplu: (opacitate: 50, lățime: 100, înălțime: 200). easing - modificați viteza animației (fie că va încetini spre sfârșitul execuției sau, dimpotrivă, va accelera). Setați după valoarea șirului: „liniar” și „swing” (pentru animație uniformă și animație cu accelerație). callback - o funcție care va fi apelată după finalizarea animației. Exemplu. Să presupunem că avem un element div cu ceva text. Dorim să ascundem fără probleme acest element, să înlocuim textul și să facem vizibil elementul: $("#mydiv").animate((înălțime: "ascunde"), 300).text("Text nou").animate( (înălțime: „show”), 300); |
| Evenimente de bază | .on(evenimente, , , handler) O metodă universală pentru instalarea de gestionare a evenimentelor pe elementele paginii selectate. evenimente: estompare, focalizare, focalizare, focusout, încărcare, redimensionare, derulare, descărcare, faceți clic, dblclick, mousedown, mouse sus, mouse mutare, mouseover, mouse out, mouseenter, mouseleave, schimbare, selectare, trimite, keydown, apăsare tasta, tastare, selector de erori - un selector prin care vor fi filtrate elementele aflate în interiorul celor deja găsite. Drept urmare, handlerul se va declanșa numai dacă evenimentul „a apărut” de la unul dintre elementele filtrate. date - date transmise handler-ului de evenimente. În handler vor fi disponibile în variabila event.data. handler - o funcție care va fi setată ca handler. |
| De exemplu: ("#foo").on("click", function())(alert("Ai dat clic pe elementul "foo"");)); | Handler pentru toate elementele li: $("ul").on("click", "li", function(event)()) |
| .off() | Elimină handlerele instalate cu help.on(). |
| .lega() | Instalează un handler de evenimente pe elementele paginii selectate. De la jQuery-1.7, această metodă este depreciată |
| .trăi() | Instalează un handler de evenimente pe elementele paginii selectate. Handler-ul va lucra și la elementele care au apărut după instalarea acestuia. |
| .delega() | Instalează un handler de evenimente pe elementele paginii selectate. Elementele sunt selectate folosind un selector de calificare. Manipulatorul va acționa și asupra elementelor care apar după instalarea acestuia. |
| .unul() | Instalează un handler de evenimente pe elementele paginii selectate, care se va declanșa o singură dată pe fiecare element. |
| .desface() | Elimină handlerul de evenimente din elementele selectate. |
| .muri() | Îndepărtează un handler de evenimente care a fost instalat folosind live(). |
| .undelegate() | Îndepărtează un handler de evenimente care a fost instalat folosind delegate(). |
| .triggerHandler() | Lansează un handler pentru evenimentul specificat fără a-l executa. |
| jQuery.proxy() | Având în vedere o funcție dată, creează o alta, în interiorul căreia această variabilă va fi egală cu valoarea dată. |
| eveniment | Un obiect care conține date despre evenimentul curent. Transmis tuturor gestionatorilor de evenimente. |
| .clic() | Setează un handler pentru un clic de mouse pe un element sau declanșează acest eveniment. |
| .dblclick() | Setează un handler pentru dublu „clic” cu mouse-ul pe un element sau declanșează acest eveniment. |
| .planare() | Setează un handler pentru două evenimente: apariția/dispariția cursorului peste un element. |
| .mousedown() | Setează un handler de clic al mouse-ului sau declanșează acest eveniment. |
| .mouseup() | Setează un handler pentru ridicarea butonului mouse-ului sau declanșează acest eveniment. |
| .mouseenter() | Setează un handler pentru ca cursorul să apară în zona elementului sau declanșează acest eveniment. Aspectul acestui eveniment este elaborat mai bine decât trecerea cu mouse-ul standard. |
| .mouseleave() | Setează un handler pentru cursorul care părăsește zona elementului sau declanșează acest eveniment. Aspectul acestui eveniment este elaborat mai bine decât mouseout-ul standard. |
| .mousemove() | Setează un handler pentru mișcarea cursorului în zona elementului sau declanșează acest eveniment. |
| .mouseout() | Setează un handler pentru cursorul care părăsește zona elementului sau declanșează acest eveniment. |
| .mouseover() | Setează un handler pentru ca cursorul să apară în zona elementului sau declanșează acest eveniment. |
| .toggle() | În mod alternativ, efectuează una dintre cele două sau mai multe funcții specificate ca răspuns la un „clic” pe un element. |
// O solicitare pentru pagina http://hostname/ajaxtest.php va fi trimisă către server și vor fi specificați doi parametri. // După primirea unui răspuns de la server, va fi apelată funcția onAjaxSuccess, care // va afișa un mesaj cu datele trimise de server. $.get("/ajaxtest.php",(param1: "param1", param2: 2),onAjaxSuccess); function onAjaxSuccess(data) (// Aici obținem datele trimise de server și le afișăm pe ecran. alert(data); ) Funcții utile load() solicită text html și îl inserează automat în elementele selectate, $.getScript (url [ ,fn_success]) face o cerere pentru un fișier javascript și îl execută automat. $.getScript("test.js", function())(alerta("Script finalizat.");)); $.browser vă va ajuta să aflați tipul dvs. de browser. $.support vă va ajuta să aflați caracteristicile specifice ale browserului dvs. .scrollTop() și .scrollLeft() vă vor permite să lucrați cu derulare.
jQuery este o bibliotecă JavaScript care se concentrează pe interacțiunea dintre JavaScript, HTML și CSS.
- Ce poate face jQuery
- Accesați orice element al DOM (Document Object Model) și nu numai accesați, ci și manipulați-le.
- Lucrați cu evenimente.
- Este ușor să implementați diverse efecte vizuale.
- Lucrați cu AJAX (o tehnologie foarte utilă care vă permite să comunicați cu serverul fără a reîncărca pagina, dar nu o vom atinge deocamdată).
Are un număr mare de plugin-uri concepute pentru a crea elemente de interfață cu utilizatorul.
Cum funcţionează asta
Î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 (biblioteca) și să o mutați (biblioteca) în același folder în care se află paginile noastre html (acest lucru nu este necesar, dar adresele pentru toate exemplele ulterioare vor fi scrise pe baza acestei structuri). , 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() effectSă decorăm aspectul și să facem 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 „lent”, „normal”, „rapid” sau număr de milisecunde. Al doilea parametru poate fi setat la o Funcție care este lansată după terminarea efectelor de animație. Execut o dată pentru fiecare element.ș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 „lent”, „normal”, „rapid” sau număr de milisecunde. Al doilea parametru poate fi setat la o Funcție care este lansată după terminarea efectelor de animație. Execut o dată pentru fiecare element.ș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? Cum să creați efecte grafice, animație, trageți și plasați și sortați obiecte și, în general, lucrați cu această bibliotecă va fi discutat î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.
Dezvoltatorii de site-uri începători se confruntă adesea cu conceptul de jQuery; Și familiarizarea cu definiția aduce foarte puțină claritate.
Să înțelegem sensul termenului, domeniile și cazurile de utilizare și, de asemenea, să facem o scurtă excursie în istorie.
Context istoricjQuery este un framework, o bibliotecă creată pentru interacțiunea dintre limbajul de programare JavaScript și limbajul hipertext. A fost prezentat publicului în 2006 la una dintre conferințele dedicate evoluțiilor din domeniul rețelelor sociale și browserelor, care a avut loc la New York. Autorul proiectului este un tânăr programator John Resig, care încă conduce proiectul.
John a stăpânit HTML și a început să programeze în Basic, iar tipului i-a plăcut. De-a lungul timpului, John a trecut la Visual Basic și a început să proiecteze site-uri web.
Când a venit timpul să creeze o pagină cu derulare personalizată, programatorul a fost foarte dezamăgit de capacitățile limbajelor de programare utilizate și s-a pus pe treabă JavaScript.
Potențialul său părea inepuizabil în rezolvarea problemelor apărute în timpul utilizării VB.
După ce a acumulat experiență și a creat zeci de aplicații, Resig și-a dat seama că este necesar să codifice fragmente de cod utilizate frecvent (realizarea lor sub formă de funcții și subrutine) pentru a fi utilizate în orice proiect pe
Acest lucru va simplifica dezvoltarea și va elimina toate întrebările despre compatibilitatea browser-ului și multiplatformă. Aici a început dezvoltarea cadrului.
ConcepteUn cadru (echivalentul rusesc al termenului - schelet) este o platformă software care servește ca mijloc de definire a structurii unei aplicații. Folosit în dezvoltarea de software, unde este necesar să accesați fragmente mari și mici de cod și componente care au fost combinate de platformă, în acest caz jQuery.
Biblioteca vă permite să accesați absolut orice element DOM pentru a-și schimba conținutul, structura, parametrii și chiar designul.
Claritatea în înțelegerea propoziției anterioare va fi adusă de definiția DOM - aceasta este o interfață de utilizator universală multiplatformă (independentă de limbajul de programare utilizat), prin care programele și mini-programele (scripturile) pot fi deschise și ajustate. .
În același timp, practic nu există reguli, condiții sau restricții, ceea ce deschide posibilități nelimitate pentru utilizator de a procesa și modifica conținutul HTML.
Orice document cunoscut este reprezentat ca un arbore ierarhic, în care fiecare ramură și elementele sale copil sunt atribute, obiecte grafice sau text.
JDOM – următorul pas în evoluția modelului obiect document, creat ținând cont de toate caracteristicileJava, VjQuerynu este încă folosit, cel puțin nu este prezentat publicului.
Ce este jQuery?Din cele de mai sus, este mult mai ușor de înțeles că jQuery se bazează pe interacțiunea limbajului de programare cu mai multe paradigme menționat mai sus cu documentele HTML și conținutul corespunzător.
Printr-un cadru sau cadru, așa cum este mai des numit de dezvoltatorii autohtoni, puteți accesa cu ușurință o pagină de hipertext și puteți manipula structura și elementele acesteia fără nicio restricție.
Principalele caracteristici ale cadrului:
- accesarea oricăror elemente DOM pentru a le modifica și procesa;
- Compatibil AJAX;
- o bibliotecă imensă de plugin-uri, în special cele legate de designul vizual al paginilor;
- suport pentru lucrul cu evenimente.
Pentru acei utilizatori care sunt deja familiarizați cu JavaScript, acest lucru este suficient. Ei știu foarte bine cât de consumator de timp este să selectezi elemente dintr-un document pentru a le schimba.
Acesta nu este doar un proces lung, ci și foarte incomod chiar și pentru dezvoltatorii destul de experimentați.
Biblioteca vă va permite să reduceți semnificativ codul sursă al aplicației, simplificându-l la limită. Începătorii ar trebui să vadă toate beneficiile cadrului în practică.
Ceea ce s-ar putea extinde la o pagină în JavaScript este redus semnificativ în jQuery.
var elem = document.getElementById('abzatc');
var elem = $(‘#abzatc’);
.
O bucată similară de cod în jQuery: . Ce este asta dacă nu simplifică munca? Și oricine este familiarizat cu etichetele HTML de bază poate înțelege despre ce vorbim în al doilea caz.
Nici măcar nu trebuie să fii programator aici. Cunoașterea CSS va simplifica, de asemenea, dezvoltarea și utilizarea bibliotecii.
Ambele bucăți de cod vor selecta paragraph() cu id-ul specificat pentru a-l procesa.
După ce am înțeles domeniul de aplicare al cadrului și principalele avantaje pe care le oferă dezvoltatorului, este timpul să luăm în considerare celelalte motive care obligă programatorii să treacă la jQuery.
Compatibilitate între platforme și browsereDatorită jQuery, nu este nevoie să vă faceți griji cu privire la sintaxa și caracteristicile interacțiunii dintre sistemele de operare și cod datorită implementării identice a cadrului în toate mediile.
Apropo, cele mai mari motoare de căutare au trecut deja lajQuery .
Viteză cu selectoare și ușurință în utilizare AJAXTestele independente demonstrează cât de rapid se compară jQuery cu bibliotecile similare. Și acesta este momentul în care trebuie să accesați un element de mai multe ori.
Viteza fulgerului se realizează prin utilizarea selectoarelor - un mecanism de acces rapid la orice obiect.
Google. Toate lucrările cu biblioteca se desfășoară folosind funcția $ și sunt împărțite în două tipuri:
- mai întâi obținem obiectul dorit folosind sintaxa $() trecând funcției un selector CSS care îndeplinește criteriile, apoi îl procesăm folosind metoda dorită;
- Apelăm metode globale pe obiectul specificat în funcția $().
Operarea cadrului este posibilă numai după ce pagina este încărcată complet pe computerul utilizatorului.
Cadrul a devenit un standard în dezvoltarea paginilor web. Conține funcționalitatea necesară majorității dezvoltatorilor de site-uri web, care nu numai că va accelera paginile și le va decora vizual, dar le va face și să funcționeze în mod egal pe toate sistemele de operare și browserele de internet. Pentru a stăpâni jQuery, abilități de bază de programare și Cunoștințe HTML Şi Bazele CSS
. Instrumentele lipsă sunt implementate cu ușurință prin descărcarea de pluginuri și prin scrierea propriilor selectoare.
Pentru a explica de ce ne atrage în epoca Node și ES6 (avem multe din aceste lucruri în sortimentul nostru), vă invităm să faceți cunoștință cu articolul lui Cody Lindley, publicat la scurt timp după ediția a treia menționată mai sus.
Deoarece s-a vorbit mult despre inutilitatea jQuery, nu pot să nu mă gândesc că am uitat valoarea de bază a jQuery. E timpul să-ți amintești despre ea.
În acest articol aș vrea să spun tuturor încă o dată ce este jQuery, deoarece astăzi nu este mai puțin relevant decât atunci când a apărut. Întrebarea importanței sale ar trebui să fie legată de scopul inițial al acestei întregi soluții (adică API-ul jQuery în sine) și nu de erorile browserului sau caracteristicile lipsă. Dacă plecăm de la altceva, atunci riscăm să luăm poziții din care orice abstracție ar putea să nu fie absolut necesar, dar totuși puternic și util.
Înainte de a începe să apăr cu ardoare onoarea jQuery, să ne întoarcem la originile sale, pentru ca toată lumea să înțeleagă „ce” este jQuery și „de ce” este nevoie de el.
- Interfața Document Object Model (alias DOM API) este abstractizată.
- Toate diferențele de implementare a DOM care există între browsere sunt nivelate.
- Sunt remediate erorile cunoscute ale browserului legate de CSS și DOM.
Acum permiteți-mi să explic ce vreau să spun prin „scriptare elemente HTML”. Folosind jQuery, este complet trivial să rezolvi probleme precum „ascunderea vizuală a celui de-al doilea element h2 în document.html. Codul jQuery pentru o astfel de sarcină ar arăta astfel:
JQuery("h2:eq(1)"). hide();
Să descompun puțin această linie cu codul jQuery. În primul rând, se apelează funcția jQuery() și îi trecem un selector CSS special din biblioteca jQuery care selectează al doilea element h2 din documentul HTML. Apoi este apelată metoda jQuery .hide(), ascunzând elementul h2. Așa este codul jQuery simplu și expresiv din punct de vedere semantic.
Acum să-l comparăm cu codul DOM nativ pe care ar trebui să-l scriem dacă nu am lucra cu jQuery.
Document.querySelectorAll("h2").style.setProperty("display","none");
Ce opțiune ar fi mai convenabilă de scris? Dar citirea și depanarea? De asemenea, rețineți că codul DOM nativ de mai sus presupune că toate browserele acceptă metodele DOM utilizate aici. Cu toate acestea, se dovedește că unele browsere mai vechi nu acceptă querySelectorAll() sau setProperty() . Deci, codul jQuery de mai sus ar funcționa bine în IE8, dar codul DOM nativ ar genera o eroare JavaScript. Dar totuși, chiar dacă ambele linii de cod ar funcționa peste tot, care dintre ele ar fi mai ușor de citit și scris?
Când aveți de-a face cu jQuery, nu trebuie să vă faceți griji cu privire la ce browser acceptă ce sau ce API DOM poate fi încurcat în ce browser. Lucrând cu jQuery, puteți lucra mai rapid pentru a rezolva problemele cu un cod mai simplu, fără să vă faceți griji, deoarece jQuery reține multe dintre probleme pentru dvs.
jQuery = JavaScript? Deoarece jQuery este atât de omniprezent, este posibil să nu fiți sigur unde se termină JavaScript și unde începe jQuery. Pentru mulți designeri web și dezvoltatori HTML/CSS aspiranți, biblioteca jQuery este prima lor expunere la limbajul de programare JavaScript. Acesta este motivul pentru care jQuery este uneori confundat cu JavaScript.În primul rând, să lămurim clar că JavaScript nu este jQuery sau chiar API-ul DOM în sine. jQuery este o bibliotecă gratuită de la terți scrisă în JavaScript și susținută de o comunitate de dezvoltatori. În plus, jQuery nu este un standard printre organizațiile (de exemplu W3C) care scriu specificații HTML, CSS sau DOM.
Nu uitați că jQuery servește în primul rând ca zahăr și este folosit pe deasupra API-ului DOM. Acest zahăr ajută la lucrul cu interfața DOM, care este renumită pentru complexitatea și abundența de erori.
JQuery este pur și simplu o bibliotecă utilă pe care o puteți folosi atunci când scrieți scripturi pentru elemente HTML. În practică, majoritatea dezvoltatorilor recurg la el atunci când fac scripturi DOM, deoarece API-ul său vă permite să rezolvați mai multe probleme cu mai puțin cod.
Biblioteca jQuery și pluginurile sale sunt utilizate atât de larg de către dezvoltatori, încât un astfel de cod este adesea prezentat drept cel mai solicitat script de pe întregul Web.
Cele două pietre de temelie ale jQuery Cele două concepte de bază pe care se bazează jQuery sunt „găsiți și faceți” și „scrieți mai puțin, faceți mai mult”.Aceste două concepte pot fi extinse și reformulate ca următoarea afirmație: sarcina principală a jQuery este să organizeze selecția (adică să găsească) sau să creeze elemente HTML pentru a rezolva probleme practice. Fără jQuery, acest lucru ar necesita mai mult cod și mai multă manipulare DOM. Este suficient să ne amintim exemplul discutat mai sus cu ascunderea elementului h2.
Trebuie remarcat faptul că gama de capabilități jQuery nu se limitează la aceasta. Nu numai că retrage interacțiunile DOM native, ci și solicitările HTTP asincrone (aka AJAX) folosind obiectul XMLHttpRequest. În plus, are o serie de soluții JavaScript suplimentare și instrumente mici. Dar principalul beneficiu al jQuery constă tocmai în simplificarea scripturilor HTML și pur și simplu în faptul că este plăcut să lucrezi cu el.
De asemenea, voi adăuga că avantajul jQuery nu constă în eliminarea cu succes a erorilor de browser. „Piatră de temelie” nu are nimic de-a face cu aceste aspecte ale jQuery. Pe termen lung, cea mai mare putere a jQuery este că API-ul său abstrage DOM. Și această valoare nu merge nicăieri.
Cum se încadrează jQuery în dezvoltarea web modernă Biblioteca jQuery are zece ani. A fost creat pentru acea eră a dezvoltării web, pe care cu siguranță am depășit-o. jQuery nu este o tehnologie esențială pentru manipularea DOM-ului sau pentru a face solicitări HTTP asincrone. Aproape tot ce puteți face cu jQuery se poate face fără el. Și dacă sunteți doar interesat de câteva interacțiuni mici și simple cu DOM-ul într-unul sau două browsere moderne, atunci ar fi mai bine să utilizați metode DOM native în loc de jQuery.Cu toate acestea, orice dezvoltare care implică BOM (model de document de browser) sau DOM, nu doar interacțiuni cosmetice, ar trebui să folosească jQuery. În caz contrar, ajungeți să reinventați roata (adică elementele abstracțiilor jQuery) și apoi să o testați pe tot felul de piste (adică browsere mobile și desktop).
Dezvoltatorii experimentați știu ce înseamnă „a sta pe umerii giganților” și când să evite complexitatea inutilă. În cele mai multe cazuri, încă nu ne putem lipsi de jQuery atunci când trebuie să finalizăm lucrări non-triviale legate de HTML și DOM într-un timp scurt.
În plus, chiar dacă jQuery nu a rezolvat nicio problemă cu DOM-ul sau implementările disparate ale browserului ale specificației DOM, API-ul în sine nu ar fi mai puțin important, deoarece este atât de util pentru scripting HTML.
Mai mult, jQuery este îmbunătățit și, cu ajutorul său, programatorii pot lucra mai inteligent și mai rapid. Aceasta este situația astăzi și așa era și la momentul înființării bibliotecii. A spune „Nu am nevoie de jQuery” este același lucru cu a spune „Ma pot descurca fără lo-dash sau underscore.js”. Desigur, te poți descurca fără ele. Dar valoarea lor nu este judecată după asta.
Valoarea lor este în API. Complexitatea excesivă poate încetini dezvoltarea. De aceea ne plac lucruri precum lo-dash și jQuery - fac totul mai ușor. Și pentru că jQuery ușurează realizarea de sarcini complexe (cum ar fi scrierea de scripturi HTML), nu va deveni învechit.
Dacă încă vă îndoiți că jQuery este necesar în dezvoltarea web modernă, vă sugerez să urmăriți următoarea prezentare de la unul dintre dezvoltatorii bibliotecii, unde își justifică nevoia indiferent de clopotele și fluierele browserelor moderne.
Anexă - Fapte importante despre jQuery În cele din urmă, voi enumera câteva fapte importante despre jQuery.- Biblioteca jQuery a fost scrisă de John Resig și lansată pe 26 august 2006. John a recunoscut că a scris acest cod pentru a „revoluționa modul în care JavaScript interacționează cu HTML”.
- jQuery este considerată cea mai populară și mai solicitată bibliotecă JavaScript modernă.
- jQuery este un software gratuit furnizat sub licența MIT.
- Există două versiuni de jQuery. Versiunea 1.x acceptă Internet Explorer 6, 7 și 8\, în timp ce 2.x acceptă doar IE9+. Dacă aveți nevoie de suport IE8, va trebui să lucrați cu versiunea 1.x. Dar e în regulă, ambele versiuni sunt încă în curs de dezvoltare.
- Versiunea minimă de jQuery 2.x are o dimensiune de 82 kb. Există aproximativ 28k în arhiva Gzip O defalcare a documentației API).
- atribute
- obiectul callbacks
- obiect amânat
- dimensiuni
- efecte
- evenimente
- forme
- interne
- manipulare
- diverse
- offset
- proprietăți
- selectoare
- traversând
- utilitati
jQuery este o bibliotecă JavaScript care conține funcții gata făcute ale limbajului JavaScript; toate operațiunile jQuery sunt efectuate din codul JavaScript.
Biblioteca jQuery manipulează elementele HTML, controlându-le comportamentul și folosind DOM-ul pentru a schimba structura unei pagini web. În acest caz, fișierele HTML și CSS sursă nu se modifică numai la afișarea paginii pentru utilizator.
Selectoarele CSS sunt folosite pentru a selecta elemente. Selecția se face folosind funcția $(). Când este apelată, funcția $() returnează o nouă instanță a unui obiect JQuery care include zero sau mai multe elemente DOM și vă permite să interacționați cu ele într-o varietate de moduri.
Executarea diferitelor scenarii este posibilă numai după ce structura documentului s-a terminat de încărcat, când browserul convertește codul html al paginii într-un arbore DOM. Procesul de încărcare este controlat de proiectare
JQuery(document).ready(funcție() ( ... ));
Mai întâi, instanța documentului este încapsulată într-o funcție jQuery(), apoi este utilizată metoda ready(), care este transmisă funcției function() (...), care este executată după ce documentul este încărcat.
În practică, forma scurtată a acestei notații este de obicei jQuery(function() (...)); , sau $(funcție() (...)); .
Variabilele JavaScript sunt folosite pentru a stoca informații atunci când lucrați cu biblioteca jQuery. Variabilele pot stoca elemente. Numele variabilelor destinate să stocheze elementele returnate încep cu semnul $, de exemplu:
$h = $(".listă").parent().parent().detach();
Matricele JavaScript sunt folosite pentru a stoca mai multe elemente:
$k = 15;
Reguli pentru lucrul cu biblioteca jQuery 1. Cum să adăugați jQuery la o pagină webExistă două moduri de a adăuga biblioteca jQuery la pagina dvs. web:
Utilizați o versiune a fișierului jQuery găzduit de Google, Microsoft sau jQuery.com.
Această metodă utilizează Rețeaua de distribuție a conținutului (CDN, rețea de distribuție a conținutului), adică Fișierul jQuery se află pe un alt site web, care, atunci când este solicitat de utilizator, trimite fișierul către computerul utilizatorului. Avantajele evidente ale acestei metode sunt sarcina redusă pe propriul dvs. server web și încărcarea mai rapidă a fișierelor datorită rețelei extinse de servere ale distribuitorului.
Pentru a utiliza această metodă, trebuie să urmați unul dintre linkurile:
După ce accesați site-ul de resurse, trebuie doar să copiați linkul către fișierul jQuery și să îl adăugați pe pagina dvs. web între etichete .... Ca rezultat, ar trebui să obțineți, de exemplu,
Descărcați cea mai recentă versiune a bibliotecii jQuery de pe site-ul oficial. Pentru a face acest lucru, trebuie să accesați jQuery.com și să selectați versiunea bibliotecii care vă interesează. Există două versiuni ale fișierului jQuery disponibile pentru descărcare - minimizate și necomprimate. Dimensiunea fișierului necomprimat este de aproximativ 300 KB, conține comentarii, deci este cel mai bine utilizat în scopul dezvoltării și depanării codului.
Versiunea minimizată a fișierului cântărește aproximativ 100Kb, toate comentariile și spațiile inutile au fost eliminate, ceea ce grăbește descărcarea fișierului de către browser.
Pentru a descărca, trebuie să urmați linkul, iar în fereastra care se deschide, faceți clic dreapta și selectați „Salvare ca...”. După aceea, plasați fișierul în folderul dorit (de obicei, folderul „scripturi” este folosit pentru aceasta) și adăugați-l la pagina dvs.:
2. Reguli pentru adăugarea jQuery în pagină
Plasați linkuri către fișierul jQuery în interiorul fișierului .
Plasați linkuri către fișierul jQuery după linkuri către stiluri CSS, deoarece jQuery manipulează adesea stilurile elementelor paginii web.
Plasați alte etichete... numai după linkul fișierului jQuery dacă scriptul în cauză folosește biblioteca jQuery.
Puteți crea un element HTML gol, de exemplu, un bloc, în mai multe moduri:
1) folosind forma scurtă $("")
2) folosind instrucțiunea $("")
3) folosind instrucțiunea $("")
Toate cele trei metode funcționează, dar este totuși recomandat să includeți etichete de deschidere și de închidere pentru a indica faptul că elementul poate conține alte elemente.
Când creați un element nou, puteți trece un al doilea parametru metodei $() sub forma unui obiect JavaScript care definește atribute suplimentare ale elementului:
$("", (src: "images/flower.jpg", titlu: "Rose_in_garden", click: function() (...) )).appendTo("body");
Aceasta creează un element cu atributele date și este inclusă în arborele DOM.