Hvernig er byrjað á jQuery: Gerðu forritun JavaScript auðveldari

Birting: Stuðningur þinn hjálpar til við að halda vefnum í gangi! Við þénum tilvísunargjald fyrir sumar þjónusturnar sem við mælum með á þessari síðu.


Í síðustu talningu, meira en 90% allra vefsíðna voru með JavaScript. Sem vinsælasta JavaScript bókasafnið er jQuery notað af meirihluta nútíma vefsíðna og um 65% af 10 milljón vinsælustu síðunum á vefnum.

Hvað þetta þýðir er að ef þú vilt vera vefur verktaki, vefsíðu hönnuður eða vefstjóri, þú þarft að vita hvernig á að vinna með jQuery.

Kynning á jQuery

Contents

Hvað er jQuery?

JavaScript er forritunarmálið sem notað er til að bæta gagnvirkni við vefsíður. jQuery er bókasafn með fyrirbyggdum JavaScript aðgerðum sem sjá um verkefni sem oft er stjórnað með JavaScript. Í meginatriðum gerir jQuery það auðveldara og fljótlegra að nota JavaScript.

jQuery er bókasafn með skipunum sem gera það auðvelt að finna, velja og vinna HTML þætti á vefsíðu til að bregðast við virkni gesta. Til dæmis með því að nota jQuery geturðu valið ákveðinn þátt, svo sem alla

hausþætti og valdið því að þeir séu meðhöndlaðir á einhvern hátt út frá virkni gesta – svo sem að breyta leturstærð þegar músin svífur yfir þeim.

Styrkur jQuery er í getu þess til að auðveldlega finna og velja HTML þætti án þess að krefjast þess að viðbótar eiginleikum sé beitt á HTML frumefnið.

jQuery auðveldar erfiða hluti

Allt sem þú getur gert með jQuery geturðu líka gert með JavaScript. Munurinn er sá að mjög margt sem getur verið nokkuð flókið að ná fram með JavaScript er mjög auðvelt að gera með jQuery. Við skulum skoða tvö dæmi: kveikja og kveikja.

Fela eða birta blaðsíðna þætti með tog

Hægt er að nota CSS skjáeignina til að fela HTML þætti. Veldu hvaða HTML frumefni sem er með CSS vali og notaðu gildi sem enginn á skjáeignina, og þátturinn verður falinn fyrir sýn. Ef þú vilt láta HTML frumefni fela sig á valdi, þá er CSS skjáeignin hvernig þú getur látið það gerast.

Það er ekki mjög erfitt að nota JavaScript til að fela eða sýna HTML frumefni með því að stjórna CSS skjáeigninni. Hins vegar inniheldur jQuery toggle () aðferðin marga innbyggða valkosti sem gera það auðvelt að framleiða öflug víkjaáhrif sem mjög erfitt væri að afrita með JavaScript. Ef þú setur jQuery UI til viðbótar ketilplötunni jQuery í HTML skjalinu þínu, getur þú líka notað fjölda af jQuery UI áhrifum til að stjórna því hvernig víxlhlutir eru faldir og birtir.

Ef þú vilt læra hvernig á að nota jQuery toggle () aðferðina, þá eru fullt af stöðum til að byrja:

  • Lærðu jQuery: ókeypis fræðsluúrræði frá jQuery Foundation. Algjört jQuery námskeið er þess virði að ljúka og við tengjumst við auðlindirnar í lok þessa skjals. Notaðu þó þennan hlekk ef þú vilt fara beint í hlutann sem skýrir skiptingaraðferðina.
  • jQuery API skjöl: yfirlit yfir skiptingaraðferðina og alla valkostina sem hægt er að nota samhliða henni.
  • jQuery UI Effects and Toggle: jQuery UI víkkar út aðferðina með fjölda áhrifa. Að auki hefur það lifandi kynningu á því hvernig áhrifin eru viðbót við aðferðaraðferðina.
  • jQuery toggle () Aðferð í W3Schools: fljótleg kynning á rofaaðferðinni og kóða sandkassa þar sem þú getur prófað það.
  • jQuery Toggle Effect Tutorial eftir Akshay Jaiswal og jQuery Toggle effect eftir Harry Finn eru tvö YouTube vídeó námskeið sem sýna stuttlega hvernig á að smíða HTML skjal sem inniheldur jQuery og notar skiptiaðferðina til að fela eða birta HTML frumefni.

Framkvæmdu handrit með sýslumanninum

Annað verkefni sem jQuery gerir afar auðvelt er að kveikja á viðburðaferli jafnvel þó að raunverulegur atburður hafi ekki orðið. Segjum til dæmis að þú hafir handrit sem er keyrt í hvert skipti sem smellt er á ákveðinn hnapp með því að nota JavaScript onclick atburðinn. Nú, hvað ef þú vilt líka að sama handrit sé keyrt hvenær sem önnur aðgerð fer fram eins og verið væri að smella á sjálfan hnappinn? Kveikjan () atburðarmeðferðin er svarið.

