8.1 Conectando o jQuery
Finalmente, chegamos à biblioteca jQuery. No momento em que este artigo foi escrito, ele já estava obsoleto e quase nunca é usado em novos projetos . Mas ao mesmo tempo era muito popular, muito bem documentado e há muitos exemplos na Internet com seu uso .
Portanto, se você está escrevendo um pequeno projeto web e não quer passar meses aprendendo frameworks modernos, recomendo que use a biblioteca jQuery.
Para usar as milhares de funções do jQuery, basta incluí-lo em sua página. Você pode fazer assim:
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
Trabalhar com jQuery pode ser dividido em dois tipos.
Primeiro, você pode obter um objeto de biblioteca jQuery, que é um elemento HTML regular agrupado em um objeto jQuery personalizado.
Em segundo lugar, o jQuery possui vários objetos globais que não estão vinculados a elementos HTML. Eles também precisam ser usados.
Vamos começar com o primeiro.
8.2 Trabalhando com seletores
jQuery usa seletores para trabalhar com objetos (lembra do CSS e suas classes?). Então, no jQuery, se você quiser selecionar algum objeto ou grupo de objetos, você precisa definir o seletor deles.
Exemplos:
| Código | Descrição | Observação | |
|---|---|---|---|
| 1 | $("div") | Seleciona todos os objetos com uma tag DIV | muitos objetos |
| 2 | $("img.#image123") | Seleciona todos os objetos com tag IMG e ID == image123 | um objeto |
| 3 | $("#imagem123") | Seleciona todos os objetos com ID == image123 | um objeto |
| 4 | $("div.artigo") | Seleciona todos os objetos com uma tag DIV que possuem artigo de classe | muitos objetos |
Digamos que queremos adicionar manipulação de eventos a todos os links onclick, veja como podemos fazer isso com jQuery:
$("a").click(function() {
alert("Click");
});
Três passos são dados aqui:
- Obtém o(s) objeto(s) que correspondem ao seletor
"a". - Criamos uma função anônima que chama o método
alert(). - Definimos essa função como um manipulador de eventos
clickpara todos os objetos do ponto 1.
Outra coisa boa sobre jQuery é que seu código é fácil de ler. Não é preciso muito para descobrir como tudo funciona. Se houver um código funcionando, será fácil entender o que ele faz.
8.3 Trabalhando com elementos de documento
Vejamos alguns cenários para trabalhar com um documento usando jQuery.
Obtenha o valor de um elemento (para elementos que possuem valores):
var result = $ ("selector").value();Defina o valor do elemento (para elementos que possuem valores):
$ ("selector").value(newValue);Como adicionar HTML dentro de algum elemento?
$ ("selector").html(newHTML);E como pegar o HTML que está dentro do elemento?
var html = $ ("selector").html();E se eu quiser obter/adicionar não HTML, mas texto simples? Aqui também não há surpresas.
var html = $ ("selector").text();E se eu quiser obter/alterar a cor de um elemento?
$ ("selector").color("red");Se você precisa trabalhar com estilos, isso também é fácil de fazer:
$ ("selector").css("color", "red");Como adicionar um novo elemento?
$ (".container").append($("h3"));
GO TO FULL VERSION