Kako započeti s jQuery-om: Učinite JavaScript programiranje lakšim

Objava: Vaša podrška pomaže održavanju web mjesta! Naplaćujemo naknadu za preporuku za neke usluge koje preporučamo na ovoj stranici.


Na kraju, više od 90% svih web lokacija koristi JavaScript. Kao najpopularniju JavaScript biblioteku jQuery koristi većina modernih web stranica i oko 65% od 10 milijuna najpopularnijih web mjesta na webu.

To znači da ako želite biti web programer, dizajner web mjesta ili webmaster, morate znati kako raditi s jQueryjem.

Uvod u jQuery

Contents

Što je jQuery?

JavaScript je programski jezik koji se koristi za dodavanje interaktivnosti na web stranicama. jQuery je knjižnica unaprijed ugrađenih JavaScript funkcija koje upravljaju zadacima koje se obično upravlja s JavaScript-om. U osnovi, jQuery olakšava i brže korištenje JavaScripta.

jQuery je knjižnica naredbi koje olakšavaju pronalaženje, odabir i manipuliranje HTML elementima na web stranici kao odgovor na aktivnost posjetitelja. Na primjer, pomoću jQuery možete odabrati određeni element, kao što su svi

elemente zaglavlja i uzrokovati da se na neki način njima manipulira na temelju aktivnosti posjetitelja – kao što je promjena veličine fonta kada miš pređe preko njih.

Snaga jQuery-a je u njegovoj sposobnosti da lako locira i odabire HTML elemente bez potrebe da se na HTML element primijene dodatni atributi..

jQuery Jednostavne su teške stvari

Sve što možete učiniti s jQuery-om možete učiniti i sa JavaScript-om. Razlika je u tome što se s jQuery-om može vrlo jednostavno postići sa stvarima koje je prilično komplicirano postići pomoću JavaScripta. Pogledajmo dva primjera: prebacivanje i pokretanje.

Sakrij ili prikaži elemente stranice pomoću prebacivanja

Svojstvo prikaza CSS može se koristiti za skrivanje HTML elemenata. Odaberite bilo koji HTML element s CSS odabirom i primijenite vrijednost none na svojstvo prikaza, a element će biti skriven od pogleda. Ako želite naredbu sakriti HTML element, skrivanje svojstva CSS je način na koji to možete učiniti.

Upotrebu JavaScripta nije skrivanje ili prikazivanje HTML elementa kontrolom svojstva prikaza CSS-a. Međutim, metoda jQuery toggle () uključuje mnoge ugrađene opcije koje olakšavaju stvaranje snažnih efekata prebacivanja koje bi bilo vrlo teško kopirati s JavaScript-om. Ako u HTML dokument uključite jQuery korisničko sučelje uz jQuery s upravljačkom pločom, možete koristiti i brojne efekte korisničkog sučelja jQuery da kontrolirate kako se pomični elementi skrivaju i prikazuju.

Ako želite naučiti kako koristiti metodu jQuery toggle (), postoji puno mjesta za započinjanje:

  • Naučite jQuery: besplatni obrazovni resurs iz jQuery fondacije. Kompletan jQuery tutorial vrijedi dovršiti, a mi povezujemo sa resursima na kraju ovog dokumenta. No, koristite ovu vezu ako želite ići ravno do odjeljka koji objašnjava preklopnu metodu.
  • jQuery API Documentation: pregled metode prebacivanja i sve mogućnosti koje se mogu koristiti uz njega.
  • jQuery UI efekti i prebacivanje: jQuery korisničko sučelje proširuje metodu prebacivanja s nizom efekata. Uz to, on ima live predstavu o tome kako efekti nadopunjuju preklopnu metodu.
  • jQuery toggle () metoda u W3Schools: brzi uvod u metodu prebacivanja i okvir s kôdom gdje ga možete isprobati.
  • Vodič za jQuery Toggle Effect by Akshay Jaiswal i jQuery Toggle efekt Harry Finn dvije su YouTube video udžbenice koje ukratko pokazuju kako napraviti HTML dokument koji uključuje jQuery i koristi preklopni način za skrivanje ili prikazivanje HTML elementa.

Izvršite skriptu s alatom za aktiviranje događaja

Drugi zadatak koji jQuery čini vrlo jednostavnim je pokretanje alata za obradu događaja, čak i ako stvarni događaj nije prošao. Na primjer, recimo da imate skriptu koja se izvršava svaki put kada se određeni gumb klikne pomoću događaja onclick JavaScript. Što ako također želite da se ista skripta pokrene kad god se dogodi drugačija radnja kao da je sam gumb pritisnut? Odgovor je obrađivač događaja () ().

