Bazat e jQuery. Hyrje në jQuery

Ju duhet të keni dëgjuar për bibliotekën e mrekullueshme Javascript të quajtur jQuery. Çfarë është saktësisht jQuery?

Si ta bëjmë jetën më të lehtë për një zhvillues ueb? Ku të fillojë? jQuery bën të shkruar Javascript interesante dhe më e thjeshtë. Me këtë bibliotekë, shumë aspekte mjaft komplekse të Javascript mund të zbatohen lehtësisht në çdo aplikacion.

Tutoriali i sotëm do t'ju tregojë se si të filloni me jQuery dhe si të shkruani skenarin tuaj të parë.

Çfarë është jQuery?

jQuery është një bibliotekë Javascript shumë e lehtë (disa e quajnë kornizë) që heq dhimbjen e kokës nga shkrimi i kodit Javascript. Ajo ka shumë karakteristika të fuqishme, të tilla si: gjurmimi DOM, shtimi efekte të bukura dhe animacione të elementeve, teknika dhe metoda super të thjeshta Ajax. Në faqen kryesore të faqes jQuery, përshkrimi më i saktë, për mendimin tim, është:

jQuery është një bibliotekë e shpejtë dhe koncize që thjeshton trajtimin e ngjarjeve, animacionin dhe ndërveprimin Ajax për më shumë ueb i shpejtë zhvillimin. jQuery është krijuar për të ndryshuar metodat duke shkruar JavaScript kodi.

Cilat janë përfitimet e jQuery?

Le të kalojmë shkurtimisht disa nga përfitimet dhe veçoritë e këtij kuadri:

Sasia e kodit (e nevojshme për funksionimin e skriptit) është reduktuar ndjeshëm në krahasim me JavaScript, që nga ana tjetër nënkupton më pak kohë të shpenzuar dhe kod më të lexueshëm. Disa shembuj do të diskutohen më vonë në artikull.

Shumë më e lehtë për të kuptuar kodin (ndryshe nga JavaScript). Në botën tonë, sa më shpejt të përfundoni procesin e programimit, aq më shumë kohë mund t'i kushtoni qëllimeve të tjera.

Dokumentacion shumë i përshtatshëm dhe një komunitet aktiv, gjithmonë i gatshëm për të ndihmuar nëse është e nevojshme.

Përdorimi i Ajax po bëhet shumë më i lehtë. Ju duhen vetëm 5 rreshta kodi (ndonjëherë më pak) për të krijuar një kërkesë të thjeshtë Ajax.

Një numër i madh shtojcash me të cilat mund të bëni pothuajse gjithçka.

jQuery është argëtuese :)

Si të filloni?

Para së gjithash, ju duhet të vizitoni faqja kryesore Faqja zyrtare e jQuery dhe shkarkoni versionin më të fundit të këtij kuadri. Pas shkarkimit, duhet ta ngarkoni këtë skedar në hostin tuaj dhe të shkruani një lidhje me këtë skedar në kokën e dokumentit.

Përndryshe, mund të përdorni ndihmën e Google-it të madh dhe të vendosni një lidhje me serverin e tyre, ku ata janë gjithmonë versione të freskëtaçdo kornizë. Ju mund të gjeni lidhjen që ju nevojitet.

A është dokumenti gati?

Për të përmbushur tonën jQuery e parë skriptin, ne duhet të vendosim të gjithë skriptin tonë në një funksion. Ky funksion do të ekzekutohet kur DOM të jetë plotësisht gati (kur "dokumenti është gati" - përkthim fjalë për fjalë nga anglishtja). Vini re se kjo është shumë e ngjashme me ngjarjen popullore 'onload', por nuk është e njëjtë. Le të hedhim një vështrim në një shembull:

