Quer dominar jQuery, mas ainda não está familiarizado com JavaScript? Não se preocupe! Comece sua jornada agora mesmo clicando aqui e descubra como fazer a web ganhar vida!
jQuery – Write Less, Do More
A biblioteca é um projeto da Fundação JavaScript, surgiu como resposta à necessidade de simplificar os scripts interpretados no client-side. Seu objetivo principal é capacitar os desenvolvedores a alcançarem mais com menos esforço, adotando o lema “Write Less, Do More” (Escreva menos, faça mais) como mantra da comunidade.
Com o jQuery, tarefas que normalmente exigiriam longos e complexos blocos de código podem ser simplificadas para uma única linha. Desde a implementação de efeitos visuais dinâmicos até a manipulação de eventos interativos, essa biblioteca possibilita que os desenvolvedores atinjam seus objetivos de forma rápida e eficiente, ao mesmo tempo que promove a escrita de código mais limpo, legível e conciso. Isso resulta em uma compreensão aprimorada do código para todos os envolvidos no projeto.
Demostração
// Em JavaScript puro
var botaoOcultar = document.getElementById('ocultarConteudo');
var conteudoDiv = document.querySelector('.conteudo');
botaoOcultar.addEventListener('click', function() {
if (conteudoDiv.style.display === 'none') {
conteudoDiv.style.display = 'block';
} else {
conteudoDiv.style.display = 'none';
}
Minha div .conteudo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
// Em jQuery
$("#ocultarConteudo").click(function() {
$(".conteudo").toggle();
});
Demostração
Minha div .conteudo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Suas principais Funcionalidades
- Resolução da incompatibilidade entre os navegadores.
- Redução de código para otimização e desempenho.
- Reutilização do código através de plugins.
- Integração com uma vasta quantidade de plugins criados por outros desenvolvedores.
- Facilidade para acessar e manipular o DOM de forma simplificada.
- Compatibilidade com AJAX (Asynchronous JavaScript And XML) para comunicação assíncrona com o servidor.
- Implementação segura de recursos do CSS1, CSS2 e CSS3 para garantir consistência visual e comportamento.
- Adoção de programação encadeada, em que cada método retorna um objeto, para melhor legibilidade e manutenção do código.
Seletores
No jQuery, os filtros são métodos que permitem selecionar elementos específicos de um conjunto de elementos correspondentes a um seletor. Eles são úteis para refinar a seleção de elementos, permitindo escolher elementos com base em diferentes critérios, como classe, ID, atributos, etc.
$(“*”) | Seleciona todos os elementos da página. |
$(this) | Seleciona o elemento atual que será manipulado dentro de uma função. |
$(“p”) | Seleciona todas as instâncias da tag < p >. |
$(“.example”) | Seleciona todos os elementos com a classe “example” aplicada. |
$(“[type=’text’]”) | Seleciona qualquer elemento com o atributo type aplicado como “text”. |
$(“p:first-of-type”) | Seleciona o primeiro elemento < p > encontrado na página. |
Verifica se pelo menos um dos elementos selecionados possui a classe especificada.
var hasMenuClass = $("#m2").hasClass("menu");
Remove elementos indesejados com base em uma função que retorna true para os elementos desejados e false para os indesejados.
$("p").filter(function(i) {
return i === 3;
});
Retorna um array de valores, onde cada valor está ligado a um elemento selecionado. Os valores são retornados pela função passada como parâmetro.
var ids = $("div").map(function() {
return $(this).attr("id");
});
Esses são apenas alguns exemplos de filtros que você pode usar no jQuery para interagir com os elementos da página de forma mais simples.