Ubuntu Para Iniciantes

MANIPULANDO LINKS COM O JQUERY


Os links são ancoras de acesso que ligam conteúdos de uma mesma página, de um mesmo site e de conteúdo fora, alavancando a internet.

Eu não sei a quanto tempo você programa, se é que programa, mas acredite a internet já foi bem pior, porém gostávamos do mesmo jeito ;)

Com o avanço dos frameworks, no caso o JQuery, a internet sofreu uma grande transformação, permitindo uma maior acessibilidade e funcionalidade aos usuários.

O que você encontrará neste post:
  • Um breve explicação do JQuery
  • 2 exemplos para controlar links com Jquery


usar o jquery para manipular links

MANIPULE LINKS COM O JQUERY


A manipulação de links é algo, nos tempos atuais, bem natural do ambiente de desenvolvimento para páginas da web. Existem várias utilidades para se controlar os links, desde solicitar uma página até enviar dados para outra sessão.

Algo importante a se dizer é que o JQuery é uma biblioteca, um framework que utiliza o JavaScript em sua arquitetura. Tudos os elementos HTML controlados, inclusive o próprio navegador, é gerenciado pelo JavaScript, o JQuery otimiza este processo, reduzindo as linhas de codificação e deixando o código mais amigável.

Bem, o exemplo abaixo, apresenta dois links, ao clicar em cada um deles ira apresentar uma mensagem contento o texto de cada link, no caso Link 1, se clicar no primeiro e Link 2 caso clique no segundo.

Clique nos links abaixo:



ESTUDANDO O EXEMPLO ACIMA DO JQUERY

É necessário dizer para o navegador que você irá usar a biblioteca do Jquery. Para este exemplo eu estou usando uma chamada direto do Google, que deve ficar entre as tags </head> </hedad> da página.


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>


Você pode acessar a página em que o Google mantém atualizado a versão do JQuery e copiar o código que ele disponibiliza. Existem várias formas possíveis de se fazer isso, esta é uma delas.


Posteriormente é necessário dizer ao navegador que será executado a codificação do framework. Então, também dentro das tags <head> </head>, você pode usar:


<head>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>


   $(document).ready(function(){



   })


</head>


O simbolo do $ é uma apelido, um alias, para JQuery, chamando a execução do framework que fará a leitura da estrutura da página/navegador, logo especifica o paramêtro document chamando a função ready para fazer a "leitura".


Portanto todas as outras funções devem estar dentro da função document para que sejam executadas.


A estrutura HTML dos links estão codificadas da seguinte forma:


<a href="#" class="lk" >Link 1</a>
<a href="#" class="lk">link 2</a>


Perceba que o atributo href do link não está direcionado para nenhum outro endereço, o  para nenhum outro o JQuery permite que você controle um elemento html de várias formas, neste caso os links serão controlados pelo nome da classe que está definido no atributo class de nome lk, que poderia conter qualquer outro nome.


O framework pode ser executando ações como ao clicar, ao passar o mouse, ao retirar o mouse e outros. Neste caso irei executar chamando a propriedade click, referenciado a classe lk.


<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

   $(document).ready(function(){

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

       alert( $(this).text() );

    });

   })

</head>

O que a codificação acima quer dizer é que, quando o o link, que tempo por referência a classe lk, por isso $('.lk'), for clicada, ela emite uma mensagem. O elemento this faz referência ao próprio link.

OUTRO EXEMPLO COM O EVENTO ONCLICK DO JQUERY

Agora mais um exemplo com uma DIV alterando a cor do background. Neste exemplo, ao clicar no Link 3 será alterado a cor da div para vermelho, quando clicar no Link 4, retornará para azul.

<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
   
$(document).ready(function(){

  /*$('.lk').click(function(){

   alert( $(this).text() );

  })*/
 
   $('.lks').click(function(){
   
   
     var rlink = $(this).text();  
     switch(rlink){
       
        case 'link 3':
       
        $('#quadrado').css('background-color','#ff0066')     
     
        break;
       case 'link 4':
            $('#quadrado').css('background-color','#8080ff')
       
        break;
       
    }
        
 })

})

</script>

<style>
  #quadrado{
     
      height:200px;
      width:200px;
      border:1px solid #000;
      background:#8080ff;
  }

</style>
</head>
  <body>

 <div id="quadrado">

</div>

</body>

Veja o resultado clicando nos links abaixo:



Perceba que no código acima foi criado uma variável chamada rlink que conterá o valor de $(this).text() ao clicar em um dos links.

Existem várias outras aplicações para manipulações de links com JQuery. Você ainda pode, escrever em algum elemento html, alterar tamanho, alterar os atributos e muito mais.

Você também poderá gostar de ver estas outras postagens:
Como saber se os dados foram enviados para o banco de dados
Entendendo e aprendendo JQuery

Seja bem vindo ao Ubuntu Para Iniciantes. Deixe seu recado logo abaixo com suas críticas e sugestão. Assine também a lista de e-mails e receba as atualizações em sua caixa de entrada. Um grande abraço.

MANIPULANDO LINKS COM O JQUERY Reviewed by Ubuntu para Iniciantes Marcelo Weihmayr on 08:30:00 Rating: 5

Nenhum comentário :

Olá, faça seu comentário com sugestões, dicas ou críticas

Powered By Blogger , Designed by Sweetheme

Formulário de contato

Nome

E-mail *

Mensagem *

Marcelo Weihmayr. Tecnologia do Blogger.