Prošli tjedan sam govorio o tome koliko je jQuery važan stvaranje web interaktivne: uvod u jQuery Izrada web interaktivne: uvod u jQuery jQuery je biblioteka skripta na strani klijenta koju koristi gotovo svaka moderna web stranica - što web stranice čini interaktivnom. To nije jedina Javascript knjižnica, ali je najrazvijenija, najviše podržana i najčešće korištena ... bilo kojem modernom web programeru i zašto je sjajna. Ovaj tjedan, mislim da je vrijeme da se umažemo rukama s nekim kodom i naučimo kako zapravo koristiti jQuery u našim projektima.

Reći ću ovo sada - ne biste trebali učiti Javascript da biste koristili jQuery. Vjerojatno je najbolje ako mislite da je jQuery evolucija Javascripta - bolji način za to - nego jednostavno knjižnica koja dodaje funkcionalnost. Svaki JavaScript koji vam treba pokupit će se na putu. Ipak, pretpostavlja se da kao web programer imate prilično dobro znanje HTML-a i CSS-a (a evo i korisnog besplatnog vodiča xHTML, ako ne!).

Model objekta dokumenta

jQuery je sve o prelasku i manipulaciji s DOM - Document Object Model. DOM je hijerarhijski prikaz stabla stranice, izrađen od strane preglednika nakon što ih pročita čitav HTML kôd. U jQueryju ćemo koristiti terminologiju poput roditelj, djeca, i braća i sestre vrlo često, tako da biste trebali imati ideju što to znači u odnosu na DOM.

Ovaj jednostavan dijagram w3schools prilično dobro objašnjava koncepte. Trebali biste moći vidjeti da je roditelj elementa, dok element ima neposredni značaj

polubrat.

Prvi koraci: Dodavanje jQueryja

Najnovija verzija jQueryja iznosi oko 91KB kada se komprimira, tako da dodaje približno istu težinu stranice kao i mala fotografija ili snimka zaslona. Najlakši način za uključivanje jQuery u svoj projekt je zalijepiti referencu na najnoviju verziju s hostom u odjeljak zaglavlja web mjesta:

No imajte na umu da, ako pokrećete WordPress, to može uzrokovati probleme jer već ima svoju kopiju jQuery knjižnice. Dodaci mogu zahtijevati da se ovo učita, a WordPress će inteligentno učitati jQuery samo jednom bez obzira na to koliko dodataka je zatražilo.

Ako sljedeći redak dodate u svoj functions.php datoteku teme, dodajte još jedan zahtjev da bude uključen. WordPress će se znati uvijek učitati ako je vaša tema aktivna.

wp_enqueue_script ( "jquery");

Drugo što treba imati na umu je da će se, kada jQuery doda standardnom metodom, učitati kao $. Sve što napravite s jQueryem prethodit će ovom $, kao što je:

$ .ajax

ili

$ ( "# Header")

Međutim, kada se jQuery učitava putem WordPressa, sve se obavlja pomoću jQuery varijable umjesto $, na primjer:

jQuery ( "# header")

Iako ovo nije veliki problem prilikom pisanja vlastitog koda, to znači da će se za izrezivanje i lijepljenje isječaka jQueryja koje pronađete na webu trebati prevoditi da bi jQuery koristila umjesto $ - to je sve.

Jedan od načina za to je omotati $ -style kod koji vam se čini ovako:

(funkcija ($) // zalijepite $ kod ovdje) (jQuery);

Ovo traje jQuery varijablu i prosljeđuje je u anonimnu funkciju kao $. Sljedeći put ću objasniti anonimne funkcije - za sada ćemo naučiti osnovnu strukturu malo jQuery koda.

Da biste dodali svoj kôd na HTML ili PHP stranicu, priložite sve unutar oznaka, na primjer:

 // jQuery kodovi ovdje 

$ ( 'Selektor') metoda (.);

To je to, u naslovu gore. To je osnovna struktura jednog dijela jQuery koda za manipuliranje DOM-om. Lako, zar ne?

Selektor kaže jQueryju da pronađe stvari koje odgovaraju ovom pravilu,i isto je kao CSS selektori (a potom još neki na vrhu). Kao i u CSS-u, tako biste i stilski povezali sve veze

a 

Isto bi se dogodilo u jQuery-u kao

$ ( 'A')

To se može učiniti za bilo koji HTML element - div, h1, span - bilo što. Možete koristiti i CSS klase i ID-ove da biste bili precizniji.

Na primjer, da biste pronašli sve veze s klasom “Nađi me”, ti bi koristili:

$ ( 'A.findme')

Ne morate svaki put specificirati vrstu elementa - ali ako to učinite, to jednostavno čini pravilo specifičnijim. Mogli ste upravo reći

$ ( 'Findme')

što bi sve odgovaralo razredu Nađi me, bilo da je to bila veza ili ne.

Za korištenje imenovanog ID elementa, koristite # umjesto toga. Ključna razlika ovdje je što će selektor ID-a uvijek odabrati samo jedan objekt, dok bi selektor klase mogao pronaći više od jednog.

$ ( '# Nešto')

U osnovi ako to možete učiniti u CSS-u, tada će to učiniti i jQuery. U stvari, možete imati i prilično složene pseudo odabire CSS3 stila poput: prvo

$ ('tijelo p: prvo')

Koji bi zgrabio odlomak stranice. Pronalazite i elemente s određenim atributima. Razmotrimo ovaj primjer; želimo pronaći sve veze na stranici koje interno upućuju na iskoristiti i istaknuti ih na neki način. Evo kako bismo ih mogli pronaći:

$ ( "A [href * = "makeuseof"])

Nije li to cool? Pa, mislim da jest.

Vaš sljedeći port poziva trebao bi biti jQuery API dokumentacija za odabire. Ogroman je popis svih vrsta odabira dostupnih za upotrebu, a nitko ne bi očekivao da ćete ih naučiti sve.

Sljedeći dio jednadžbe je metoda - što učiniti s tim stvarima nakon što ih sve pronađete - ali to ćemo ostaviti za sljedeću lekciju. Ako sada želite započeti s isprobavanjem raznih odabirača, predlažem vam da se pridržavate sljedeće metode css. Za to su potrebna dva parametra - CSS ime svojstva, i novo vrijednost dodijeliti tom svojstvu. Dakle, da svim vezama dodijelite crvenu boju pozadine, trebali biste učiniti:

. $ ( 'A') css ( 'background-color', 'crvena');

Dovoljno jednostavno! Iako vam ovo neće biti od praktične koristi, lako će vidjeti bilo koje elemente koji se nalaze pomoću vaših odabirača. Sada izađite i odaberite - DOM vas očekuje.

Nadam se da vam je ovaj udžbenik bio koristan; Pokušao sam to učiniti što jednostavnijim i razumljivim. Slobodno postavljajte bilo kakva pitanja koja imate ili ostavite povratne informacije, ali budite svjesni da sigurno nisam elitni jQuery ninja.