Websites – Introdução ao JQuery – Linux

Publicado: 23 de outubro de 2014 em JavaScript, JQuery
0

O jQuery é uma biblioteca livre de código aberto e que possui uma licença dual, fazendo uso da Licença MIT ou da GNU. A sintaxe do jQuery foi desenvolvida para tornar mais simples a navegação do documento HTML, a seleção de elementos DOM, criar animações, manipular eventos e desenvolver aplicações AJAX. A biblioteca também oferece a possibilidade de criação de plug-ins. Fazendo uso de tais facilidades, os desenvolvedores podem criar camadas de abstração para interações de mais baixo nível, simplificando o desenvolvimento de aplicações web dinâmicas de grande complexidade.

JQuery: http://jquery.com/

Sendo uma biblioteca JavaScript rápida, pequena e rica em recursos. O JQuery mudou a maneira que milhões de pessoas passaram a escrever JavaScript. Grandes empresas como a IBM, Mozilla, Adobe entre outras se tornaram-se parceiras do JQuery e prestam suporte tornando possível a Fundação JQuery. Fundada com parcerias da IBM e WordPress, está parceria visa melhorar a web aberta, tornando-a acessível a todos, através do desenvolvimento e suporte de software de fonte aberto, e colaboração com a comunidade de desenvolvimento.

JQuery Fundation: https://jquery.org/

Instalando o JQuery

O JQuery é um arquivo de tamanho muito pequeno e simples de instalar, você pode utiliza-lo localmente baixando o arquivo no seu computador e fazendo referencia ao script jquery.js ou pode utiliza-lo diretamente da web.

Hello World - JQuery

Hello World – JQuery

Sintaxe JQuery

A sintaxe do JQuery possui basicamente a proposta de selecionar elementos e executar ações sobre eles. O sinal $ (dólar) define o acesso ao JQuery e suas funções e assim manipular os elementos através de eventos.

Ready

O Ready é um evento do JQuery que ao contrario do JavaScript que utiliza o evento LOAD quando a página é processada e o LOAD não é acionado até que todos os ativos, como as imagens tenham sido completamente carregadas. O READY pode ser executado logo que a hierarquia de DOM possa ser totalmente construída, de modo que este geralmente é o melhor lugar para anexar todos os outros manipuladores de eventos e executar outro código jQuery

Exemplo:

Neste exemplo básico acessamos o JQuery através da web e o utilizamos para manipular um evento de clique sobre um link e o CSS da pagina HTML.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta charset="utf-8" />
	<title>Desenvolvimento Aberto</title>

	<!-- Está é uma instalação do JQuery, você apenas precisa apontar
	     o para o respectivo script da versão que você deseja utilizar -->

   <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"> </script>

   <!-- Este é um script JQuery básico que manipula o CSS e um evento de clique.
        Todo o script roda no evento equivalente ao Load da pagina html-->     

   <script>
   $( document ).ready(function() {

          $("body").css("background-color", "#363636");
          $("body").css("color", "#ffffff");
          $("h1").css("background-color", "#483D8B");
          $("h1").css("padding", "20px");
          $("h2").css("background-color", "#4682B4");
          $("h2").css("padding", "20px");
          $("p").css("background-color", "#ffffff");
          $("p").css("color", "#64645A");
          $("p").css("padding", "20px");
          $("a").css("color", "#E066FF");

    $( "a" ).click(function( event ) {
        alert( "Desenvolvimento Aberto.\nObrigado por visitar!" );
    });
	});       

   </script>
</head>

<body>
	<h1> Desenvolvimento Aberto</h1>
	<h2>Aprenda JQuery --> Hello World!</h2>
	<p>Desenvolvimento Aberto é uma organização voltada para o aprendizado e discussão de técnicas de
	   desenvolvimento focado em algumas linguagens de programação sendo parcialmente/totalmente abertas ou
	   com licenças gratuitas para desenvolvedores de cada uma de suas respectivas marcas registradas.<br />	<br />
		Desenvolvimento Aberto foi escrito e desenvolve utilizando ferramentas gratuitas disponibilizadas
		pelas melhores empresas de software da atualidade, incluindo a própria hospedagem e design deste site,
		sendo assim, também proporciona conteúdo gratuito, isso quer dizer que você não paga nada para aprender
		e utilizar as tecnologias de ponta que podem ser manuseadas através das linguagens de programação mais
		 requisitadas pelas empresas no mercado atual.
	</p>
	<a href="#">Clique aqui!!!</a>
</body>
</html>

 

Deixe um comentário