Efektet mbresëlënëse të animacionit. Shembuj të përdorimit të shembujve të përshkrimit të jQuery Jquery

Për ata që për ndonjë arsye nuk mund (ose nuk duan) të shkarkojnë jQuery, ekziston një mënyrë alternative për të përdorur nga distanca bibliotekën e ofruar nga Google.

Për të përdorur jQuery nga distanca, thjesht shtoni kodin e mëposhtëm në seksionin e kokës së faqes:

Ju lutemi vini re: Kur kryeni këtë dhe ushtrimet e mëposhtme, ju rekomandojmë që të çaktivizoni korrigjuesit (siç është Firebug), të cilët mund të japin sugjerime. Gjatë përfundimit të detyrave, ju vetë duhet të gjeni dhe korrigjoni gabimet për qëllime edukative.

Detyra 1 Kodi jQuery është specifikuar në faqe, por nuk funksionon sepse skedari i nevojshëm i bibliotekës jquery.js nuk është i lidhur me të. Lidhni jquery.js nga distanca (duke përdorur një shërbim Google) për të "rregulluar" kodin.

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

Si ta bëjmë më të lehtë jetën e një zhvilluesi të internetit? Ku të fillojë? jQuery e bën shkrimin e Javascript argëtues dhe më të lehtë. Me këtë bibliotekë, shumë aspekte mjaft komplekse të Javascript mund të zbatohen lehtësisht në çdo aplikacion.

Mësimi 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. Ka shumë veçori shumë të fuqishme, si gjurmimi DOM, shtimi i efekteve dhe animacioneve të bukura në elementë, teknika dhe metoda super të thjeshta Ajax. Në faqen kryesore të faqes jQuery, përshkrimi më i saktë, për mendimin tim:

jQuery është një bibliotekë e shpejtë dhe koncize që thjeshton trajtimin e ngjarjeve, animacionin dhe ndërveprimin Ajax për zhvillim më të shpejtë të uebit. jQuery është krijuar për të ndryshuar mënyrën e shkrimit të JavaScript.

Cilat janë përfitimet e jQuery?

Le të hedhim një vështrim të shpejtë në disa nga avantazhet dhe vetitë e këtij kuadri:

