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:

  1. Obtém o(s) objeto(s) que correspondem ao seletor "a".
  2. Criamos uma função anônima que chama o método alert().
  3. 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"));
Java university