Grunnnotkun triggeraraðferðarinnar felur í sér að beita trigger aðferðinni á tiltekinn atburð og nota hana til að kveikja á öðrum atburði þegar fyrsta atburðurinn birtist. Þetta gæti hljómað flókið en grunnnotkun kveikjaaðferðarinnar er einföld. Notaðu eftirfarandi úrræði til að ná yfir grunnatriðin og skoðaðu einnig frekari notkun aðferðarinnar.

  • Kveikja á afgreiðsluaðilum viðburða: notaðu þennan hlekk til að fara beint í kaflann um að kveikja á afgreiðsluaðilum viðburða í námskeiðinu Learn jQuery.
  • jQuery API skjöl: yfirlit yfir kveikjuaðferðina og allar breytur og valkosti sem hægt er að nota með henni.
  • jQuery trigger () Aðferð í W3Schools: kynning á jQuery trigger aðferðinni og kóða sandkassa til að prófa kóða.
  • Hvernig á að búa til sérsniðna viðburði í jQuery: námskeið fyrir Sitepoint sem útskýrir hvernig á að búa til sérsniðna jQuery atburði svo að þú getir notað trigger aðferðina með sérsniðnum atburðum frekar en innbyggðum jQuery atburði.
  • Ekki kveikja á raunverulegum nöfnum viðburða með jQuery! Margir verktaki nota staðlaða jQuery atburði eins og "smellur" sem atburðargerð sem kveikja á atburði á. Hins vegar getur þetta skapað vandamál og David Walsh mælir með því að nota sérsniðna atburði með kveikjuaðferðinni.

Kostir þess að nota jQuery

Ef jQuery auðveldar bara notkun JavaScript, hvers vegna notum við jQuery yfirleitt? Af hverju ekki að halda þig við JavaScript og forðast að þurfa að læra alveg nýtt sett af skipunum og útfærslum?

Samkvæmt Wikipedia eru að minnsta kosti fjórir kostir í boði hjá jQuery.

  1. jQuery hvetur til aðgreiningar á skriftum og HTML. Þó að hægt sé að skrifa forskriftir beint í HTML skjöl, þá er núverandi hugsun innan samfélagshönnunar og þróunar samfélagsins að HTML, CSS og JavaScript ættu allir að vera viðskildir. Þetta er flókið af því að það verður að vera leið til að tengja forskriftir við tiltekna HTML þætti og atburði. Án jQuery er auðveldasta leiðin til að bæta atburðareiginleikum við HTML skjalið sem kalla JavaScript virka. Hins vegar kemst jQuery um nauðsyn þess að gera þetta með því að bjóða upp á einfalda setningafræði til að bæta við meðhöndlun viðburða með virkum hætti með því að nota JavaScript. Þetta gerir kleift að aðskilja JavaScript fullkomlega frá HTML skjalinu.
  2. jQuery hvetur kóða til að skrifa styttri skýrari forskriftir. jQuery er hannað fyrir stuttu. Allt sem þú getur gert með jQuery, þú getur líka gert með venjulegu JavaScript. Hins vegar er jQuery kóðinn venjulega mun styttri og skýrari en JavaScript kóðinn til að framkvæma sama verkefni.
  3. Notkun jQuery útilokar ósamræmi milli vafra. Jafnvel þó að JavaScript sé gert nokkuð frábrugðið af mismunandi vafravélum, hefur jQuery verið þróað til að takast á við mismun milli vafra og veita stöðuga upplifun milli vafra.
  4. jQuery er teygjanlegt. JQuery bókasafnið hefur verið hannað til að auðvelt sé að bæta við nýja þætti, atburði og aðferðir. Þegar þessum nýju hlutum er bætt við jQuery bókasafnið á staðnum er auðvelt að nota þau á vefsíðu sem viðbót.

Byrjaðu með jQuery

Ef þú ert tilbúin / n að byrja að læra að nota jQuery og þú þekkir ekki JavaScript er fyrsta skrefið til að læra jQuery að læra JavaScript.

Eins og við höfum nefnt er jQuery bókasafn með JavaScript skipunum. Fyrir vikið fylgir jQuery sömu grundvallar setningafræði og uppbyggingu og JavaScript. Að hafa sterka tök á setningafræði, uppbyggingu og grunnaðgerðum JavaScript er lykilatriði til að ná góðum tökum á jQuery. Samkvæmt jQuery Foundation:

Aðgangur að öllu valdi jQuery með JavaScript, svo að hafa sterka tök á JavaScript er nauðsynleg til að skilja, skipuleggja og kemba kóðann þinn. Þó að vinna með jQuery reglulega geti með tímanum bætt færni þína með JavaScript, það getur verið erfitt að byrja að skrifa jQuery án vinnuþekkingar á innbyggðum smíðum og setningafræði JavaScript..

Þróunarumhverfi þitt

Áður en þú byrjar að forrita þarftu að setja upp þróunarumhverfi þitt. Góðu fréttirnar eru þær að allt sem þú þarft í raun til að byrja að skrifa jQuery er vafri, textaritill og afrit af jQuery.

Þó að allir vefskoðarar geri það nota forritarar annað hvort Mozilla Firefox eða Google Chrome. Þó að þú ættir einnig að hafa Internet Explorer eða Edge, Opera og Safari til að prófa kóðann þinn í mörgum vöfrum, ef þú ert ekki þegar að nota Firefox eða Chrome, farðu þá að hlaða niður og settu upp nýjustu útgáfuna af einu eða báðum þessum ókeypis forritum og nota það í þróunarskyni.

Jú, þú gætir notað Notepad til að skrifa kóða, en af ​​hverju myndir þú það? Það eru margir frábærir ritstjórar ókeypis og mjög sanngjarn kostnaður sem býður upp á marga eiginleika sem eru hönnuð til að gera erfðaskrá auðveldari og minna skaðleg. Nokkur af eftirlætunum okkar eru Atom, TextMate fyrir Apple tölvur, Notepad ++ fyrir Windows tölvur og sviga.

Að síðustu, þar sem jQuery er bókasafn með skipunum sem eru byggðar á JavaScript, þarftu að hringja í jQuery bókasafnið úr hvaða skjali sem er sem notar jQuery. Til þess að gera þetta þarftu annað hvort að hlaða niður jQuery eða tengja á jQuery bókasafn sem hýst er á netinu.

