The jQuery JavaScript library has become one of the most widely utilized open source software (OSS) tools for web developers since its release in 2006. The extendable JavaScript library lets developers create a custom user interaction in websites by simply using less code. Developers can create dynamic websites with the client-side scripting of HTML across multiple web browsers and CSS manipulation. The multi-browser capabilities allow developers to manipulate Document Object Model (DOM) elements, add animation and effects to websites, standalone widgets, and implement many more innovative techniques. Here at Segue developers deploy jQuery on government and commercial web applications. The features are most noticed in the user interface as site visitor’s click through menu items. One of my favorite Segue designed sites, utilizes a jQuery photo gallery to display fan photos as they devour the company’s perfectly crafted cheeseburgers and delicious fries.
Many educators are rapidly adapting to e-learning, which allows students to take notes, complete coursework, and get tutored online. For students and educators, effects and animations can be an easy and fun solution for step by step problem solving. Using a click function for the .fadeOut() effect and a .hover function to highlight the text, jQuery can be used as a tool in English courses for grammar exercises. Here’s the basic jQuery code for highlighting and fading out text once it has been clicked.
$( “span” ).click(function() {
$( this ).fadeOut( 1000, function() {
$( “div” ).text( “‘” + $( this ).text() + “‘ has faded!” );
$( this ).remove();
});
});
$( “span” ).hover(function() {
$( this ).addClass( “hilite” );
}, function() {
$( this ).removeClass( “hilite” );
});
Checkout the screencast to see it in action below.
Besides having a large library of functions, jQuery has a large open source community in which developers work to maintain library functionality, efficiency and the security of the code. Plugins can also be downloaded and used to speed up development.
Browsers Support
As with any web development, the suitability of a tool is dependent upon the browser. jQuery version 1.x and 2.x are supported by many browsers, including Firefox, Google Chrome, Safari, Opera, and Internet Explorer (Note: IE version 6-8 supports jQuery 1.x, and IE 9 supports jQuery 2.x). Removing support for IE6-IE8 in the jQuery 2.x reduces the jQuery.js file size and gives visitors a more responsive browsing experience with improved error handling across all browsers. Importing the proper jQuery can be done for visitors still using IE6-IE8 by adding a conditional IF statement in the head tag. jQuery doesn’t stop at desktop browser support. The JavaScript library has browser support for a wide variety of smartphone, tablet and e-reader platforms. Some of the few commonly used devices include Apple iOS, Android, Blackberry, Windows Phone, Kindle devices, FireFox Mobile, and Opera Mobile.
Syntax
The jQuery syntax is simple and made up of three parts:
- The dollar sign ($) allows access to the jQuery.
- The (selector) will select HTML elements from the document by name, ID, class, attributes, and many other HTML elements based on the CSS selectors.
- The .action() will execute a jQuery action on the selected elements.
The three parts are combined together create the basic jQuery syntax: $(selector).action().
Before jQuery can be used properly, the code should be placed within a document-ready event to prevent it from starting before the page has loaded. Having the page fully load before any actions take place will allow images or any animation to load correctly. Here is an example:
$(document).ready(function(){
$(selector).action()
});
jQuery can bring a website to life while allowing you to maintain a professional design. It gives the user an enjoyable experience with hover, click, and smooth transitions from one menu item to another. The jQuery JavaScript library is utilized on many projects at Segue to give the customer a unique website design that does not disturb the flow of content or site traffic. Even our own website utilizes jQuery in its theme. Visit the jQuery website for an in-depth look at the JavaScript library and a host of comprehensive tutorials, documentation and examples.