Inleiding tot jQuery (deel 2): ​​methoden en functies

Advertentie

Dit maakt deel uit van een doorlopende introductie voor beginners in de jQuery-webprogrammeerserie. Deel 1 behandelde de basis van jQuery jQuery-zelfstudie - Aan de slag: basisprincipes en selectorsVorige week sprak ik 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 ... Lees verder over hoe u het in uw project kunt opnemen, en selectors. In deel 2 gaan we verder met basisgebruik, terwijl we kijken naar enkele methoden die u kunt uitvoeren op die DOM-elementen en wat meer taalprincipes.

$(selector).methode();

Als je je herinnert uit les 1, is dit de basisstructuur van een DOM-manipulatie in jQuery. DOM-manipulatie is natuurlijk niet het enige dat u met jQuery kunt doen, maar het is de gemakkelijkste plaats om mee te beginnen en de meest gebruikelijke, dus daarom hebben we ervoor gekozen.

Om snel samen te vatten, de selector Met een deel van deze instructie kunt u CSS-achtige elementnamen, klassen of ID's gebruiken om delen van de DOM te lokaliseren. Om bijvoorbeeld alle met een klassenaam van

.verborgenzouden we gebruiken:

$ ('div. verborgen')

Het tweede deel van deze vergelijking is de methode om op deze DIV's te spelen zodra we ze hebben gevonden (als ze al bestaan; of ze kunnen slechts één "overeenkomend" item zijn). Onthoud dat jQuery slechts één element retourneert voor ID-selecties, omdat ID's naar unieke items moeten verwijzen. Als je meer dan één van iets wilt hebben, moet het worden gedefinieerd als een klasse in CSS.

Op naar methoden dan; wat kun je eigenlijk doen met elementen van de DOM?

Ten eerste heb ik je voorgesteld aan de .css methode de laatste keer zodat u deze kon gebruiken om te testen. Het formaat is simpel:

.css ('eigenschap', 'waarde');

Alles wat door CSS kan worden gedefinieerd, kan daarom door jQuery worden aangepast - kleuren, transparantie, locatie, grootte - om er maar een paar te noemen. De verandering is onmiddellijk.

Als je liever de CSS-wijzigingen wilt animeren, dan heb ik goed nieuws voor je; er is ook een methode genaamd .animeren (). Het is echter een beetje ingewikkelder:

.animeren ({'property': 'value'}, snelheid);

Als voorbeeld:

.animeren ({'opacity': '0.25', 'height': '100px'}, 'fast');

Op dit punt vraag je je misschien af ​​waar de accolades voor zijn; ze worden een 'letterlijk object' genoemd en worden meestal gebruikt om een ​​lijst van te maken eigendoms-waarde paren, een beetje zoals een geïndexeerde array als je uit andere talen komt. Je zult ze veel gebruiken in jQuery, dus ik zal dit nog een keer zeggen - wen eraan om goed te controleren op gesloten haakjes en beugels!

Uitchecken deze pagina voor veel werkende voorbeelden van de animatie-methode.

Naast het manipuleren van de CSS-eigenschappen van iets, kunt u de inhoud ervan aanpassen met de .text (), .html () en .val () methoden ook (val is voor de inhoud van formulierelementen). Deze methoden werken als beide ingesteldters en krijgenters; als u geen waarde opgeeft, krijgen ze de huidige waarde. Als u een waarde opgeeft, zullen ze de huidige waarde vervangen.

Hier zijn enkele snelle voorbeelden:

Haal de huidige waarde van het naamveld op in het opmerkingenformulier en wijs deze toe aan een variabele comment_name:

var commenter_name = $ (# comment-form #name) .val ();

Stel de waarde van in tot de waarde die is gegrepen naam van commentator:

$ ('span.name'). text (naam van commentator);

Dan hebben we een uitgebreide selectie aan methoden voor het klonen, verplaatsen, invoegen of verwijderen van delen van de DOM. Je fantasie is echt de limiet.

Stel dat u na elke derde een dynamisch beeldblok voor advertenties wilt invoegen alinea in de inhoudskolom, maar u doet het in Javascript, zodat de eerste pagina kan worden geladen schoon gehouden. Klinkt behoorlijk ingewikkeld, toch? Nauwelijks…

$('div # inhoudp: n-kind (3n)').na('');

Om dat op te splitsen, hebben we jQuery gevraagd om:

1. Zoek de div met een ID van "inhoud"
2. Zoek de p's in die div
3. Filter op elke 3e p met behulp van nth-child pseudo selector (daarover meer)
4. Voeg daarna een willekeurige afbeelding in elk bijpassend element

Ik kan onmogelijk alle methoden hier opsommen en dat zou je ook niet willen lezen. Het punt is dat er een methode is om vrijwel alles te doen wat je maar kunt bedenken als het gaat om manipulatie, dus controleer de API voor een die je kunt gebruiken.

Houd er ook rekening mee dat er mogelijk meerdere manieren zijn om iets te doen. Als u bijvoorbeeld het juiste object niet kunt verfijnen tot insertAfter (), denk misschien aan het vinden van de De volgende kind naar beneden en gebruikt insertBefore () in plaats daarvan.

Methode Chaining

Laten we tot slot even kort praten over method chaining, eigenlijk gewoon omdat het geweldig is. Laten we eerst de volgende coderegels bekijken:

$ ('nav # menu'). fadeIn ('snel'); $ ('nav # menu'). addClass ('wordt getoond'); $ ('nav # menu'). css ('margin-right', '10px');

Dat klinkt redelijk genoeg, toch? Maar u kunt hetzelfde doen in slechts één regel:

$ ('nav # menu'). fadeIn ('fast'). addClass ('beingShown'). css ('margin-right', '10px');

Dat doet precies hetzelfde en wordt genoemd methode ketting. Aangezien bijna alle jQuery-methoden zelf een jQuery-object retourneren, kan elk ervan worden ingevoerd in het volgende. Dit betekent minder code - wat altijd een goede zaak is - maar het werkt eigenlijk ook sneller.

Waarom? Nou, elke keer dat je de basis jQuery aanroept $ commando en selector, je vraagt ​​het om door de DOM-boom te zoeken op zoek naar een passend element. Wanneer u methoden aan elkaar koppelt, hoeft u niet steeds terug te verwijzen naar de DOM, omdat deze weet waar ze nu zijn en de methode onmiddellijk kan uitvoeren.

Dat is het voor vandaag, en ik denk dat we waarschijnlijk veel hebben behandeld. Je zou nu gewapend moeten zijn met de mogelijkheid om behoorlijk zware DOM-manipulaties uit te voeren, dus probeer het, combineer je methoden en maak een echte puinhoop van de pagina. Voor nu wil je je scripts in de voettekst plaatsen om de rest van de pagina de tijd te geven om te laden. Volgende week behandelen we het probleem om jQuery alleen dingen te laten doen als alles correct is geladen met gebeurtenissen en het merkwaardige geval van anonieme functies.

Als je net dit bericht bent tegengekomen, ben je waarschijnlijk een of andere webontwikkelaar en wil je misschien al onze WordPress en bloggen artikelen, of zelfs onze Beste WordPress-plug-ins De beste WordPress-plug-ins Lees verder bladzijde.