Auðlindir

Við höfum leitað að vefnum fyrir bestu námskeið fyrir jQuery, rafbækur og gagnvirkt námskeið. Mælt er með því að þú notir nokkur þessara auðlinda og vinnur þig í gegnum þau úrræði sem henta þínum námsstíl best.

Mælt er með þjálfunarframvindu okkar með nokkrum grunnlegum gagnvirkum námskeiðum sem sýna þér kraft jQuery og sýna fram á hvað er mögulegt með vinsælasta JavaScript bókasafninu í heiminum. Næst skaltu kafa dýpra í jQuery með því að fara yfir ítarlegar leiðbeiningar sem í boði eru af nokkrum virtustu nöfnum í vefþróun, þar á meðal Mozilla Developer Network og jQuery Foundation. Að lokum, náðu tökum á jQuery með því að vinna þig í gegnum bók eða paperback texta.

Ókeypis gagnvirk námskeið

Það er aðeins svo mikið sem skrifað skjal getur gert til að útskýra hvernig forritunarmál virkar og hvað það getur gert. Til að ná virkilega tökum á krafti tungumálsins verður þú að sjá það í verki. Ókeypis gagnvirk námskeið eru ein besta leiðin til að fá fljótt með helstu setningafræði forritunarmála og læra líka hvað það getur raunverulega gert.

Þar sem jQuery Foundation mælir með að læra JavaScript áður en þú kafar í jQuery, mælum við með að þú gerir það sama. Með þessum ókeypis námskeiðum muntu skrifa grunn JavaScipt á engan tíma:

  • JavaScript Road Trip Part 1 frá CodeSchool: Aðeins hluti 1 af þessari road trip er ókeypis. Restin af ferðinni er falin á bak við launavegg. Hlaupa í gegnum ókeypis innihaldið og farðu síðan til Codecademy til að halda áfram að læra.
  • JavaScript frá Codecademy: Þetta efni á þessu námskeiði í fullri lengd er ókeypis. Aðgangur að skyndiprófum er valfrjáls og er með verðmiði. Námskeiðið ætti að taka um tíu tíma að ljúka og gerir þér kleift að skrifa grunn JavaScript kóða. Með þessu námskeiði undir belti ertu tilbúinn að takast á við jQuery.

Það eru tvö gagnvirk jQuery námskeið sem þú ættir að taka til að fá góðan grunnskilning á því hvað er mögulegt með jQuery. Þessi námskeið eru:

  • Prófaðu jQuery: Ókeypis kynning á jQuery sett saman af jQuery Foundation í samstarfi við CodeSchool.
  • jQuery eftir Codecademy: Þetta námskeið tekur um þrjá tíma að ljúka. Rétt eins og raunin var með JavaScript námskeiðið, innihald námskeiðsins er ókeypis en ef þú vilt taka spurningakeppnina þarftu að greiða fyrir þau. Tilmæli okkar eru að vinna í gegnum ókeypis innihaldið og fara síðan yfir í viðbótarúrræði. Þegar þú lýkur, munt þú vita hvernig á að nota jQuery til að velja HTML þætti, hvernig á að stilla þá þætti og hvernig á að binda aðgerðir vefsíðu gesta við jQuery kóða svo að vefsíðan bregðist við gagnvirkt.

Djúpt námskeið og námsleiðbeiningar frá leiðtogum iðnaðarins

Að læra JavaScript og jQuery ætti að fara í hönd. Ef þú ert tilbúinn að fara dýpra með jQuery þarftu einnig að auka þekkingu þína á JavaScript. Einn besti staðurinn til að fræðast um JavaScript er Mozilla Developer Network (MDN). Skoðaðu þessi frábæru úrræði:

  • Grunnatriði JavaScript: Þó að þú hafir lært grunnatriðin um það hvernig á að nota JavaScript í raun og veru á gagnvirku námskeiðunum sem við mælum með, þá muntu hjá MDN læra hvernig faglegir verktaki hugsa um og nota JavaScript. Ef þú lest vandlega í gegnum þetta skjöl mun það taka nokkrar klukkustundir að meltast að fullu.
  • JavaScript handbók: Þessi víðtæka handbók og einkatími mun leiða þig í gegnum öll grunnatriði JavaScript tungumálsins þ.mt aðgerðir, villuhöndlun, lykkjur, málfræði, orðasambönd og margt fleira. Gerðu það í gegnum þessa handbók og þú munt vita meira JavaScript sem meðaltal vefhönnuðir.

Ef þú hefur gert það í gegnum JavaScript-auðlindirnar á MDN, munt þú vera tilbúinn að takast á við þjálfunina sem jQuery Foundation býður upp á. Á vefsíðu jQuery Foundation er að finna víðtæka námsmiðstöð sem er skipulögð í köflum. Hver kafli er tileinkaður tilteknu efni eins og About jQuery, Effects, Ajax, Plugins og fleira. Þetta heimildarheimild er ítarleg og tæknileg – bara það sem þú þarft ef þú ætlar að ná tökum á jQuery.

Rafbækur og pocketbacks

Þegar þú vinnur þig í gegnum auðlindirnar sem við höfum þegar fjallað um verður þú tilbúinn til að nota jQuery til að takast á við allar algengar vefsíðugerð. Að auki munt þú vera nógu fróður til að finna hjálpina sem þú þarft til að takast á við flóknari vandamál með því að nota jQuery API.

Þegar þú ert tilbúinn að verða háþróaður jQuery verktaki, þá eru nokkrir textar sem geta hjálpað þér á leiðinni.

