Home-theater-designers
Vorige week heb ik het gehad over hoe belangrijk jQuery is voor elke moderne webontwikkelaar en waarom het geweldig is. Deze week denk ik dat het tijd is dat we onze handen vuil maken met wat code en leren hoe we jQuery daadwerkelijk kunnen gebruiken in onze projecten.
Ik zeg dit nu - je hoeft geen Javascript te leren om jQuery te gebruiken. Het is waarschijnlijk het beste als je jQuery ziet als een evolutie van Javascript - een betere manier om het te doen - dan gewoon een bibliotheek die functionaliteit toevoegt. Eventueel Javascript dat u nodig heeft, wordt onderweg opgehaald. Er wordt echter aangenomen dat je als webontwikkelaar een behoorlijk goede kennis hebt van HTML en CSS (en hier is onze handige gratis xHTML-gids als dat niet het geval is!).
Documentobjectmodel
jQuery gaat helemaal over het doorlopen en manipuleren van de OORDEEL - de NS ocument OF bject m odel. De DOM is een hiërarchische boomweergave van de pagina, gebouwd door browsers na het inlezen van alle HTML-code. In jQuery gebruiken we terminologie zoals ouder , kinderen , en broers of zussen vrij vaak, dus u zou een idee moeten hebben van wat dit betekent met betrekking tot de DOM.
Dit eenvoudige diagram vanw3schoolslegt de begrippen redelijk goed uit. Je zou moeten kunnen zien dat de ouder van het element is , terwijl de element heeft een onmiddellijkebroer of zus.
Aan de slag: jQuery toevoegen
De nieuwste versie van jQuery is ongeveer 91 KB gecomprimeerd, dus het voegt ongeveer hetzelfde paginagewicht toe als een kleine foto of screenshot. De eenvoudigste manier om jQuery in uw project op te nemen, is door een verwijzing naar de meest recente gehoste versie in de koptekst van uw site te plakken:
Houd er echter rekening mee dat als u Wordpress gebruikt, dit problemen kan veroorzaken omdat het al een eigen exemplaar van de jQuery-bibliotheek heeft. Plug-ins kunnen vragen om dit te laden, en Wordpress zal jQuery intelligent maar één keer laden, ongeacht hoeveel plug-ins erom hebben gevraagd.
Als u de volgende regel toevoegt aan uw functies.php theme-bestand, voeg je nog een verzoek toe om het op te nemen. Wordpress weet dan dat het altijd moet worden geladen als je thema actief is.
hoe een computercamera te hacken
wp_enqueue_script('jquery');Het tweede dat u in gedachten moet houden, is dat wanneer jQuery wordt toegevoegd met de standaardmethode, het wordt geladen als $ . Alles wat u met jQuery doet, wordt voorafgegaan door deze $, zoals:
$.ajaxof
$('#header')Wanneer jQuery echter via Wordpress wordt geladen, wordt alles gedaan met behulp van de jQuery-variabele in plaats van $, dus bijvoorbeeld:
jQuery('#header')Hoewel dit geen groot probleem is bij het schrijven van uw eigen code, betekent het wel dat het knippen en plakken van jQuery-fragmenten die u op internet vindt, vertaald moeten worden om jQuery te gebruiken in plaats van $ - dat is alles.
Een manier om dit te omzeilen is om $-stijl code die je vindt als volgt in te pakken:
(function($) {
// paste $ code in here
})(jQuery);Dit kost de jQuery variabele en geeft het door aan een anonieme functie als $ . Ik zal de volgende keer anonieme functies uitleggen - laten we nu de basisstructuur van een stukje jQuery-code leren.
Om uw code aan een HTML- of PHP-pagina toe te voegen, plaatst u alles tussen tags, zoals:
// jQuery code codes here
$ ('selector').methode();
Dat is het, in de titel daarboven. Dat is de basisstructuur van een enkel stuk jQuery-code om de DOM te manipuleren. Makkelijk, toch?
Deselectorvertelt jQuery om dingen te vinden die aan deze regel voldoen, en is hetzelfde als CSS-selectors (en nog wat meer bovenaan). Dus, net als in CSS zou je alle links stylen met
a { }Hetzelfde zou gedaan worden in jQuery als
$('a')Dit kan gedaan worden voor alle HTML-elementen - div, h1, span - wat dan ook. U kunt ook CSS-klassen en ID's gebruiken om specifieker te zijn.
Om bijvoorbeeld alle links met de klasse 'findme' te vinden, gebruikt u:
$('a.findme')U hoeft niet elke keer het type element op te geven, maar als u dat wel doet, wordt de regel gewoon specifieker. Je had gewoon kunnen zeggen
$('.findme')die alles zou matchen met de klas vind me , of het nu een link was of niet.
Om een benoemd ID-element te gebruiken, gebruikt u de # teken in plaats daarvan. Het belangrijkste verschil hier is dat een ID-selector slechts één object zal selecteren, terwijl een klassenselector er meer dan één kan vinden.
hoe wijzig ik het standaard gmail-account?
$('#something')Kortom, als je het in CSS kunt doen, zal jQuery het ook doen. In feite kun je ook een aantal vrij complexe pseudo-selectors in CSS3-stijl, zoals :first
$('body p:first')Die de alinea van de pagina zou pakken. Je vindt ook elementen met bepaalde attributen. Beschouw dit voorbeeld; we willen alle links op de pagina vinden die intern verwijzen naar gebruikmaken van en markeer ze op de een of andere manier. Hier is hoe we ze konden vinden:
$('a[href*='makeuseof']')Is dat niet cool? Nou, ik denk van wel.
Uw volgende aanloophaven zou de . moeten zijn jQuery API-documentatie voor selectors . Het is een enorme lijst van alle verschillende soorten selectors die beschikbaar zijn om te gebruiken, en niemand zou verwachten dat je ze allemaal leert.
Het volgende deel van de vergelijking ismethode- wat te doen met die dingen als je ze allemaal hebt gevonden - maar dat laten we voor de volgende les. Als je nu wilt beginnen met het uitproberen van verschillende selectors, raad ik je aan om je aan de volgende css-methode te houden. Hiervoor zijn twee parameters nodig - een CSS eigendomsnaam , en een nieuwe waarde toe te wijzen aan dat pand. Dus om alle links een rode achtergrondkleur te geven, zou je het volgende doen:
$('a').css('background-color','red');Simpel genoeg! Hoewel dit misschien niet praktisch is, kunt u gemakkelijk alle elementen zien die zich met uw selectors bevinden. Ga nu verder en selecteer - de DOM wacht op je.
Ik hoop dat deze tutorial nuttig voor je is geweest; Ik heb geprobeerd het zo eenvoudig en begrijpelijk mogelijk te maken. Voel je vrij om al je vragen te stellen of feedback te geven, maar houd er rekening mee dat ik zeker geen elite jQuery ninja ben.
Deel Deel Tweeten E-mail 5 tips om uw VirtualBox Linux-machines een boost te gevenMoe van de slechte prestaties van virtuele machines? Dit is wat u moet doen om uw VirtualBox-prestaties te verbeteren.
Lees volgende Gerelateerde onderwerpen- Webcultuur
- Webontwikkeling
- JavaScript
- Programmeren
- jQuery
James heeft een BSc in Artificial Intelligence en is CompTIA A+ en Network+ gecertificeerd. Als hij het niet druk heeft als redacteur van hardwarerecensies, geniet hij van LEGO, VR en bordspellen. Voordat hij bij MakeUseOf kwam, was hij lichttechnicus, leraar Engels en datacenteringenieur.
Meer van James BruceAbonneer op onze nieuwsbrief
Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!
Klik hier om je te abonneren