Pagājušajā nedēļā es runāju par to, cik svarīga jQuery ir jebkuram mūsdienu tīmekļa izstrādātājam un kāpēc tā ir lieliska. Šonedēļ es domāju, ka ir pienācis laiks sasmērēt rokas ar kādu kodu un uzzināt, kā mūsu projektos faktiski izmantot jQuery.

Es teikšu tagad - lai izmantotu jQuery, jums nav jāiemācās Javascript. Iespējams, vislabāk, ja domājat, ka jQuery ir Javascript evolūcija - labāks veids, kā to izdarīt -, nevis vienkārši bibliotēka, kas papildina funkcionalitāti. Jebkurš jums nepieciešamais Javascript tiks paņemts ceļā. Tomēr tiek pieņemts, ka kā tīmekļa izstrādātājs jums ir diezgan labas zināšanas par HTML un CSS (un šeit ir noderīga bezmaksas xHTML rokasgrāmata, ja nē!).

---

---

Dokumenta objekta modelis

jQuery mērķis ir pārvarēt un manipulēt ar SPRIEDUMS - D dokuments VAI bject M odel. DOM ir lapas hierarhisks koka attēlojums, ko pārlūkprogrammas izveidoja pēc visa HTML koda nolasīšanas. Programmā jQuery mēs izmantosim līdzīgu terminoloģiju vecāks , bērniem , un brāļi un māsas diezgan bieži, tāpēc jums vajadzētu būt priekšstatam par to, ko tas nozīmē saistībā ar DOM.

Šī vienkāršā diagramma now3skolasdiezgan labi izskaidro jēdzienus. Jums vajadzētu redzēt, ka elementa vecāks ir, kamēr elementam ir tūlītēja

brālis.

Darba sākšana: jQuery pievienošana

Jaunākā jQuery versija ir aptuveni 91 KB saspiesta, tāpēc tā pievieno aptuveni tādu pašu lapas svaru kā neliela fotogrāfija vai ekrānuzņēmums. Vienkāršākais veids, kā savā projektā iekļaut jQuery, ir vietnes galvenes sadaļā ielīmēt atsauci uz jaunāko mitināto versiju.

Tomēr ņemiet vērā, ka, ja izmantojat Wordpress, tas var radīt problēmas, jo tai jau ir sava jQuery bibliotēkas kopija. Spraudņi var pieprasīt, lai tas tiktu ielādēts, un Wordpress saprātīgi ielādēs jQuery tikai vienu reizi neatkarīgi no tā, cik spraudņi to ir lūguši.

Ja savai rindai pievienojat šādu rindiņu funkcijas.php motīvu failu, jūs pievienosit vēl vienu pieprasījumu, lai tas tiktu iekļauts. WordPress zinās to vienmēr ielādēt, ja jūsu motīvs ir aktīvs.

---

---

kāpēc manā telefonā rakstīts volts

wp_enqueue_script('jquery');

Otra lieta, kas jāpatur prātā, ir tāda, ka, pievienojot jQuery, izmantojot standarta metodi, tā tiks ielādēta kā $ . Viss, ko darāt ar jQuery, būs pirms šī $, piemēram:

$.ajax

vai

---

---

$('#header')

Tomēr, kad jQuery tiek ielādēts, izmantojot Wordpress, viss tiek darīts, izmantojot mainīgo jQuery, nevis $, piemēram:

jQuery('#header')

Lai gan šī nav milzīga problēma, rakstot savu kodu, tas nozīmē, ka tīmeklī atrodamo jQuery fragmentu izgriešana un ielīmēšana būs jātulko, lai izmantotu jQuery, nevis $ - tas ir viss.

Viens veids, kā to novērst, ir apvilkt $ -style kodu, kas atrodams šādi:

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

Tas aizņem jQuery mainīgo un nodod to anonīmā funkcijā kā $ . Nākamreiz es paskaidrošu anonīmās funkcijas - pagaidām iemācīsimies mazliet jQuery koda pamatstruktūru.

Lai pievienotu kodu HTML vai PHP lapai, ievietojiet tagos visu, piemēram:


// jQuery code codes here


$ ('atlasītājs').metodi();

Tas tā, virsrakstā tur augšā. Tā ir viena jQuery koda pamata struktūra, lai manipulētu ar DOM. Viegli, vai ne?

