Syllabus For JavaScript

• Introduction
• Getting Started
• Syntax
• Show and Hide Effects
• Fading Effects
• Animation Effects
• Callback
• Insert Content
• Event
• Function
• Alert
• Loop satatement
• Example

1. Introduction

What is jQuery

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?

2. Getting Started

Downloading jQuery

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

3. Syntax

Standard jQuery Syntax

A jQuery statement typically starts with the dollar sign ($) and ends with a semicolon (;).

4. Show and Hide Effects

jQuery show() and hide() Methods

You 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.

5. Fading Effects

jQuery fadeIn() and fadeOut() Methods

You can use the jQuery fadeIn() and fadeOut() methods to display or hide the HTML elements by gradually increasing or decreasing their opacity.

6. Sliding Effects

jQuery slideUp() and slideDown() Methods

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).

7. Animation Effects

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.

Syntax

$(selector).animate({ properties }, duration, callback);

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.
• All HTML elements have static position by default. Since the static element cannot be moved, so you must set the CSS position property for the element to relative, fixed, or absolute to manipulate or animate its position.
• Note:The CSS properties names must be camel-cased when using with the animate() method, e.g. if you want to animate the font size you need to write 'fontSize' rather than 'font-size'. Similarly, write 'marginLeft' instead of 'margin-left', 'borderWidth' instead of 'border-width', and so on.
• You must set the border-style property for the element before animating its border-width property. An element must have borders before you can animate the border width, because the default value of the border-style property is none.

8. 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:

Syntax

$(selector).slideToggle(duration, callback);

9. Insert Content

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.

jQuery append() Method

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.

Note:The contents or elements inserted using the jQuery append() and prepend() methods is added inside of the selected elements.

jQuery prepend() Method

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.

Insert Multiple Elements with append() and prepend() Method

The 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.

jQuery before() Method

The 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

Insert Multiple Elements with before() and after() Method