Praėjusią savaitę kalbėjau apie tai, kokia svarbi „jQuery“ yra bet kuriam šiuolaikiniam žiniatinklio kūrėjui ir kodėl ji nuostabi. Šią savaitę manau, kad atėjo laikas susitepti rankas su tam tikru kodu ir sužinoti, kaip iš tikrųjų panaudoti „jQuery“ savo projektuose.

Aš pasakysiu tai dabar - norint naudotis „jQuery“, jums nereikia mokytis „JavaScript“. Tikriausiai geriausia, jei manote, kad „jQuery“ yra „Javascript“ evoliucija - geresnis būdas tai padaryti - nei tiesiog biblioteka, papildanti funkcionalumą. Bet koks jums reikalingas „JavaScript“ bus pasiimtas pakeliui. Tačiau daroma prielaida, kad kaip žiniatinklio kūrėjas gerai išmanote HTML ir CSS (ir čia yra naudingas nemokamas xHTML vadovas, jei ne!).

---

---

Dokumento objekto modelis

„jQuery“ yra susijęs su perėjimu ir manipuliavimu SPRENDIMAS - D dokumentas ARBA bject M odelis. DOM yra hierarchinis puslapio medžio atvaizdas, sukurtas naršyklių perskaičius visą HTML kodą. „JQuery“ naudosime tokią terminiją kaip tėvas , vaikai , ir broliai ir seserys gana dažnai, todėl turėtumėte įsivaizduoti, ką tai reiškia DOM atžvilgiu.

Ši paprasta schema išw3 mokyklosgana gerai paaiškina sąvokas. Turėtumėte matyti, kad elemento pirminis elementas yra, o elementas turi tiesioginį

brolis.

Darbo pradžia: pridėkite „jQuery“

Naujausia „jQuery“ versija yra apie 91 KB suspaudus, todėl ji prideda maždaug tokį patį puslapio svorį kaip maža nuotrauka ar ekrano kopija. Lengviausias būdas įtraukti „jQuery“ į projektą yra įklijuoti nuorodą į naujausią priglobtą versiją į svetainės antraštės skiltį:

Tačiau atminkite, kad jei naudojate „Wordpress“, tai gali sukelti problemų, nes ji jau turi savo „jQuery“ bibliotekos kopiją. Įskiepiai gali prašyti, kad tai būtų įkelta, o „Wordpress“ protingai įkelia „jQuery“ tik vieną kartą, nepaisant to, kiek papildinių to paprašė.

Jei prie savo pridėsite šią eilutę funkcijos.php temos failą, pridėsite dar vieną užklausą, kad jis būtų įtrauktas. Tada „Wordpress“ žinos, ar visada įkelti, jei tema yra aktyvi.

---

---

aviečių pi 3 b+ vs b

wp_enqueue_script('jquery');

Antras dalykas, kurį reikia atsiminti, yra tai, kad pridėjus „jQuery“ naudojant standartinį metodą, jis bus įkeliamas kaip $ . Prieš bet ką, ką darote naudodami „jQuery“, prieš tai bus šis $, pvz .:

$.ajax

arba

---

---

$('#header')

Tačiau kai „jQuery“ įkeliama per „Wordpress“, viskas daroma naudojant kintamąjį „jQuery“, o ne „$“, pavyzdžiui:

jQuery('#header')

Nors tai nėra didžiulė problema rašant savo kodą, tai reiškia, kad žiniatinklyje rastų „jQuery“ fragmentų iškirpimas ir įklijavimas turės būti išversti, kad būtų galima naudoti „jQuery“, o ne $ - tai viskas.

Vienas iš būdų tai padaryti yra apvynioti $ -style kodą taip:

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

Tai užtrunka „jQuery“ kintamasis ir perduoda jį į anoniminę funkciją kaip $ . Kitą kartą paaiškinsiu anonimines funkcijas - kol kas išmoksime pagrindinę „jQuery“ kodo struktūrą.

Norėdami pridėti savo kodą prie HTML ar PHP puslapio, įterpkite viską į žymas, pvz .:


// jQuery code codes here


$ ('selektorius').metodas();

Štai viskas, pavadinime ten. Tai yra pagrindinė vieno „jQuery“ kodo struktūra, skirta manipuliuoti DOM. Lengva, tiesa?

Theselektoriusliepia „jQuery“ rasti tai, kas atitinka šią taisyklę, ir yra tas pats kaip CSS selektoriai (o tada dar keli viršuje). Taigi, kaip ir CSS, stilizuokite visas nuorodas

