Isto Mesmo Even this

Ultimamente muito se tem ouvido falar sobre JQUERY . Lately much has been heard about JQUERY. Mas afinal que linguagem é esta? But ultimately it is this language? A JQUERY é uma biblioteca de Javascript extremamente útil no desenvolvimento com esta linguagem. The JQUERY a library of Javascript is extremely useful in the development with this language.

Mas quais são as mais valias que a JQUERY traz ao desenvolvimento com javascript? But what are the capital gains that JQUERY development brings with javascript?

Só quem ainda não teve necessidade de utilizar javascript no desenvolvimento de websites, não se deparou com a dificuldade que é desenvolver utilizando esta linguagem, problemas com CSS’s, compatiblidade entre browsers, problemas de acessibilidade, etc… Only those who still had no need to use javascript in the development of websites is not faced with the difficulty that is developed using this language, problems with CSS's, Compatibility between browsers, problems of accessibility, etc ...

O objectivo deste tipos de bibliotecas, como a JQUERY, é exactamente facilitar e uniformizar o desenvolvimento com Javascript, abstraindo os programadores deste tipo de problemas, focando-os apenas no desenvolvimento puro. The purpose of types of libraries, as JQUERY, is exactly facilitate and standardize the development with Javascript, disregarding the developers of such problems, focusing on them only in developing pure.

As várias bibliotecas Javascript existentes, utilizam aproximações um pouco diferentes umas das outras, mas todas com o mesmo objectivo. The various existing JavaScript libraries, using somewhat different approaches from each other, but all with the same objective. Existem bibliotecas que são constituídas por vários ficheiros, com as várias funcionalidades separadas em cada ficheiro, permitindo optimizar o seu download, restringindo-nos apenas aos ficheiros necessários. There are libraries that consist of multiple files with the various features in each separate file, so optimize your download, restricting us to only the necessary files. Um exemplo desta aproximação é a biblioteca MooTools . An example of this approach is the library MooTools.

A JQUERY é constituída por um ficheiro javascript único , onde tenta criar um modelo de abstração que nos permite programar em javascript de uma forma simples, elegante e intuitiva . The JQUERY consists of a single javascript file, which tries to create a model of abstraction that allows us to plan in javascript in a simple, elegant and intuitive. A versão comprimida deste ficheiro ocupa apenas 14KB! The compressed version of this file occupies only 14KB! Excelente! Excellent!

A popularidade desta biblioteca tem aumentado bastante nos últimos anos, como é visível através do Google Trends: The popularity of this library has increased greatly in recent years, as is visible through Google Trends:

Sites como a BBC, o Digg, a Intel, o Technorati, entre outros, já utilizam esta biblioteca, o que demonstra que as suas capacidades estão comprovadas. Sites such as the BBC, the Digg, Intel, the Technorati, among others, already use this library, which demonstrates that their skills are proven.

Agora que já ficámos com uma introdução sobre JQUERY, vamos passar a um pequeno exemplo, para que possamos ver o verdadeiro poder desta biblioteca. Now that we have with an introduction on JQUERY, let's move to a small example, so we can see the true power of this library. Para isso, vamos efectuar o download da última versão (neste momento 1.2.3) através do endereço : For this, we will download the latest version (now 1.2.3) through the address:

http://docs.jquery.com/Downloading_jQuery http://docs.jquery.com/Downloading_jQuery

Para efeitos de teste, podemos efectuar download da versão normal (não compactada) For the test, we can make downloading the standard version (not compressed)

O primeiro exemplo será o famoso Olá Mundo, utilizando JQUERY. The first example is the famous Hello World, using JQUERY. Umas das vantagens que vamos encontrar imediatamente neste exemplo, é na utilização do evento window.onload , que provocava imensas chatices. One of the advantages that we will find immediately, in this example is the use of window.onload event, which caused immense trouble. Com o JQUERY este problema está resolvido, pois dispomos de uma pequena função que é executada assim que o DOM está carregado. With JQUERY this problem is solved because we have a small function that is executed once the DOM is loaded.

 $(document).ready(function(){alert("Olá Mundo JQUERY!");}); $ (document). ready (function () (alert ( "Hello World JQUERY !");}); 

