jQuery selector: Como selecionar elementos do DOM
IONOS editorial team4 mins
Componentes essenciais da biblioteca jQuery, selectors (ou seletores) facilitam a manipulação e a interação com elementos HTML. Conheça os seletores jQuery mais comumente utilizados e acompanhe exemplos de aplicação.
O que é jQuery selector?
Seletores jQuery são usados para encontrar ou selecionar elementos com base em diferentes critérios, como atributos, classes, IDs, tipos ou posições no DOM. Eles também possibilitam a combinação de diferentes condições para a criação de seletores complexos. Após selecionar elementos, você se torna capaz de executar ações, como de adicionar manipuladores de eventos com a ajuda do método jQuery.on(), alterar estilos CSS e ler conteúdos de elementos. Seletores também são úteis e podem ser igualmente usados em sistemas de gerenciamento de conteúdo (CMS). O jQuery no WordPress, por exemplo, permite a seleção e a edição de elementos com a mesma rapidez e eficiência.
O webspace da IONOS disponibiliza espaços de armazenamento especialmente desenvolvidos para abrigar projetos on-line. Com a ajuda dos aplicativos Click & Build, após uma instalação de único clique, você poderá criar um site personalizado, de acordo com as suas necessidades.
Como usar seletores jQuery
Esta é a sintaxe básica do jQuery selector:
$(selector)Aqui, selector corresponde ao critério que você deseja usar para selecionar elementos de um site. A combinação entre seletores e funções, como com jQuery.ajax() ou jQuery.each(), por exemplo, permite acessar elementos do DOM, recuperar dados de forma assíncrona e executar operações em loop. Assim, você poderá exibir e atualizar conteúdos dinâmicos no seu site com facilidade.
Integre a API da IONOS aos seus projetos de hospedagem para gerenciar processos de trabalho com segurança e eficiência. Documentação sobre a API da IONOS fornece todas as informações importantes para que você aproveite todo o potencial da solução.
Os seletores jQuery mais importantes
Apresentamos, a seguir, exemplos de códigos com os jQuery selectors mais utilizados:
Seletores de elementos:
// Seleciona todos os elementos <p> da página
$("p")Seletores de classes:
// Seleciona todos os elementos com a classe "classname"
$(".classname")Seletores de IDs:
// Seleciona o elemento com o ID "elementID"
$("#elementID")Seletores de atributos:
// Seleciona todos os elementos <input> com o atributo "type" igual a "text"
$("input[type='text']")Seletores hierárquicos:
// Seleciona todos os elementos <li> que são filhos diretos de elementos <ul>
$("ul > li")Seletores de filtros:
// Seleciona o primeiro elemento <p> da página
$("p:first")No tutorial de jQuery para iniciantes do nosso Digital Guide, você aprende como incorporar a biblioteca jQuery ao seu projeto, além de conhecer os principais seletores e sintaxes com mais profundidade.
Exemplo de uso de seletor jQuery
Neste exemplo de código, usamos um jQuery selector para selecionar todos os elementos <p> de um site e alterar conteúdo de texto:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("p").text("Novo texto para todos os parágrafos");
});
</script>
</head>
<body>
<p>Primeiro parágrafo</p>
<p>Segundo parágrafo</p>
<p>Terceiro parágrafo</p>
</body>
</html>Acima, a função $(document).ready() garante que o código jQuery só seja executado após o carregamento completo do DOM. Em seguida, com o seletor $("p"), selecionamos todos os elementos <p> da página. Por fim, o método text() muda o conteúdo de texto de todos os elementos <p> selecionados para “Novo texto para todos os parágrafos”.
A solução Deploy Now da IONOS permite que você implemente sites pelo GitHub de forma automatizada. Por arquivos YAML, você poderá alterar fluxos de trabalho e ações, de acordo com as necessidades do seu projeto. Ainda, seu painel gratuito fornece informações sobre o crescimento do número de visitantes, a duração das sessões e o histórico das visitas.