Viime viikolla puhuin siitä, kuinka tärkeä jQuery on nykyaikaisille web -kehittäjille ja miksi se on mahtavaa. Tällä viikolla luulen, että on aika saada kätemme likaiseksi koodilla ja oppia hyödyntämään jQueryä todellisuudessa projekteissamme.

Sanon tämän nyt - sinun ei tarvitse oppia Javascriptiä voidaksesi käyttää jQueryä. On luultavasti parasta, jos ajattelet jQueryä Javascriptin kehitystyönä - parempi tapa tehdä se - kuin pelkkää toiminnallisuutta lisäävää kirjastoa. Kaikki tarvitsemasi Javascript noudetaan matkalla. Oletetaan kuitenkin, että web -kehittäjänä sinulla on melko hyvä HTML- ja CSS -tuntemus (ja tässä on hyödyllinen ilmainen xHTML -opas, jos ei!).

---

---

Asiakirjan objektimalli

jQueryn tarkoituksena on kiertää ja manipuloida TUOMIO - D asiakirja TAI bject M odel. DOM on sivun hierarkkinen puunäkymä, jonka selaimet ovat luoneet luettuaan kaiken HTML -koodin. Käytämme jQueryssä terminologiaa, kuten vanhempi , lapset ja sisarukset melko usein, joten sinulla pitäisi olla käsitys siitä, mitä tämä tarkoittaa suhteessa DOM: ään.

Tämä yksinkertainen kaaviow3koulutselittää käsitteet melko hyvin. Sinun pitäisi pystyä näkemään, että elementin ylätaso on, kun taas elementillä on välitön

sisar.

Aloittaminen: jQueryn lisääminen

JQueryn uusin versio on noin 91 kt pakattuna, joten se lisää suunnilleen saman sivun painon kuin pieni valokuva tai kuvakaappaus. Helpoin tapa sisällyttää jQuery projektiin on liittää viittaus viimeisimpään isännöityyn versioon sivustosi otsikko -osioon:

Huomaa kuitenkin, että jos käytät Wordpressiä, tämä voi aiheuttaa ongelmia, koska sillä on jo oma jQuery -kirjaston kopio. Laajennukset voivat pyytää tämän lataamista, ja Wordpress lataa älykkäästi jQueryn vain kerran riippumatta siitä, kuinka monta laajennusta on sitä pyytänyt.

Jos lisäät riville seuraavan rivin toimintoja. php teematiedosto, lisää toinen pyyntö sen sisällyttämiseksi. Wordpress osaa ladata sen aina, jos teemasi on aktiivinen.

---

---

mistä tämä numero soittaa

wp_enqueue_script('jquery');

Toinen asia, joka on pidettävä mielessä, on se, että kun jQuery lisätään vakiomenetelmällä, se ladataan muodossa $ . Kaikki tämä, mitä teet jQueryllä, edeltää tätä dollaria, kuten:

$.ajax

tai

---

---

$('#header')

Kuitenkin, kun jQuery ladataan Wordpressin kautta, kaikki tehdään käyttämällä jQuery -muuttujaa $ sijasta, esimerkiksi:

jQuery('#header')

Vaikka tämä ei ole valtava ongelma kirjoittaessasi omaa koodiasi, se tarkoittaa, että verkossa löydettyjen jQuery -katkelmien leikkaaminen ja liittäminen on käännettävä jQueryn käyttämiseksi $ - siinä kaikki.

Yksi tapa kiertää tämä on kääntää $ -style-koodi, joka löytyy seuraavasti:

(function($) {
// paste $ code in here
})(jQuery);

Tämä vie jQuery muuttuja ja siirtää sen nimettömäksi funktioksi $ . Selitän nimettömät toiminnot seuraavalla kerralla - nyt opetellaan vähän jQuery -koodin perusrakenne.

Voit lisätä koodisi HTML- tai PHP -sivulle liittämällä kaikki tagit, esimerkiksi seuraavasti:


// jQuery code codes here


