Aula 1 - Conhecendo o JQuery - ICRUZ Comunicação e Tecnologia
Aula 1 – Conhecendo o JQuery 27 de outubro de 2015
A meta não é o pensamento, é apenas um limite humano.~Steve JobsTweet
Esta obra é parte de um de nossos cursos, é muito relevante que entenda o objetivo dos nossos posts no link como ser um profissional de sucesso.
JQuery é uma biblioteca JavaScript(não é um framework), capaz de adicionar interatividade e dinamismo às suas páginas de forma mais simples, ela engloba muitas funções na qual o objetivo principal é "Write less, do more", ou seja, escreva menos e faça mais.
Suporte total ao CSS3
Muitos plug-ins e extensões;
Extensibilidade, ou seja, permite a adição de novas funcionalidades;
Integração com o Ajax
Usa algumas, senão todas, as sintaxes já utilizadas no CSS.
Novas versões não são compatíveis com browsers antigos
O uso excessivo de plugins pode pesar a página
O jQuery é um arquivo Javascript (.js) que deve ser linkado à página web;
Exemplo de instalação do JQuery:
Este arquivo pode ser baixado no site oficial http://jquery.com em dois formatos: Minified(Reduzido para pesar menos na página) e Uncompressed(Formatado para debug e uma melhor leitura das funcionalidades), o formato Minified é o mais utilizado quando se coloca o site em produção.
<html>	<head>	/*Formatação CSS*/	<style type="text/css">	body {	margin: 0;	}	/*Identifica a div pelo ID e define as propriedades: Cor de fundo, altura e largura.*/	#principal {	background: yellow;	width: 100px;	height: 100px;	}	</style>	/* Faz a inclusão do arquivo, ou seja, a 'instalação' do jQuery*/ <script type="text/javascript" src="code.jquery.com/ui/1.9.2/jquery-ui.js"></script>	/* Define o bloco javascript na qual será utilizado os comandos jQuery*/	<script type="text/javascript">	$(document).ready(function() { //Utilizado para aguardar a página carregar totalmente para depois começar a fazer as operações	$('button').click(function() {	$('#principal).css('background ','red');	}); });	</script>	</head>	<body>	<div id="principal">	<button type="button">Mudar Cor de Fundo</button>	</div>	</body>	</html>
/*Formatação CSS*/
/*Identifica a div pelo ID e define as propriedades: Cor de fundo, altura e largura.*/
/* Faz a inclusão do arquivo, ou seja, a 'instalação' do jQuery*/
<script type="text/javascript" src="code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
/* Define o bloco javascript na qual será utilizado os comandos jQuery*/
$(document).ready(function() { //Utilizado para aguardar a página carregar totalmente para depois começar a fazer as operações
$('#principal).css('background ','red');
<button type="button">Mudar Cor de Fundo</button>
Clique aqui e veja o exemplo funcionado.
$("seletor").acao();
O símbolo $ nada mais é do que um alias, ou apelido, no código acima, quando é escrito:
$('button') – busca na página por algum elemento que seja button, ou seja, todos elementos que fossem do tipo button seriam afetados, como no nosso caso só há um, então só ele foi afetado.
$('#principal') – assim como no CSS, buscas iniciadas com '#' indica que será selecionado pelo id, nesse caso, nossa div é afetada.
.css('background ','red') – Muda a propriedade do elemento que encontrou.
Em resumo, o comando dentro do script atribui o evento click a todos os botões contidos na página, e ao mesmo tempo já defini o que será executado após o clique. Nesse caso, ele procura no html qual elemento possui o id de nome 'principal' e modifica a propriedade CSS background dele para vermelho ('red'). No final só faz uma brincadeira de desaparecer e aparecer a div, pra demonstrar o uso de uma pequena animação.
A variedade de coisas que dá para se fazer com jQuery é muito empolgante, ele é sem dúvidas uma das bases de muitos sites e sistemas da web atual. Que tal você começar a testar o poder que ele pode dar em suas mãos? Clique aqui e veja o poder fluindo!