No desenvolvimento da web, geralmente é necessário encontrar ou selecionar certos elementos HTML para manipulá -los. Com o objetivo de fazer isso, você atravessa a árvore Dom e selecione um elemento específico. JQuery fornece uma enorme lista de métodos usados ​​para atravessar a árvore Dom. Aqui nós alistamos esses métodos jQuery.

1. Método ()
2. cada () método
3. Método Find ()
4. Método primeiro ()
5. Método seguinte ()
6. Método Parent ()
7. Método Anterior ()
8. Método de irmãos ()

Esses métodos acima mencionados são explicados em detalhes abaixo.

Método ()

Com o objetivo de buscar todos os filhos imediatos de um elemento especificado, o método JQuery Children () é usado. Este método apenas atravessa um nível pela árvore Dom.

Sintaxe

O filtro é um parâmetro opcional usado para especificar um elemento para restringir a busca de crianças.

Exemplo

Suponha que você queira buscar os filhos diretos de um determinado elemento usando o método jQuery Children (). Aqui está um exemplo de fazer isso.

Html

UL (pai direto)

• Li (filho direto de UL)
  span (neto de UL)
  

Nós criamos um elemento no qual um

elemento está aninhado. Mais dentro do
elemento
• , e os elementos estão aninhados.

  CSS

  .crianças *
  exibição: bloco;
  borda: 2px cinza sólido;
  Cor: cinza;
  preenchimento: 5px;
  margem: 15px;
  

  Todo o corpo recebeu algum estilo usando CSS.

  jQuery

  $ (documento).pronto (function ()
  $ ("ul").crianças().css ("color": "azul", "borda": "2px azul sólido");
  );

  Aqui o método Children () é usado para buscar os filhos diretos de

  elemento. Além disso, o método CSS () é acorrentado ao método Children () para destacar os filhos de
  .

  Saída

  O filho direto de

  foi buscado com sucesso.

  cada () método

  Para especificar uma função a ser executada para cada um dos elementos especificados, o método cada () é usado.

  Sintaxe

  $ (seletor).cada (função (índice, elemento))
  • A função dentro do .Cada () método é uma função de parâmetro necessária que será executada para cada um dos elementos especificados.
  • O parâmetro de índice especifica a posição do seletor.
  • Parâmetro do elemento refere -se ao elemento atual.

  Exemplo

  Suponha que você queira alterar o texto para cada um dos

  elemento usando o método jQuery cada ().

  Html

  Primeiro parágrafo.

  
  

  Segundo parágrafo.

  
  

  Terceiro parágrafo.

  
  Alterar texto de cada parágrafo

  No código HTML acima, criamos três

  elementos e um botão.

  jQuery

  $ (documento).pronto (function ()
  var i = 0;
  $ ("botão").clique (function ()
  $ ("p").cada (function ()
  $ (isso).texto ('parágrafo $ i+= 1')
  );
  );
  );

  Aqui estamos usando o método cada () para alterar o texto para cada um dos

  elementos. O parâmetro "this" refere -se ao elemento atual, que neste caso é o

  elemento.

  Saída

  O texto muda toda vez que você clicar no botão.

  O método cada () está funcionando corretamente.

  Método Find ()

  Com o objetivo de encontrar todos os sucessores de um elemento, o método find () é usado. Todos os sucessores de um elemento incluem; filhos, netos, bisnetos e assim por diante.

  Sintaxe

  $ (seletor).Encontre (filtro)

  Filtro é um parâmetro necessário que se refere a um seletor, elemento ou objeto jQuery cujos filhos devem ser encontrados.

  Exemplo

  Suponha que você queira buscar a criança, neto e bisneto de um elemento. Aqui está como você faz isso.

  Html

  
  div (avô)
  
  UL (pai direto)
  
  • Li (criança)
    span (neto)
    extensão (bisneto)
    
    
  
  
  
  
  

  No código acima, um elemento é criado e dentro que aninhamos um

  elemento. Além disso, aninhamos
  • e elementos dentro do
    elemento. O elemento aninha ainda um elemento. O ninho múltiplo foi feito para tornar o funcionamento do método find () claro.

    CSS

    .principal *
    exibição: bloco;
    borda: 2px cinza sólido;
    Cor: cinza;
    preenchimento: 5px;
    margem: 15px;
    

    Nós denominamos a classe "Main" usando CSS. Esta aula é atribuída ao corpo.

    jQuery

    $ (documento).pronto (function ()
    $ ("ul").encontre ("li, span").css ("color": "azul", "borda": "2px azul sólido");
    );

    Aqui estamos usando o método find () para encontrar

    • e elementos no
      elemento e posteriormente aplicando alguns modelos de CSS para destacar os sucessores buscados.

      Saída

      Os sucessores do

      elemento foi encontrado.

      Método primeiro ()

      O primeiro () método busca o primeiro elemento aninhado dentro de um elemento especificado.

      Sintaxe

      $ (seletor).primeiro()

      Exemplo

      Suponha que você queira buscar o primeiro elemento que está dentro de um

      elemento. Siga o código abaixo.

      Html

      Método para atravessar Dom Elementos usando jQuery

      No código HTML acima, criamos um

      elemento e aninhado dois elementos dentro disso

      elemento.

      jQuery

      $ (documento).pronto (function ()
      $ ("span h1").primeiro().CSS ("cor de fundo", "rosa");
      );

      Aqui usamos o primeiro () método para encontrar o primeiro elemento do

      O elemento, além disso, o método CSS () usou para destacar o elemento buscado.

      Saída

      O primeiro elemento do

      O elemento é destacado em rosa.

      Método seguinte ()

      Para encontrar o irmão adjacente de um elemento especificado, o método Next () é usado.

      Sintaxe

      $ (seletor).Próximo (filtro)

      O filtro é um parâmetro opcional usado para especificar um elemento para restringir a busca pelo irmão adjacente.

      Exemplo

      Aqui ilustramos o funcionamento do método jQuery Next ().

      Html

      Este é um título

      
      

      Este é o primeiro parágrafo.

      
      

      Esse é o segundo parágrafo.

      Aqui nós criamos um

      elemento e dois

      elementos.

      jQuery

      $ (documento).pronto (function ()
      $ ("H1").próximo().CSS ("cor de fundo", "rosa");
      )

      No código acima, estamos usando o método próximo () para encontrar o irmão adjacente do

      elemento.

      Saída

      O irmão adjacente do

      elemento foi buscado com sucesso.

      Método Parent ()

      Com o objetivo de encontrar o pai direto de um elemento, o método parent () é usado. É uma função de jQuery embutida que apenas um nível acima do elemento especificado e busca o pai imediato desse elemento.

      Sintaxe

      $ (seletor).pai (filtro)

      O filtro é um parâmetro opcional que é usado para restringir a busca pelo elemento pai, especificando uma expressão seletora.

      Exemplo

      Suponha que você queira buscar o pai direto de um elemento que está presente em um

      elemento que ainda faz parte de um elemento.

      Html

      
      div (eu sou um bisneto)
      

      ul (eu sou um avô)
      
      • li (eu sou um pai direto)
        período
        
      
      

      
      
      

      Há um total de quatro elementos gerados no código acima; ,

      ,
      • , e . Observando sua hierarquia, o
      • O elemento é considerado um pai direto do elemento,
        é o avô do elemento e é o bisavô porque todos os elementos são aninhados dentro do elemento.

        CSS

        .principal *
        exibição: bloco;
        borda: 2px cinza sólido;
        Cor: cinza;
        preenchimento: 5px;
        margem: 15px;
        

        Usando CSS, demos algum estilo ao corpo.

        jQuery

        $ (documento).pronto (function ()
        $ ("span").pai ().css ("color": "azul", "borda": "2px azul sólido");
        );

        Aplicamos o método parent () no elemento e também acorrentamos o método CSS () para destacar o pai direto do elemento e verificar se o elemento pai é acessado com sucesso.

        Saída

        O elemento pai é acessado com sucesso.

        Método Anterior ()

        O método jQuery prev () é usado para buscar o irmão adjacente anterior de um elemento especificado. Este método atravessa de uma maneira atrasada na árvore Dom.

        Sintaxe

        $ (seletor).Anterior (filtro)

        O filtro é um parâmetro opcional usado para especificar um elemento para restringir a busca pelo irmão adjacente anterior.

        Exemplo

        Suponha que você queira buscar o irmão anterior adjacente de um elemento. Use o seguinte código.

        Html

        Cabeçallho 1

        
        

        Titular 2

        
        

        Algum parágrafo.

        No código acima, criamos três elementos que são;

        ,

        , e

        .

        jQuery

        $ (documento).pronto (function ()
        $ ("h2").prev ().CSS ("cor de fundo", "Skyblue");
        )

        Usamos o método jQuery prev () para buscar o irmão adjacente anterior de

        elemento.

        Saída

        O irmão adjacente anterior de

        é

        .

        Método de irmãos ()

        Para buscar todos os irmãos de um elemento especificado, o método dos irmãos () é usado. Este método atravessa para trás e para a frente na árvore Dom para buscar todos os irmãos de um elemento.

        Sintaxe

        $ (seletor).irmãos (filtro)

        O filtro é um parâmetro opcional usado para especificar um elemento para restringir a busca pelos irmãos.

        Exemplo

        Este exemplo demonstra o funcionamento do método dos irmãos ().

        Html

        
        

        ul (pai)
        
        • Li (o irmão anterior adjacente)
        
        
        • li
        
        
        • Li (o próximo irmão)
        
        
        • Li (o próximo irmão)
        
        

        
        

        No código acima, criamos um elemento e aninhamos um

        elemento dentro daquela div. Além disso, aninhamos alguns
        • elementos dentro do
          elemento.

          CSS

          .div *
          exibição: bloco;
          borda: 2px cinza sólido;
          Cor: cinza;
          preenchimento: 5px;
          margem: 15px;
          

          O elemento recebeu um certo estilo usando CSS.

          jQuery

          $ (documento).pronto (function ()
          $ ("li.irmãos").irmãos().css ("color": "azul", "borda": "2px azul sólido");
          );

          Usando o método jQuery Siblings (), vamos buscar todos os irmãos do

          • elemento. Além disso, para destacar os irmãos, usamos o método CSS ().

            Saída

            O método dos irmãos () está funcionando corretamente.

            Conclusão

            O JQuery fornece uma enorme variedade de métodos usados ​​com o objetivo de atravessar elementos DOM. Esses métodos são; Método Children (), cada () Método, Método Find (), First (), Método Next (), Método Parent (), Prev () e Siblings (). Todos esses métodos servem ao seu próprio propósito, que é explicado em profundidade neste guia, juntamente com a ajuda de exemplos relevantes.