BotecoDigital.info

Trabalhar com javascript sempre foi uma grande dor de cabeça dos desenvolvedores web, o principal motivo é a incompatibilidade e a dificuldade de manipular o DOM.

Visando solucionar este problema surgiu uma biblioteca que facilita bastante a vida de quem trabalha com javascript a JQuery. Uma biblioteca que permite manipular e selecionar elementos do DOM de forma muito fácil.

Você pode baixá-la pelo seguinte endereço jquery.js ou também pode utilizá-la pelo google pelo seguinte link “http://jqueryjs.googlecode.com/files/jquery-1.3.2.js” e deve ser inserida na tag head (<script src=”jquery.js”></script>).

Vamos aos exemplos:

1
2
3
4
5
6
7
8
9

<div id="content">
<ul>
	<li><a href="#">Teste1</a></li>
	<li><a href="#">Teste2</a></li>
	<li><a href="#">Teste3</a></li>
	<li><a href="#">Teste4</a></li>
	<li><a href="#">Teste5</a></li>
</ul>
</div>

Bom vamos começar por um clássico quando clicarmos no link exibiremos a mensagem Hellos World:

1
2
3
4
5

$(document).ready(function() {
    $('a').click(function(){
        alert("Hello World");
    });
});

Antes de explicarmos o código vale chamar atenção para função $() ela recebe por parâmetro um seletor que identificará um elemento HTML e é através desta função chamaremos outras funções da biblioteca jQuery utilizando o operador “.” .

No nosso exemplo a primeira coisa que fazemos é selecionarmos o document ou seja o documento HTML em si e utilizarmos a função ready que executa a função passada para ela por parâmetro quando o DOM estiver pronto, ou seja, a página estiver carregada. Este é um recurso essencial já que sem ele as funções podem serem executadas sem que seus alvos(seletores) tenham sido carregados.

Na linha 2 selecionamos o elemento “a” ou seja os links da página e chamamos a função click e passamos por parâmetro uma função que exibe um alert(“Hello World”). A função click é, resumidamente, uma alias para o atributo onclick do elemento, então agora em qualquer link que clicarmos na página será exibida a mensagem “Hello World”.

Esta é uma das maiores facilidades que a JQuery proporciona, permitir que utilizemos seletores CSS para selecionarmos os elementos do DOM. Podemos desta forma selecionar os elementos com muita facilidade como por exemplo:

1
2
3
4

    $('h3')
    $('.botao')
    $('#conteudo')
    $('.content li a')

Na linha 1 selecionamos todos os elementos h3 da página, na 2 todos os elementos da classe botao na linha 3 selecionamos o elemento que tiver o id conteudo, na linha 4 selecionamos todos os elementos que a que estiverem dentro de um elemento li que estiverem dentro de um elemento que pertença a classe content.

Um outro seletor muito importante é o $(this) com ele é possível acessar a referência do elemento que chamou o método como vemos no exemplo asseguir.

1
2
3

$('#bloco a').click(function(){
    alert( $(this).attr('title'))
} );

Métodos mais comuns da JQuery

Vamos fazer agora uma pequena introdução à alguns métodos do JQuery:

1

    $('#bloco').html();

Retorna o HTML que estiver dentro do elemento.

1

    $('#bloco').html("Texto aqui");

Insere o texto passado por parâmentro dentro do elemento. Elimimando o conteúdo antigo.

1

    $('#bloco').append("Texto aqui");

Adiciona o texto enviado por parâmetro no final do conteúdo do elemento selecionado.

1

    $('#bloco a').attr('title','Boteco Digital');

Define o valor para uma propriedade do elemento selecionado.

1

    $('#bloco a').attr('title');

Retorna o valor de uma propriedade do elemento selecionado.

1

    $('#bloco input').val();

Retorna o valor de campo do formulário.

1

    $('#bloco').addClass("vermelho");

Adiciona a classe passada por parâmetro ao elemento selecionado.

1
2
3
4
5

    $('#bloco').hover(function() {
		$(this).addClass("verde");
	}, function() {
		$(this).removeClass("verde");
	});

Simula o :hover, quando o mouse estiver sobre o elemento selecionado executa a linha 2, quando o mouse saber de cima do elemento selecionado executa a linha 4.

1

    $('#bloco').css('background','#CCC');

Define propriedade CSS para um elemento selecionado.

1

    $('#bloco').css('background-color');

Retorna o valor da propriedade CSS.

1
2
3

$('#bloco select').change(function(){
    alert( $(this).val())
} );

Executa a função passada por parâmetro quando o elemento selecionado for alterado

Mais funções podem ser encontradas aqui.

Pessoal comentem o que acharam, se está claro. No próximo artigo irei ensinar como fazer um pouco de animação com JQuery.

T++.c