Ókeypis rafbækur

Við fundum tvær ókeypis rafbækur sem hafa frábært orðspor innan jQuery samfélagsins. Með smá reynslu af jQuery-kóðun undir belti þínu skaltu þróa nýtt skilningsstig á vinsælasta JavaScript bókasafninu með því að vinna þig í gegnum einn eða báða þessa hágæða texta:

  • grundvallaratriði jQuery eftir BoCoup, LLC: Bók og hluti gagnvirks námskeiðs, þessi texti nær yfir jQuery bæði með skriflegu sniði og með praktískum dæmum.
  • jQuery á farsælan hátt, skrifað af Cody Lindley og hýst af Syncfusion: Hundrað blaðsíðna texti sem nær yfir hugtök sem eru nauðsynleg til þróaðrar þróunar jQuery. Ef þú ert rétt að byrja er þetta ekki textinn fyrir þig, en ef þú ert sæmilega hæfur JavaScript eða jQuery verktaki tilbúinn til að stíga næsta skref er þessi texti frábært val.

Paperback textar

Ef þú vilt frekar efnislegan texta, eru hér bestu jQuery textarnir sem til eru í dag:

  • Að læra jQuery: Karl Swedberg, núverandi meðlimur í ráðgjafaráði jQuery Foundation, ásamt Jonathan Chaffer, vefframkvæmdastjóra og áhrifamikill Drupal forritari, hannaði þennan texta til að henta nýjum JavaScript eða reyndum forriturum. Þessi texti er einnig fáanlegur fyrir Kindle.
  • JavaScript og JQuery, gagnvirk framþróun á vefnum: Þessi texti eftir Jon Duckett bætir við leiðandi texta sinn á HTML og CSS, og gæti verið vinsælasti JavaScript og jQuery textinn sem fáanlegur er í dag.
  • jQuery in Action eftir Bear Bibeault, Yehuda Katz, og Aurelio De Rosa: Katz og De Rosa eru báðir virkir meðlimir í jQuery Foundation – Katz sem minningarmaður stjórnar ráðgjafanna og De Rosa sem meðlimur í Innihópnum. Þessi opinberi texti er fljótur að skoða jQuery sem hentar best til að byrja JavaScript forritara.

Að hanna með jQuery

Í þessum kafla munum við skoða hvernig á að nota jQuery til að hanna ótrúlegar samspilssíður. Í lok þess munt þú þekkja tækin sem eru tiltæk og hafa alla þá þekkingu, úrræði og tæki sem þú þarft.

JavaScript

JavaScript er forritunarmál innbyggt í alla nútíma vafra. Samhliða HTML og CSS er það þriðji fóturinn í þrígang nútímans.

JavaScript er almennt forritunarmál á háu stigi sem hægt er að nota til margs konar forskriftarverkefna bæði á og utan vefsins. Aðal leiðin sem hönnuðir nota JavaScript er að knýja á um notendasamskipti. Stílbreytingar og AJAX símtöl eru tvö dæmi um samskipti notenda sem hægt er að knýja með JavaScript. Við skulum skoða hvert stuttlega.

En fyrst munum við taka skref til baka og ræða nokkra þætti JavaScript.

Að breyta um stíl með JavaScript

Þó að stíl vefsíðu sé almennt lén cascading stílblöð (CSS), er hægt að nota JavaScript til að vinna með CSS. Hægt er að beita stílum beint með því að velja frumefni og nota stíleiginleikann, eins og þessa:

Innihald Div

document.getElementById ("my-div") .style.backgroundColor = "blár";

Sá hluti JavaScript grípur þáttinn með auðkenni my-div og notar bakgrunnslit af bláu. Þó að bein meðhöndlun CSS með JavaScript sé gagnleg, ef þú vilt breyta fjölda stíla í einu, þá er miklu auðveldara að hafa þá stíla inn á CSS vefsvæðið þitt og nota síðan stíla með JavaScript. Hér er ein leið sem þetta er hægt að gera:

.fyrsta ríki {
bakgrunnslitur: # 303030;
litur: #fff;
border: 3px solid #ddd;
breidd: 200px;
hæð: 200px;
}
.annað ríki {
bakgrunnslitur: #ddd;
litur: # 333;
landamæri: 3px solid # 333;
breidd: 300px;
hæð: 300px;
}

Innihald Div

document.getElementById ("my-div") .onclick = fall () {
this.className = "seinni ríkisstj";
}

Þegar smellt er á div-þáttinn með id-eiginleikanum mínum-div, verður fyrsta fylkisflokkurinn fjarlægður og settur í staðinn fyrir annað ríki og CSS-kerfinu í öðru ríki er beitt.

Bættu við bekknimyndum

Að uppfæra efni á flugu með AJAX

AJAX, sem stendur fyrir ósamstilltur JavaScript og XML, er tækni sem notuð er til að bæta við efni á vefsíðu án þess að endurnýja síðuna. Grunnhugmyndin er sú að JavaScript sendir gögn á netþjón á bakvið tjöldin, fær svar frá netþjóninum og aðlagar innihald vefsíðunnar út frá því svari.

Þetta hljómar kannski aðeins of fræðilegt, svo við verðum hagnýt. AJAX gerir hluti eins og sjálfvirka útfyllingu, óendanlega skrun og augnablik leitarniðurstöður mögulegar. Í báðum tilvikum sendir vefsíðan gögn til vefþjónsins og hleður svörun inn á vefsíðuna án þess að endurnærast.