Osnovna uporaba metode okidača uključuje primjenu metode okidača na određeni događaj i njegovu uporabu za pokretanje drugog događaja kada se prvi događaj dogodi. To bi moglo zvučati komplicirano, ali osnovna je upotreba metode okidača jednostavna. Sljedeće resurse koristite za pokrivanje osnova, a također pogledajte neke naprednije načine uporabe metode.

  • Pokretanje alata za obradu događaja: koristite ovu vezu da biste prešli ravno na poglavlje o pokretanju alata za obradu događaja u vodiču za učenje jQuery.
  • jQuery API Documentation: pregled metode pokretanja i svih parametara i opcija koje se mogu koristiti s njim.
  • jQuery okidač () metoda u W3Schools: uvod u metodu pokretanja jQuery i kutija za provjeru koda za testiranje koda.
  • Kako stvoriti prilagođene događaje u jQueryju: tutorial Sitepoint koji objašnjava kako stvoriti prilagođene događaje jQuery tako da možete koristiti okidačku metodu s prilagođenim događajima, a ne s ugrađenim jQuery događajima.
  • Nemojte pokretati stvarna imena događaja pomoću jQuery-a! Mnogi programeri koriste standardne jQuery događaje poput "klik" kao vrstu događaja na kojem će pokrenuti događaj. Međutim, to može stvoriti probleme i David Walsh preporučuje upotrebu prilagođenih događaja metodom pokretanja.

Prednosti upotrebe jQueryja

Ako jQuery samo olakšava upotrebu JavaScripta, zašto uopće koristimo jQuery? Zašto se jednostavno ne biste pridržavali JavaScripta i izbjegli biste naučiti čitav novi niz naredbi i implementacija?

Prema Wikipediji, postoje barem četiri prednosti koje nudi jQuery.

  1. jQuery potiče odvajanje skriptiranja i HTML-a. Iako se skripte mogu pisati izravno u HTML dokumente, trenutna razmišljanja unutar zajednice web dizajna i razvoja su da se HTML, CSS i JavaScript trebaju održavati odvojeno. To je komplicirano činjenicom da mora postojati način povezivanja skripti s određenim HTML elementima i događajima. Bez jQuery-a, najlakši način za to je dodavanje atributa događaja u HTML dokument koji poziva funkcije JavaScript. Međutim, jQuery obilazi potrebu da se to postigne pružanjem jednostavne sintakse za dinamičko dodavanje alata za obradu događaja koristeći JavaScript. To omogućava potpuno odvajanje JavaScripta od HTML dokumenta.
  2. jQuery potiče kodre da pišu kraće jasnije skripte. jQuery je dizajniran za sažetost. Sve što možete učiniti s jQueryom možete učiniti i s običnim JavaScriptom. Međutim, jQuery kôd će obično biti puno kraći i jasniji od JavaScript koda za izvršavanje istog zadatka.
  3. Korištenje jQuery eliminira neusklađenost među preglednicima. Iako se različiti motori preglednika JavaScript JavaScript razlikuju različito, jQuery je razvijen za obradu razlika između pretraživača i pružanje stalnog iskustva u svim preglednicima..
  4. jQuery je proširiv. JQuery knjižnica dizajnirana je tako da se lako nadopunjuje s novim elementima, događajima i metodama. Kada se te nove stavke dodaju u lokalnu biblioteku jQuery, mogu se lako ponovo upotrijebiti na web mjestu kao dodatak.

Početak rada s jQueryjem

Ako ste spremni početi učiti kako koristiti jQuery, a još niste upoznati sa JavaScript-om, prvi korak za učenje jQuery-a je naučiti JavaScript.

Kao što smo spomenuli, jQuery je knjižnica JavaScript naredbi. Kao rezultat, jQuery slijedi istu osnovnu sintaksu i strukturu kao i JavaScript. Snažno razumijevanje sintakse, strukture i osnovnih funkcija JavaScript-a presudno je za savladavanje jQueryja. Prema jQuery fondaciji:

Svom snagom jQueryja pristupa se putem JavaScript-a, tako da je snažno razumijevanje JavaScripta bitno za razumijevanje, strukturiranje i uklanjanje pogrešaka koda. Dok redovito rad s jQuery-om može s vremenom poboljšati vaše znanje s JavaScript-om, teško je započeti s pisanjem jQuery-a bez poznavanja ugrađenih konstrukcija i sintakse JavaScript-a..

Vaše razvojno okruženje

Prije nego što počnete s kodiranjem, morat ćete postaviti svoje razvojno okruženje. Dobra vijest je da sve što trebate za početak pisanja jQuery-a je web preglednik, uređivač teksta i kopija jQuery-a.

Iako to radi bilo koji web preglednik, programeri koriste Mozilla Firefox ili Google Chrome. Iako biste trebali imati i Internet Explorer ili Edge, Opera i Safari za testiranje koda u više preglednika, ako već ne upotrebljavate Firefox ili Chrome, prijeđite i instalirajte najnoviju verziju jedne ili obje ove besplatne aplikacije i koristiti ga u razvojne svrhe.

Naravno, mogli biste koristiti Notepad za pisanje koda, ali zašto biste to učinili? Mnogo je sjajnih uređivača teksta dostupnih za besplatne ili vrlo razumne troškove koji pružaju brojne značajke dizajnirane za olakšavanje kodiranja i manje sklonosti pogreškama. Neki od naših favorita su Atom, TextMate za Apple računala, Notepad ++ za Windows računala i Brackets.

Konačno, budući da je jQuery knjižnica naredbi izgrađenih na JavaScriptu, morat ćete nazvati jQuery knjižnicu iz bilo kojeg dokumenta koji koristi jQuery. Da biste to učinili, morat ćete ili preuzeti jQuery ili povezati biblioteku jQuery-a s mrežom na mreži.

Resursi

