O jQuery, without a doubt, revolutionized the way we write code in the Javascript language. Not only for its ease, but also for the great variety of resources that we can have 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 most impresses 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 it even better, now jQuery is hosted by Google and its “super cache”.
Including the framework in the project
To include this library in your project, there are 3 distinct ways:
- Download the file and host it locally on your server.
- Use the Google API to load the library:
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.12<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> - API Direct Call (My Favorite):
1<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
Introduction to Selectors
One of the big draw of the jQuery development team was thinking about the convenience and ease of their selectors. Selectors are ways of grouping and selecting multiple objects via Javascript and applying actions and events to this group of elements or to a specific element. This grouping can be accomplished using the #id, the object class, a CSS feature, object name, an HTML attribute on the page, child elements of a parent element, and more!
Examples:
- Selecting all tags gives and changing the font color to #ffffff with CSS.
|
1 |
$("#teste p").css("color", "#fffffff"); |
- Retrieve all elements whose class = 'testClass' and add the class “anotherClass” to the elements.
|
1 |
$(".testeClasse").addClass("outraClasse"); |
- Retrieve all link elements ( ) that do not have the “product” class
|
1 |
$("a:not('.produto')") |
- Retrieve all link elements ( ) that open external links (target = '_ blank')
|
1 |
$("a[target='_blank']") |
- Retrieve all link elements ( ) that open links that contain “facebook.com”
|
1 |
$("a[href*='facebook.com']") |
- Retrieve the first, last and 9th link elements ( ) of the page
|
1 2 3 |
$("a:first"); $("a:last"); $("a:nth(8)"); // Índice inicia em 0 |
See more about all selectors accessing this link.
Events
Another major revolution that jQuery brought to Web development was the way we manage the events of our applications. Before, we had to “contaminate” our HTML pages with onclick, onchage, onblur codes, etc. which goes completely against the layered development pattern, separating the business rules from the interface (Yes, you can program object-oriented and using MVC in Javascript).
That has now changed! With jQuery, we can fully isolate HTML pages and Javascript codes.
Examples:
- Printing on the screen the selected value of a whose id = ”student_id”
|
1 2 3 4 |
$("#id_aluno").change(function() { var valor_selecionado = $(this).val(); alert(valor_selecionado); }); |
- Validating a field with id = “name” before submitting the form whose id is “frmCadastroAluno”
|
1 2 3 4 5 6 |
$("#frmCadastroAluno").submit(function() { if ($("#nome").val().length == 0) { alert("Por favor, preencha o campo Nome"); return false; } }); |
- Printing the URL of a link ( ) when clicking and not following the link:
|
1 2 3 4 5 6 7 8 9 10 |
$("a").click(function (e) { e.preventDefault(); var elemento = $(this); var link = elemento.attr("href"); alert(link); }); |
See all events accessing this link.
Plugins
Another great innovation that this project provided us was the creation and use of plugins to reuse code. If you search Google, you will find thousands of plugins, which do the most varied functions in conjunction with jQuery. Image galleries, visual effects, new features, usability improvements, interface improvements…
Below is my list of indispensable plugins
- Tablesables - Improvements and improvements in tables, such as ordering.
- TipTip - New interface for help balloons, more elegant and friendly.
- SexyAlertBox - A more modern and stylish way to display alert messages.
- Easing - A plugins that provides different effects for your applications.
- jCarousel - One of the best plugins for making an image carousel.
- Colorbox - A super light and elegant photo gallery, with 5 different themes.
- Cycle - The best and most complete plugin to create an animated banner.
- Uploadify - The best solution for sending multiple uploads. Very customizable and adapts well to any project or need.
- MaskMoney - Plugin that allows you to create currency-type fields easily and without complications.
- InputValue - Make a filter of what types of values will be accepted by the fields of your form with this plugin.
- MaskedInput - Create a mask for the most diverse fields of your form, such as phone, email, CPF, etc.
- BlockUI - "Lock" your user interface while a process is running in the background or to focus on the other window.
- MeioMask - Brazilian plugin that performs different types of masks and validations on forms.
- jQuery SWFObject - Insert Flash animations into your applications dynamically and without causing HTML validation problems in the W3C validator.
