W tworzeniu stron internetowych często konieczne jest znalezienie lub wybór niektórych elementów HTML w celu ich manipulowania. W celu tego przechodzisz przez drzewo DOM i wybierz konkretny element. JQuery zapewnia ogromną listę metod używanych do przemieszczania się przez drzewo DOM. Tutaj zaciągnęliśmy te metody jQuery.

1. Metoda dzieci ()
2. metoda ()
3. metoda znajdź ()
4. First () metoda
5. Metoda następny ()
6. Metoda nadrzędna ()
7. Metoda preval ()
8. Metoda rodzeństwa ()

Te wyżej wymienione metody zostały szczegółowo wyjaśnione poniżej.

Metoda dzieci ()

W celu uzyskania wszystkich bezpośrednich dzieci z określonego elementu stosowana jest metoda JQuery Children (). Ta metoda przemierza tylko jeden poziom w dół drzewa DOM.

Składnia

Filtr jest opcjonalnym parametrem używanym do określenia elementu w celu ograniczenia poszukiwania dzieci.

Przykład

Załóżmy, że chcesz pobrać bezpośrednie dzieci pewnego elementu za pomocą metody jQuery Children (). Oto przykład tego.

Html

UL (bezpośredni rodzic)

• Li (Direct Child of Ul)
  Span (wnuka UL)
  

Stworzyliśmy element, w którym

