JQuery Javascript Framework Introduction

Views: 194
Reading Time: 3 minutes

O jQueryIt has undoubtedly revolutionized the way we write code in the Javascript language. Not only for ease, but also for the wide variety of features we can use by using this excellent javascript framework, ranging from simple DOM editing 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 impresses most is the size of the framework, which together with GZip is less than 30KB. That's right, you can enjoy all these features and this will weigh your project on just 30KB. And to make it 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 distinct ways:

  • Download the file and host it locally on your server.
  • Use the Google API for library load:
    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 latest version.
  • API Direct Call (My Favorite):

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 <p> tags from <div id = 'test'> and changing font color to #ffffff with CSS.

- Retrieve all elements whose class = 'testClass' and add the class 'otherClass' to the elements.

- Retrieve all link elements (<a>) that do not have the class “product”

- Retrieve all link elements (<a>) that open external links (target = '_ blank')

- Retrieve all link elements (<a>) that open links containing “facebook.com”

- Retrieve first, last, and 9th link element (<a>) from page

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. Previously, we had to “contaminate” our HTML pages with onclick, onchage, onblur, etc. code. which totally goes against the pattern of layered development, separating business rules from the interface (yes, you can object-oriented programming and using MVC in Javascript).

That has now changed! With jQuery, we can fully isolate HTML pages and Javascript codes.
Examples:
- Printing on screen the selected value of a <select> whose id = ”student_id”

- Validating a field with id = “name” before submitting the form whose id is “frmCadastroAluno”

- Printing the URL of a link (<a>) by clicking and not following the link:

See all events accessing this link.

Plugins

Another great innovation that this project provided us was the creation and use of code reuse plugins. If you search Google, you will find thousands of plugins, which perform the most varied functions in conjunction with jQuery. Image galleries, visual effects, new features, usability enhancements, interface enhancements…

Below is my list of indispensable plugins

  • Tablesables - Table enhancements and enhancements, such as sorting.
  • 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 various effects for your applications.
  • jCarousel - One of the best plugins to make a carousel of images.
  • Colorbox - A super light and elegant photo gallery with different 5 themes.
  • Cycle - The best and most complete plugin for creating an animated banner.
  • Uploadify - The best solution for sending multiple uploads. Well customizable and fits well for any project or need.
  • MaskMoney - Plugin that allows you to create currency fields easily and without complications.
  • InputValue - Filter what types of values ​​will be accepted by your form fields with this plugin.
  • MaskedInput - Create mask for various fields of your form, such as phone, email, social security number, etc.
  • BlockUI - "Lock" your user interface while a process runs in the background or to focus on another window.
  • MeioMask - Brazilian plugin that performs various types of masks and validations in forms.
  • jQuery SWFObject - Insert Flash animations into your applications dynamically and without causing HTML validation issues in the W3C validator.