Olá! Monday, 18 de December de 2017.



Dicas CódigoFonte.net
Friday, 18 de January de 2008

jQuery: O que é e como usar?

Salve, Salve comunidade CodigoFonte.net!

Hoje vou explicar um pouco sobre o que é a biblioteca jQuery.

jQuery é uma excelente e leve biblioteca para desenvolvimento rápido de javascripts que interagem com sua página html, com ela podemos atribuir eventos, definir efeitos, alterar ou criar elementos na página, dentre diversas outras infinidades de ações.

Existem ainda vários plugins já feitos em jQuery que nos auxiliam em validações ou máscaras de formulário.

Maravilha, não acham?

E como usar o jQuery?

Antes de tudo devemos baixar a versão da biblioteca, que pode ser uma compilada (mais leve) ou o fonte puro (um pouco maior).

Leve - http://code.google.com/p/jqueryjs/downloads/ detail?name=jquery-1.2.2.pack.js
Não comprimida - http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.2.js

Após baixarmos o jQuery, teremos que incluir a sua referência no cabeçalho da página html:

  1. <script type="text/javascript" language
  2. ="javascript" src="javascript/jquery.js"></script>


Lembre-se que o caminho do arquivo e o nome do .js deve ser o mesmo que você utilizou quando salvou após ter baixado a biblioteca.

Um outro ponto importante é conhecermos um pouco sobre o DOM (Modelo de Objetos de Documentos), veja mais em http://pt.wikipedia.org/wiki/Modelo_de_Objeto_de_Documentos

Nosso primeiro comando com jQuery

Bom, são inúmeros comandos que podem ser feitos utilizando o jQuery, recomendo a todos uma lida na documentação (em inglês apenas). Lá vocês podem encontrar comandos separados por categoria e ajudam a você identificar o uso no seu caso.

Documentação - http://docs.jquery.com

Vou mostrar como exibir um "Olá mundo" quando se clica em um botão.

Mas lembre-se que o aconselhável é sempre tratarmos os elementos de nossa página com seus IDs, que devem ser únicos.

  1. <button id="botao">Clique aqui</button>


E nosso código jQuery:

  1. <script type="text/javascript">
  2.  
  3. $(document).ready(function(){
  4.  
  5. $("#botao").click(function() {
  6.  
  7. alert('Olá mundo');
  8.  
  9. });
  10.  
  11. });
  12.  
  13. </script>
  14.  


Sintaxe:

$() : utilizado em todas as funções que devem ser referenciadas a jQuery
document : expressão que indica o documento HTML
ready() : associado a leitura do documento enquanto está sendo carregado
function{} : dentro das chaves {}, colocar os comandos javascript ou jQuery que serão interpretados pelo browser (isso mesmo o browser é um interpretador de comandos)

A primeira linha temos o evento ready que age sobre o documento html $(document).ready(), ele será responsável por atribuir os eventos das funções que definimos apenas quando o DOM estiver preparado pelo navegador.

Na segunda linha de comando estamos definindo um evento ao clicar no botão com ID #botao, mostrando uma caixa de alerta.

Este é apenas uma pequena fração do que é possível se fazer com jQuery, mas já temos uma noção do que serve e como usar.

Até a próxima.

[]s

Comentários do artigo [Novo comentário]

Robson Santiago de Oliveira - 16 de April de 2011 - 17:08
Primeiramente quero parabenizá-lo pelo site, cuja variedade de temas impressiona.
Mas vim aqui para pedir auxílio para a minha questão que se refere ao jquery.jcoverflip. Tenho uma loja Magento e não consigo inserir este carrossel na loja: http://www.jcoverflip.com/demo.

Muito obrigado
Para adicionar um comentário você deve efetuar o login


Gostou do CódigoFonte.net? Quer indicar a um amigo?
Preencha os campos a seguir.
Seu Nome:
Seu E-mail:
E-mail de seu Amigo:


CodigoFonte.net » Meu Mural » Competiva - Criação de Sites » Todos os Direitos Reservados © 2002/2010