Sasia e kodit (e nevojshme për ekzekutimin 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. Pjesa tjetër e artikullit do të shikojë disa shembuj.

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 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, duhet të vizitoni faqen kryesore të faqes zyrtare të jQuery dhe të 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 ndodhen gjithmonë versionet më të fundit të çdo kornize. Lidhja e nevojshme mund të gjendet.

A është dokumenti gati?

Për të ekzekutuar skriptin tonë të parë jQuery, duhet të mbështjellim 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ë shohim një shembull:

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

Më sipër po i themi jQuery të ekzekutojë çdo kod brenda funksionit, me DOM plotësisht gati, pavarësisht se mund të mos jetë i 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 kemi nevojë të presim që faqja të ngarkohet plotësisht, DOM-i është i mjaftueshëm për t'u ngarkuar.

Për koduesit dembelë, ose për ata që numërojnë çdo karakter, 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. Ne gjithashtu kuptojmë pak për funksionin document.ready. Tani është koha për të shkruar një skenar 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 më poshtë kodit të kërkuar për këtë:

$(document).ready(function())(
var myQuote = $("#quote_my");
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 per vemendjen! Gjithe te mirat!

JQuery është një bibliotekë e shkëlqyer. Ndihmoi për të shmangur në mënyrë të përsosur të gjitha kurthet e IE6. Në kohët e kaluara, përputhshmëria e ndër-shfletuesve ishte një problem i madh me të cilin përballeshin zhvilluesit. Jquery u përball mirë me të gjitha mospërputhjet në shfaqjen e paraqitjeve në shfletues të ndryshëm.

Sot, shfletuesit kanë zgjidhje të shkëlqyera të unifikuara. Ne mund t'i përdorim me lehtësi të gjitha privilegjet e ES5 dhe kemi gjithashtu në dispozicion API-në HTML5, gjë që e bën shumë më të lehtë përpunimin e elementeve DOM. Zhvilluesit janë në prag të harresës dhe duke u larguar nga jQuery për disa projekte. Sidomos në rastin e mikroshërbimeve dhe programeve jo komplekse.

Mos më keqkuptoni - Jquery është ende një bibliotekë e mrekullueshme, dhe sigurisht, 70% të kohës do t'ju duhet ta përdorni atë. Edhe pse për faqe të vogla me JS të kufizuar, mund të përdorni VanillaJS ose një kornizë tjetër. Këto janë të përshtatshme për aplikacione celulare.

Epo, këtu janë 10 shembuj të kodit të punës që mund t'i bëni pa jquery.

Gjëja e parë që bëni kur përdorni jQuery është të mbështillni kodin në një metodë $(document).ready() për të ditur se kur DOM është gati për manipulim. Pa Jquery, ne mund të përdorim ngjarjen DOMContentLoaded. Këtu është një shembull kodi:

// Dëgjoni ngjarjen DOMContentLoaded për të gjithë dokumentin, me një funksion anonim // Mund ta mbështillni kodin tuaj në krahët e këtij funksioni // dhe ai do të ekzekutohet kur faqja të ngarkohet. document.addEventListener("DOMContentLoaded", funksioni () ( // përshëndetje tonë Havai, do të shfaqet në konsolën e konsolës.log ("Aloha"); ));

Një ditë, do të na duhet të zgjedhim elementë duke përdorur id, klasë ose etiketa, dhe jQuery është një nga më të mirët. Përzgjedhësit e të cilëve janë plotësisht identikë me sintaksën CSS. Sot, shfletuesit kanë prezantuar dy API të rëndësishme - querySelector dhe querySelectorAll.

// Ju mund të përdorni document.querySelector për të marrë elementin e parë që përputhet me kriteret // merr vetëm një argument - përzgjedhësit CSS. var lochNess = dokument.querySelector(".monsters"); console.log("Është" nga Skocia - " + lochNess.textContent); // ne gjithashtu mund të marrim koleksionin duke përdorur document.querySelectorAll. // kthen një listë të elementeve dom që përputhen me kriterin var scary = document.querySelectorAll( ".monsters") ;< scary.length; i++) { console.log(scary[i].innerHTML); }

• Nessy
• Këmbë e madhe
• La chupacabra

Dëgjimi i ngjarjeve është një pjesë themelore e ndërtimit të aplikacioneve në internet. Historikisht, ka pasur dy kampe të mëdha - IE dhe pjesa tjetër. Por sot, ne përdorim vetëm addEventListener

Var btn = document.querySelectorAll("button"), list = document.querySelector("ul"); // Thirrni addEventListener në ngjarjen e dëshiruar. // fillon të gjurmojë ngjarjen e klikimit në një element. btn.addEventListener("kliko", funksioni () ( // Kur klikohet një buton, ne duam të aktivizojmë një shkallë ngjarjeje në listën tonë. // Për ta bërë këtë, duhet të shtojmë një ngjarje në listën tonë // në mënyrë që kur miu rri pezull mbi një element, funksioni do të aktivizohet lista .addEventListener("mouseover", zmadhuar )); // Për të anuluar ngjarjen e zmadhimit, përdorni removeEventListener. btn.addEventListener("klikoni", funksioni () ( // Heqja e ngjarjeve nuk do të funksionojë me funksione të paemërtuara, përdorni vetëm list.removeEventListener ("over mouseover", zmadhoni); )); // Le të krijojmë një funksion që do të shkallëzohet. var enlarge = funksion () ( // Shtoni një klasë për elementet list.classList.add("zmadhuar"); // kur kursori largohet nga lista, hiqeni klasën për t'u kthyer në listën e shkallës normale.addEventListener("mouseout ", funksioni ( ) (list.classList.remove("zmadhuar") )); // Tani duam të theksojmë emrat kur klikohen. // Kur një klikim aktivizohet në një element, ai duhet të bëhet i gjelbër // Falë delegimit të ngjarjeve, ne thjesht mund të shtojmë një mbajtës në elementin prind // Në këtë metodë, ne nuk do të krijojmë dëgjues ngjarjesh për secilin

Shtoni patate të skuqura në drekë Shtoni djathë në sanduiç Hiq turshitë Dreka ime

• Sanduiçi im
• Bukë
• Turshitë
• Mish viçi
• Mayo
• Bukë

Me ardhjen e jQuery, programuesit e uebit kanë mundësinë të krijojnë efekte vizuale mbresëlënëse pa përdorur teknologjinë flash. Ky artikull paraqet disa shembuj të mrekullueshëm se çfarë rezultatesh mahnitëse mund të arrihen duke përdorur mjetet standarde të shfletuesit dhe imagjinatën tuaj.

Një efekt i mirëorganizuar që ju lejon të zmadhoni pjesën e figurës mbi të cilën do të vendoset kursori. Në shfletuesit që nuk janë të njohur me CSS3, xhami zmadhues do të jetë katror.

Ky rrëshqitës ka tetë mënyra të ndryshme për shfletimin e imazheve, secila prej të cilave kënaq syrin me dinamikën e saj të lëmuar në mënyrë të përsosur.

Nuk ndodh shumë shpesh që hasni në një faqe që ka shumë elementë të rrumbullakët. Shtojca Bubble Navigation ju lejon të krijoni navigim dinamik bazuar vetëm në rrathë.

Ju lejon të nisni elementet e faqes rreth një rrethi dhe në plane të ndryshme hapësire.

Shtojca Flip ju lejon të ktheni elementë sikur të ishin karta.

Galeria joformale e imazheve. Pamja paraprake e përmbajtjes është një grup fotografish të shpërndara të marra me një aparat fotografik Polaroid.

Një rrëshqitës i thjeshtë por shumë i bukur imazhi.

Slideshow me imazhe që lëvizin në hapësirë.

Një mënyrë shumë interesante për të bërë një katalog interaktiv të produkteve.

Ju lejon të bëni fotografi të pjesëve individuale të një imazhi në një faqe. Klikoni në pjesën e dëshiruar të figurës dhe shikoni rezultatin në ekran.

Shtojca Quicksand do t'ju lejojë të renditni dhe filtroni një grup elementësh duke përdorur efekte me cilësi shumë të lartë.

Kjo shtojcë do të jetë shumë e dobishme për krijimin e përshkrimeve të detajuara të objekteve komplekse dhe turneve interaktive kur kërkohet, duke zënë sa më pak hapësirë ​​të jetë e mundur për të ofruar një sasi të madhe informacioni.

Shtojca Sliding boxes do t'ju ndihmojë të krijoni një galeri të pazakontë dinamike imazhesh me titra për to.

Një galeri imazhesh, elementët e së cilës do të shfaqen me gëzim kur kaloni pezull mbi to.