jQuery - Básico

<< Click to Display Table of Contents >>

Navigation:  jQuery >

jQuery - Básico

Previous pageReturn to chapter overviewNext page

Exemplo 1

 

Básico para usar jQuery

 

  <script language="javascript" type="text/javascript" src="util/jquery-1.2.6.js"></script>

  <script language="javascript">

 

       $(document).ready(function () {

           alert('Vim a vida!');

       });

       

  </script>

 

 

Explicação

 

Usa-se o cifrão ($) para referir-se a modificação de um elemento (podendo ser desde uma tag até uma classe e ID CSS).

Usamos os parênteses após o cifrão para identificar qual elemento será modificado.

Neste caso, nos referimos ao documento como um todo, pois os códigos que serão introduzidos irão alterar o conteúdo do documento.

 

A função .ready informa ao navegador que os comandos devem ser executados quando o documento estiver pronto (navegável).

Adicionamos o parentese após o .ready para informar ao navegador que os comandos enlaçados pelos parênteses deverão

ser executados no momento em que o documento for navegável.

 

O uso de function enlaça todos os comandos que deverão ser executados.

Use os colchetes e parênteses para fechar o enlace. Use ponto e virgula (;) para separar as linhas de comando e evitar erros de sintaxe.

 


 

Exemplo 2

 

