THE jQuery, without a shadow of a doubt, revolutionized the way we write codes in the Javascript language.  Not only because of its ease, but also because of the wide variety of resources that we can have when using this excellent JavaScript framework, ranging from simple DOM edits to Ajax requests and event handling.

Used by most web developers today, this framework has been constantly updated and improved, but one of the things that is most impressive is the size of the framework, which together with GZip reaches a size of less than 30KB. That's right, you can enjoy all these features and it will weigh your project in just 30KB. And to make things even better, jQuery is now hosted by Google and its “super cache”.

Including the framework in the project

To include this library in your project, there are 3 different ways:

  • Download the file and host it locally on your server.
  • Use  the Google API for library loading:
    <script src="http://www.google.com/jsapi?key=sua_chave_aqui" type="text/javascript"</script>
<script type="text/javascript">google.load('jquery','1.8.3');</script>
    where “1.8.3” is the version of the framework you want to use. If you enter '1' in this parameter, the Google API will always return the most recent version.
  • Direct API call (My favorite):
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>

Introduction to Selectors

One of the great attractions of the jQuery development team was thinking about the practicality and ease of its selectors. Selectors are ways to group and select multiple objects via Javascript and apply actions and events to that group of elements or a specific element. This grouping can be carried out using the #id, the object's class, a CSS characteristic, the object's name, an HTML attribute on the page, child elements of a parent element and much more!

Examples:
– Selecting all

tags from

and changing the font color to #ffffff with CSS.

$("#teste p").css("color", "#fffffff");

– Retrieve all elements whose class=’testeClasse’ and add the class “outraClasse” to the elements.

$(".testeClasse").addClass("outraClasse");

– Retrieve all link elements () that do not have the “product” class

$("a:not('.produto')")

– Retrieve all link elements () that open external links (target=’_blank’)

$("a[target='_blank']")

– Retrieve all link elements () that open links that contain “facebook.com”

$("a[href*='facebook.com']")

– Retrieve the first, last and 9th link element () of the page

$("a:first");
$("a:last");
$("a:nth(8)"); // Índice inicia em 0

See more about all selectors by accessing this link.

Events

Another great revolution that jQuery brought to Web development was the way we manage events in our applications. Before, we had to “contaminate” our HTML pages with onclick, onchage, onblur, etc. codes. which goes completely against the layered development pattern, separating business rules from the interface (Yes, you can program object-oriented and using MVC in Javascript).

That has now changed! With jQuery, we can completely isolate HTML pages and Javascript codes.
Examples:
– Printing on the screen the selected value of a