jQuery is a fast, lightweight, and feature-rich JavaScript library that is based on the priciple "write less, do more". It's easy-to-use APIs makes the things like HTML document traversal and manipulation, event handling, adding animation effects to a web page much simpler that works seamlessly across all the major browsers. jQuery also gives you the ability to create an Ajax based application in a quick and simple way.
Companies like Google, Microsoft and IBM are using the jQuery for their applications. So you can easily understand how popular the jQuery is?
To get started, first download a copy of jQuery and include it in your document. There are two versions of jQuery available for downloading — compressed and uncompressed. The uncompressed file is best suited for development or debugging; while, the minified and compressed file is recommended for production because it saves the precious bandwidth and improves the performance due to small file size.
You can download jQuery from here: http://jquery.com/download
A jQuery statement typically starts with the dollar sign ($) and ends with a semicolon (;).
SyntaxYou can show and hide HTML elements using the jQuery show() and hide() methods. The hide() method simply sets the inline style display: none for the selected elements. Conversely, the show() method restores the display properties of the matched set of elements to whatever they initially were—typically block, inline, or inline-block—before the inline style display: none was applied to them.
You can use the jQuery fadeIn() and fadeOut() methods to display or hide the HTML elements by gradually increasing or decreasing their opacity.
The jQuery slideUp() and slideDown() methods is used to hide or show the HTML elements by gradually decreasing or increasing their height (i.e. by sliding them up or down).
jQuery animate() Method
The jQuery animate() method is used to create custom animations. The animate() method is typically used to animate numeric CSS properties, for example, width, height, margin, padding, opacity, top, left, etc. but the non-numeric properties such as color or background-color cannot be animated using the basic jQuery functionality.
Note:Not all CSS properties are animatable. In general, any CSS property that accepts values that are numbers, lengths, percentages, or colors is animatable. However, the color animation is not support by the core jQuery library. To manipulate and animate the color use the jQuery color plugin.
$(selector).animate({ properties }, duration, callback);
jQuery Callback Functions
JavaScript statements are executed line by line. But, since jQuery effect takes some time to finish the next line code may execute while the previous effect is still running. To prevent this from happening jQuery provides a callback function for each effect method.
A callback function is a function that is executed once the effect is complete. The callback function is passed as an argument to the effect methods and they typically appear as the last argument of the method. For example, the basic syntax of the jQuery slideToggle() effect method with a callback function can be given with:
$(selector).slideToggle(duration, callback);
jQuery Insert New Content
jQuery provides several methods, such as append(), prepend(), html(), text(), before(), after(), wrap() etc. that allow us to insert new content inside an existing element.
The jQuery html() and text() methods have already covered in the previous chapter, so in this chapter, we will discuss about the rest of them.
The jQuery append() method is used to insert content to the end of the selected elements. The following example will append some HTML to all the paragraphs on document ready, whereas append some text to the container element on button click.
Example 1Note:The contents or elements inserted using the jQuery append() and prepend() methods is added inside of the selected elements.
The prepend() method is used to insert content to the beginning of the selected elements.
The following example will prepend some HTML to all the paragraphs on document ready, whereas prepend some text to the container element on button click.
Example 2The jQuery append() and prepend() also supports passing in multiple arguments as input. The jQuery code in the following example will insert a H1 tag, P tag and an IMG tag element inside the BODY tag element as a last three child nodes.
Example 3The jQuery before() method is used to insert content after the selected elements.
The following example will insert a paragraph before the container element on document ready, whereas insert an image before the H1 tag element on button click
Example 4