Theatlasītājsliek jQuery atrast lietas, kas atbilst šim noteikumam, un tas ir tas pats, kas CSS atlasītāji (un tad vēl daži virsū). Tātad, tāpat kā CSS, jūs veidotu visas saites ar

a { }

Tas pats būtu jQuery kā

$('a')

To var izdarīt jebkuram HTML elementam - div, h1, span - neatkarīgi. Konkrētāk varat izmantot arī CSS klases un ID.

Piemēram, lai atrastu visas saites ar klasi 'findme', izmantojiet:

$('a.findme')

Jums katru reizi nav jānorāda elementa veids, bet, ja jūs to darāt, tas vienkārši padara noteikumu konkrētāku. Jūs varētu vienkārši teikt

$('.findme')

kas viss atbilstu klasei Atrodi mani neatkarīgi no tā, vai tā bija saite.

Lai izmantotu nosauktu ID elementu, izmantojiet # tā vietā parakstīties. Galvenā atšķirība šeit ir tāda, ka ID atlasītājs vienmēr izvēlēsies tikai vienu objektu, savukārt klases atlasītājs var atrast vairāk nekā vienu.

kur ir starpliktuve android tālrunī

$('#something')

Būtībā, ja jūs varat darīt CSS, tad arī jQuery to darīs. Faktiski jūs varat arī izmantot dažus diezgan sarežģītus CSS3 stila pseido selektorus, piemēram: pirmkārt

$('body p:first')

Kas satvertu lapas rindkopu. Jūs atradīsit arī elementus ar noteiktiem atribūtiem. Apsveriet šo piemēru; mēs vēlamies atrast visas lapas saites, kas norāda uz iekšēju izmantot un kaut kādā veidā tos izcelt. Lūk, kā mēs varētu tos atrast:

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

Vai tas nav forši? Nu, es domāju, ka tā ir.

Jūsu nākamajai piestāšanas ostai vajadzētu būt jQuery API dokumentācija atlasītājiem . Tas ir milzīgs saraksts ar dažādiem atlasītājiem, kas pieejami lietošanai, un neviens negaida, ka jūs tos visus iemācīsities.

Nākamā vienādojuma daļa irmetodi- ko darīt ar šīm lietām, kad esat tās visas atradis, bet mēs to atstāsim nākamajai nodarbībai. Tomēr, ja vēlaties sākt izmēģināt dažādus atlasītājus, es iesaku pieturēties pie šādas css metodes. Tam nepieciešami divi parametri - CSS īpašuma nosaukums , un jaunu vērtību piešķirt šim īpašumam. Tātad, lai visām saitēm piešķirtu sarkanu fona krāsu, rīkojieties šādi:

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

Pietiekami vienkārši! Lai gan tas var nebūt praktiski noderīgs, tas ļaus jums viegli redzēt visus elementus, kas atrodas, izmantojot atlasītājus. Tagad dodieties uz priekšu un izvēlieties - DOM jūs gaida.

Es ceru, ka šī apmācība jums bija noderīga; Esmu mēģinājis to padarīt pēc iespējas vienkāršāku un vieglāk saprotamu. Jūtieties brīvi uzdot visus jautājumus vai atstāt atsauksmes, taču ņemiet vērā, ka es noteikti neesmu elites jQuery ninja.

Kopīgot Kopīgot Čivināt E -pasts 5 padomi, kā uzlādēt VirtualBox Linux iekārtas

Vai esat noguris no virtuālo mašīnu piedāvātās sliktās veiktspējas? Lūk, kas jums jādara, lai uzlabotu VirtualBox veiktspēju.

Lasīt Tālāk Saistītās tēmas

• Tīmekļa kultūra
• Web izstrāde
• JavaScript
• Programmēšana
• jQuery

Par autoru Džeimss Brūss(Publicēti 707 raksti)

Džeimsam ir mākslīgā intelekta bakalaura grāds, un viņam ir CompTIA A+ un Network+ sertifikāts. Kad viņš nav aizņemts kā aparatūras pārskatu redaktors, viņam patīk LEGO, VR un galda spēles. Pirms pievienošanās MakeUseOf viņš bija gaismas tehniķis, angļu valodas skolotājs un datu centra inženieris.

Vairāk no Džeimsa Brūsa

Abonējiet mūsu biļetenu

Pievienojieties mūsu informatīvajam izdevumam, lai iegūtu tehniskus padomus, pārskatus, bezmaksas e -grāmatas un ekskluzīvus piedāvājumus!

Noklikšķiniet šeit, lai abonētu