O que é o jQuery querySelector?
jQuery querySelector seleciona ou localiza um elemento DOM (modelo de objeto de documento) em um documento HTML. JQuery nos permite manipular os elementos HTML. É usado para selecionar um ou mais elementos HTML com base no ID, nome, tipos, atributos, classe, valores de atributos, etc. É baseado nos seletores CSS existentes.
Introdução ao querySelector
O método querySelector () retorna apenas o primeiro elemento que corresponde aos seletores CSS especificados no documento. Se um ID no documento for usado mais de uma vez, ele retornará o primeiro elemento correspondente.
Sintaxe da querySelector
Abaixo está a sintaxe do querySelector:
- querySelector (seletores de CSS)
- Retorna o primeiro elemento que corresponde aos seletores especificados.
- Para retornar todos os elementos correspondentes, usamos o método querySelectorAll ().
- Os seletores CSS que passamos devem ser do tipo string.
- É obrigatório passar nos seletores de CSS.
- A string que estamos passando deve ser um seletor CSS válido.
- Se a sequência passada for inválida, uma SYNTAX_ERRexception será lançada.
- Se nenhuma correspondência for encontrada, ele retornará nulo.
- A correspondência do primeiro elemento é feita usando um percurso de pré-encomenda em profundidade do documento.
- Especifica um ou mais seletores CSS para corresponder ao elemento.
- Para vários seletores, separe com uma vírgula.
- Os caracteres que não fazem parte da sintaxe CSS padrão devem ser escapados usando um caractere de barra invertida.
Exemplos para o método querySelector ()
Abaixo estão os exemplos para os métodos querySelector ():
No jQuery, você pode selecionar elementos em uma página usando várias propriedades do elemento: Tipo, Classe, ID, Posse de atributo, Valores de atributo, etc. Abaixo está o exemplo do Jquery usando o tipo.
Exemplo # 1 - Selecionando por tipo
1. O seletor de consulta a seguir contém dois <a>
Explicação do código acima: Neste exemplo, podemos observar que usamos duas marcas de âncora e, dentro da marca de âncora, passamos o hiperlink de duas imagens. Usando o querySelector ("a"). Style.backgroundColor = "red"; passamos a tag de âncora ("a") para o querySelector. No método querySelector (), se passarmos os vários seletores, ele retornará o primeiro elemento que corresponder aos seletores especificados. Embora contenha duas marcas de âncora, a primeira marca de âncora encontrada, aplicou seu estilo.backgroundColor = "red"; somente para a primeira tag de âncora.
Resultado 1: Antes de clicar no botão ("Clique em mim").
Resultado 2: Depois de clicar no botão ("Clique em mim"), a cor de fundo da flor muda para "vermelho".
Resultado 3: Ao clicar nos hiperlinks, as respectivas imagens serão abertas.
2. Este querySelector também contém dois. No exemplo abaixo, mudei a sequência da imagem. Eu mantive o hiperlink do deserto primeiro e depois o hiperlink da flor em segundo.
Explicação do código acima: Neste exemplo também podemos observar que usamos duas marcas de âncora e, dentro da marca de âncora, passamos o hiperlink de duas imagens. Usando o querySelector ("a"). Style.backgroundColor = "red"; passamos a tag de âncora ("a") para o seletor de consulta. Desta vez, no querySelector (), ele descobrirá primeiro o hiperlink "Deserto" à medida que alteramos a sequência. Embora contenha duas marcas de âncora, a primeira marca de âncora encontrada, aplicou seu estilo.backgroundColor = "red"; somente para a primeira tag de âncora.
Resultado 1: No resultado, podemos observar que a primeira imagem é Deserto. Portanto, devido ao método querySelector (), a cor de fundo do Desert mudou para vermelho.
Resultado 2: Ao clicar no hiperlink, a imagem do deserto será aberta.
Resultado 3: Ao clicar no hiperlink da flor, a imagem da flor será aberta.
Exemplo # 2 - Selecionando por classe
Neste exemplo abaixo, estamos selecionando usando o nome da classe.
Explicação do código acima: No exemplo acima, estamos usando o nome da classe e aqui o nome da classe é Selector. O mesmo nome de classe é passado para h2 (tag de cabeçalho) e a tag de parágrafo. Para o método querySelector (), estamos passando o nome da classe, que verificará o nome da classe em particular no programa. Agora, ele encontrou as tags com o mesmo nome de classe mencionado. Ao usar a travessia de pré-ordem de profundidade do documento, é feita a correspondência do primeiro elemento. O primeiro elemento no exemplo que contém o nome da classe como Seletor é h2 (tag de cabeçalho). O método querySelector () busca a marca h2 e, por style.backgroundColor, aplica a cor de fundo específica à marca h2.
Resultado 1: Antes de clicar no botão ("clique em mim"), o conteúdo da tag h2 não muda a cor de fundo para azul.
Resultado 2: Após clicar no botão ("clique em mim"), o conteúdo da tag h2 muda sua cor de fundo para azul.
Exemplo # 3 - Selecionando por ID
Neste exemplo abaixo, estamos selecionando usando id.
Explicação do código acima: No exemplo, estamos selecionando usando id o id aqui é Selector. Para o método querySelector (), estamos passando o ID, ele verificará o nome do ID específico no programa. Agora ele encontrou a tag que tem o mesmo nome de identificação mencionado. Ao usar a travessia de pré-ordem de profundidade do documento, é feita a correspondência do primeiro elemento. O elemento no exemplo que contém o nome do ID como Seletor é uma tag de parágrafo. O método querySelector () busca a marca de parágrafo e aplica as alterações específicas ao conteúdo de acordo com o código mencionado.
Resultado 1: Antes de clicar no botão "clique em mim", o conteúdo da tag de parágrafo será "Este é um elemento com id =" seletor ".
Resultado 2: Após clicar no botão "clique em mim", o conteúdo da tag de parágrafo será alterado para "Alteração no texto".
Usos do jQuery querySelector
Abaixo estão os dois pontos que explicam os usos do querySelector:
- Os códigos do jQuery são mais precisos, mais curtos e mais simples que os códigos JavaScript padrão. Pode executar uma variedade de funções.
- A chamada para querySelector () retorna o primeiro elemento quando ele escolhe um, portanto é mais rápido e mais curto de escrever.
Artigos recomendados
Este é um guia para o jQuery querySelector. Aqui discutimos o que é jQuery querySelector, introdução ao querySelector, sintaxe e o exemplo de Jquery usando type. Você também pode consultar nossos outros artigos relacionados para saber mais -
- Eventos jQuery
- Usos do JQuery
- Métodos jQuery
- Como instalar o Jquery?
- Eventos HTML
- Os 5 principais atributos de eventos HTML com exemplos
- Jogue vs Joga | As 5 principais diferenças que você deve saber
- Guia de exemplos da barra de progresso do JQuery