a { }

Tas pats būtų padaryta naudojant „jQuery“

$('a')

Tai galima padaryti bet kokiems HTML elementams - div, h1, span - nesvarbu. Taip pat galite naudoti CSS klases ir ID, kad būtumėte konkretesni.

Pavyzdžiui, norėdami rasti visas nuorodas su klase „findme“, naudokite:

$('a.findme')

Jums nereikia kiekvieną kartą nurodyti elemento tipo, bet jei tai padarysite, taisyklė bus tik konkretesnė. Galėjai tiesiog pasakyti

$('.findme')

kuris viską derintų su klase Surask mane , nesvarbu, ar tai buvo nuoroda.

Norėdami naudoti pavadintą ID elementą, naudokite # vietoj to pasirašyti. Pagrindinis skirtumas yra tas, kad ID parinkiklis visada pasirenka tik vieną objektą, o klasės parinkėjas gali rasti daugiau nei vieną.

kaip sustabdyti šlamšto skambučius fiksuotojo ryšio linijoje

$('#something')

Iš esmės, jei galite tai padaryti CSS, tai padarys ir „jQuery“. Tiesą sakant, taip pat galite naudoti gana sudėtingus CSS3 stiliaus pseudo parinkiklius, tokius kaip: pirma

$('body p:first')

Kuris patrauktų puslapio pastraipą. Taip pat rasite elementų su tam tikrais atributais. Apsvarstykite šį pavyzdį; norime puslapyje rasti visas nuorodas, nukreipiančias į vidų pasinaudoti ir juos kaip nors paryškinti. Štai kaip galėtume juos rasti:

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

Argi ne šaunu? Na, manau, kad yra.

Kitas jūsų uostas turėtų būti „jQuery“ API dokumentacija parinkėjams . Tai didžiulis sąrašas visų skirtingų tipų selektorių, kuriuos galima naudoti, ir niekas nesitikėtų, kad išmoksite juos visus.

Kita lygties dalis yrametodas- ką daryti su tais dalykais, kai juos visus rasite, bet tai paliksime kitai pamokai. Tačiau jei dabar norite pradėti išbandyti įvairius selektorius, siūlau laikytis šio css metodo. Tam reikia dviejų parametrų - CSS nuosavybės pavadinimas , ir naują vertės priskirti tam turtui. Taigi, norėdami suteikti visoms nuorodoms raudoną fono spalvą, atlikite šiuos veiksmus:

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

Pakankamai paprasta! Nors tai gali būti praktiškai nenaudinga, ji leis lengvai pamatyti visus elementus, esančius naudojant jūsų parinkiklius. Dabar eik ir pasirinkite - DOM laukia tavęs.

Tikiuosi, kad ši pamoka jums buvo naudinga; Aš stengiausi, kad tai būtų kuo paprasčiau ir lengviau suprantama. Nesivaržykite užduoti bet kokių klausimų ar palikti atsiliepimų, tačiau atminkite, kad aš tikrai nesu elitinė jQuery nindzė.

Dalintis Dalintis „Tweet“ Paštu 5 patarimai, kaip perkrauti „VirtualBox Linux“ mašinas

Pavargote nuo prastų virtualių mašinų našumo? Štai ką turėtumėte padaryti, kad padidintumėte „VirtualBox“ našumą.

Skaityti toliau Susijusios temos

• Žiniatinklio kultūra
• Interneto svetainių kūrimas
• „JavaScript“
• Programavimas
• „jQuery“

Apie autorių Jamesas Bruce'as(Paskelbti 707 straipsniai)

Jamesas turi dirbtinio intelekto bakalauro laipsnį ir yra „CompTIA A+“ ir „Network+“ sertifikuotas. Kai jis nėra užsiėmęs aparatūros apžvalgų redaktoriumi, jam patinka LEGO, VR ir stalo žaidimai. Prieš pradėdamas dirbti „MakeUseOf“, jis buvo apšvietimo technikas, anglų kalbos mokytojas ir duomenų centro inžinierius.

Daugiau iš Jameso Bruce'o

Prenumeruokite mūsų naujienlaiškį

Prisijunkite prie mūsų naujienlaiškio, kad gautumėte techninių patarimų, apžvalgų, nemokamų el. Knygų ir išskirtinių pasiūlymų!

Norėdami užsiprenumeruoti, spustelėkite čia