I nettutvikling er det ofte påkrevd å finne eller velge visse HTML -elementer for å manipulere dem. For å gjøre det har du krysset gjennom DOM -treet og velger et bestemt element. JQuery gir en enorm liste over metoder som brukes til å krysse gjennom DOM -treet. Her har vi vervet disse jQuery -metodene.

1. barn () Metode
2. Hver () -metode
3. finn () metode
4. First () Metode
5. Neste () -metode
6. Foreldre () -metode
7. Forrige () Metode
8. Søsken () -metoden

Disse ovennevnte metodene er forklart i detalj nedenfor.

barn () Metode

For å hente alle de umiddelbare barna til et spesifisert element, brukes jQuery Children () -metoden. Denne metoden krysser bare ett nivå nedover DOM -treet.

Syntaks

Filter er en valgfri parameter som brukes til å spesifisere et element for å begrense søket etter barn.

Eksempel

Anta at du vil hente de direkte barna til et bestemt element ved hjelp av JQuery Children () -metoden. Her er et eksempel på å gjøre det.

Html

UL (direkte foreldre)

• Li (direkte barn av UL)
  Span (barnebarn av UL)
  

Vi har laget et element der a

elementet er nestet. Lenger inne i
element
• , og elementer er nestet.

  CSS

  .barn *
  Display: Block;
  Grense: 2px solid grå;
  Farge: grå;
  polstring: 5px;
  Margin: 15px;
  

  Hele kroppen har fått en viss stil ved å bruke CSS.

  jQuery

  $ (dokument).klar (funksjon ()
  $ ("UL").barn ().CSS ("Color": "Blue", "Border": "2px Solid Blue");
  );

  Her brukes barna () metoden for å hente de direkte barna til

  element. Foruten denne er CSS () -metoden lenket til Children () -metoden for å fremheve barna til
  .

  Produksjon

  Det direkte barnet til

  har blitt hentet vellykket.

  Hver () -metode

  For å spesifisere en funksjon som skal utføres for hver av de spesifiserte elementene, brukes hver () metoden.

  Syntaks

  $ (velger).Hver (funksjon (indeks, element))
  • Funksjonen inne i .Hver () -metode er en nødvendig parameterfunksjon som vil bli utført for hvert av de spesifiserte elementene.
  • Indeksparameter spesifiserer valgets plassering.
  • Elementparameter refererer til det nåværende elementet.

  Eksempel

  Anta at du vil endre teksten for hver av

  element ved bruk av jQuery hver () metode.

  Html

  Første avsnitt.

  
  

  Andre avsnitt.

  
  

  Tredje avsnitt.

  
  Endre tekst i hvert avsnitt

  I HTML -koden ovenfor har vi opprettet tre

  elementer og en knapp.

  jQuery

  $ (dokument).klar (funksjon ()
  var i = 0;
  $ ("knapp").klikk (funksjon ()
  $ ("P").hver (funksjon ()
  $ (dette).tekst ('avsnitt $ i+= 1')
  );
  );
  );

  Her bruker vi hver () -metoden for å endre tekst for hver av

  elementer. "Denne" parameteren refererer til det nåværende elementet, som i dette tilfellet er

  element.

  Produksjon

  Teksten endres hver gang du klikker på knappen.

  Hver () -metoden fungerer som den skal.

  finn () metode

  For å finne alle etterfølgere av et element, brukes Find () -metoden. Alle etterfølgere av et element inkluderer; barn, barnebarn, oldebarn og så videre.

  Syntaks

  $ (velger).Finn (filter)

  Filter er en nødvendig parameter som refererer til enten en velger-, element- eller jQuery -objekt hvis barn er å finne.

  Eksempel

  Anta at du vil hente barnet, barnebarnet og oldebarnet til et element. Slik gjør du det.

  Html

  
  div (besteforeldre)
  
  UL (direkte foreldre)
  
  • Li (barn)
    Span (barnebarn)
    Span (oldebarn)
    
    
  
  
  
  
  

  I koden ovenfor opprettes et element og inne i at vi har nestet en

  element. Videre har vi nestet
  • og elementer inne i
    element. Elementet hekker videre et element. Flere hekkende ble gjort for å gjøre arbeidet med Find () -metoden klart.

    CSS

    .Main *
    Display: Block;
    Grense: 2px solid grå;
    Farge: grå;
    polstring: 5px;
    Margin: 15px;
    

    Vi stylet klassen “Main” ved hjelp av CSS. Denne klassen er tilordnet kroppen.

    jQuery

    $ (dokument).klar (funksjon ()
    $ ("UL").finn ("li, span").CSS ("Color": "Blue", "Border": "2px Solid Blue");
    );

    Her bruker vi Find () -metoden for å finne

    • og elementer i
      element og senere bruke litt CSS -styling for å fremheve de hentet etterfølgere.

      Produksjon

      Etterfølgerne av

      elementet ble funnet.

      First () Metode

      Den første () metoden henter det første nestede elementet inne i et spesifisert element.

      Syntaks

      $ (velger).først()

      Eksempel

      Anta at du vil hente det første elementet som er inne i en

      element. Følg koden nedenfor.

      Html

      Metode til Traverse Dom Elementer ved hjelp av jQuery

      I ovennevnte HTML -kode har vi opprettet en

      element og nestet to elementer i det

      element.

      jQuery

      $ (dokument).klar (funksjon ()
      $ ("H1 Span").først().CSS ("bakgrunnsfarge", "rosa");
      );

      Her har vi brukt den første () metoden for å finne det første elementet i

      element, dessuten brukt CSS () -metode for å fremheve det hentede elementet.

      Produksjon

      Det første elementet i

      elementet er fremhevet i rosa.

      Neste () -metode

      For å finne den tilstøtende søsken av et spesifisert element, brukes neste () metode.

      Syntaks

      $ (velger).Neste (filter)

      Filter er en valgfri parameter som brukes til å spesifisere et element for å begrense søket etter den tilstøtende søsken.

      Eksempel

      Her har vi illustrert arbeidet med jQuery Next () -metoden.

      Html

      Dette er en overskrift

      
      

      Dette er første avsnitt.

      
      

      Dette er andre avsnitt.

      Her har vi opprettet en

      element og to

      elementer.

      jQuery

      $ (dokument).klar (funksjon ()
      $ ("H1").Neste ().CSS ("bakgrunnsfarge", "rosa");
      )

      I koden ovenfor bruker vi den neste () metoden for å finne den tilstøtende søsken av

      element.

      Produksjon

      Den tilstøtende søsken av

      elementet ble hentet vellykket.

      Foreldre () -metode

      For å finne den direkte forelderen til et element, brukes foreldremetoden (). Det er en innebygd jQuery-funksjon som bare går ett nivå opp det spesifiserte elementet og henter den umiddelbare overordnet til det elementet.

      Syntaks

      $ (velger).overordnet (filter)

      Filter er en valgfri parameter som brukes til å begrense søket etter overordnet element ved å spesifisere et velgeruttrykk.

      Eksempel

      Anta at du vil hente den direkte forelderen til et element som er til stede i en

      element som videre er en del av et element.

      Html

      
      div (jeg er oldeforeldre)
      

      UL (jeg er besteforeldre)
      
      • Li (jeg er en direkte forelder)
        spenn
        
      
      

      
      
      

      Det er totalt fire elementer generert i koden ovenfor; ,

      ,
      • , og . Observerer deres hierarki,
      • Element blir sett på som en direkte forelder av elementet,
        er besteforeldre til elementet, og er oldeforeldrene fordi alle elementene er nestet inne i elementet.

        CSS

        .Main *
        Display: Block;
        Grense: 2px solid grå;
        Farge: grå;
        polstring: 5px;
        Margin: 15px;
        

        Ved hjelp av CSS har vi gitt litt stil til kroppen.

        jQuery

        $ (dokument).klar (funksjon ()
        $ ("Span").foreldre ().CSS ("Color": "Blue", "Border": "2px Solid Blue");
        );

        Vi har brukt foreldremetoden () på elementet og lenket også CSS () -metoden til den for å fremheve den direkte forelderen til elementet og bekrefte at overordnede element er tilgjengelig med suksess.

        Produksjon

        Foreldreelementet får tilgang til vellykket.

        Forrige () Metode

        JQuery Prev () -metoden brukes til å hente den forrige tilstøtende søsken av et spesifisert element. Denne metoden krysser på en tilbakevendende måte i DOM -treet.

        Syntaks

        $ (velger).Forrige (filter)

        Filter er en valgfri parameter som brukes til å spesifisere et element for å begrense søket etter forrige tilstøtende søsken.

        Eksempel

        Anta at du vil hente den forrige tilstøtende søsken av et element. Bruk følgende kode.

        Html

        Overskrift 1

        
        

        Overskrift 2

        
        

        Noe avsnitt.

        I koden ovenfor har vi laget tre elementer som er;

        ,

        , og

        .

        jQuery

        $ (dokument).klar (funksjon ()
        $ ("H2").tidligere ().CSS ("bakgrunnsfarge", "SkyBlue");
        )

        Vi har brukt JQuery Prev () -metoden for å hente den forrige tilstøtende søsken av

        element.

        Produksjon

        Den forrige tilstøtende søsken av

        er

        .

        Søsken () -metoden

        For å hente alle søsknene til et spesifisert element, brukes søsken () -metoden. Denne metoden krysser bakover og fremover i DOM -treet for å hente alle søsknene til et element.

        Syntaks

        $ (velger).søsken (filter)

        Filter er en valgfri parameter som brukes til å spesifisere et element for å begrense søket etter søsknene.

        Eksempel

        Dette eksemplet demonstrerer arbeidet med søsken () -metoden.

        Html

        
        

        UL (foreldre)
        
        • Li (den forrige tilstøtende søsken)
        
        
        • li
        
        
        • Li (neste søsken)
        
        
        • Li (neste søsken)
        
        

        
        

        I koden ovenfor har vi laget et element og nestet en

        element inne i den diven. Dessuten har vi nestet noen
        • elementer inne i
          element.

          CSS

          .div *
          Display: Block;
          Grense: 2px solid grå;
          Farge: grå;
          polstring: 5px;
          Margin: 15px;
          

          Elementet har fått en viss stil ved hjelp av CSS.

          jQuery

          $ (dokument).klar (funksjon ()
          $ ("Li.søsken ").søsken ().CSS ("Color": "Blue", "Border": "2px Solid Blue");
          );

          Ved hjelp av JQuery Siblings () -metoden skal vi hente alle søsknene til

          • element. For å fremheve søsknene har vi dessuten brukt CSS () -metode.

            Produksjon

            Søsken () -metoden fungerer som den skal.

            Konklusjon

            JQuery gir et stort utvalg av metoder som brukes til å krysse DOM -elementer for å krysse DOM -elementer. Disse metodene er; Children () Metode, hver () Metode, Find () Metode, First () Method, Next () Method, Parent () Method, Prev () Metode og søsken () Metode. Alle disse metodene tjener sitt eget formål som blir forklart i dybden i denne guiden sammen med hjelp av relevante eksempler.