Framkvæmd AJAX símtala er krefjandi verkefni og gengur lengra en grunn forritun JavaScript. Hins vegar, sem framsækinn verktaki eða hönnuður, AJAX er einn JavaScript eiginleiki sem þú getur varla verið án. Í næsta kafla munum við draga fram frábært AJAX auðlind.

Tungumál JavaScript

Ef JavaScript færni þína er svolítið ryðguð, þá eru hér þrjú framúrskarandi úrræði sem munu koma þér upp aftur:

  • JavaScript námskeið CodeCademy kynnir setningafræði, lykkjur, stjórnunarflæði, gagnaskipulag og hluti á gagnvirku námskeiði sem vafrinn byggir á..
  • Mozilla Developer Network (MDN) JavaScript Basics Tutorial er kennsla í JavaScript setningafræði, breytur, rekstraraðila, skilyrði, aðgerðir og atburði.
  • MDN AJAX Getting Started er stutt námskeið sem nær yfir grunn AJAX símtöl. Viðbótar greinar eru einnig fáanlegar á MDN sem fjalla um háþróaða AJAX tækni.

Þó að JavaScript sé öflugt, gerir jQuery þér kleift að gera miklu meira með minni fyrirhöfn.

jQuery: Undirbúningur að rokka heiminn

Hugsaðu um jQuery sem fullt af fyrirbyggðum JavaScript byggingarreitum. Við skulum líta á grunndæmi. Svona myndirðu velja frumefni með auðkenni my-div fyrst í JavaScript og næst í jQuery.

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

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

Það er frekar auðvelt að velja frumefni eftir auðkenni á báðum tungumálum. Hins vegar, eins og þú sérð, þarf u.þ.b. 25 færri ásláttur til að gera það í jQuery en í JavaScript.

Bætir jQuery við HTML skjalið þitt

Þú verður að hlaða jQuery áður en þú getur notað það, og það eru tvær einfaldar leiðir til að gera það. Þú getur annað hvort hlaðið niður jQuery og haft með sér staðbundið eintak eða notað vistað eintak eins og Google Hosted Libraries.

Hérna er kóðinn sem þú vilt setja með í HTML skjalið þitt til að hlaða jQuery:

Athugaðu að þegar þú skrifar jQuery verður þú að hlaða kóðann þinn eftir að jQuery kjarninn hefur hlaðið.

Notkun jQuery með WordPress

Eitt sérstakt atriði sem þarf að hafa í huga er að þegar þú notar jQuery á WordPress vefsíðu verður þú að nota jQuery til að forskeyti kóðann þinn frekar en $. Það eru lausnir sem þú getur notað til að fá $ forskeytið til að virka, en ef það tekst ekki skaltu forskeyti kóðann þinn með jQuery, eins og þessum:

