*   >> Lese Utdanning Artikler >> tech >> web development

Hvordan bruke kjeding i jQuery

Hvis du er ny til jQuery samt Javascript som sådan, kanskje noen begreper være nye for deg. En slik ting er ideen om kjeding.

Du kan tenke på kjeding som en liste over handlinger løpe etter hverandre, men i stedet for å lansere dem separat de forholder seg til de tidligere handlinger resultere.

La oss ta denne koden for eksempel:

 Tittel Innholds 


La oss legge til en hendelse til header tag

 $ ('# outerContainer h2 ". ) .

Klikk (function () {

 //utføre en handling 
}); 

Dette betyr at når noen klikker på overskriften funksjonen ovenfor vil bli kalt

 $ ('. #outerContainer h2 ') klikk (function (). {
 Var parentContainer = $ (denne) .parent (); 
}); 

Vi starter fra ved å opprette en jQuery objekt med dette å sette vår sammenheng som header (h2). Dette etterfølges av den overordnede funksjon jQuery () som beveger den sammenheng til #outerContainer element. En referanse til noe som ender opp med å bli tildelt den parentContainer variabel.


 $ ('# outerContainer h2').

Klikk (function () {

 $ (denne) .parent ( ) .addClass ("klikket") barn ("p") skjule ();.. 
}); 

Den ovenfor ville legge en klasse "klikket" til #outerContainer og etterpå finne alle barn avsnitt som det da ville skjule. Alt dette i en kjede av handlinger.


Som du kan se ved å følge fargene i illustrasjonen sammenheng med handlingene i kjeden kan påvirkes av visse handlinger.

Du kan dele handlingene inn i to typer: de som utfører operasjoner på et objekt (her: addClass () eller skjule ()) og de som flytter inn kontekst til en annen gjenstand (her: ordnede (), eller barn ()) .

For å forklare dette enda lenger, dette er hvordan kjeden kunne utvides.

 $ ('# outerContainer h2') klikk (function () {
 $ (denne) .parent () addClass ("klikket");. 
 $ (denne) .parent () barn («P») hide ();..

}); 

Men det ovenfor selvsagt betyr en unødvendig oppslag som vi finn #outerContainer to ganger

 $ ('# outerContainer h2') klikk (function () {
 Var parentContainer = $ (denne) .parent ();.. 
 parentContainer .addClass ("klikket"); 
 parentContainer.children ("p") hide ();. 
}); 

Nå er dette en mye bedre ytelse messig, men du kan lett se hvor kjeding kan hjelp gruppe handlinger i logiske grupper og spare plass, samt lage din kode mye mer lesbar.



Copyright © 2008 - 2016 Lese Utdanning Artikler,https://utdanning.nmjjxx.com All rights reserved.