seletores jQuery são uma das partes mais importantes da biblioteca jQuery.
jQuery seletores
jQuery seletores permitem selecionar e manipular elemento (s) HTML.
jQuery seletores são usados para "encontrar" (ou selecione) elementos HTML com base em seu nome, id, classes, tipos, atributos, valores de atributos e muito mais. É com base nas existentes seletores CSS , e, além disso, tem algumas próprias seletores personalizados.
Todos os seletores em jQuery começar com o sinal de dólar e parênteses: $ ().
O seletor de elemento
O seletor de elemento jQuery seleciona elementos com base no nome do elemento.
Você pode selecionar todos os elementos <p> em uma página como esta:
$("p")
Exemplo
Quando um usuário clica em um botão, todos os elementos <p> ficará oculta:
Exemplo
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
Tente você mesmo " O Selector #id
O seletor #id jQuery usa o atributo id de uma tag HTML para encontrar o elemento específico.
Um id deve ser único dentro de uma página, então você deve usar o seletor # id quando você quer encontrar um único elemento, único.
Para encontrar um elemento com um id específico, escrever um personagem de hash, seguido da identificação do elemento HTML:
$("#test")
Exemplo
Quando um usuário clica em um botão, o elemento com id = "teste" será oculto:
Exemplo
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
Tente você mesmo " O Selector .class
O seletor de classe jQuery encontra elementos com uma classe específica.
Para encontrar elementos com uma classe específica, escrever um caractere período, seguido pelo nome da classe:
$(".test")
Exemplo
Quando um usuário clica em um botão, os elementos com class = "teste" será oculto:
Exemplo
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
Tente você mesmo " Mais exemplos de jQuery Seletores
| Syntax | Description | Example |
|---|---|---|
| $("*") | Selects all elements | Try it |
| $(this) | Selects the current HTML element | Try it |
| $("p.intro") | Selects all <p> elements with class="intro" | Try it |
| $("p:first") | Selects the first <p> element | Try it |
| $("ul li:first") | Selects the first <li> element of the first <ul> | Try it |
| $("ul li:first-child") | Selects the first <li> element of every <ul> | Try it |
| $("[href]") | Selects all elements with an href attribute | Try it |
| $("a[target='_blank']") | Selects all <a> elements with a target attribute value equal to "_blank" | Try it |
| $("a[target!='_blank']") | Selects all <a> elements with a target attribute value NOT equal to "_blank" | Try it |
| $(":button") | Selects all <button> elements and <input> elements of type="button" | Try it |
| $("tr:even") | Selects all even <tr> elements | Try it |
| $("tr:odd") | Selects all odd <tr> elements | Try it |
Use o nosso Selector Tester jQuery para demonstrar as diferentes seletores.
Para uma referência completa de todos os seletores jQuery, por favor, vá ao nosso jQuery Seletores de referência .
Funções em um arquivo separado
Se o seu site contém uma grande quantidade de páginas, e você quer as funções jQuery para ser fácil de manter, você pode colocar suas funções jQuery em um arquivo .js separado.
Quando demonstramos jQuery neste tutorial, as funções são adicionados diretamente na seção <head>. No entanto, às vezes é preferível colocá-los em um arquivo separado, como este (usar o atributo src para se referir ao .js):
Exemplo
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>
Teste-se com exercícios!
Exercício 1 » Exercício 2» Exercício 3 » Exercício 4» Exercício 5 » Exercício 6»