Seletores jQuery
Os seletores jQuery são uma das partes mais importantes da biblioteca jQuery.
Seletores jQuery
Os seletores jQuery permitem selecionar e manipular elemento(s) HTML.
Os seletores jQuery são usados para "encontrar" (ou selecionar) elementos HTML com base em seu nome, id, classes, tipos, atributos, valores de atributos e muito mais. Ele é baseado nos seletores CSS existentes e, além disso, possui alguns seletores personalizados próprios.
Todos os seletores em jQuery começam com o cifrão e parênteses: $().
O seletor de elementos
O seletor de elemento jQuery seleciona elementos com base no nome do elemento.
Você pode selecionar todos os <p>elementos em uma página como esta:
$("p")
Exemplo
Quando um usuário clica em um botão, todos os <p>elementos ficam ocultos:
Exemplo
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
O seletor #id
O seletor jQuery usa o atributo id de uma tag HTML para encontrar o elemento específico.#id
Um id deve ser único dentro de uma página, então você deve usar o seletor #id quando quiser encontrar um elemento único e exclusivo.
Para encontrar um elemento com um id específico, escreva um caractere hash, seguido do id do elemento HTML:
$("#test")
Exemplo
Quando um usuário clica em um botão, o elemento com id="test" ficará oculto:
Exemplo
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
O seletor .class
O seletor jQuery .classencontra elementos com uma classe específica.
Para encontrar elementos com uma classe específica, escreva um caractere de ponto final, seguido do nome da classe:
$(".test")
Exemplo
Quando um usuário clica em um botão, os elementos com class="test" ficam ocultos:
Exemplo
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
Mais exemplos de seletores jQuery
| Syntax | Description | Example |
|---|---|---|
| $("*") | Selects all elements | |
| $(this) | Selects the current HTML element | |
| $("p.intro") | Selects all <p> elements with class="intro" | |
| $("p:first") | Selects the first <p> element | |
| $("ul li:first") | Selects the first <li> element of the first <ul> | |
| $("ul li:first-child") | Selects the first <li> element of every <ul> | |
| $("[href]") | Selects all elements with an href attribute | |
| $("a[target='_blank']") | Selects all <a> elements with a target attribute value equal to "_blank" | |
| $("a[target!='_blank']") | Selects all <a> elements with a target attribute value NOT equal to "_blank" | |
| $(":button") | Selects all <button> elements and <input> elements of type="button" | |
| $("tr:even") | Selects all even <tr> elements | |
| $("tr:odd") | Selects all odd <tr> elements |
Use nosso jQuery Selector Tester para demonstrar os diferentes seletores.
Para uma referência completa de todos os seletores do jQuery, acesse nossa Referência de seletores do jQuery .
Funções em um arquivo separado
Se o seu site contém muitas páginas e você deseja que suas funções jQuery sejam fáceis de manter, você pode colocar suas funções jQuery em um arquivo .js separado.
Quando demonstramos o jQuery neste tutorial, as funções são adicionadas diretamente na <head>
seção. No entanto, às vezes é preferível colocá-los em um arquivo separado, como este (use o atributo src para se referir ao arquivo .js):
Exemplo
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="my_jquery_functions.js"></script>
</head>