Pretražili smo web za najbolje tutorijale jQuery, e-knjige i interaktivne tečajeve. Naša je preporuka da iskoristite nekoliko tih resursa i provedete ih kroz resurse koji najbolje odgovaraju vašem stilu učenja.

Naš preporučeni napredak treninga započinje s nekoliko osnovnih interaktivnih vodiča koji će vam pokazati snagu jQueryja i pokazati što je moguće s najpopularnijom svjetskom JavaScript knjižnicom na svijetu. Zatim zaronite dublje u jQuery pregledom detaljnih vodiča koje nude neka od najcjenjenijih imena u web razvoju, uključujući Mozilla Developer Network i jQuery Foundation. Konačno, savladajte jQuery radeći svoj put kroz tekst e-knjige ili meke korice.

Besplatni interaktivni tečajevi

Postoji samo toliko da pisani dokument može objasniti kako funkcionira programski jezik i što on može učiniti. Da biste stvarno shvatili kakva je snaga jezika, morate ga vidjeti na djelu. Besplatni interaktivni tečajevi jedan su od najboljih načina za brzo upravljanje osnovnom sintaksom programskog jezika, a istovremeno uči što zapravo može učiniti.

Budući da jQuery Foundation preporučuje učenje JavaScripta prije nego što se udubite u jQuery, preporučujemo da to učinite. Na tim će se besplatnim tečajevima za kratko vrijeme pisati osnovni JavaScipt:

  • JavaScript Road Trip 1. dio od CodeSckola: Samo je 1. dio ovog putnog putovanja besplatan. Ostatak putovanja skriven je iza platnog zida. Prođite kroz besplatni sadržaj i krenite na Codecademy da nastavite učiti.
  • JavaScript by Codecademy: Sadržaj ovog cjelovitog internetskog tečaja besplatan je. Pristup kvizovima nije obavezan i sadrži cijenu. Tečaj bi trebao potrajati desetak sati i ostavit će te sposobnim za pisanje osnovnog JavaScript koda. Sa ovim tečajem pod svojim remenom bit ćete spremni riješiti se nekih jQueryja.

Postoje dva interaktivna tečaja jQueryja koja biste trebali pohađati da biste stekli dobro osnovno razumijevanje onoga što je moguće s jQueryem. Ovi tečajevi uključuju:

  • Isprobajte jQuery: Besplatan uvod u jQuery sastavio jQuery Foundation u partnerstvu sa CodeSchool.
  • jQuery by Codecademy: Ovaj tečaj će trebati oko tri sata. Kao što je to slučaj s JavaScript tečajem, sadržaj tečaja je besplatan, ali ako želite preuzeti kvizove, morat ćete ih platiti. Naša preporuka je da proradite kroz besplatan sadržaj, a zatim prijeđete na dodatne resurse. Kad završite, znat ćete kako koristiti jQuery za odabir HTML elemenata, kako stilizirati te elemente i kako povezati akcije posjetitelja web mjesta s jQuery kodom kako bi web mjesto interaktivno reagiralo.

Vodiči u dubini i vodiči za učenje vodećih u industriji

Učenje JavaScripta i jQuery-a trebalo bi im ići ruku pod ruku. Ako ste spremni produbiti dublje s jQuery-om, morat ćete i proširiti svoje znanje o JavaScript-u. Jedno od najboljih mjesta za učenje o JavaScript je Mozilla Developer Network (MDN). Pogledajte ove sjajne resurse:

  • Osnove JavaScript-a: Iako ste možda naučili osnove kako se zapravo koristi JavaScript kroz interaktivne tečajeve koje smo preporučili, na MDN ćete naučiti kako profesionalni programeri razmišljaju i koriste JavaScript. Ako pažljivo pročitate, ovaj će dokument potrajati nekoliko sati da se potpuno probavi.
  • JavaScript vodič: Ovaj opsežni vodič i udžbenik provest će vas kroz sve osnovne teme JavaScript jezika, uključujući funkcije, rukovanje pogreškama, petlje, gramatiku, izraze i još mnogo toga. Učinite to kroz ovaj vodič i znat ćete više JavaScript koje prosječni web dizajneri.

Ako ste to učinili kroz JavaScript resurse u MDN-u, bit ćete u potpunosti spremni riješiti se treninga koji nudi jQuery Foundation. Na web stranici zaklade jQuery pronaći ćete opsežni centar za učenje organiziran u poglavlja. Svako poglavlje posvećeno je određenoj temi poput About jQuery, Effects, Ajax, Plugins i još mnogo toga. Ovaj resurs za autorizaciju je detaljan i tehnički – upravo ono što će vam trebati ako ćete savladati jQuery.

E-knjige i meke korice

Kad prođete kroz resurse koje smo već pokrili, bit ćete spremni koristiti jQuery za rješavanje bilo kojeg zajedničkog scenarija web dizajna. Pored toga, bit ćete dovoljno upućeni da pronađete pomoć koja vam je potrebna za rješavanje složenijih problema pomoću jQuery API-ja.

Nakon što ste spremni postati napredni programer jQuery-a, evo nekoliko tekstova koji će vam pomoći na vašem putu.

Besplatne e-knjige

