Introdução ao jQuery

A biblioteca jQuery pode ser adicionada ao site com uma simples marcação.

Biblioteca jQuery - Características

jQuery é uma biblioteca de funções JavaScript.

A biblioteca jQuery possui as seguintes características:

  • Seleção de elementos HTML
  • Operações de elementos HTML
  • Operações CSS
  • Funções de evento HTML
  • Efeitos e animações JavaScript
  • Navegação e modificação do DOM HTML
  • AJAX
  • Utilitários

Adicione a biblioteca jQuery à sua página

A biblioteca jQuery está localizada em um arquivo JavaScript, que contém todas as funções jQuery.

O jQuery pode ser adicionado à página usando a seguinte marcação:

<head>
<script type="text/javascript" src="jquery.js"></script>
</head>

Observe que o标签 <script> deve estar localizado na seção <head> da página.

Exemplo básico do jQuery

O exemplo a seguir demonstra a função hide() do jQuery, que oculta todos os elementos <p> do documento HTML.

Exemplo

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$("document").ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>Este é um título</h2>
<p>Este é um parágrafo.</p>
<p>Este é outro parágrafo.</p>
<button type="button">Clique em mim</button>
</body>
</html>

Experimente pessoalmente

Baixar jQuery

Existem duas versões do jQuery disponíveis para download: uma é compactada e a outra não (para depuração ou leitura).

Ambas as versões estão disponíveis jQuery.com Baixar.

Substituição da biblioteca

Google e Microsoft têm um excelente suporte para o jQuery.

Se você não quiser armazenar a biblioteca jQuery no seu computador, pode carregar os arquivos do núcleo jQuery do Google ou da Microsoft via CDN.

Usando o CDN do Google

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
</head>

Usando o CDN da Microsoft

<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
</head>