Fácil, não é? Easy, right?
Esta função pode ser usada as vezes que necessitarmos, sem que exista qualquer problema. This function can be used as often as you need and there is no problem.

Vamos passar para um exemplo com animação e com o click num link. Let's move to an example with animation and with the click a link.
No código HTML vamos criar um link e uma div por baixo com algum texto, como é mostrado de seguida: In the HTML code we will create a link and a div with some text underneath, as shown below:

 < div > <Div> 

    < a href =”#” > Clica Aqui </ a > <A href = "#"> Click Here </ a> 

    < div id =”divTexto” style=”background-color:#FF0000″ > <Div id = "divTexto" style = "background-color: # FF0000"> 

       Texto e mais texto… Text and more text ... 

    </ div > </ Div> 

 </ div > </ Div> 

No header da página vamos inserir o código para mostrar/esconder o div que contém o texto. In the header of the page we will insert the code to show / hide the div that contains the text. Esse código é apresentado a seguir: This code is shown below:

 <script type= “text/javascript”  language= “javascript” > <script type= "text/javascript" language= "javascript"> 

 $(document).ready( function () { $ (document). ready (function () ( 

     $( “a” ).toggle( function () { $ ( "A"). Toggle (function () ( 

         $( “#divTexto” ).hide( ’slow’ ); $ ( "# DivTexto"). Hide ( 'slow'); 

         }, function () { ), Function () ( 

         $( “#divTexto” ).show( ‘fast’ ); $ ( "# DivTexto"). Show ( 'fast'); 

     }); )); 

 }); )); 

 </script> </ script> 

Experimentem agora clicar no link, e verifiquem que a div de texto é escondida/mostrada com um efeito bastante agradável. Now try clicking the link, and find that the text is hidden div / shown with a very pleasant.

Esta função esconde ou mostra a div “divTexto” ( $(”#divTexto”) ) sempre que se clica num link da página ( $(”a”) ). This function shows or hides the div "divTexto" ($ ( "# divTexto")) where you click a link on the page ($ ( "a")).

Para obtermos o objecto divTexto utilizamos $(”#divTexto”) que é muito semelhante ao document.getElementByID(”divTexto”) , mas muito mais simples, e sem problemas de compatibilidade entre browsers. To get the object divTexto use $ ( "# divTexto") that is very similar to document.getElementById ( "divTexto"), but much more simple and without problems of compatibility between browsers.

Como devem ter reparado, adicionámos funcionalidades à página, sem introduzirmos javascript no body do html. As should be repaired, add features to the page, without introducing the body of html javascript. Esta é uma grande vantagem desta biblioteca, pois permite-nos interagir com os elementos do DOM de uma forma fácil e não intrusiva, tornando mais fácil possíveis alterações no futuro. This is a big advantage of this library because it allows us to interact with the elements of the DOM of a non-intrusive and easily, making it easier changes in the future.

Espero que com este tutorial tenham ficado com uma pequena ideia das capacidades da JQUERY, pelo menos que tenham ficado curiosos. I hope that with this tutorial have been with a small idea of the capabilities of the JQUERY, which have been at least curious.

Se gostaram deste artigo subscrevam a feed RSS do istomesmo, para ficarem actualizados sobre os últimos artigos. If you liked this article subscribe to the RSS feed istomesmo, to stay updated on the latest articles.

Subscrevam aqui a fedd RSS Subscribe here RSS fedde

publicado por NC Etiquetas: 14 , 33 , 49 , 50 , 53 , 92 , 93 , 95 published by NC Etiquetas: 14, 33, 49, 50, 53, 92, 93, 95