Clique de um link

 

  <script language="javascript">

 

       $(document).ready(function () {

           $('a').click(function () {

               alert('olá mundo');

       });

       

  </script>

 

<body>

  <a href="#">clique aqui</a>

</body>

 

Explicação

 

Como já foi passado o uso do cifrão informa que elemento será alterado. Nesse caso a tag (“a”).

Quando fizemos a referência à tag “a” e usamos o comando .click , informamos ao navegador que uma ação deveria ser executada; nesse caso o comando alert que exibirá o texto “olá mundo”.

 


 

Exemplo 3

 

Adicionando CSS a todos os itens "p"

 

  <script language="javascript">

 

       $(document).ready(function () {

           $('a').click(function () {

               alert('olá mundo');

       });

     

  </script>

  <style type="text/css">

      .teste

       {

          border-width: 3px;

          border-style: dashed;

          border-color: red;

       }

  </style>

 

<body>

  <p>

     porem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sagittis ligula eget turpis pulvinar euismod. In rutrum odio

   </p>

  <a href="#">clique aqui</a>

</body>

 

Explicação

 

Agora, quando clicarmos no link, uma borda, de espessura media, pontilhada e vermelha, irá aparecer ao redor do texto (p).

Também podemos adicionar uma formatação CSS direto à tag, usando o comando .css().

Dentro dos parênteses, coloque a formatação desejada.

 

       $(document).ready(function () {

           $('a').click(function () {

               $('p').css('border', '3px dashed red');

           });

       });

 


 

Exemplo 4

 

Mouse over fica cor diferente

 

  <script language="javascript">

 

       $(document).ready(function () {

           $('#lista_teste').hover(

               function () { $(this).addClass('fundo'); },

               function () { $(this).removeClass('fundo');

           });

       });

  </script>

  <style type="text/css">

      .fundo

       {

          background-color: red;

          color: white;

       }

  </style>

 

<body>

          <ul id="lista_teste">

              <li>Amanda</li>

              <li>Ana</li>

              <li>Roberta</li>

              <li>Cris</li>

          </ul>

          <ul>

              <li>Débora</li>

              <li>Sandra</li>

              <li>Joao</li>

              <li>Amado</li>

          </ul>

 

Explicação 

 

Com esse comando você irá modificar apenas os itens que contenham a ID  “lista_teste”, no momento em que você passer o mouse sobre eles.

 


 

Exemplo 5

 

Clique de botão

 

  <script language="javascript" type="text/javascript" >

 

       $(document).ready(function () {

           $('#botao1').click(function () {

               alert('clicou no botão');

              return false;

           });

       });

  </script>

 

<body>

  <asp:Button ID="botao1" Text="Clique me" runat="server" onclick="botao1_Click"/>

 

Default.aspx.cs

 

      protected void botao1_Click(object sender, EventArgs e)

       {

           Response.Write("TESTE");

       }

 

Explicação

 

Note que se a função retornar False o botao1_Click do código CS não será executado.

 


 

Exemplo 6

 

Show e Hide

 

  <script language="javascript" type="text/javascript" src="util/jquery-1.2.6.js"></script>

  <script language="javascript" type="text/javascript">

 

       $(document).ready(function () {

           $('#botao1').click(function () {

               $('#paragrafo').hide('slow');

              return false; // evita o PostBack do botão para não sumir tudo

           });

 

           $('#botao2').click(function () {

               $('#paragrafo').show('slow');

              return false;

           });

       });

 

  </script>

 

<body>

  <asp:Button ID="botao1" Text="Esconder parágrafo" runat="server" />

  <asp:Button ID="botao2" Text="Mostrar parágrafo" runat="server" />

  <div id="textos">

      <p>

           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate, est quis

           ultrices ultricies, lorem lectus auctor felis, a auctor ipsum nisi eu eros. Pellentesque

           sit amet eros orci, non aliquet augue. Mauris dictum laoreet commodo. Curabitur

           vitae purus lorem. Phasellus ullamcorper hendrerit justo. Cras in laoreet magna.

      <p id="paragrafo">

           Nam cursus pretium mauris eget luctus. Nulla a diam sit amet dolor accumsan elementum.

           Aenean tortor massa, porta id semper ac, mollis sit amet tortor. Curabitur metus

           erat, bibendum in varius eget, euismod vitae urna. Pellentesque faucibus ultrices

      </p>

      <p>

           Maecenas eget adipiscing justo. Fusce non ligula est. Phasellus at ipsum eget est

           rutrum ultrices ut in nisl. Morbi nec massa vitae nibh accumsan vulputate. Quisque

           eros id lorem porttitor scelerisque.

      </p>

  </div>

 

Explicação

 

Com jQuery, é possível criar um pouco mais de dinamismo ao site.

Para isso, iremos usar os comandos .hide e .show.

Como os próprios nomes indicam, esses comandos escondem e mostram o conteúdo de uma tag.

 

É possível determiner a velocidade com que o conteúdo será escondido / exibido;

basta adicionar o parâmetro “fast” para rápido ou “slow” para devagar.

É aconselhado o uso desses comandos junto à botões ou links.

 


 

Exemplo 7

 

Find e Each

 

  <script language="javascript" type="text/javascript">

 

       $(document).ready(function () {

           $('#textos').find('li').each(function () {

               $(this).html($(this).html() + " de plástico");

           });

       });

 

  </script>

 

<body>

  <ul>

      <li>Boneca</li>

      <li>Carrinho</li>

      <li>Pipa</li>

      <li>Wii</li>

  </ul>

  <div id="textos">

      <p>

           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate, est quis

           ultrices ultricies, lorem lectus auctor felis, a auctor ipsum nisi eu eros. Pellentesque

          <p />

          <ul>

              <li>Boneca</li>

              <li>Carrinho</li>

              <li>Pipa</li>

              <li>Wii</li>

          </ul>

  </div>

 

Explicação

 

Nós usamos o comando .find para pesquisar os elementos filhos das tags, ou a própria tag.

Já o comando .each determina que, para cada elemento encontrado, o comando seguinte deve ser executado.

Esta linha de comando faz com que cada elemento definido seja alterado acrescentando uma string no final;

O comando .html busca a tag definida e faz a alteração.

Você pode usar o .find e .each para alterar qualquer tag, mas, no caso de tags que não possuam filhos (ex: <p>), você deve definir a busca dentro da tag <body>.

 

       $(document).ready(function () {

           $('body').find('p').each(function () {

               $(this).html($(this).html() + ' olá');

           });

       });

 

Neste exemplo o resultado será:

 

Boneca

Carrinho

Pipa

Wii

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate, est quis ultrices ultricies, lorem lectus auctor felis, a auctor ipsum nisi eu eros. Pellentesque olá

olá

Boneca de plástico

Carrinho de plástico

Pipa de plástico

Wii de plástico