Pronašli smo dvije besplatne e-knjige koje imaju ugled u jQuery zajednici. S nekim iskustvom kodiranja jQuery ispod vašeg pojasa, razvijte novu razinu razumijevanja najpopularnije JavaScript biblioteke, provodeći svoj put kroz jedan ili oba ova visokokvalitetna teksta:

  • jQuery Osnove tvrtke BoCoup, LLC.: Dio e-knjige i dio interaktivnog vodiča, ovaj tekst pokriva jQuery kako u pisanom obliku, tako i sa praktičnim primjerima.
  • jQuery Ukratko, napisao Cody Lindley, a domaćin Syncfusion: Tekst od stotinu stranica koji pokriva koncepte ključne za napredni jQuery razvoj. Ako tek započinjete, ovo nije tekst za vas, ali ako ste razumno kompetentan programer JavaScripta ili jQuery-a spreman na sljedeći korak, ovaj tekst je odličan izbor.

Tekstovi u obliku meke korice

Ako više volite fizički tekst, evo nekih od najboljih jQuery tekstova koji su danas dostupni:

  • Učenje jQuery-a: Karl Swedberg, trenutačni član Odbora savjetnika Fondacije jQuery, zajedno s Jonathanom Chafferom, web programerom i utjecajnim Drupal-ovim programerom, dizajnirali su ovaj tekst tako da bude prilagođen JavaScript-u novorođenim ili iskusnim programerima. Ovaj je tekst dostupan i za zapaliti.
  • JavaScript i JQuery, interaktivni napredni web razvoj: Jon Duckett ovaj tekst nadopunjuje njegov vodeći tekst o HTML-u i CSS-u, a možda je i najpopularniji danas dostupan JavaScript i jQuery tekst..
  • jQuery u akciji Bear Bibeault, Yehuda Katz i Aurelio De Rosa: Katz i De Rosa aktivni su članovi jQuery fondacije – Katz kao član Vijeća savjetnika i De Rosa kao član Sadržajnog tima. Ovaj je autoritativni tekst brzi pogled na jQuery idealno prilagođen početnim JavaScript programerima.

Dizajniranje s jQueryjem

U ovom ćemo dijelu pogledati kako koristiti jQuery za dizajn nevjerojatnih interaktivnih web lokacija. Na kraju ćete znati alate koji su vam dostupni i imati će vam potrebno znanje, resurse i alate..

JavaScript

JavaScript je programski jezik ugrađen u svaki moderni web preglednik. Uz HTML i CSS, to je treća dionica u trijadi suvremene web tehnologije.

JavaScript je opći programski jezik visoke razine koji se može koristiti za razne zadatke skriptiranja i na webu i izvan njega. Primarni način na koji dizajneri koriste JavaScript jest pokretanje interakcija korisnika. Izmjene stilova i AJAX pozivi dva su primjera interakcija korisnika s kojima se može pokrenuti JavaScript. Pogledajmo ih ukratko.

Ali prvo ćemo napraviti korak unatrag i razgovarati o nekim aspektima JavaScripta.

Promjena stila s JavaScript-om

Iako oblikovanje web stranice uglavnom predstavlja domenu kaskadnih listova stilova (CSS), JavaScript se može koristiti za manipulaciju CSS-om. Stilima se može izravno upravljati odabirom elementa i korištenjem svojstva stila, poput ovog:

Sadržaj Moja Div

document.getElementById ("moja-div") .style.backgroundColor = "plava";

Taj malo JavaScript ugrađuje element s idom moje dive i primjenjuje plavu boju pozadine. Iako je izravno manipulirati CSS-om JavaScriptom korisno je, ako želite promijeniti gomilu stilova odjednom, puno je lakše uključiti te stilove u CSS svoje web lokacije i primijeniti stilove pomoću JavaScript-a. Evo jednog načina:

.prva država {
pozadinska boja: # 303030;
boja: #fff;
obrub: 3px kruta #ddd;
širina: 200px;
visina: 200px;
}
.drugo stanje {
boja pozadine: #ddd;
boja: # 333;
obrub: 3px krutina # 333;
širina: 300px;
visina: 300px;
}

Sadržaj Moja Div

document.getElementById ("moja-div") .onclick = funkcija () {
this.className = "Druga stanja";
}

Kada se klikne element div s id atributom my-div, klasa prvog stanja bit će uklonjena i zamijenjena klasi druge države, a primijenit će se CSS druge klase.

Dodajte animaciju klase

Ažuriranje sadržaja u pokretu pomoću AJAX-a

AJAX, što je asinkroni JavaScript i XML, je tehnika koja se koristi za dodavanje sadržaja na web stranicu bez osvježavanja stranice. Osnovna ideja je da JavaScript šalje podatke web-poslužitelju iza kulisa, prima odgovor od poslužitelja i prilagođava sadržaj web stranice na temelju tog odgovora.

To možda zvuči previše teoretski, pa neka bude praktično. AJAX omogućuje stvari poput značajki automatskog dovršavanja, beskonačnog pomicanja i rezultata trenutnog pretraživanja. U svakom slučaju, web stranica šalje podatke na web poslužitelj i učitava odgovor na web stranicu bez osvježavanja.

Implementacija AJAX poziva je zahtjevna zadaća i nadilazi osnovno JavaScript programiranje. Međutim, kao napredni programer ili dizajner, AJAX je jedna JavaScript značajka bez koje teško možete uraditi. U sljedećem ćemo odjeljku istaknuti sjajan AJAX resurs.

Resursi JavaScript