// Venjulegt jQuery
$ (‘# my-div’);

// jQuery fyrir WordPress
jQuery (‘# my-div’);

jQuery CSS

Rétt eins og þú getur notað JavaScript til að vinna með CSS geturðu gert það sama með jQuery.

Við getum beitt flokkum nokkuð á áhrifaríkan hátt með jQuery. Handritið hér að neðan fylgist með músarsmelli á frumefnið með auðkenni my-div og fjarlægir síðan einn flokk og bætir við öðrum bekk. Þú getur notað þennan kóða til að skipta á milli tveggja CSS flokka.

var myDiv = $ (‘# my-div’);
$ (myDiv). smella (fall () {
if ($ (‘# my-div’) .hasClass (‘fyrsta ástand’)) {
$ (‘# my-div’) .removeClass (‘fyrsta ástand’);
$ (‘# my-div’) .addClass (‘second-state’);
}
annars ef ($ (‘# my-div’) .hasClass (‘second-state’)) {
$ (‘# my-div’) .removeClass (‘second-state’);
$ (‘# my-div’) .addClass (‘fyrsta ástand’);
}
})

Það er gagnlegt þó að við hefðum getað gert það auðveldara með því að nota .toggleClass () í staðinn.

var myDiv = $ (‘# my-div’);
$ (myDiv). smella (fall () {
$ (myDiv) .toggleClass (‘fyrsta ríki’);
$ (myDiv) .toggleClass (‘annað ríki’);
})

Við skulum sjá þessi umskipti í verki.

Skiptu um hreyfimyndir í flokki

Til eru margar viðbótaraðferðir við jQuery CSS. Athyglisverðast er að hægt er að nota .css () aðferðina til að vinna beint að CSS af markvissum þætti. Aðrar aðferðir, svo sem. Hæð () og. Breidd () er hægt að nota til að miða á sérstök CSS gildi.

jQuery Áhrif

Fjölbreytt áhrif eru innbyggð í jQuery. Þessi áhrif eru sett saman með öðrum jQuery aðferðum og aðgerðum til að stjórna framkvæmd breytinga á síðuþáttum.

Þetta er munnur, svo við skulum líta á dæmi. Ef við förum aftur í .toggleClass () aðgerðina okkar, getum við bætt við nokkrum áhrifum til að slétta yfirfærsluna.

var myDiv = $ (‘# my-div’);
$ (myDiv). smella (fall () {
$ (þetta) .fadeOut (‘hægt’, fall () {
$ (þetta) .toggleClass (‘fyrsta ástand’);
$ (þetta) .toggleClass (‘annað ríki’);
})
$ (þetta) .fadeIn (‘hægt’);
})

Það sem kóðinn gerir er að dofna þáttinn út, skipta um flokka og hverfa breytta þáttinn aftur inn.

Skipta um hreyfimynd

FadeOut () og fadeIn () áhrifin eru aðeins tvö af nokkrum jQuery áhrifum sem eru í boði. Að auki geta öll áhrif notið fjölda mismunandi valkosta til að fínstilla hegðun sína.

jQuery Viðburðir

Við höfum þegar séð einn jQuery atburð nokkrum sinnum í þessari einkatími: .smella (), sem kviknar þegar notandi smellir á markþáttinn. Hins vegar eru margir atburðir til viðbótar.

Atburðir sem notaðir eru til að miða aðgerðir notenda eru ma. Smella (), .dblclick (),. Hover (), .mouseenter (), .mouseleave () og .mousemove (), sem allir eru nokkuð sjálfskýrandi. Það eru einnig nokkrir meðhöndlun viðburða sem fylgjast með breytingum á síðueiningum:

  • .breyting () greinir þegar formeiningar breytast. Á sama hátt uppgötvar. Senda () uppgötva hvenær eyðublað er sent inn.
  • .fókus () er hrundið af stað þegar markaður þáttur fær fókus.
  • .tilbúinn () kviknar um leið og vafrinn hefur smíðað vefsíðuna.
  • .breyta stærð () kallar á kóða til að keyra þegar myndrýni er breytt.
  • .kveikja () tengir einn atburð við annan tengdan atburð.

Það eru fleiri atburðir af jQuery sem við höfum ekki fjallað um í þessari stuttu handbók. Lærðu meira með því að vísa í jQuery skjölin eða ráðlagða úrræði.

jQuery HÍ

jQuery UI er framlenging á jQuery sem inniheldur öfluga búnað og tæki til að nota UI. Að útfæra jQuery UI lögun, svo sem harmonikkugræju, er léttvægt einfalt miðað við að kóða sömu aðgerð frá grunni.

jQuery UI aðgerðir geta verið brotnar í fjóra flokka: búnaður, áhrif, samskipti og tól. Við skulum líta á hvert. En fyrst verðum við að vita hvernig á að bæta jQuery UI við HTML skjal.

Bæti jQuery UI við HTML skjal

Þú hefur tvo möguleika þegar kemur að því að hlaða jQuery UI: halaðu það niður og innihalda staðbundið eintak eða með CDN-hýst afrit.

Að auki hafðu þessi atriði í huga:

  • CSS sniðmátartengillinn ætti að fara í skjalhausinn.
  • Handritið fyrir jQuery UI ætti að fara rétt fyrir ofan lokamerkið.
  • JQuery kjarna (jquery.js eða jquery.min.js) verður að hlaða áður en jQuery UI (jquery-ui.js eða jquery-ui.min.js) er hlaðið.

jQuery HÍ ​​Þemu

Þegar þú hleður niður afriti af jQuery UI, þá gerir niðurhalsbúinn þér kleift að hafa þema inn. Þetta er vegna þess að jQuery UI búnaður krefst sjálfgefinnar stíl. JQuery UI þemað sem þú velur skilgreinir sjálfgefna búnaðstíla og viðeigandi kóða er innifalinn í jquery-ui.css.

Ef þú velur valkostinn sem hýst er af Google skaltu hafa í huga að nafn þemans er sleppt rétt fyrir skráarheitið: … / smoothness / jquery-ui.css. Sléttleiki er sjálfgefið þema jQuery UI. Þú getur notað hvaða þema sem er með því að skipta um nafn þemans þegar þú byggir slóðina.

Að auki býður vefsíðan jQuery UI upp á ThemeRoller sem þú getur notað til að búa til þitt eigið þema og innihalda það þegar þú halar niður jQuery UI.

jQuery UI búnaður

Græjur gera það tiltölulega áreynslulaust að búa til gagnlega UI þætti sem myndu taka fjall af kóða til að búa til með hreinu JavaScript og CSS. Við skulum kíkja á nokkur gagnlegustu jQuery búnaðurinn (smelltu á eitthvað til að fara í kynningu):

  • Sáttmálar gera þér kleift að fela upplýsingar á bak við fyrirsögn og sýna þær með því að kveikja á öllum hlutum opnum og lokuðum.
  • Flipar eru valkostur við harmonikkur. Þeir eru sparnaðarleið til að kynna upplýsingar.
  • Hnappar í jQuery HÍ ​​eru fallegir og stöðugt kynntir.
  • Hægt er að bæta við Datepicker á form til að tryggja að dagsetningar séu rétt valdar og sniðnar.
  • Framfarasúlur veita sjónræna vísbendingu um hversu miklar framfarir hafa orðið í því að ná markmiði.
  • Renna leyfa notendum að velja eitt gildi eða svið gildi þegar þeir senda inn eyðublað.
  • Snillari bætir upp og niður örvum til að slá inn tölur í formreit.
  • Hægt er að nota verkfæri til að útvega sértækar upplýsingar fyrir notendur.

Hér er allt kóðinn sem þú þarft að nota til að búa til safn af harmónikkum til að gefa þér tilfinningu um hversu auðvelt búnaður er að útfæra:

Harmonikkur 1. þáttur

Innihald harmonikkunnar. Þú getur notað málsgreinar, lista, tengla, hvað sem er.

Harmonikkur 2. þáttur

Eins og ég sagði.

  • Þú
  • Dós
  • Notaðu
  • Listar

Þátttaka 3. þáttar

Það er það. Það er frábær auðvelt.

$ (fall () {
$ ( "# akkordion" ). akkordion ();
});

Eins og þú sérð er HTML mun lengri en nokkrar línur af jQuery sem þarf til að breyta HTML í harmonikkur.

jQuery UI Accordions Hreyfimyndir

jQuery UI Áhrif

Flestar aðferðirnar í þessum flokki eru útvíkkun kjarnaaðferða jQuery. Til dæmis, ef þú vilt vinna með flokka, eru .addClass (), .removeClass () og .toggleClass () aðferðirnar allar tiltækar í jQuery UI, ásamt viðbótaraðferð, .switchClass (). Munurinn er sá að í jQuery UI innihalda þessar aðferðir viðbótarmöguleika, svo sem getu til að bæta umbreytingaráhrifum beint við aðferðina sjálfa.

Við skulum líta á dæmi. Manstu þegar við notuðum .fadeIn () og .fadeOut () til að breyta útliti div? Jæja, við getum búið til mun betri áhrif með miklu minni kóða með því að nota jQuery UI.

var myDiv = $ (‘# my-div’);
$ (myDiv). smella (fall () {
$ (þetta) .toggleClass (‘annað ríki’, 1000);
})

Hérna er þessi umskipti í aðgerð.

jQuery UI Toggle Class Animation

Nokkrar aðferðir við viðbótaráhrif sem þú vilt vita um eru:

  • Aðgerðin .show () fjarlægir skjáinn: enginn; frá hnitmiðaða þættinum.
  • .Hide () aðferðin bætir við skjánum: enginn; við markvissan þátt.
  • .Toggle () aðferðin mun skipta um markaða þætti milli sýnilegs og falins ástands.
jQuery HÍ ​​Hreyfimyndir

Það eru 15 mismunandi hreyfimyndir með nöfnum eins og blindum, hopp, klemmum, slepptu og sprungu. Við skulum líta á dæmi um áhrif glærunnar.

var myDiv = $ (‘# my-div’);
var myButton = $ (‘# my-button’);
$ (myButton). smella (fall () {
$ (myDiv) .toggle ( "renna" );
})

Í þessu tilfelli bættum við við hnappi til að renna divinn á og af skjánum. Við skulum sjá hvernig deildin okkar lítur út þegar hún er falin með þessum smá jQuery.

jQuery UI Fela teiknimyndir

Þessum jQuery umbreytingaráhrifum er hægt að beita á að. Sýna (),. Fela () og .toggle () aðferðirnar. Vefsíðan jQuery UI inniheldur forsýningartæki fyrir áhrif sem þú getur notað til að ákveða hvaða áhrif henta best við framkvæmdina.

Auðvelda jQuery UI umbreytingar

JQuery kjarninn inniheldur aðeins tvær slökun: sveifla og línuleg. Hins vegar bætir jQuery UI við meira en 20 slökun. Við skulum líta til baka á útfærslu okkar á .toggle () aðferðinni, að þessu sinni bætt við tveimur mismunandi auðveldum.

var myButton = $ (‘# my-button’);
$ (myButton). smella (fall () {
$ (‘# first-div’) .toggleClass (‘second-state’, 2000, ‘easInOutQuad’);
$ (‘# second-div’) .toggleClass (‘second-state’, 2000, ‘easInOutExpo’);
})

Í þessu dæmi eru tvær deildir. Báðir fara yfir í annað ástand eftir 2 sekúndur. Hins vegar mun hver nota mismunandi slökun. Við skulum kíkja.

jQuery UI Easying Animation

jQuery samspil HÍ

Samspil eru mengi jQuery UI aðferða sem leyfa notendum vefsíðna og forrita að velja og færa síðuþætti. Það eru fimm milliverkanir við jQuery UI. Með því að smella á einhvern af hlekkjunum hér að neðan mun þú fara í kynningu á hverju samspili á vefsíðu jQuery UI.

  • Draggable samspilið gerir notendum kleift að staðsetja vefsíðuþátt með því að draga og sleppa honum með músinni.
  • Droppable samspilið vinnur hönd í hönd með dragable samspilinu. Til að nota það verður bæði að draga og sleppa hlut að vera til á vefsíðunni. Þegar hluturinn sem hægt er að draga er sleppt á hlutinn sem hægt er að sleppa er kveikt á aðgerð.
  • Breytanlegt gerir nákvæmlega það sem þér finnst að það ætti að gera: það gerir síðuþátt breyttan.
  • Hægt er að velja hlutina á listanum með því að smella annað hvort í einu eða með því að halda niðri Ctrl eða smella og draga yfir marga hluti til að velja marga hluti í einu..
  • Raðanlegt gerir það mögulegt að endurraða listahlutum í hvaða röð sem er.

milliverkanir við jQuery UI eru ekki það sem þú bjóst við að hrinda í framkvæmd á meðaltalsvefsíðunni. Hins vegar, ef þú ert að búa til gagnvirkt vefforrit, leik eða flókið form, munu þessi samskipti koma sér vel.

jQuery UI Utilities

jQuery UI er hægt að lengja og búnaðurinn er búnaðurinn sem notaður er til að gera það. Búnaðarverksmiðja gerir þér kleift að pakka saman mörgum aðferðum, stílum og aðgerðum jQuery-notendaviðmótunar í eina endurnýtan búnað.

Ef þú þekkir hlutbundna forritun gæti verið gagnlegt að hugsa um jQuery UI búnaður sem hluti. Svo, jQuery UI harmónikku er í raun hlutur harmonikkuflokksins. Það sem búnaðarframleiðslan gerir þér kleift að skilgreina nýja flokka búnaðar og nota síðan þann flokk til að búa til marga hluti, mikið á sama hátt og þú býrð til flokk og endurnýtir hann aftur og aftur í OOP.

Önnur gagnleg jQuery UI gagnsemi er .position () aðferðin. Þessi aðferð gerir þér kleift að skilgreina staðsetningu hvers frumefnis miðað við annan þátt eða aðgerð notenda. Aðferðin er frekar einföld þegar þú hefur náð tökum á henni. Við skulum líta á dæmi.

$ (‘# second-div’) .staða ({
minn: ‘vinstri toppur’,
á: ‘hægri neðst’,
af: ‘# first-div’
});

Sá hluti af kóða segir að vinstra efra hornið á frumefninu með auðkennið af second-div ætti að vera staðsett í hægra neðra horni frumefnisins með id fyrsta div, eins og þetta:

jQuery Hreyfimynd staðsetningar

Að auki er hægt að staðsetja hluti út frá aðgerðum notenda. Við skulum stilla kóðann til að nota staðsetningu músarinnar frekar en fyrsta divinn til að ákvarða staðsetningu seinni deildarinnar.

$ (skjal) .moveyja (fall (atburður) {
$ (‘# second-div’) .staða ({
mitt: ‘miðja’,
af: atburði,
árekstur: ‘passa’
})
})

Sá kóði bætir við hlustanda fyrir atburðinn .mousemove () sem verður kveikt á hvenær sem músin fer inn í skjalið. Þegar það gerist verður .position () miðaða deildarinnar ákvörðuð út frá staðsetningu músarinnar.

Við skulum sjá það í aðgerð.

jQuery UI Position Mousemove Animation

jQuery Mobile

jQuery Mobile er önnur viðbót við jQuery bókasafnið. Það er notað til að búa til snjallgerðar móttækilegar vefsíður og forrit.

Þegar hugsað er um jQuery Mobile ætti raunverulega að leggja áherslu á snertibjartsýni. Það eru til margar grunnaðferðir og atburðir sem fylgja jQuery og jQuery UI sem eiga bara ekki við um farsíma og jQuery Mobile tekur á þeim ágalla. Ólíkt jQuery UI, sem hægt er að nota til að knýja aðeins einn eða tvo þætti vefsíðu, er jQuery Mobile hannað til að vera allt-eða-ekkert lausn fyrir snertibundnar móttækilegar vefsíður og forrit.

Bókasafnið inniheldur mikið úrval af móttækilegum, snertibúnaðri hnöppum, dagspilara, formþáttum, strjúka atburðum, leiðsöguþáttum, borðum, flipum, rennibrautum og fleiru. Að auki inniheldur jQuery Mobile ThemeRoller.

Áskorunin við að nota jQuery Mobile er nálgunin allt eða ekkert. Það er hannað til að búa til fullar afleysingar fyrir skrifborðsútgáfur af vefsíðum og forritum. Ef þú vilt frekar hafa eina síðu eða forrit sem virkar í öllum tækjum er jQuery Mobile ekki það sem þú ert að leita að. Ef þú notar jQuery Mobile fyrir forrit eða vefsíðu sem virkar í öllum tækjum – snertifærð og ekki – verður þú að finna leið til að kveikja og slökkva á jQuery Mobile með því að greina gerð tækisins, stærð og nærveru snertiskjás.

Hönnunargögn

Við bentum þegar á nokkra staði þar sem þú getur lært JavaScript. Ef þú veist ekki nú þegar eitthvað JavaScript skaltu þróa þessa færni áður en þú ferð í jQuery. Þegar þú hefur haft eitthvað JavaScript undir þínu belti munu eftirfarandi úrræði koma þér upp með jQuery, jQuery UI og jQuery Mobile.

  • jQuery Foundation Learning Center er opinberi (og einn besti) staðurinn til að læra jQuery. Hér finnur þú námskeið sem byggir á kafla sem fjallar um grunnatriði, atburði og áhrif, AJAX, viðbætur og fleira. Þegar þú ert tilbúinn geturðu líka lært hvernig á að nota jQuery UI og jQuery Mobile.
  • Lærðu jQuery From Scratch er námskeið sem byggir á verkefnum sem mun hjálpa þér að öðlast sjálfstraust sem forritari jQuery.
  • CodeCademy jQuery námskeið kennir þér setningafræði jQuery, svo og hvernig skrifa grunnaðgerðir, breyta DOM þætti, nota atburði og útfæra áhrif.
  • jQuery Fundamentals eftir Bocoup er bók með innbyggðu JavaScript vélinni svo þú getur prófað kóðann rétt í vafranum. Það nær yfir grunnatriði jQuery, fara yfir og vinna með DOM þætti, atburði, áhrif og AJAX.

Hönnuðir þurfa jQuery

Viðbætur við jQuery, jQuery UI og jQuery Mobile bæta mikið af búnaði, víxlverkunum, aðferðum, áhrifum og snertibúnaðartækjum. Með því að ná góðum tökum á þessum mun þú verða betri hönnuður og verktaki vegna þess að þú munt geta smíðað öflug, gagnvirk vefforrit án þess að eyða einhverjum mínútum.

Annað áhugavert

Við höfum fleiri handbækur, námskeið og infografics sem tengjast erfðaskrá og þróun vefsíðu:

  • CSS3 – Inngangur, leiðbeiningar & Auðlindir: þetta er frábær staður til að byrja að læra uppsetningu vefsíðna.
  • ASP.NET auðlindir: þessi leiðarvísir mun koma þér í gang með .NET ramma Microsoft til að búa til vefsíður.

Hvaða kóða ætti að læra?

Ruglaður um hvaða forritunarmál þú ættir að læra að kóða á? Skoðaðu infographic okkar, hvaða kóða ættir þú að læra? Það fjallar ekki aðeins um mismunandi þætti tungumálsins, það svarar mikilvægum spurningum eins og „Hve miklum peningum mun ég græða á að forrita Java til að lifa?“

Hvaða kóða ættirðu að læra?
Hvaða kóða ætti að læra?

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

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