element jest zagnieżdżony. Dalej w środku
element
• , a elementy są zagnieżdżone.

  CSS

  .dzieci *
  Blok wyświetlacza;
  granica: 2px stały szary;
  Kolor: szary;
  Wyściółka: 5px;
  Margines: 15px;
  

  Całe ciało otrzymało pewien styl, używając CSS.

  JQuery

  $ (dokument).gotowy (funkcja ()
  $ („ul”).dzieci().css („color”: „niebieski”, „border”: „2px solid blue”);
  );

  Tutaj metoda dzieci () służy do pobierania bezpośrednich dzieci

  element. Poza tym metoda CSS () jest przykuta do metody dzieci () w celu podkreślenia dzieci
  .

  Wyjście

  Bezpośrednie dziecko

  został pomyślnie pobrany.

  metoda ()

  Aby określić funkcję, którą należy wykonać dla każdego z określonych elementów, stosuje się metodę każdego ().

  Składnia

  $ (selektor).każdy (funkcja (indeks, element))
  • Funkcja wewnątrz .każda metoda () jest wymaganą funkcją parametrów, która zostanie wykonana dla każdego z określonych elementów.
  • Parametr indeksu określa pozycję selektora.
  • Parametr elementu odnosi się do bieżącego elementu.

  Przykład

  Załóżmy, że chcesz zmienić tekst dla każdego z

  element za pomocą metody jQuery ().

  Html

  Pierwszy paragraf.

  
  

  Akapit drugi.

  
  

  Trzeci akapit.

  
  Zmień tekst każdego akapitu

  W powyższym kodzie HTML utworzyliśmy trzy

  elementy i jeden przycisk.

  JQuery

  $ (dokument).gotowy (funkcja ()
  var i = 0;
  $ („przycisk”).kliknij (funkcja ()
  $ („p”).każdy (funkcja ()
  $ (to).Text ('akapit $ i+= 1')
  );
  );
  );

  Tutaj używamy metody każdego () do zmiany tekstu dla każdego z

  elementy. Parametr „ten” odnosi się do bieżącego elementu, który w tym przypadku jest

  element.

  Wyjście

  Tekst zmienia się za każdym razem, gdy klikniesz przycisk.

  Metoda każdego () działa poprawnie.

  metoda znajdź ()

  W celu znalezienia wszystkich następców elementu stosowana jest metoda Find (). Wszyscy następcy elementu obejmują; Dzieci, wnuki, prawnuki i tak dalej.

  Składnia

  $ (selektor).Znajdź (filtr)

  Filtr jest wymaganym parametrem, który odnosi się do selektora, elementu lub obiektu jQuery, którego dzieci należy znaleźć.

  Przykład

  Załóżmy, że chcesz przynieść dziecko, wnuka i prawnuka elementu. Oto jak to robisz.

  Html

  
  Div (dziadek)
  
  UL (bezpośredni rodzic)
  
  • Li (dziecko)
    Span (wnuk)
    Span (prawnuk)
    
    
  
  
  
  
  

  W powyższym kodzie utworzono element i w środku, w którym zagnieżdżliśmy

  element. Ponadto zagnieżdżliśmy
  • i elementy wewnątrz
    element. Element dodatkowo gniazduje element. Wykonano wielokrotne gniazdowanie, aby wyjaśnić metodę Find ().

    CSS

    .główny *
    Blok wyświetlacza;
    granica: 2px stały szary;
    Kolor: szary;
    Wyściółka: 5px;
    Margines: 15px;
    

    Zaprojektowaliśmy klasę „główną” za pomocą CSS. Ta klasa jest przypisana do ciała.

    JQuery

    $ (dokument).gotowy (funkcja ()
    $ („ul”).Znajdź („Li, Span”).css („color”: „niebieski”, „border”: „2px solid blue”);
    );

    Tutaj używamy metody Find () do znalezienia

    • i elementy w
      Element, a później zastosowanie stylizacji CSS w celu podkreślenia pobieranych następców.

      Wyjście

      Następcy

      Znaleziono element.

      First () metoda

      Pierwsza metoda () pobiera pierwszy zagnieżdżony element wewnątrz określonego elementu.

      Składnia

      $ (selektor).Pierwszy()

      Przykład

      Załóżmy, że chcesz pobrać pierwszy element, który znajduje się wewnątrz

      element. Postępuj zgodnie z poniższym kodem.

      Html

      Metoda trawers Dom Elementy Korzystanie z jQuery

      W powyższym kodzie HTML stworzyliśmy

      element i zagnieżdżone dwa elementy w tym

      element.

      JQuery

      $ (dokument).gotowy (funkcja ()
      $ („h1 span”).Pierwszy().CSS („kolor tła”, „różowy”);
      );

      Tutaj zastosowaliśmy metodę pierwszego (), aby znaleźć pierwszy element

      Ponadto element zastosował metodę CSS () do podkreślenia pobieranego elementu.

      Wyjście

      Pierwszy element

      element jest podświetlony w różowym.

      Metoda następny ()

      Aby znaleźć sąsiednie rodzeństwo określonego elementu, stosuje się metodę następną ().

      Składnia

      $ (selektor).Dalej (filtr)

      Filtr jest opcjonalnym parametrem używanym do określenia elementu w celu ograniczenia wyszukiwania sąsiedniego rodzeństwa.

      Przykład

      Tutaj zilustrowaliśmy działanie metody JQuery Next ().

      Html

      To nagłówek

      
      

      To pierwszy akapit.

      
      

      To jest drugi akapit.

      Tutaj stworzyliśmy jeden

      element i dwa

      elementy.

      JQuery

      $ (dokument).gotowy (funkcja ()
      $ („h1”).Następny().CSS („kolor tła”, „różowy”);
      )

      W powyższym kodzie używamy metody następnej (), aby znaleźć sąsiednie rodzeństwo

      element.

      Wyjście

      Sąsiadujące rodzeństwo

      element został pomyślnie pobrany.

      Metoda nadrzędna ()

      W celu znalezienia bezpośredniego rodzica elementu stosuje się metodę nadrzędną (). Jest to wbudowana funkcja jQuery, która idzie tylko jeden poziom w górę określonego elementu i pobiera bezpośredni rodzic.

      Składnia

      $ (selektor).rodzic (filtr)

      Filtr jest opcjonalnym parametrem, który służy do ograniczenia wyszukiwania elementu nadrzędnego poprzez określenie wyrażenia selektora.

      Przykład

      Załóżmy, że chcesz pobrać bezpośredniego rodzica elementu, który jest obecny w

      element, który jest częścią elementu.

      Html

      
      Div (jestem pradziadkiem)
      

      UL (jestem dziadkiem)
      
      • Li (jestem bezpośrednim rodzicem)
        Zakres
        
      
      

      
      
      

      W powyższym kodzie jest w sumie cztery elementy; ,

      ,
      • , I . Obserwując ich hierarchię,
      • element jest uważany za bezpośredniego rodzica elementu,
        jest dziadkiem elementu i jest prawnukiem, ponieważ wszystkie elementy są zagnieżdżone w elemencie.

        CSS

        .główny *
        Blok wyświetlacza;
        granica: 2px stały szary;
        Kolor: szary;
        Wyściółka: 5px;
        Margines: 15px;
        

        Korzystając z CSS, nadaliśmy ciału pewien styl.

        JQuery

        $ (dokument).gotowy (funkcja ()
        $ („span”).rodzic().css („color”: „niebieski”, „border”: „2px solid blue”);
        );

        Zastosowaliśmy metodę nadrzędną () na elemencie, a także połączyliśmy do niej metodę CSS (.

        Wyjście

        Dostęp do elementu nadrzędnego jest udany.

        Metoda preval ()

        Metoda jQuery Prev () służy do pobrania poprzedniego sąsiedniego rodzeństwa określonego elementu. Ta metoda przemierza się zacofany w drzewie DOM.

        Składnia

        $ (selektor).Poprzedni (filtr)

        Filtr jest opcjonalnym parametrem używanym do określenia elementu w celu ograniczenia wyszukiwania poprzedniego sąsiedniego rodzeństwa.

        Przykład

        Załóżmy, że chcesz przynieść poprzednie sąsiednie rodzeństwo elementu. Użyj następującego kodu.

        Html

        Nagłówek 1

        
        

        Nagłówek 2

        
        

        Jakiś akapit.

        W powyższym kodzie utworzyliśmy trzy elementy;

        ,

        , I

        .

        JQuery

        $ (dokument).gotowy (funkcja ()
        $ („h2”).Prev ().CSS („kolor tła”, „SkyBlue”);
        )

        Zastosowaliśmy metodę jQuery Prev () do pobrania poprzedniego sąsiedniego rodzeństwa

        element.

        Wyjście

        Poprzednie sąsiednie rodzeństwo

        Jest

        .

        Metoda rodzeństwa ()

        Aby pobrać wszystkie rodzeństwo określonego elementu, stosuje się metodę rodzeństwa (). Ta metoda przemierza się zarówno do tyłu, jak i do przodu w drzewie DOM, aby pobrać wszystkie rodzeństwo elementu.

        Składnia

        $ (selektor).rodzeństwo (filtr)

        Filtr jest opcjonalnym parametrem używanym do określenia elementu w celu ograniczenia wyszukiwania rodzeństwa.

        Przykład

        Ten przykład pokazuje działanie metody rodzeństwa ().

        Html

        
        

        UL (rodzic)
        
        • Li (poprzednie sąsiednie rodzeństwo)
        
        
        • Li
        
        
        • Li (następne rodzeństwo)
        
        
        • Li (następne rodzeństwo)
        
        

        
        

        W powyższym kodzie utworzyliśmy element i zagnieżdżyliśmy

        element wewnątrz tego div. Ponadto zagnieżdżliśmy
        • elementy wewnątrz
          element.

          CSS

          .div *
          Blok wyświetlacza;
          granica: 2px stały szary;
          Kolor: szary;
          Wyściółka: 5px;
          Margines: 15px;
          

          Element otrzymał określony styl za pomocą CSS.

          JQuery

          $ (dokument).gotowy (funkcja ()
          $ ("Li.rodzeństwo").rodzeństwo().css („color”: „niebieski”, „border”: „2px solid blue”);
          );

          Za pomocą metody rodzeństwa jQuery () zamierzamy pobrać wszystkie rodzeństwo

          • element. Ponadto, aby podkreślić te rodzeństwo, zastosowaliśmy metodę CSS ().

            Wyjście

            Metoda rodzeństwa () działa poprawnie.

            Wniosek

            JQuery zapewnia szeroki zakres metod stosowanych w celu przemieszczania elementów DOM. Te metody są; Metoda dzieci (), metoda każdego (), metoda FINK (), najpierw () metoda, metoda następna (), metoda pary (), metoda preval () i metoda rodzeństwa (). Wszystkie te metody służą własnym celowi, które są szczegółowe w tym przewodniku, wraz z pomocą odpowiednich przykładów.