Ako su vaše JavaScript vještine pomalo zahrđale, evo tri izvrsna resursa koji će vas ubrzati:

  • CodeCademy’s JavaScript tečaj uvodi sintaksu, petlje, kontrolni tok, strukture podataka i objekte u interaktivni tečaj temeljen na pregledniku..
  • Mozilla Developer Network (MDN) JavaScript Osnove Vodič predstavlja uvod u JavaScript sintaksu, varijable, operatore, uvjete, funkcije i događaje.
  • MDN AJAX Početak je kratak tutorial koji pokriva osnovne AJAX pozive. Dodatni članci dostupni su i na MDN-u koji pokrivaju napredne AJAX tehnike.

Iako je JavaScript moćan, jQuery vam omogućuje mnogo više rada sa manje napora.

jQuery: Priprema za rock svijet

Zamislite jQuery kao gomilu unaprijed izgrađenih JavaScript građevinskih blokova. Pogledajmo osnovni primjer. Evo kako biste odabrali element s ID-om mog diva prvo u JavaScript-u, a zatim u jQuery-u.

// JavaScript
document.getElementById (‘moj-div’);

// jQuery
$ (‘# moj-div’);

Odabir elementa po id-u prilično je jednostavno učiniti na oba jezika. Međutim, kao što vidite, potrebno je otprilike 25 manje pritiska tipki da biste to uradili u jQueryju nego u JavaScriptu.

Dodavanje jQuery u svoj HTML dokument

Morate učitati jQuery prije nego što ga možete koristiti, a postoje dva jednostavna načina da to učinite. Možete preuzeti jQuery i uključiti lokalnu kopiju ili upotrijebiti kopiju s hostom, kao što su Google Hosted Libraries.

Evo koda koji ćete unijeti u svoj HTML dokument za učitavanje jQuery:

Imajte na umu da kada pišete jQuery, morate učitati svoj kôd nakon učitavanja jezgre jQuery.

Korištenje jQuery s WordPressom

Jedna posebna pozornost koju treba imati na umu je da kada koristite jQuery na web mjestu WordPress, morate koristiti jQuery za prefiks koda umjesto $. Postoje zaobilazni okviri koje možete koristiti da $ prefiks radi, ali ako to ne uspijete, samo prefiksirajte svoj kôd s jQuery-om, ovako:

// Normalni jQuery
$ (‘# moj-div’);

// jQuery za WordPress
jQuery (‘# moj-div’);

jQuery CSS

Baš kao što možete koristiti JavaScript za manipulaciju CSS-om, isto možete učiniti s jQuery-om.

Možemo prilično učinkovito manipulirati predavanjima pomoću jQueryja. Skripta u nastavku gleda kako miš klikne na element s idom moje dive, a zatim uklanja jednu klasu i dodaje drugu klasu. Ovim kôdom možete koristiti za izmjenu između dvije CSS klase.

var myDiv = $ (‘# moj-div’);
$ (myDiv) .click (funkcija () {
if ($ (‘# my-div’) .hasClass (‘prva država’)) {
$ (‘# my-div’) .removeClass (‘prvo stanje’);
$ (‘# moj-div’) .addClass (‘drugo stanje’);
}
else if ($ (‘# my-div’) .hasClass (‘second-state’)) {
$ (‘# my-div’) .removeClass (‘drugo stanje’);
$ (‘# moj-div’) .addClass (‘prvo stanje’);
}
})

To je korisno, premda bismo to mogli puno lakše učiniti umjesto toga .toggleClass ().

var myDiv = $ (‘# moj-div’);
$ (myDiv) .click (funkcija () {
$ (myDiv) .toggleClass (‘prva država’);
$ (myDiv) .toggleClass (‘drugo stanje’);
})

Pogledajmo taj prijelaz u akciji.

Uključi animaciju klase

Postoji mnogo dodatnih jQuery CSS metoda. Najvažnije je da se .css () metoda može izravno koristiti za CSS ciljanog elementa. Druge metode, poput .height () i .width () mogu se koristiti za ciljanje specifičnih CSS vrijednosti.

jQuery efekti

Širok izbor efekata ugrađen je u jQuery. Ovi učinci su nanizani zajedno s drugim jQuery metodama i funkcijama za kontrolu izvršenja promjena elemenata stranice.

To je zalogaj, pa pogledajmo primjer. Ako se vratimo na našu .toggleClass () funkciju, možemo dodati neke efekte kako bismo izgladili prijelaz.

var myDiv = $ (‘# moj-div’);
$ (myDiv) .click (funkcija () {
$ (ovo) .fadeOut (‘sporo’, funkcija () {
$ (ovo) .toggleClass (‘prvo stanje’);
$ (this) .toggleClass (‘drugo stanje’);
})
$ (ovo) .fadeIn (‘sporo’);
})

Ono što kôd čini je izblijediti element, prebaciti klase i izmijeniti promijenjeni element natrag.

Uključite animaciju s efektom

Efekti fadeOut () i fadeIn () samo su dva od nekoliko dostupnih jQuery efekata. Pored toga, svi efekti mogu upotrijebiti brojne različite mogućnosti za fino podešavanje svog ponašanja.

jQuery Događaji

U ovom smo vodiču već nekoliko puta vidjeli jedan događaj jQuery: .click (), koji se aktivira kada korisnik klikne ciljani element. No dostupno je mnogo dodatnih događanja.

Događaji koji se koriste za ciljanje korisničkih akcija uključuju .click (), .dblclick (), .hover (), .mouseenter (), .mouseleave () i .mousemove (), koji su svi sami po sebi razumljivi. Postoji i nekoliko alata za obradu događaja koji prate promjene elemenata stranice:

  • .change () otkriva kad se mijenjaju elementi oblika. Slično, .submit () otkriva kad se obrazac predaje.
  • .fokus () se aktivira kada ciljani element stekne fokus.
  • .ready () pokreće se čim preglednik izgradi web stranicu.
  • .resize () aktivira kôd koji se pokreće kad se promijeni veličina prozora.
  • .okidač () povezuje jedan događaj s drugim povezanim događajem.

Postoje dodatni jQuery događaji koje nismo opisali u ovom kratkom vodiču. Saznajte više tako što ćete potražiti jQuery dokumentaciju ili predložene resurse.

jQuery korisničko sučelje

jQuery UI je proširenje na jQuery koji uključuje moćne UI widgete i alate. Implementacija jQuery UI značajke, poput harmonike widget, trivijalno je jednostavna u usporedbi s kodiranjem iste značajke od nule.

Značajke korisničkog sučelja jQuery mogu se podijeliti u četiri kategorije: widgete, efekte, interakcije i uslužne programe. Pogledajmo svaki. Ali prvo moramo znati kako dodati jQuery korisničko sučelje u HTML dokument.

Dodavanje korisničkog sučelja jQuery u HTML dokument

Postoje dvije mogućnosti kada je u pitanju ubacivanje jQuery korisničkog sučelja: preuzmite ga i uključite lokalnu kopiju ili uključite CDN hostiranu kopiju.

Pored toga, imajte na umu ove točke:

  • CSS veza tablice stilova treba ići u glavi dokumenta.
  • Skripta jQuery UI bi trebala ići tik iznad završne oznake tijela.
  • Jezgra jQuery (jquery.js ili jquery.min.js) mora se učitati prije učitavanja korisničkog sučelja jQuery (jquery-ui.js ili jquery-ui.min.js).

jQuery UI teme

Kada preuzmete kopiju korisničkog sučelja jQuery, graditelj preuzimanja omogućava vam da uključite temu. To je zato što jQuery UI widgeti zahtijevaju zadani stil. Odabrana korisnička sučelja jQuery definira zadane stilove widgeta, a odgovarajući kôd je uključen u jquery-ui.css.

Ako se odlučite za opciju koja hostira Google, imajte na umu da je naziv teme ubačen neposredno prije naziva datoteke:… / smoothness / jquery-ui.css. Glatkost je zadana tema korisničkog sučelja jQuery. Možete koristiti bilo koju temu zamjenom naziva teme prilikom izrade URL-a.

Pored toga, web stranica jQuery UI nudi ThemeRoller koji možete koristiti za izradu vlastite teme i uključivanje je prilikom preuzimanja jQuery UI.

jQuery UI Widgeti

Widgeti omogućavaju relativno jednostavno stvaranje korisnih elemenata korisničkog sučelja koji bi trebali stvoriti niz koda za kreiranje čistih JavaScripta i CSS-a. Pogledajmo neke od najkorisnijih jQuery widgeta (kliknite bilo koji da biste ga uzeli u demo prikazu):

  • Harmonike omogućuju skrivanje podataka iza naslova i njihovo prikazivanje uključivanjem svakog i otvorenog i zatvorenog odjeljka.
  • Kartice su alternativa harmonikama. Oni su način za uštedu prostora za prezentaciju informacija.
  • Gumbi u jQuery korisničkom sučelju su lijepi i dosljedno predstavljeni.
  • U obrazac se može dodati Datepicker kako bi se osiguralo da su datumi pravilno odabrani i oblikovani.
  • Trake napretka vizualno pokazuju koliko je napredak postignut u ostvarenju nekog cilja.
  • Klizači omogućuju korisnicima da prilikom slanja obrasca odaberu jednu vrijednost ili raspon vrijednosti.
  • Spinner dodaje strelice gore i dolje za unos brojeva u polje obrasca.
  • Savjeti za alate mogu se koristiti za pružanje informacija specifičnih za polje radi formiranja korisnika.

Da biste imali osjećaj kako se jednostavni widgeti mogu implementirati, evo svih koda koji biste trebali upotrijebiti za stvaranje niza harmonika:

Harmonika 1. odjeljak

Sadržaj harmonike. Možete koristiti odlomke, popise, poveznice, bilo što.

Harmonikaški odjeljak 2

Kao sto sam rekao.

  • Vas
  • Limenka
  • Koristiti
  • arena

Harmonika 3. odjeljak

To je to. Super je jednostavno.

$ (funkcija () {
$ ( "#harmonika" ).harmonika();
});

Kao što vidite, HTML je mnogo duži od nekoliko redaka jQuery-a potrebnih za pretvaranje HTML-a u harmonike.

jQuery UI harmonika animacija

jQuery UI efekti

Većina metoda u ovoj kategoriji su proširenja osnovnih jQuery metoda. Na primjer, ako želite manipulirati klasama, metode .addClass (), .removeClass () i .toggleClass () sve su dostupne u korisničkom sučelju jQuery, zajedno s dodatnom metodom, .switchClass (). Razlika je u tome što u jQuery korisničkom sučelju ove metode uključuju dodatne mogućnosti, poput mogućnosti dodavanja efekata prijelaza izravno u samu metodu.

Pogledajmo primjer. Sjećate se kada smo koristili .fadeIn () i .fadeOut () da promijenimo izgled div-a? Pa, možemo stvoriti puno ljepši efekt s puno manje koda pomoću jQuery korisničkog sučelja.

var myDiv = $ (‘# moj-div’);
$ (myDiv) .click (funkcija () {
$ (ovo) .toggleClass (‘drugo stanje’, 1000);
})

Evo prelaska na djelu.

jQuery UI Toggle Class Animacija

Nekoliko dodatnih metoda učinaka koje želite znati uključuju:

  • Metoda .show () uklanja zaslon: nijedan; od ciljanog elementa.
  • Metoda .hide () dodaje zaslon: nijedan; do ciljanog elementa.
  • Metoda .toggle () prebacit će ciljani element između vidljivog i skrivenog stanja.
jQuery UI Animation Effect

Postoji 15 animacija s različitim efektima s imenima kao što su slijepi, odskakujući, isjeckajte, ispustite i eksplodirajte. Pogledajmo primjer efekta slajda.

var myDiv = $ (‘# moj-div’);
var myButton = $ (‘# moj-gumb’);
$ (myButton) .click (funkcija () {
$ (myDiv). skretnica ( "klizanje" );
})

U ovom slučaju dodali smo gumb za pomicanje div-a na i izvan zaslona. Pogledajmo kako izgleda naš div kad je skriven s tim djelom jQueryja.

jQuery UI Sakrij animaciju

Ovi efekti prijelaza jQuery mogu se primijeniti na .show (), .hide () i .toggle () metode. Web stranica jQuery UI uključuje alat za pregled učinaka pomoću kojeg možete odlučiti koji će učinak najbolje odgovarati vašoj implementaciji.

Olakšavanje jQuery UI prijelaza

Jezgra jQuery uključuje samo dva olakšanja: ljuljačka i linearna. Međutim, jQuery korisničko sučelje dodaje više od 20 olakšica. Osvrnimo se na našu implementaciju metode .toggle (), ovoga puta dodajući dva različita olakšanja.

var myButton = $ (‘# moj-gumb’);
$ (myButton) .click (funkcija () {
$ (‘# first-div’) .toggleClass (‘drugo stanje’, 2000, ‘easyInOutQuad’);
$ (‘# second-div’) .toggleClass (‘second-state’, 2000, ‘easyInOutExpo’);
})

U ovom primjeru postoje dva div. Oboje će za 2 sekunde prijeći u drugo stanje. Međutim, svaki će koristiti drugačije olakšavanje. Pogledajmo.

jQuery UI olakšavajući animaciju

jQuery UI interakcije

Interakcije su skup jQuery UI metoda koje korisnicima web stranica i aplikacija omogućuju odabir i pomicanje elemenata stranice. Postoji pet interakcija u korisničkom sučelju jQuery. Klikom na bilo koju od donjih veza odvest ćete se o prikazu svake interakcije na web lokaciji jQuery UI.

  • Vučna interakcija omogućava korisnicima da promijene element web stranice povlačenjem i ispuštanjem mišem.
  • Droppable interakcija djeluje ruku pod ruku s interakcijom koja se povlači. Za njegovo korištenje na web stranici moraju biti dostupni i povucivi i stavki koji se može ispustiti. Kada se povučeni predmet spusti na predmet koji se može ispustiti, pokreće se akcija.
  • Promjena veličine može učiniti točno ono što mislite da bi trebalo: čini element stranice za promjenu veličine.
  • Stavke na popisu mogu odabrati izbore bilo klikom na njih jednu po jednu, bilo pritiskom na Ctrl ili klikom i prevlačenjem s više stavki za odabir više stavki odjednom.
  • Razvrstavanje omogućuje preuređivanje stavki popisa u bilo kojem redoslijedu.

interakcije jQuery korisničkog sučelja nisu vrsta što biste očekivali da implementirate na prosječnom web mjestu. Međutim, ako stvarate interaktivnu web-aplikaciju, igru ​​ili složeni oblik, ove će interakcije dobro doći.

jQuery UI Utilities

Korisničko sučelje jQuery može se proširiti, a tvornica widgeta je uslužni program koji se to koristi. Tvornica widgeta omogućuje vam spakiranje više jQuery korisničkih sučelja, stilova i funkcija u jedan widget za višekratnu upotrebu.

Ako ste upoznati s objektno orijentiranim programiranjem, moglo bi vam biti korisno razmišljati o jQuery UI widgetima kao objektima. Dakle, harmonika jQuery UI zapravo je predmet klase harmonike. Ono što vam tvornica widgeta omogućuje jeste definiranje novih klasa widgeta i zatim tu klasu za stvaranje više objekata, na isti način na koji kreirate klasu i ponovo je koristite u OOP-u.

Još jedan koristan alat jQuery UI je .position () metoda. Ova metoda vam omogućuje definiranje položaja bilo kojeg elementa u odnosu na drugi element ili radnju korisnika. Metoda je prilično jednostavna nakon što je zaključite. Pogledajmo primjer.

$ (‘# second-div’) .pozicija ({
moj: ‘lijevi vrh’,
at: ‘desno dno’,
od: ‘# prvi div’
});

Taj malo koda kaže da lijevi gornji ugao elementa s id-om drugog diva treba biti smješten u desnom donjem kutu elementa s idom prvog diva, poput ovog:

jQuery UI animacija položaja

Pored toga, stavke se mogu postaviti na temelju radnji korisnika. Prilagodimo kôd da bismo koristili položaj miša a ne prvog diva za određivanje položaja drugog diva.

$ (dokument) .mousemove (funkcija (događaj) {
$ (‘# second-div’) .pozicija ({
moj: ‘centar’,
od: događaj,
sudar: ‘stane’
})
})

Taj kôd dodaje slušatelja događaja .mousemove () koji će se pokrenuti bilo kada miš uđe u dokument. Kad se to dogodi, .pozicija () ciljanog div odredit će se na temelju položaja miša.

Pogledajmo to u akciji.

jQuery korisničko sučelje Animacija pokreta mišem

jQuery Mobile

jQuery Mobile je još jedno proširenje biblioteke jQuery. Koristi se za izradu web-lokacija i aplikacija koje reagiraju na dodir.

Kada razmišljamo o jQuery Mobileu, naglasak bi se trebao stvarno staviti na dodir optimiziran. Postoji mnogo osnovnih metoda i događaja jQuery i jQuery koji jednostavno nisu primjenjivi na mobilni uređaj i jQuery Mobile adrese koje nedostaju. Za razliku od jQuery korisničkog sučelja, koji se može koristiti za napajanje samo jednog ili dva aspekta web stranice, jQuery Mobile osmišljen je kao potpuno rješenje ili rješenje za dodirne web stranice i aplikacije osjetljive na dodir.

Knjižnica sadrži veliki niz responzivnih tipki optimiziranih za dodir, birača datuma, elemenata oblika, prelaska prstom, navigacijskih elemenata, tablica, kartica, klizača i još mnogo toga. Osim toga, jQuery Mobile uključuje ThemeRoller.

Izazov upotrebi jQuery Mobile jest njegov pristup ili gotovo ništa. Dizajniran je za stvaranje potpunih zamjena za radne verzije web stranica i aplikacija. Ako radije imate jednu web lokaciju ili aplikaciju koja radi na svim uređajima, jQuery Mobile nije ono što tražite. Ako koristite jQuery Mobile za aplikaciju ili web stranicu koja radi na svim uređajima – omogućenim dodirom, a ne – morat ćete pronaći način uključivanja i isključivanja jQuery Mobile otkrivanjem vrste, veličine i prisutnosti zaslona osjetljivog na dodir uređaja.

Resursi za dizajn

Već smo istakli nekoliko mjesta na kojima možete naučiti JavaScript. Ako već ne znate JavaScript, razvijte te vještine prije ronjenja u jQuery. Nakon što imate neki JavaScript ispod pojasa, sljedeći resursi ubrzat će vam jQuery, sučelje jQuery i jQuery Mobile.

  • Centar za učenje jQuery Foundation službeno je (i jedno od najboljih) mjesta za učenje jQueryja. Ovdje ćete naći tečaj temeljen na poglavlju koji pokriva osnove, događaje i efekte, AJAX, dodatke i još mnogo toga. Kad budete spremni, također možete naučiti kako koristiti jQuery korisničko sučelje i jQuery Mobile.
  • Naučite jQuery from Scratch tutorial temeljen na projektu koji će vam pomoći da steknete samopouzdanje kao jQuery programer.
  • CodeCademy jQuery tečaj uči vas jQuery sintaksu, kao i kako pisati osnovne funkcije, mijenjati DOM elemente, koristiti događaje i provoditi efekte.
  • jQuery Fundamentals od Bocoup je e-knjiga s ugrađenom JavaScript konzolom, tako da možete isprobati kôd pravo u pregledniku. Obuhvaća osnove jQueryja, kretanje kroz DOM elemente, događaje, efekte i AJAX.

Dizajneri trebaju jQuery

Proširenja na jQuery, korisničko sučelje jQuery i jQuery Mobile dodaju mnoštvo widgeta, interakcija, metoda, učinaka i alata optimiziranih za dodir. Ako ih ovladate, postat ćete bolji dizajner i programer jer moći ćete graditi moćne interaktivne web aplikacije bez trošenja pritisaka na tipke.

Ostale zanimljive stvari

Imamo više vodiča, vodiča i infografika vezanih za kodiranje i izradu web stranica:

  • CSS3 – Intro, vodiči & Resursi: ovo je sjajno mjesto za početak učenja izgleda web stranica.
  • Resursi ASP.NET: ovaj vodič upoznat će vas s Microsoftovim .NET okvirom za stvaranje web stranica.

Koji kôd treba naučiti?

Zbunjeni u koji programski jezik treba naučiti kodirati? Pogledajte našu infografiku. Koji kôd treba naučiti? Ne samo da raspravlja o različitim aspektima jezika, već odgovara i na važna pitanja poput: “Koliko ću novca zaraditi programiranje Java za život?”

Koji kôd treba naučiti?
Koji kôd treba naučiti?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

    Like this post? Please share to your friends:
    Adblock
    detector
    map