Fala devs! Hoje, vamos falar sobre uma biblioteca famosa e que foi e ainda é…
JQuery – Uma pequena introdução4 min read
Categoria: JQuery
Olá escavadores de bits! Hoje irei dar uma introdução ao JQuery. Mas, afinal o que é JQuery? JQuery é uma biblioteca JavaScript que contém muitas funções em JavaScript prontas para você usar, sem que você, desenvolvedor WEB precise ficar escrevendo código JavaScript para fazer coisa, que muitas vezes você precisará fazer novamente em um outro projeto. A biblioteca, na verdade começou com este propósito, ou seja, evitar que desenvolvedores Web fiquem “perdendo” tempo reescrevendo código. É recomendável que você saiba um pouco de JavaScript, antes de usar a biblioteca.
Vamos começar, mas antes de começar: você sabe o que é um seletor?
Para usar o JQuery, saber o que é um seletor CSS é muito importante. Não é nada complicado para quem tem algum conhecimento de HTML/CSS. Temos dois principais tipos de seletores:
– Seletor por ID
No seletor por ID temos um controle WEB, HTML, com um identificador único para o mesmo, ou seja, o atributo HTML ID só pode ser aplicado a um único elemento ou grupo de elemento. Exemplo:
<html>
<head>
<title>Minha Página</title>
</head>
<body>
<input type="text" id="txtNome"/>
</body>
</html>
Vejam que neste exemplo, temos uma tag do tipo input com ID=”txtnome”. Usando o Jquery, quando queremos, por exemplo, capturar um valor de um campo, indicamos o ID da input em questão para capturar o valor.
– Seletor por tag
No HTML, temos várias tags. Vejamos algumas: html, head, font, h, b, u, p e muitas outras. Essas tags, também servem como seletores.
JQuery – Escreva menos, faça mais
Para começar a utilizar o Jquery, devemos primeiro, baixar a biblioteca. Para isso devemos seguir até o site oficial: http://jquery.com/. Logo na página inicial, podemos ver o botão para baixar a biblioteca.Para utilizar a(s) biblioteca(s) Jquery – na verdade isso serve para qualquer plugin, feito em JavaScript – você deve adicionar a(s) referência(s) da(s) mesma(s) na sua página, entre as tags <head> …. </head>.Vejamos um cenário de aplicação do Jquery: temos uma página em que desejamos exibir o valor digitado em um campo para o usuário, quando o mesmo clicar em um botão. Veja o código completo abaixo:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<title>Minha Página</title>
<script type="text/javascript">
function exibirValor()
{
alert($('#txtNome').val());
}
</script>
</head>
<body>
<input type="text" id="txtNome"/>
<button onclick="exibirValor();">Exibir Valor</button>
</body>
</html>
Observe que na linha 3 temos adicionado a referência da biblioteca Jquery. Na linha 6 temos um função JavaScript chamada exibeValor() e a mágica está na linha 8:
alert($(‘#txtNome’).val());
Vela comentar que quando clicamos no botão, o mesmo, no evento onclick ,executa uma função, em JavaScript, chamada exibeValor(). Essa função com a ajuda de outra função JavaScript, chamada alert() – função nativa do JavaScript para exibir mensagens – executa um código em JQuery que captura o valor da <input type=”text” id=”txtNome”>
Código em Jquery que captura valor da input com ID=”txtNome”:
–> $(‘#txtNome’).val()
Explicando como usar o JQuery
A sintaxe básica do Jquery, como vimos acima é a seguinte:
$(seletor).funcao_jquery().
Para utilizar o Jquery com um seletor o tipo ID fazemos dessa forma:
–> $(‘#id_controle’).funcao_jquery();
Se for um seletor do tipo tag, devemos fazer desta forma:
–> $(‘a’).funcao_jquery();
Ou seja, neste caso estou selecionando a tag ‘a’ – que faz link com outros documentos HTML. Ou seja, utilizamos # (tralha) para seletor do tipo ID e somente o nome da tag no seletor do tipo tag.
Bem simples, certo!
Conclusão
A biblioteca Jquery é muito boa e facilita muito a implementação de funcionalidade que com JavaScript puro seria mais trabalhoso. Nos próximos posts irei mostrar outras coisas interessantes que podemos fazer com o Jquery.Vale comentar ainda que o Jquery tem suporte total na maioria do navegadores atuais, é grátis, fácil de implementar e com ampla documentação da funções, que podem ser vistas neste link: http://docs.jquery.com/Main_Page .