Introdução aos seletores JQuery e seus valores
Ao trabalhar com JavaScript, muitas vezes você se encontra em uma situação em que precisa encontrar e modificar algum conteúdo da página. Nesses casos, você precisará usar o suporte do seletor no JQuery. O JQuery facilita a localização de elementos da página com base em seus tipos, valores, atributos etc. Esses elementos são baseados em seletores de CSS e, depois de praticar um pouco, você verá que a localização de elementos nas páginas é uma tarefa fácil. Dependendo do uso, podemos classificar diferentes tipos de seletores JQuery em diferentes tipos. Vamos dar uma olhada em alguns dos seletores mais usados.
Usando um seletor
A seguir, é apresentada uma sintaxe de um seletor JQuery:
- $ (Seletor). Methodname ():
Se precisar, você pode encadear vários seletores adicionando um "." Entre os métodos.
- $ (seletor). método1 (). método2 (). método3 ();
Tipos de seletor no JQuery
Aqui estão os diferentes tipos de Seletor no JQuery
1) Seletores JQuery básicos
Podemos selecionar elementos da página usando seu ID, classe ou nome de tag. Se necessário, uma combinação desses também pode ser usada. A seguir estão alguns seletores básicos:
- : header Selector - Este é um tipo básico de seletor que permite encontrar elementos com seus cabeçalhos HTML. Para fazer isso, usamos o seletor detalhado $ ("seção h1, seção h2, seção h3") ou também podemos usar o seletor $ ("seção: cabeçalho") muito mais curto.
- : seletor de destino - esse seletor localiza os destinos da página ou hash do URI do documento. Por exemplo, se o URI da página for "https://example.com/#test". Então, o seletor $ ("h2: target") selecionará o elemento
.
- : animated Selector - Este seletor é usado para encontrar todos os elementos que possuem animação. Lembre-se de que para a animação ser selecionada, ela deve estar em execução quando o seletor for executado.
2) Seletores baseados no índice
O JQuery possui seu próprio conjunto de seletores baseados em índice que utilizam indexação baseada em zero. A seguir estão alguns exemplos:
- : eq (k) Seletor - esse seletor retorna o elemento no índice k. Também suporta valores de índice negativos.
- : lt (k) Selector - Este seletor retorna todos os elementos que possuem um índice menor que k. Assim como acima, valores negativos também são aceitos
- : gt (n) Seletor - Esse seletor é semelhante: lt (k) Seletor, exceto que funciona para um valor de índice maior ou igual a k.
3) Seletores de crianças
Você pode usar o JQuery para selecionar filhos de qualquer elemento com base em seu tipo ou índice.
- : primeiro filho - Este seletor retornará todos os elementos que são o primeiro filho de seus pais.
- : first-of-type - esse seletor JQuery é usado para selecionar todos os elementos que são o primeiro irmão
- : last-child - como o nome sugere, esse seletor selecionará o último filho do pai.
- : last-of-type - seleciona todos os filhos que são os últimos do tipo em um pai. Se houver mais de um pai, ele selecionará vários elementos.
- : only-of-type - podemos usar o seletor only-of-type para encontrar todos os elementos que possuem irmãos do mesmo tipo na página.
- : filho único - Nas situações em que você precisa encontrar e selecionar elementos que são o único filho de seus pais, você pode usar esse seletor. Caso um pai na página tenha mais de um filho, ele será ignorado.
4) Seletores de Atributos
Os elementos podem ser selecionados com base em seus atributos, a seguir estão alguns seletores de atributos comuns:
- $ (“(Attribute | = 'valuehere')”) - O “attribute contains prefix selector” seleciona todos os elementos com atributos em que o valor é igual a ou começa com a sequência especificada, seguida por um hífen.
- $ (“(Atributo ~ = 'valoraqui')”) - Retorna todos os elementos com atributos em que o valor contém uma determinada palavra delimitada por espaços.
- $ (“(Atributo * = 'valuehere')”) - Ele seleciona elementos com os quais o valor contém a substring fornecida. Desde que o valor corresponda, o local não será importante
5) Seletores de Conteúdo
Como o nome sugere, esses seletores JQuery são usados para localizar e selecionar o conteúdo dentro dos elementos.
- : contém (texto) - usado para selecionar elementos que contenham um conteúdo de texto especificado. Uma coisa a ter em mente ao usar esse seletor é que o teste aqui faz distinção entre maiúsculas e minúsculas.
- : has (seletor) - retornará com elementos que tenham pelo menos um elemento dentro que corresponda ao seletor especificado. Por exemplo, $ (“section: has (h1)”) retornará com todas as seções que possuem um elemento h1.
- : empty - esse seletor retornará os elementos da página que não possuem filhos, incluindo nós de texto.
- : pai - esse seletor é usado para selecionar todos os elementos da página da web que possuem pelo menos um nó filho. Você pode considerá-lo como um inverso para o: seletor JQuery vazio.
6) Seletores de hierarquia
- $ (“Descendente ancestral”) - É usado para selecionar todos os elementos descendentes de um pai. O descendente em nosso caso pode ser filho, neto e assim por diante.
- $ ("Pai> filho") - usado nos casos em que precisamos selecionar apenas o filho direto de um pai específico.
- $ ("Previous + next") - Caso seja necessário selecionar todos os elementos que correspondam ao seletor "next" e que tenham o pai "previous". Os elementos selecionados também serão processados imediatamente por "previous", que é o irmão.
7) Seletores de visibilidade
Dois seletores: visible e: hidden também estão disponíveis no JQuery. Eles podem ser usados para encontrar elementos visíveis ou ocultos na página da Web, respectivamente. Qualquer elemento na página da web é considerado oculto se:
- Sua exibição corretamente está definida como nenhuma.
- Sua largura e altura são definidas como zero.
- Possui type = hidden mencionado no elemento do formulário.
- Quaisquer ancestrais do elemento já estão ocultos.
Lembre-se de que, mesmo que um elemento tenha a opacidade definida como Zero, ele ainda será considerado visível porque ainda ocupará espaço.
8) Seletores de formulário
Para economizar tempo e aborrecimentos, o JQuery possui versões classificadoras de seletores para elementos de entrada de formulários da web.
Por exemplo, enquanto $ ("button, input (type = 'button')") funcionará para selecionar o botão na página, podemos usar $ (": button") para fazê-lo rapidamente.
Da mesma forma, podemos usar $ (": radio") para selecionar o botão de opção.
Conclusão - Tipos de seletor no JQuery
Os seletores são um dos recursos importantes do JQuery; a seleção no JavaScript não é tão intuitiva e robusta com a adição de seletores via JQuery; a programação para a Web ficou mais fácil.
Artigos recomendados
Este é um guia para Tipos de seletor no JQuery. Aqui discutimos os diferentes tipos de seletores JQuery com a sintaxe. Você também pode dar uma olhada nos seguintes artigos para saber mais:
- Métodos jQuery
- Alternativas ao jQuery
- Usos do JQuery
- O que Javascript pode fazer?
- jQuery querySelector
- Guia de exemplos da barra de progresso do JQuery