*   >> Lezen Onderwijs artikelen >> tech >> web development

Hoe te gebruiken chaining in jQuery

Als je nieuw bent in jQuery en JavaScript als zodanig, sommige concepten misschien nieuw voor u zijn. Een voorbeeld van zo'n ding is het idee van de ketenen.

U kunt denken aan chaining als een lijst van acties run ene na de andere, maar in plaats van de lancering van hen afzonderlijk ze betrekking hebben op de vorige acties leiden.

Laten we deze code bijvoorbeeld:

 Titel Content 

Laten we een evenement toe te voegen aan de header tag

 $ ('# outerContainer h2'. ) .

Klik (function () {

 //uitvoeren wat actie 
}); 

Dit betekent dat wanneer iemand klikt op de header van de functie hierboven wordt genoemd

 $ ('. #outerContainer h2 ') klik (function (). {
 var parentContainer = $ (dit) .parent (); 
}); 

We starten van door het creëren van een jQuery-object met behulp van deze op onze context te stellen de header (h2). Dit wordt gevolgd door de jQuery functie ouder () de context het #outerContainer element beweegt. Een verwijzing naar die uiteindelijk wordt toegewezen aan de parentContainer variabele.


 $ ('# outerContainer h2'). Click (function () {
 $ (dit) .parent ( ) .addClass ('geklikt') kinderen ('p') te verbergen ();.. 
}); 

Het bovenstaande zou een klasse 'geklikt' toe te voegen aan de #outerContainer en daarna vind alle kinderen paragrafen die het dan zou verbergen. Dit alles in een keten van acties.

Zoals je kunt zien door de kleuren in de afbeelding het kader van de acties in de keten kan worden beïnvloed door bepaalde acties.

Degenen die bewerkingen uitvoeren op een object (hier:: addClass (), of te verbergen ()) en degenen die uw context te verplaatsen naar een ander object kon je de acties in twee soorten gesplitst (hier: ouder (), kinderen ()) .

Om dit nog verder uit te leggen, dit is hoe de keten kan worden uitgebreid.

 $ ('# outerContainer h2') klik (function () {
 $ (dit) .parent () addClass ('geklikt');. 
 $ (dit) .parent () kinderen ('p') te verbergen ();..

}); 

Maar de bovenstaande betekent uiteraard een onnodige opzoeken zoals we vinden de #outerContainer tweemaal

 $ ('# outerContainer h2') klik (function () {
 var parentContainer = $ (dit) .parent ();.. 
 parentContainer .addClass ('geklikt'); 
 parentContainer.children ('p') te verbergen ();. 
}); 

Nu is dit een veel betere prestatie verstandig, maar u kunt eenvoudig zien hoe chaining kan hulp groep acties in logische groepen en

Page   <<       [1] [2] >>
Copyright © 2008 - 2016 Lezen Onderwijs artikelen,https://onderwijs.nmjjxx.com All rights reserved.