$(dokument).ready(funksion()( //Kodi këtu));

Më sipër, ne i themi jQuery të ekzekutojë çdo kod brenda një funksioni, kur DOM të jetë plotësisht gati.Kjo ka avantazhet e veta, megjithëse mund të mos jetë e qartë për shumë njerëz. Para së gjithash, duke përdorur këtë teknikë, ne e ndajmë plotësisht Javascript nga HTML. Së dyti, nuk duhet të presim ngarkesë të plotë faqe, ngarkimi i DOM-it është i mjaftueshëm.

Për koduesit dembelë, ose për ata që kanë çdo numër karakteresh, mund ta shkurtoni më tej kodin e mësipërm:

$(funksion()( //Kodi këtu));

Skripti juaj i parë jQuery

Ne tashmë dimë se si t'i referohemi bibliotekës. Kemi pak të kuptuar edhe funksionin document.ready. Tani është koha për të shkruar skenarin më të thjeshtë.

Le ta bëjmë sa më të thjeshtë. Për këtë shembull, le të bëjmë një faqe me tekst dhe një citat në fund. Ne duam të shfaqim kuotën vetëm nëse përdoruesi klikon në butonin. Hidhini një sy kodit të kërkuar më poshtë:

$(document).ready(function()(
var myQuote = $("#my_quote");
myQuote.hide();
$(".button"). kliko(funksion()(
myQuote.show (500);
});
});

Le të hedhim një vështrim më të afërt në të gjithë kodin.

Siç u përmend më lart, ne vendosëm të gjithë kodin për t'u ekzekutuar brenda funksionit $document.ready().

I caktojmë id-në e kuotës sonë (my_quote) variablit myQuote. Tani kemi akses në kuotën me id my_quote.

Kjo eshte e gjitha. Kur shtypni butonin për 0,5 sekonda, do të shfaqet një citat. Shumë e lehtë, apo jo?

Vazhdon....

Faleminderit për vëmendjen! Gjithe te mirat!

03/05/17 1.2K

Prezantimi

jQuery HTML është një bibliotekë e krijuar për të " shkruani më pak dhe bëni më shumë". Nuk është një gjuhë programimi, por një mjet që përdoret për të thjeshtuar zbatimin. detyrat e përbashkëta JavaScript.

jQuery ka avantazh shtesë — përputhshmëria e ndërshfletuesve. Ju mund të jeni i sigurt se kodi juaj do të interpretohet në çdo shfletues modern.

Krahasimi i shkrimit të një programi të thjeshtë " Përshendetje Botë!"nga JavaScript dhe jQuery, ju mund të shihni ndryshimin midis tyre.

JavaScript

document.getElementById("demo").innerHTML = "Përshëndetje, Botë!";

jQuery

$("#demo").html("Përshëndetje, botë!");

Kjo shembull i shkurtër ilustron se si të jQuery mund të merrni të njëjtin rezultat si me JavaScript standarde, por në mënyrë më koncize.

Golat

Ky udhëzues nuk supozon njohuri bazë të jQuery, por mbulon temat e mëposhtme:

• Si të instaloni jQuery në një projekt ueb;
• Përcaktimi i koncepteve të rëndësishme të zhvillimit të uebit si API, DOM dhe CDN;
• Zgjedhësit e përgjithshëm, ngjarjet dhe efektet jQuery ;
• Shembuj për të testuar konceptet e mësuara në këtë artikull.

Konfigurimi i jQuery

jQuery është skedari JavaScript të cilit do t'i referoheni në dokument. Si të përfshini jQuery në HTML:

• Shkarkoni një kopje lokale;
• Shtoni një lidhje në një skedar përmes rrjetit të shpërndarjes së përmbajtjes ( CDN).

Shënim. Rrjeti i shpërndarjes së përmbajtjes ( CDN) është një sistem i disa serverëve që i ofrojnë përdoruesit përmbajtje në ueb në varësi të vendndodhjes së tyre gjeografike. Kur shtoni një lidhje në një skedar jQuery nëpërmjet një CDN, ai do t'i shërbehet përdoruesit më shpejt dhe me efikasitet sesa nëse do të ishte i pritur në serverin tuaj.

Për shembujt tanë, ne do të lidhemi me jQuery nëpërmjet një CDN. Versioni i fundit jQuery mund të gjendet në Google. Nëse dëshironi të shkarkoni bibliotekën në vend të kësaj, mundeni merrni një kopje të jQuery në faqen zyrtare.

Le të krijojmë një projekt të vogël në internet. Ai do të përbëhet nga një skedar style.css, scripts.js dhe një skedar kryesor index.html.

Vendosni shenjën kryesore HTML dhe ruajeni në index.html.

index.html

index.html

Skript JavaScript ( skriptet.js) duhet të përfshihet në dokumentin poshtë bibliotekës jQuery ose nuk do të funksionojë.

Shënim. Nëse keni shkarkuar një kopje lokale të jQuery, ruajeni në dosjen js/ dhe përfshijeni atë nëpërmjet lidhjes js/jquery.min.js.

Biblioteka jQuery është shtuar në HTML dhe ne e kemi akses të plotë në API jQuery.

Duke përdorur jQuery

jQuery përdoret për t'u lidhur me elementët HTML në shfletues nëpërmjet DOM.

Modeli i objektit të dokumentit ( DOM) është metoda me të cilën JavaScript (dhe jQuery) ndërveproni me HTML në shfletues. Për të parë se çfarë është DOM, klikoni në shfletues klikoni me të djathtën mouse në faqen aktuale të internetit dhe zgjidhni Shiko kodin. Kjo do të hapë " Mjetet e Zhvilluesit". HTML që shihni në të është DOM.

Çdo Elementi HTML numëron Nyja DOM- një objekt që JavaScript mund t'i qaset. Këto objekte kanë një strukturë peme në të cilën elementi është më afër rrënjës dhe secila është një degë e pemës. JavaScript mund të shtojë, heqë dhe ndryshojë cilindo nga këta elementë.

Nëse klikoni përsëri me të djathtën dhe zgjidhni " Shiko kodin burimor”, do të shihni HTML të papërpunuar. Në fillim, mund të jeni të hutuar në lidhje me kodin burimor DOM dhe HTML, por ato janë gjëra të ndryshme. Kodi burimor i faqes përputhet saktësisht me atë që është shkruar në skedarin HTML. Ai është statik dhe i pandryshueshëm dhe nuk ndikohet nga JavaScript. DOM, nga ana tjetër, është dinamik dhe mund të ndryshojë.

Shtresa e jashtme DOM që mbështjell të gjithë nyjen , është një objekt dokumenti. Për t'u përdorur në faqe jQuery, duhet të siguroheni që dokumenti të jetë "gati".

Krijoni një skedar scripts.js në dosjen js/ dhe shtoni kodin e mëposhtëm në të:

js/skriptet.js

I gjithë kodi jQuery i futur në HTML do të mbështillet në kodin e mësipërm. Do të funksionojë vetëm pasi DOM të jetë gati për ekzekutimin e kodit JavaScript. Edhe pse në disa raste JavaScript nuk ngarkohet derisa elementët të jepen, përfshirja e këtij blloku konsiderohet praktika më e mirë.

Për të ekzekutuar skenarin " Përshendetje Botë!" dhe shfaqni tekstin në shfletues duke përdorur jQuery, së pari krijoni një element bosh paragrafi që ka demonstrimin e ID-së të aplikuar në të.

index.html

... ...

jQuery thirret dhe shënohet me një shenjë dollari ($). Ne hyjmë në DOM me jQuery duke përdorur sintaksë css, dhe zbatoni veprimin me metodën:

$("përzgjedhës").metodë();

Meqenëse identifikuesi në CSS shënohet me simbolin (#), ne aksesojmë identifikuesin demo duke përdorur përzgjedhësin #demo. html() është një metodë që ndryshon shënimin HTML brenda një elementi.

Tani do të vendosim programin " Përshendetje Botë!» brenda mbështjellësit të jQuery gati(). Shtoni këtë rresht në një funksion ekzistues në skedarin scripts.js:

js/skriptet.js

$(dokument).ready(funksion() ( $("#demo").html("Përshëndetje, botë!"); ));

Pas ruajtjes së ndryshimeve, mund të hapni skedarin index.html në shfletues. Nëse gjithçka funksionon si duhet, do të shihni mbishkrimin " Përshendetje Botë!»

Klikoni me të djathtën në " Përshendetje Botë!" dhe zgjidhni "Shiko kodin". Tani e dhënë në DOM

Përshendetje Botë!

. Nëse shikoni kodin burimor të faqes, do të shihni vetëm kodin origjinal HTML që kemi shkruar.

Përzgjedhës

Përzgjedhësit janë ato që ne përdorim për të specifikuar jQuery HTML me cilët elementë duam të punojmë. Ju mund të shikoni listën e plotë Përzgjedhës jQuery në dokumentacionin zyrtar.

Për të hyrë në një përzgjedhës, përdorni karakterin $ të ndjekur nga kllapat () .

$("përzgjedhës")

Linjat me citate të dyfishta janë të preferuara (sipas udhëzuesit jQuery). Edhe pse shpesh përdoren edhe vargjet me një citim.

Më poshtë është rishikim i shkurtër përzgjedhës të përdorur shpesh.

• $(«*») — wildcard : zgjedh çdo element në faqe;
• $(this) - aktual : zgjedh elementin aktual të menaxhuar në ky moment brenda një funksioni;
• $("p") - tag : zgjedh të gjitha rastet e etiketës

  ;

• $(".example") - class : zgjedh të gjithë elementët në të cilët aplikohet klasa shembull;
• $("#example") - id : zgjedh një shembull me shembull unik id ;
• $("") - atribut : zgjedh të gjithë elementët në tip atribut e cila është vendosur në tekst;
• $("p:first-of-type") - pseudo-element : zgjedh elementin e parë

  .

Kur lidhni jQuery me HTML, do të keni të bëni me klasa dhe ID. Klasat përdoren kur ju duhet të zgjidhni elementë të shumtë, dhe identifikuesit kur vetëm një.

Ngjarjet jQuery

Në shembullin " Përshendetje Botë!» Kodi u ekzekutua kur faqja u ngarkua dhe dokumenti ishte gati, kështu që nuk kërkonte ndërveprimin e përdoruesit. Në këtë rast, ne mund ta shkruajmë tekstin drejtpërdrejt në HTML, pa jQuery. Por do të na duhet të përdorim jQuery nëse duam që teksti të shfaqet në faqe pas një klikimi të mausit.

Kthehuni te skedari index.html dhe shtoni një element në të . Ne do ta përdorim këtë buton për të gjurmuar ngjarjen e klikimeve.

index.html

...

kliko mua

Ne përdorim metodën click() për të thirrur një funksion që përmban kodin "Hello, World! ".

js/skriptet.js

$(dokument).ready(funksion() ( $("#trigger").klikoni(); ));

ID-ja e elementit është trigger, e zgjedhim me $("#trigger") . Duke shtuar click(), ne gjurmojmë ngjarjen e klikimit. Më pas, ne thërrasim një funksion që përmban kodin tonë brenda metodës click().

funksion() ( $("#demo").html("Përshëndetje, botë!"); )

Këtu kod të plotë Elementi HTML jQuery.

js/skriptet.js

$(dokument).ready(funksion() ( $("#trigger").kliko(funksion() ($("#demo").html("Përshëndetje, botë!"); )); ));

Ruani skedarin scripts.js dhe përditësoni index.html në shfletues. Tani kur klikoni butonin, teksti " Përshendetje Botë!«.

Një ngjarje është çdo ndërveprim i përdoruesit me shfletuesin duke përdorur miun ose tastierën. Shembulli që sapo krijuam përdor një ngjarje klikimi. Në dokumentacionin zyrtar të jQuery, mund të gjeni listën e plotë të metodave të ngjarjeve jQuery. Më poshtë është një listë e ngjarjeve të përdorura zakonisht.

• click() - click : ndodh kur bëhet një klikim i vetëm i mausit;
• rri pezull () - rri pezull: ndodh kur treguesi i miut është mbi elementin;
• submit() - submit : ndodh kur dorëzohen të dhënat e formularit;
• scroll() - scrolling : ndodh kur faqja ose elementi lëviz;
• keydown() - key down : ndodh kur shtypet një tast në tastierë.

Metoda scroll() përdoret për të shfaqur elementë me animacion ose për t'i hequr ato kur përdoruesi lëviz faqen.

Për të dalë nga menyja me Çelësat ESC, përdoret metoda keydown(). Për të krijuar një menu dropdown ose për të shtuar HTML në një div duke përdorur jQuery, përdorni metodën click().

Efektet jQuery

Efektet jQuery ju lejojnë të shtoni animacion dhe elemente kontrolli në faqe në një farë mënyre.

NË shembullin e mëposhtëm do të krijojmë një dritare kërcyese dhe fshijmë. Ne mund të përdorim dy identifikues - një për të hapur dritaren dhe i dyti për ta mbyllur atë, por ne do të përdorim klasën për të hapur dhe mbyllur dritaren duke përdorur të njëjtin funksion.

Fshije etiketat ekzistuese Dhe

Nga skedari index.html dhe shtoni kodin e mëposhtëm:

index.html

hapur mbyll

Në skedarin style.css, ne do të përdorim një sasi minimale të CSS për të fshehur mbivendosjen me ekran: asnjë dhe do ta përqendrojmë në ekran.

css/style.css

Mbivendosja (ekrani: asnjë; pozicioni: fiks; lart: 50%; majtas: 50%; transformimi: përkthe (-50%, -50%); lartësia: 200 px; gjerësia: 200 px; sfondi: gri; )

Në skedarin scripts.js, ne përdorim metodën toggle(), e cila do të ndryshojë vlerat vetitë css shfaqja nga asnjë në bllok dhe anasjelltas, duke fshehur dhe shfaqur dritaren me klikim të mausit.

js/skriptet.js

$(dokument).ready(funksion() ( $(".trigger").klikoni(funksion() ($(".overlay").toggle(); )); ));

Pasi të keni lidhur JQuery me HTML, përditësoni skedarin index.html. Tani mund të ndryshoni dukshmërinë e dritares kërcyese duke klikuar butonin e miut. Ju mund të zëvendësoni metodën toggle() me fadeToggle() ose slideToggle() për të ofruar efekte të tjera të integruara jQuery.

Më poshtë është një listë e efekteve të përdorura zakonisht:

• toggle(): Ndryshon dukshmërinë e një elementi ose elementesh. show() dhe hide() - vendos efekte të të njëjtit lloj;
• fadeToggle() - ndërroj fade: Ndryshon dukshmërinë dhe vendos animacionin e patejdukshmërisë së një elementi ose elementesh. fadeIn() dhe fadeOut() janë efekte të njëanshme të lidhura;
• slideToggle() - ndryshon dukshmërinë e një elementi ose elementësh me një efekt rrëshqitjeje. slideDown() dhe slideUp() - vendos efekte të të njëjtit lloj;
• animate() - Kryen efekte të personalizuara të animacionit në vetinë CSS të elementit.

Ne përdorim Ngjarjet jQuery për të gjurmuar ndërveprimet e përdoruesve të tilla si goditjet e tastierës në tastierë, dhe ne përdorim efektet jQuery për të përpunuar më tej elementët kur ai ndërveprim ka ndodhur.

konkluzioni

Në këtë udhëzues, ju keni mësuar se si të zgjidhni Elementet jQuery HTML dhe menaxhoni ato, si dhe mënyrën se si funksionojnë ngjarjet dhe efektet, për të krijuar një ndërfaqe interaktive në internet për përdoruesit.

Ky botim është një përkthim i artikullit "An Introduction to jQuery", përgatitur nga ekipi miqësor i projektit

Mire keq

jQuery po bëhet shpejt një aftësi e domosdoshme për zhvilluesit e frontit. Qëllimi i këtij libri është të sigurojë një pasqyrë të bibliotekës jQuery JavaScript. Deri në momentin që të keni mbaruar së lexuari, duhet të jeni në gjendje të kryeni detyrat bazë me jQuery dhe të keni një bazë solide nga e cila mund të vazhdoni të mësoni. Ky libër u konceptua si material në klasë, por ju mund ta gjeni të dobishëm edhe për vetë-studim.

Kjo udhëzues praktik. Ne do të kalojmë pak kohë duke përshkruar konceptet dhe më pas do të keni mundësinë të punoni me një ushtrim që lidhet me atë koncept. Disa nga ushtrimet mund të duken primitive, ndërsa të tjerat, përkundrazi, janë plotësisht frikësuese. Në çdo rast, këtu nuk ka vlerësime, qëllimi është i thjeshtë - t'ju bëjë të qetë në rrugën tuaj përmes problemeve që zakonisht zgjidhen me jQuery. Një shembull i zgjidhjes së të gjitha ushtrimeve është përfshirë në kodin e mostrës.

Marrja e kodit

Kodi që do të përdorim në këtë libër ndodhet në depon e GitHub. Mund të shkarkoni një skedar .zip ose .tar dhe më pas ta shpaketoni për ta përdorur në serverin tuaj. Nëse je një maniak i git, gjithmonë mund ta klonosh ose detyrosh depon.

Programet

Për të përfunduar shumicën e mësimeve, do t'ju nevojiten mjetet e mëposhtme:

• Shfletuesi Firefox
• Zgjerimi i Firebug për Firefox
• Redaktues i thjeshtë i tekstit
• Për Ajax-in: server lokal(të tilla si MAMP ose WAMP) ose Klient FTP ose SSH për të hyrë në një server të largët.

Shtimi i JavaScript në një faqe

JavaScript mund të shtohet drejtpërdrejt në dokument ose si skedar i jashtëm nëpërmjet etiketës

Shembulli 1.2. JavaScript e jashtme

Korrigjimi i JavaScript

Mjeti i korrigjimit është thelbësor në zhvillimin e JavaScript. Për Firefox-in, është një korrigjues popullor zgjerimi i zjarreve; Safari dhe Chrome ofrojnë tastierë të integruar.

Çdo konsol ofron:

• redaktorë me një dhe shumë rreshta për eksperimente me JavaScript;
• inspektori për të parë të krijuar Kodi i burimit faqe;
• Skedat Rrjeti dhe Burimet për të eksploruar kërkesat e rrjetit.

Kur shkruani kodin JavaScript, mund ta përdorni metodat e mëposhtme për të dërguar mesazhe në tastierë:

• console.log() për mesazhe të përgjithshme;
• console.dir() për objektet e shfletuesit;
• console.warn() për paralajmërime;
• konsol.error() për gabime.

Metodat e tjera të konsolës janë gjithashtu të disponueshme, megjithëse ato mund të ndryshojnë në varësi të shfletues të ndryshëm. Përveç kësaj, konsolat ofrojnë mundësinë e instalimit pikat e kontrollit dhe kodin e gjurmimit për qëllime korrigjimi.

Ushtrime

Shumica e kapitujve në këtë libër përmbajnë një ose më shumë ushtrime. Për disa nga ushtrimet do të jeni në gjendje të punoni drejtpërdrejt në Firebug, për të tjerat do t'ju duhet të përfshini skriptet pas jQuery, siç përshkruhet në ushtrimet individuale.

Në disa raste, do t'ju duhet t'i referoheni dokumentacionit të jQuery për të përfunduar ushtrimin, pasi jo të gjitha informacionet përkatëse janë dhënë në libër. Biblioteka jQuery është e madhe dhe gjetja e përgjigjeve në dokumentacion është një pjesë e rëndësishme e procesit mësimor.

Këtu janë disa këshilla për zgjidhjen e problemeve të tilla:

• Së pari, sigurohuni që e kuptoni plotësisht problemin që ju kërkohet të zgjidhni.
• Më pas, kuptoni se cilat artikuj ju nevojiten për të zgjidhur problemin dhe përcaktoni se si do t'i merrni ato artikuj. Përdorni Firebug për të kontrolluar nëse elementët janë marrë.
• Më në fund, kuptoni se çfarë duhet të bëni me këto elemente për të zgjidhur problemin. Kjo mund të jetë e dobishme për të shtuar komente që shpjegojnë se çfarë do të bëni përpara se të shkruani kodin.

Mos kini frikë të bëni gabime! Mos u mundoni ta bëni kodin të përsosur herën e parë! Të bësh gabime dhe të eksperimentosh me zgjidhje është pjesë e mësimit të bibliotekës dhe do të bëhesh zhvilluesi më i mirë. Shembujt e zgjidhjeve për këto ushtrime gjenden në dosjen /solutions.

Materiali referues

Ka shumë artikuj dhe bloge atje që ofrojnë një pamje të veçantë për jQuery. Disa prej tyre janë të jashtëzakonshme, disa janë të gabuara. Kur lexoni një artikull rreth jQuery, sigurohuni që i referohet të njëjtit version që po përdorni. Rezistojini tundimit për të thjesht kopjuar dhe ngjitur kodin - merrni kohë për ta studiuar atë.

Këtu janë disa burime të shkëlqyera për t'ju filluar ndërsa mësoni jQuery. Më e rëndësishmja prej tyre është vetë faqja jQuery: përmban dokumentacionin e plotë të bibliotekës në formë kodi. Kjo nuk është një kuti e zezë - kuptimi juaj për bibliotekën do të rritet në mënyrë eksponenciale nëse kaloni kohë duke e vizituar atë vazhdimisht. Dhe unë rekomandoj fuqimisht që të shtoni faqen në faqeshënuesit e shfletuesit tuaj dhe t'i referoheni vazhdimisht.

Me këtë botim, vendosa të hap një seri artikujsh për ata që duan të zotërojnë kornizën jQuery. Si gjithmonë, do të përpiqem të jem i shkurtër dhe të jap sa më shumë shembuj. Artikujt pasues, në parim, mund të konsiderohen si një përkthim falas i dokumentacionit nga http://docs.jquery.com.

Pra, keni vendosur të mësoni jQuery, nga filloni? Sigurisht, ju tashmë jeni njohur me JavaScript, përndryshe nuk do të kishit vendosur. Çfarë tjetër është e dobishme të dini për një kuptim më të mirë të këtij kuadri magjik:

• Zgjedhësit CSS (shiko këtu)
• XPath (shih)

Në pamje të parë, lidhja nuk është e dukshme, por fakti është se jQuery bazohet në aftësinë për të akses të lehtë në çdo nyje në pemën xml, që është dokument html, dhe kjo qasje kryhet duke përdorur mekanizmat

CSS dhe XPath. Prandaj, nëse këto koncepte janë të njohura për ju, atëherë konsideroni se jeni tashmë 50% të njohur me jQuery, dhe nëse jo, gjithçka është në duart tuaja.

Pra, për fillestarët, do të ishte mirë të mësojmë se si të marrim çdo element që na nevojitet në faqe ose një grup elementësh të zgjedhur sipas një atributi të caktuar:

$("div") // të gjitha div-të në faqen $("div:first") // vetëm div e parë $("div: fundit") // vetëm e fundit $("div:edhe") // të gjithë edhe div"s $("div.myclass") // div që kanë class="myclass" $("#mydiv") // element me id="mydiv", jo domosdoshmërisht div $("input:text") / / të gjithë elementët e hyrjes me type="text" $("input:checkbox:checked") // të gjitha kutitë e kontrollit me checked=true $("div", "#myid") // të gjitha divs në kontejnerin me id= "myid" $("div.myclass img") // img e cila është në div"s me class="myclass" $("div.myclass, div.my2") // divs që ka class= "myclass" dhe klasë "my2"

Lista mund të vazhdojë për një kohë të gjatë, por ka dokumentacion për këtë (për fat të mirë, jQuery ka dokumentacion të shkëlqyeshëm, me shembuj dhe shumë shkrime), dhe tani po përpiqemi të kuptojmë thelbin e çështjes. Një sy kureshtar tërhoqi menjëherë vëmendjen te konstrukti $ () në secilin shembull. Çfarë është kjo? Ky është një funksion: emri është $ (a është i ndaluar?), dhe në kllapa- parametrat. Tani bëhet e qartë pse nevojiten CSS dhe XPath - ndërtimet e tyre veprojnë si parametra për marrjen e mostrave.

Funksioni $ është themeli i jQuery dhe thirret në një mënyrë ose në një tjetër nga të gjitha metodat e tij. Nëse është një funksion, atëherë mund të kthejë diçka. Dhe kthen vetëm një grup elementësh të zgjedhur nga dokumenti bazuar në vendosni parametrat, pastaj.

vartmp = $("div"); // mund t'i caktoni një vlerë alert(tmp.length) // dhe të shihni numrin e elementeve të grupit

Elementet grup i dhënë mund të manipulohet:

$("div").not(".red") // të gjitha div-të përveç atyre me klasën "red", // d.m.th. jo vetëm class="red", por edhe class= "myclass red" $("span .jeshile").add("span.gri") // in këtë rast// identike me $("span.green, span.gray"), // por ndonjëherë nuk mund të bësh pa shtuar $("div").filter(".red, :first") // zgjedh të gjitha divs , por më pas zgjedh // të parën prej tyre dhe me klasën e kuqe

NË ky shembull Përveç zgjedhjes së elementeve, mësuat edhe për metodat jQuery dhe mënyrën e përdorimit të tyre. Metodat thirren përmes një pike dhe zbatohen në grupin pas së cilës u thirrën. Metodat kthejnë një grup të ri ose të modifikuar. Numri i thirrjeve të metodës është i pakufizuar.

$("div") //ktheu të gjitha div"s.not(".red") //spanned div"s me klasën e kuqe dhe ktheu pjesën tjetër.add("span.green") //shtoi span"s në përzgjedhja me klasën jeshile .addClass("myclass") //shtoi klasën myclass në secilin element të përzgjedhjes.removeAttr("titulli") //removed atribut titulli për çdo element të mostrës (nëse ka)

Metodat ekzekutohen sipas radhës që quhen (me përjashtim të metodat ajax që presin një përgjigje të serverit) nga e majta në të djathtë. Kjo mund të përdoret për lëvizjen e lirë në Pema DOM:

këtu tekst

ky tekst do të hiqet

por ky nuk është

del

$("#myid").klikoni(funksionin ()( $(this).parent().prev().prev().empty(); )); Unë mendoj se emrat e metodave në shembullin e mëparshëm flasin vetë, ato do të diskutohen më në detaje në artikullin përkatës.

Epo, ndoshta, dhe të gjitha bazat - zgjidhni elementi i dëshiruar(ose grup) dhe prodhojnë mbi të veprimet e nevojshme(lexoni aplikoni metodën e dëshiruar). E thjeshtë, si të gjithë gjenialët! Bazuar në këto dy gjera te thjeshta jQuery ka mekanizmin e vet fleksibël të trajtimit të ngjarjeve dhe ndërveprimin ajax me serverin, një grup i rëndësishëm efektet vizuale edhe me shume. Do të përpiqem të mbuloj të gjitha këto në botimet e mëvonshme.

Përditësimi i fundit: 1.11.2015

Çfarë është jQuery

Programimi modern i ueb-it dhe zhvillimi i faqeve të internetit nuk mund të imagjinohet më pa përdorimin e gjuhës JavaScript. Megjithatë, në ditët e sotme, përdoret gjithnjë e më shumë jo "lakuriq" kodi javascript, por kornizat dhe bibliotekat javascript. Një nga këto biblioteka, dhe ndoshta më e popullarizuara sot, është jQuery. Sipas disa vlerësimeve, të paktën gjysma e faqeve më të mëdha në internet përdorin këtë bibliotekë.

Ndërsa ne mund ta quajmë jQuery një bibliotekë, është në fakt koncepti i "jQuery" që bashkon një ekosistem të tërë bibliotekash të ndërtuara rreth një biblioteke thelbësore: jquery.ui për ndërtimin e ndërfaqeve vizuale, jqyery.mobile për zhvillimin e faqeve celulare etj.

Cilat janë përfitimet e përdorimit të jQuery?

Thjeshtimi i kodit. jQuery ofron një sintaksë të thjeshtë dhe elegante për manipulimin e elementeve në një faqe interneti.

Zgjerimi. I gjithë kodi jQuery është i hapur për rishikim dhe modifikim, dhe nëse diçka në bibliotekë nuk ju përshtatet, mund të modifikohet. Ju gjithashtu mund të krijoni shtojca jQuery.

Pajtueshmëria e ndërshfletuesve. jQuery ka mbështetjen e shumicës shfletues të famshëm, duke përfshirë edhe këto. si IE 7.8. (Edhe pse për shkak të faktit se shfletuesit IE 6-8 po bëhen gradualisht histori, dhe gjithashtu për të zvogëluar madhësinë e bibliotekës, mbështetja për IE 6-8 u ndërpre në versionin e fundit).

Përfshirë bibliotekën jQuery

Për të filluar punën me këtë bibliotekë, së pari duhet ta ngarkojmë atë. Mund ta gjeni në faqen zyrtare të zhvilluesit https://jquery.com/download/. Mund të gjeni disa versione të jQuery në vetë faqen e shkarkimeve. Në kohën e shkrimit të këtij kapitulli, versioni më i fundit i disponueshëm është 2.0.3. Edhe pse versionet ndryshojnë pak nga njëri-tjetri, këto dallime zakonisht nuk janë aq të rëndësishme, dhe shufra bazë dhe parimet e përgjithshme shumica e versioneve janë në thelb të njëjta.

Biblioteka paraqitet në dy versione - të ngjeshur ose të montuar (minimizuar) dhe të pakompresuar (normale). Versionet e minimizuara ofrojnë të njëjtin funksionalitet si versionet e rregullta, por ndryshojnë në atë që nuk përmbajnë karaktere opsionale si hapësira, komente, etj., dhe për këtë arsye kanë një prapashtesë min në emrin e tyre, për shembull, jquery-1.10.1.min.js. Meqenëse janë më produktive për shkak të volumit më të vogël, ato rekomandohen për përdorim në prodhim real. Në të njëjtën kohë, nëse doni të kuptoni logjikën e kodit jQuery, atëherë në këtë rast mund t'i referoheni version i rregullt bibliotekat.

Biblioteka jquery përfshihet në të njëjtën mënyrë si të tjerat skedarët javascript. Për shembull:

Në këtë rast, kam përdorur një version të minuar të bibliotekës jquery - jquery-1.10.1.min.js. Tani le të krijojmë një faqe interneti të thjeshtë duke përdorur jquery:

Mirë se vini në botën e jQuery

jQuery JavaScript

Kjo faqe ueb, nga njëra anë, përdor kodin jquery, nga ana tjetër, tregon gjithashtu ndryshimin nga përdorimi i kodit standard javascript.

Ne kemi dy butona të përcaktuar në faqe. Një buton ka një mbajtës onclick të përcaktuar në vetë shënimin e butonit: onclick="alert("Bota JavaScript"); ".

Butoni tjetër bën pothuajse të njëjtën gjë, por vetëm me jquery. Ky buton ka një ID (id="btn1"), përmes së cilës funksionet jquery ne do ta menaxhojmë atë.

Në fund të faqes, ne do të përcaktojmë një funksion jquery:

$(funksion()( $("#btn1"). kliko(funksion()( $(this).css("ngjyra e sfondit", "e kuqe"); alarm ("bota jQuery"); )); ) );

Shprehja $(funksion()()); - Kjo është ajo që është përkufizim i shkurtër funksionet jquery. Është zakon që ky funksion të vendoset në fund të dokumentit, si në këtë rast, përpara mbylljes etiketë e trupit. Ky funksion përfshin të gjithë kodin në gjuha javascript, i cili do të ekzekutohet kur të ngarkohet faqja.

Kuptimi i kodit të përdorur është që ne marrim elementin e butonit në shprehjen $("#btn1") dhe më pas varim një mbajtës klikimi mbi të. Në fakt, shprehja $("#btn1").click do të jetë e njëjtë me përdorimin e trajtuesit onclick në trupin e shënjimit të butonit. Në të njëjtën kohë, nuk kemi nevojë të ndryshojmë shënimin e vetë butonit në asnjë mënyrë, për të shtuar diçka atje. Gjithçka bëhet në funksionin jquery.

Çfarë përfshin në rastin tonë? Së pari, vendosim ngjyrën e butonit: $(this).css("background-color", "red"); . Dhe pastaj thjesht shfaqni mesazhin në ekran.

Duke përdorur CDN

Në shembullin e mëparshëm, unë përfshiva bibliotekën jquery direkt nga disku lokal, megjithatë, nuk kemi nevojë ta shkarkojmë bibliotekën dhe ta vendosim atë në disku lokal pranë skedarëve të tjerë. Në vend të kësaj, ne mund të përdorim CDN (Rrjetet e shpërndarjes së përmbajtjes). Në këtë rast, vetë biblioteka do të vendoset fizikisht në një rrjet CDN dhe ne mund të tregojmë një lidhje me të.

Për shembull, le të përfshijmë bibliotekën jQuery të vendosur në CDN jQuery:

Nuk është e nevojshme të përfshihet pikërisht ky version i bibliotekës, i gjithë grupi i versioneve të disponueshme të bibliotekës mund të gjendet në https://code.jquery.com/

Ne gjithashtu mund të përdorim CDN të tjera. Për shembull:

Google CDN: Ofrohet Google. Gjithçka versionet e disponueshme mund të gjendet në https://developers.google.com/speed/libraries/devguide?hl=en#jquery.

Microsoft CDN: Ofrohet nga Microsoft. Të gjitha versionet e disponueshme mund të gjenden në https://www.asp.net/ajaxlibrary/cdn.ashx#jQuery_Releases_on_the_CDN_0.

Formati i lidhjes do të jetë si më poshtë:

Yandex CDN: ofrohet Kompania ruse Yandex. Të gjitha versionet e disponueshme mund të gjenden në