En el desarrollo web, a menudo se requiere encontrar o seleccionar ciertos elementos HTML para manipularlos. A los fines de hacerlo, tiene recorrer el árbol DOM y seleccionar un elemento particular. JQuery proporciona una gran lista de métodos que se utilizan para atravesar el árbol DOM. Aquí hemos alistado estos métodos jQuery.

1. Método para niños ()
2. cada () método
3. Método Find ()
4. Método primero ()
5. Método Next ()
6. Método parent ()
7. Método prev ()
8. Método de hermanos ()

Estos métodos mencionados anteriormente se explican en detalle a continuación.

Método para niños ()

Con el fin de obtener todos los niños inmediatos de un elemento específico, se utiliza el método jQuery children (). Este método solo atraviesa un nivel por el árbol doms.

Sintaxis

El filtro es un parámetro opcional que se utiliza para especificar un elemento para restringir la búsqueda de niños.

Ejemplo

Supongamos que desea obtener a los niños directos de cierto elemento utilizando el método jQuery Children (). Aquí hay un ejemplo de hacerlo.

Html

UL (padre directo)

• li (hijo directo de UL)
  Span (nieto de UL)
  

Hemos creado un elemento en el que un

El elemento está anidado. Más dentro del
elemento
• , y los elementos están anidados.

  CSS

  .niños *
  bloqueo de pantalla;
  borde: 2px gris sólido;
  color gris;
  relleno: 5px;
  margen: 15px;
  

  Todo el cuerpo ha recibido algún estilo usando CSS.

  jQuery

  $ (documento).Ready (function ()
  $ ("UL").niños().css ("color": "azul", "borde": "2px azul sólido");
  );

  Aquí el método para niños () se utiliza para obtener los niños directos de

  elemento. Además de esto, el método CSS () está encadenado al método de niños () para resaltar a los niños de
  .

  Producción

  El hijo directo de

  ha sido obtenido con éxito.

  cada () método

  Para especificar una función que se ejecutará para cada uno de los elementos especificados, se utiliza cada método ().

  Sintaxis

  $ (selector).cada uno (función (índice, elemento))
  • La función dentro del .Cada método () es una función de parámetro requerida que se ejecutará para cada uno de los elementos especificados.
  • El parámetro del índice especifica la posición del selector.
  • El parámetro del elemento se refiere al elemento actual.

  Ejemplo

  Supongamos que desea cambiar el texto para cada uno de los

  elemento usando el método jQuery cada ().

  Html

  Primer párrafo.

  
  

  Segundo parrafo.

  
  

  Tercer párrafo.

  
  Cambiar texto de cada párrafo

  En el código HTML anterior, hemos creado tres

  elementos y un botón.

  jQuery

  $ (documento).Ready (function ()
  var i = 0;
  $ ("botón").hacer clic (function ()
  $ ("P").Cada (function ()
  $ (esto).Text ('párrafo $ i+= 1')
  );
  );
  );

  Aquí estamos utilizando cada método () para cambiar de texto para cada uno de los

  elementos. El parámetro "este" se refiere al elemento actual, que en este caso es el

  elemento.

  Producción

  El texto cambia cada vez que hace clic en el botón.

  El método cada () funciona correctamente.

  Método Find ()

  Con el fin de encontrar todos los sucesores de un elemento, se utiliza el método find (). Todos los sucesores de un elemento incluyen; Niños, nietos, bisnietos, etc.

  Sintaxis

  $ (selector).encontrar (filtro)

  El filtro es un parámetro requerido que se refiere a un selector, elemento o objeto jQuery cuyos hijos se encuentran.

  Ejemplo

  Supongamos que quieres buscar al niño, nieto y bisnieto de un elemento. Así es como lo haces.

  Html

  
  Div (abuelo)
  
  UL (padre directo)
  
  • li (niño)
    Span (nieto)
    Span (bisnieto)
    
    
  
  
  
  
  

  En el código anterior, se crea un elemento y dentro de que hemos anidado un

  elemento. Además, hemos anidado
  • y elementos dentro del
    elemento. El elemento anesta un elemento. Se realizó múltiples anidaciones para dejar claro el funcionamiento del método find ().

    CSS

    .principal *
    bloqueo de pantalla;
    borde: 2px gris sólido;
    color gris;
    relleno: 5px;
    margen: 15px;
    

    Estilizamos la clase "principal" usando CSS. Esta clase se asigna al cuerpo.

    jQuery

    $ (documento).Ready (function ()
    $ ("UL").encontrar ("li, span").css ("color": "azul", "borde": "2px azul sólido");
    );

    Aquí estamos utilizando el método find () para encontrar

    • y elementos en el
      elemento y luego aplicar algunos estilo CSS para resaltar a los sucesores obtenidos.

      Producción

      Los sucesores del

      se encontraron elementos.

      Método primero ()

      El primer método () obtiene el primer elemento anidado dentro de un elemento especificado.

      Sintaxis

      $ (selector).primero()

      Ejemplo

      Supongamos que desea obtener el primer elemento que está dentro de un

      elemento. Sigue el código a continuación.

      Html

      Método a atravesar Domina Elementos Usando jQuery

      En el código HTML anterior, hemos creado un

      elemento y anidados dos elementos dentro de eso

      elemento.

      jQuery

      $ (documento).Ready (function ()
      $ ("H1 Span").primero().CSS ("Color de fondo", "Pink");
      );

      Aquí hemos utilizado el primer método () para encontrar el primer elemento del

      El elemento, además, usó el método CSS () para resaltar el elemento recuperado.

      Producción

      El primer elemento del

      El elemento se resalta en rosa.

      Método Next ()

      Para encontrar el hermano adyacente de un elemento especificado, se utiliza el método Next ().

      Sintaxis

      $ (selector).Siguiente (filtro)

      El filtro es un parámetro opcional que se utiliza para especificar un elemento para restringir la búsqueda del hermano adyacente.

      Ejemplo

      Aquí hemos ilustrado el funcionamiento del método jQuery Next ().

      Html

      Este es un encabezado

      
      

      Este es el primer párrafo.

      
      

      Éste es el segundo párrafo.

      Aquí hemos creado uno

      elemento y dos

      elementos.

      jQuery

      $ (documento).Ready (function ()
      $ ("H1").próximo().CSS ("Color de fondo", "Pink");
      )

      En el código anterior, estamos utilizando el método Next () para encontrar el hermano adyacente del

      elemento.

      Producción

      El hermano adyacente del

      El elemento fue obtenido con éxito.

      Método parent ()

      Con el fin de encontrar al padre directo de un elemento, se utiliza el método parent (). Es una función jQuery incorporada que solo sube un nivel en el elemento especificado y obtiene al padre inmediato de ese elemento.

      Sintaxis

      $ (selector).Padre (Filtro)

      El filtro es un parámetro opcional que se utiliza para restringir la búsqueda del elemento principal especificando una expresión selectora.

      Ejemplo

      Supongamos que desea obtener al padre directo de un elemento que está presente en un

      elemento que es parte de un elemento.

      Html

      
      Div (soy un bisabuelo)
      

      UL (soy un abuelo)
      
      • li (soy un padre directo)
        durar
        
      
      

      
      
      

      Hay un total de cuatro elementos generados en el código anterior; ,

      ,
      • , y . Observando su jerarquía, el
      • El elemento se considera un padre directo del elemento,
        es el abuelo del elemento, y es el bisabuelo porque todos los elementos están anidados dentro del elemento.

        CSS

        .principal *
        bloqueo de pantalla;
        borde: 2px gris sólido;
        color gris;
        relleno: 5px;
        margen: 15px;
        

        Usando CSS, le hemos dado algo de estilo al cuerpo.

        jQuery

        $ (documento).Ready (function ()
        $ ("Span").padre().css ("color": "azul", "borde": "2px azul sólido");
        );

        Hemos aplicado el método parent () en el elemento y también encadenamos el método css () para resaltar el padre directo del elemento y verificar que se acceda con éxito al elemento principal.

        Producción

        Se accede con éxito al elemento principal.

        Método prev ()

        El método jQuery prev () se utiliza para obtener el hermano adyacente anterior de un elemento especificado. Este método atraviesa de manera atrasada en el árbol doms.

        Sintaxis

        $ (selector).Prev (filtro)

        El filtro es un parámetro opcional que se utiliza para especificar un elemento para restringir la búsqueda del hermano adyacente anterior.

        Ejemplo

        Supongamos que desea obtener el hermano adyacente anterior de un elemento. Use el siguiente código.

        Html

        Encabezado 1

        
        

        Encabezado 2

        
        

        Algún párrafo.

        En el código anterior, hemos creado tres elementos que son;

        ,

        , y

        .

        jQuery

        $ (documento).Ready (function ()
        $ ("H2").Prev ().CSS ("Color de fondo", "SkyBlue");
        )

        Hemos utilizado el método jQuery prev () para obtener el hermano adyacente anterior de

        elemento.

        Producción

        El hermano adyacente anterior de

        es

        .

        Método de hermanos ()

        Para obtener todos los hermanos de un elemento especificado, se utiliza el método de hermanos (). Este método atraviesa hacia atrás y hacia adelante en el árbol DOM para obtener todos los hermanos de un elemento.

        Sintaxis

        $ (selector).hermanos (filtro)

        El filtro es un parámetro opcional que se utiliza para especificar un elemento para restringir la búsqueda de los hermanos.

        Ejemplo

        Este ejemplo demuestra el funcionamiento del método de hermanos ().

        Html

        
        

        UL (padre)
        
        • Li (el hermano adyacente anterior)
        
        
        • li
        
        
        • Li (el próximo hermano)
        
        
        • Li (el próximo hermano)
        
        

        
        

        En el código anterior, hemos creado un elemento y anidadamos un

        elemento dentro de ese div. Además, hemos anidado algunos
        • elementos dentro del
          elemento.

          CSS

          .div *
          bloqueo de pantalla;
          borde: 2px gris sólido;
          color gris;
          relleno: 5px;
          margen: 15px;
          

          El elemento ha recibido un cierto estilo usando CSS.

          jQuery

          $ (documento).Ready (function ()
          $ ("Li.hermanos").hermanos().css ("color": "azul", "borde": "2px azul sólido");
          );

          Usando el método jQuery Siblings () vamos a buscar todos los hermanos del

          • elemento. Además, para resaltar esos hermanos, hemos usado el método CSS ().

            Producción

            El método de hermanos () funciona correctamente.

            Conclusión

            JQuery proporciona una amplia gama de métodos que se utilizan con el fin de atravesar elementos DOM. Estos métodos son; Método infantil (), cada método (), find () método, primer método (), método next (), parent (), método prev () y siblings () método. Todos estos métodos tienen su propio propósito que se explica en profundidad en esta guía junto con la ayuda de ejemplos relevantes.