Delen:
Inleiding tot jQuery (deel 2) Methoden en functies
Dit maakt deel uit van een doorlopende introductie voor beginners van jQuery-webprogrammaseries. Deel 1 behelsde de basisprincipes van jQuery jQuery Tutorial - Aan de slag: Basics & Selectors jQuery Tutorial - Aan de slag: Basics & Selectors Vorige week sprak ik over hoe belangrijk jQuery is voor elke moderne webontwikkelaar en waarom het geweldig is. Deze week denk ik dat het tijd wordt dat we onze handen vuil maken met een code en leren hoe ... Lees meer over hoe je het in je project kunt opnemen, en selectors. In deel 2 gaan we verder met het basisgebruik, terwijl we kijken naar enkele methoden die u kunt uitvoeren op die DOM-elementen en wat meer taalkundige basisprincipes.
$ (Selector) .method ();
Als je je herinnert uit les 1, is dit de basisstructuur van een DOM-bewerking in jQuery. DOM-manipulatie is niet het enige dat u met jQuery kunt doen natuurlijk, maar het is de gemakkelijkste plaats om vanaf te beginnen en de meest gebruikelijke, dus daarom hebben we ervoor gekozen.
Om snel samen te vatten, kunt u in het selectorgedeelte van deze verklaring CSS-achtige elementnamen, klassen of ID's gebruiken om delen van de DOM te zoeken. Bijvoorbeeld om alle te pakken Het tweede deel van deze vergelijking is de methode om uit te voeren op deze DIV's zodra we ze hebben gevonden (als ze al bestaan, of ze kunnen er slechts één zijn) “passen bij” item). Onthoud dat jQuery slechts één element zal retourneren voor ID-selecties, aangezien id's naar unieke items moeten verwijzen. Als u meer dan één van iets wilt hebben, moet dit worden gedefinieerd als een klasse in CSS. Op naar methoden dan; wat kun je dan toch doen met elementen van de DOM? Ten eerste heb ik je voorgesteld aan de .css methode de vorige keer, zodat u deze kon gebruiken om te testen. Het formaat is eenvoudig: Alles dat door CSS kan worden gedefinieerd, kan daarom worden aangepast door jQuery - kleuren, transparantie, locatie, grootte - om er maar een paar te noemen. De verandering is onmiddellijk. Als je liever de CSS-wijzigingen animeert, heb ik goed nieuws voor je; er is ook een methode genaamd .animeren (). Het is echter een beetje ingewikkelder: Als voorbeeld: Op dit punt vraag je je wellicht af waar de accolades voor zijn; ze heten een “object letterlijk”, en worden meestal gebruikt om een lijst met 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 er aan om goed te controleren op gesloten haakjes en beugels! Bekijk deze pagina voor veel werkende voorbeelden van de animatiemethode. Naast het manipuleren van de CSS-eigenschappen van iets, kunt u de inhoud ervan aanpassen met de .tekst (), .html () en .val () methoden ook (val is voor de inhoud van formulierelementen). Deze methoden werken als beide reeksters en krijgenters; als u geen waarde opgeeft, krijgen ze de huidige waarde. Als u een waarde opgeeft, wordt de huidige waarde vervangen. Hier zijn enkele snelle voorbeelden: Haal de huidige waarde van het naamveld op in het reactieformulier en wijs het toe aan een variabele comment_name: Stel de waarde in van om de waarde te grijpen COMMENTER_NAME: Dan hebben we een uitgebreide selectie van methoden voor het klonen, verplaatsen, invoegen of verwijderen van delen van de DOM. Je verbeelding is echt de limiet. Stel dat u na elke 3de alinea in de inhoudskolom een advertentieblok dynamisch wilt invoegen, maar dat u het in Javascript doet, zodat de eerste pagina kan worden leeggemaakt. Klinkt behoorlijk ingewikkeld, toch? Nauwelijks… Als we dat onderbreken, hebben we jQuery gevraagd om: Ik kan hier onmogelijk alle methoden opsommen en dat zou je ook niet willen lezen. Het punt is, er is een methode om vrijwel alles te doen wat je maar kunt bedenken als het gaat om manipulatie, dus controleer de API voor degene die je kunt gebruiken. Houd er ook rekening mee dat er mogelijk meer dan één manier is om iets te doen. Als u bijvoorbeeld het juiste object niet kunt verfijnen tot InsertAfter (), misschien denken over het vinden van de volgende kind naar beneden en gebruiken insertBefore () in plaats daarvan. Tenslotte vandaag, laten we een kort woordje hebben over method chaining, eigenlijk alleen maar omdat het geweldig is. Laten we eerst de volgende coderegels bekijken: Dat klinkt redelijk genoeg, toch? Maar u kunt hetzelfde doen op slechts één regel: Dat doet precies hetzelfde, en wordt genoemd method chaining. Omdat bijna alle jQuery-methoden zelf een jQuery-object retourneren, kan elk van hen de volgende feed doorsturen. Dit betekent minder code - wat altijd een goede zaak is - maar het werkt eigenlijk ook sneller. Waarom? Welnu, elke keer dat u het basisjQuery aanroept $ commando en selector, je vraagt het om door de DOM-boom te zoeken op zoek naar een passend element. Wanneer u methodes koppelt, hoeft u niet steeds terug te blijven verwijzen naar de DOM, omdat deze weet waar ze nu zijn en de methode direct kan uitvoeren. Dat is het voor vandaag en ik denk dat we waarschijnlijk heel veel hebben behandeld. Je zou nu gewapend moeten zijn met de mogelijkheid om behoorlijk zware DOM-manipulaties uit te voeren, dus probeer het eens, keten je methoden samen en maak een echte rommel van de pagina. Voorlopig wilt u uw scripts in het voettekst plaatsen om de rest van de pagina de tijd te geven om te laden. Volgende week gaan we het probleem van het maken van jQuery alleen behandelen als alles goed is geladen met gebeurtenissen en het merkwaardige geval van anonieme functies. Als je zojuist dit bericht bent tegengekomen, ben je waarschijnlijk een webontwikkelaar van een bepaald type en wil je misschien al onze WordPress- en blogartikelen bekijken, of zelfs onze Beste WordPress Plug-in-pagina.$ ( 'Div.hidden').css ( 'eigendom', 'waarde');.animeren ( 'eigenschap': 'value', snelheid);.animeren ( 'ondoorzichtigheid': '0.25', 'height': '100px' 'snelle');var commenter_name = $ (# comment-form #name) .val ();. $ ( 'Span.name') tekst (COMMENTER_NAME);$ ('div # content p: nth-child (3n)'). after ('
');
Methode Keten
$ ( 'Nav # menu') FadeIn ( 'snel').; $ ( 'Nav # menu') addClass ( 'beingShown.'); $ ( 'Nav # menu') css ( 'margin-right', '10px.');$ ( 'Nav # menu') FadeIn ( 'snel') addClass ( 'beingShown') css ( 'margin-right', '10px')...;