19/06/2009 14:57
Jquery é um framework desenvolvido em javascript, bastante leve e muito abrangente em termos de funcionalidades e bibliotecas, o qual ajuda na manipulação de seletores, atributos, eventos, efeitos, plugin para requisições assíncronas utilizando AJAX e tratamentos de retornos em XML, texto, scripts e JSON. Ele também tem vários suportes de controles visuais para o desenvolvimento de tabs, sliders, drag and drop.
Este framework é gratuito, faça o download no site oficial:
http://docs.jquery.com/Downloading_jQuery.
Entendendo o Jquery na prática:
Vamos fazer uma página para exemplificar a facilidade entre a navegação dos elementos do documento utilizando conceitos DOM (Document Object Model):
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Exemplo Framework Jquery</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//$() : utilizado em todas as funções que devem ser referenciadas a jQuery
//document : expressão que indica o documento HTML
//ready() : associado à leitura do documento enquanto está sendo carregado
$(document).ready(function(){
$('p:eq(0)').html('Texto adicionado em tempo de execução através do Jquery.');
document.getElementsByTagName("p")[1].innerHTML = 'Texto adicionado em tempo de execução através da javascript puro, sem uso o uso do framework.';
// Nos dois exemplos, é necessário percorrer o documento para encontrar tags <p>. Com o jquery, precisamos apenas indicar a tag que queremos selecionar, e informar qual o índice do retorno da coleção dos elementos que iremos trabalhar.
$('#content1').css({color:"red"});
document.getElementById('content1').style.color = 'red';
// Ambos percorrem o documento para achar a respectiva identificação do atributo ID de alguma tag. No jquery, o caractere "#" indica que trabalharemos com atributos ID. Outra coisa legal é aplicar estilos pelo jquery, com o qual há uma maneira bem fácil de inserir formatações passando os comandos que desejarmos por parâmetro. Neste caso, poderíamos continuar indicando formatações desta maneira: $('#content1').css({color:"red",padding:"10px",fontSize:"18px"});
$('.topico1').css({fontSize:"18px"});
var h5 = document.getElementsByTagName("h5");
for (i =0; i < h5.length;i++)
if (h5[i].className == 'topico2') h5[i].style.fontSize = '18px';
// Neste exemplo, é notável a praticidade deste framework. O caractere "." indica que trabalharemos com atributos class. Neste caso conseguimos aplicar o estilo com apenas 1 linha, já com o javascript puro precisamos de alguns passos a mais para conseguir aplicá-lo.
});
</script>
</head>
<body>
<p></p>
<p></p>
<div id="content1">Seleção por ID - framework.</div>
<p id="content2">Seleção por ID - javascript puro.</p>
<h5 class="topico1">Seleção por classe - framework.</h5>
<h5 class="topico2">Seleção por classe - javascript puro.</h5>
</body>
</html>
Para maiores detalhes, acesse o site oficial do jquery: http://www.jquery.com
Postado por: Maikon Cezário
Tags: jquery framework javascript
Bem-vindo ao blog do Claretiano Web Center, o núcleo de desenvolvimento web de toda Ação Educacional Claretiana
Além de mostrar todo o trabalho desenvolvido pelos webdesigners Diego Magrin e Maikon Cezário, este blog tem como objetivo transmitir muito conhecimento.
© Copyright 2008Tableless XHTML RSS