$ ('valitsin'').menetelmä();

Siinä se, tuossa otsikossa. Tämä on yhden jQuery -koodin perusrakenne DOM: n manipuloimiseksi. Helppoa, eikö?

Thevalitsinkertoo jQuerylle löytää tämän säännön mukaisia ​​asioita, ja se on sama kuin CSS -valitsimet (ja sitten muutamat ylhäällä). Joten, aivan kuten CSS: ssä, tyylität kaikki linkit

a { }

Sama tehdään jQueryssä kuin

$('a')

Tämä voidaan tehdä mille tahansa HTML -elementille - div, h1, span - mitä tahansa. Voit myös käyttää CSS -luokkia ja tunnuksia tarkemmin.

Esimerkiksi löytääksesi kaikki linkit luokkaan 'findme', käytä seuraavaa:

$('a.findme')

Sinun ei tarvitse määrittää elementin tyyppiä joka kerta - mutta jos teet sen, se yksinkertaistaa sääntöä tarkemmin. Olisit voinut vain sanoa

$('.findme')

joka sopisi kaiken luokan kanssa löydä minut , oliko se linkki vai ei.

Jos haluat käyttää nimettyä ID -elementtiä, käytä # allekirjoita sen sijaan. Tärkein ero tässä on se, että ID -valitsin valitsee vain yhden objektin, kun taas luokan valitsin voi löytää useamman kuin yhden objektin.

err_connection_refused chrome

$('#something')

Pohjimmiltaan jos voit tehdä CSS: n, niin jQuery tekee sen myös. Itse asiassa voit myös käyttää melko monimutkaisia ​​CSS3 -tyylisiä pseudovalitsimia, kuten: ensin

$('body p:first')

Joka tarttuisi sivun kohtaan. Löydät myös elementtejä, joilla on tiettyjä ominaisuuksia. Harkitse tätä esimerkkiä; haluamme löytää sivulta kaikki linkit, jotka osoittavat sisäisesti hyödyntää ja korosta niitä jollakin tavalla. Näin voimme löytää ne:

$('a[href*='makeuseof']')

Eikö se ole siistiä? Minusta se on.

Seuraavan käyntiportin pitäisi olla jQuery -sovellusliittymän dokumentaatio valitsijoille . Se on valtava luettelo kaikista käytettävissä olevista valitsimista, eikä kukaan odota sinun oppivan niitä kaikkia.

Yhtälön seuraava osa onmenetelmä- mitä tehdä näille asioille, kun olet löytänyt ne kaikki - mutta jätämme sen seuraavaan oppituntiin. Jos haluat kuitenkin kokeilla erilaisia ​​valitsimia nyt, ehdotan, että noudatat seuraavaa css -menetelmää. Tämä vaatii kaksi parametria - CSS kiinteistön nimi , ja uusi arvo liittää kyseiseen omaisuuteen. Joten jos haluat antaa kaikille linkeille punaisen taustavärin, toimi seuraavasti:

$('a').css('background-color','red');

Tarpeeksi yksinkertaista! Vaikka tästä ei välttämättä ole käytännön hyötyä, sen avulla voit helposti nähdä kaikki elementit, jotka sijaitsevat valitsimillasi. Mene nyt ja valitse - DOM odottaa sinua.

Toivottavasti tästä opetusohjelmasta on ollut sinulle hyötyä; Olen yrittänyt tehdä siitä mahdollisimman yksinkertaisen ja helposti ymmärrettävän. Voit vapaasti esittää kysymyksiä tai jättää palautetta, mutta huomaa, että en todellakaan ole mikään eliitti jQuery -ninja.

Jaa Jaa Tweet Sähköposti 5 vinkkiä VirtualBox Linux -koneiden lataamiseen

Oletko kyllästynyt virtuaalikoneiden heikkoon suorituskykyyn? Tässä on, mitä sinun pitäisi tehdä parantaaksesi VirtualBox -suorituskykyäsi.

Lue seuraava Liittyvät aiheet

• Verkkokulttuuri
• Verkkokehitys
• JavaScript
• Ohjelmointi
• jQuery

Kirjailijasta James Bruce(707 artikkelia julkaistu)

Jamesilla on BSc tekoälyssä ja CompTIA A+ ja Network+ -sertifioitu. Kun hän ei ole kiireinen laitteistoarvostelujen editorina, hän nauttii LEGO-, VR- ja lautapeleistä. Ennen MakeUseOfiin tuloaan hän oli valaistustekniikka, englannin opettaja ja konesali -insinööri.

Lisää James Brucelta

tilaa uutiskirjeemme

Liity uutiskirjeeseemme saadaksesi teknisiä vinkkejä, arvosteluja, ilmaisia ​​e -kirjoja ja ainutlaatuisia tarjouksia!

Klikkaa tästä tilataksesi