JQuery is the most popular JavaScript library due to it’s lightweight and extendable functionality used for creating efficient websites. It provides an easy method for HTML DOM traversing and manipulation and client-side animations. The purpose of jQuery is to make the code simple, short and readable.

For using jQuery one should have prior knowledge of HTML, CSS, and JavaScript.

Advantages of using jQuery:

• Create Responsive websites using AJAX
• Allows creation of dynamic web pages and web applications
• Extendable
• Manages cross-browser issues
• Light-weight entity
• DOM Manipulation
• Fast
• Implementing complex functionalities by writing lesser lines of code
• Easy and readable code
• No overhead in learning a new syntax
• Avoids common browser errors

jQuery library contains the following features:

• HTML/DOM manipulation
• Develop AJAX Applications
• Event Handling
• Create Animations and Effects
• Utilities
• Create own plugins
• Select DOM Elements
• Cross-browser support

• JavaScript is a programming language. jQuery is a javascript library.
• One should know JavaScript prior to using jQuery.
• In JavaScript, you need to write a long code. Whereas jQuery can perform the same function in very fewer lines of code.
• JavaScript is faster for accessing DOM. jQuery is slower.
• Developers are prone to make browser-related errors in JavaScript. Whereas jQuery developers don’t have to worry about browser compatibility issues.

jQuery selectors help you to select and manipulate HTML Elements. They are :

• Basic jQuery Selectors
• Content jQuery Selectors
• Hierarchy jQuery Selectors
• Selectors based on Index
• Visibility Selectors
• Child Selectors Attribute Selectors
• Content Selectors
• Form Selectors

$() in jQuery a syntax in jQuery which is used to select the Html elements or collection matching elements from DOM.

Example,

$(‘#id’) for selecting element by id
$(‘.classname’) for selecting element by class

AJAX stands for (Asynchronous JavaScript and XML). It is a process of exchanging data with a server and refreshing the whole page and updating applied changes without reloading the whole page.

jQuery ajax() method helps to send asynchronous HTTP requests to the server.

JQuery has two ways to set the width of an element. You can set either using CSS or jQuery methods. The main difference is in datatype. In the CSS method, you need to append 'px' to the width value and with "width" you don’t need to specify. CSS method returns string value while width returns an integer value.

For manipulation purposes, the width function is the best option.

Param() method in jquery creates a serialized representation of an array or an object from element values. The object stands for an array or a plain object or an object to serialize. Traditional has type Boolean indicating to perform a traditional "shallow" serialization.

Syntax :

$.param(object,trad)

.bind() attaches events to elements that exist or match the selector at the time the call is made i.e will only apply to the items you currently have selected in your jQuery object.

.live() works for existing and future matching elements i.e will apply to all current matching elements, as well as any you might add in the future.

.delegate() method adds one or more event handlers to the specified element.

The list of methods are :

• $.ajax()
• $.ajaxPrefilter
• $.ajaxSetup
• $.get()
• $.getJSON()
• $.parseJSON()
• $.post()
• ajaxSend()
• ajaxStart()
• ajaxStop()
• ajaxSuccess()
• load()
• serialize()
• serializeArray()

$(this) and this refers to the same element. The main difference is in the way they are used. While using this, you can call the DOM method but not jQuery methods.

Whereas, while using $(this), you can call jQuery methods on it, but not DOM methods.

empty() – This method removes all content and child elements from the selected element and does not remove the selected elements.

remove() – This method removes all child elements with selected elements and also you can restore all data but not event handlers of removed elements from the DOM. All data and events related to elements will be removed.

detach() – This method removes all child elements with selected elements. Even though it keeps all data and event handlers of the removed elements it is preferred to remove elements but it keeps a copy of the removed elements which can be reused later.

Some of the methods used in jQuery to provide effects are :

• Animate() - Used to customize animations on any selected elements.
• Clearqueue() – Used to remove any remaining queued functions from the selected elements.
• Delay() – to set a delay for all queued functions of the selected elements.
• Fadein() – fades in the selected elements.
• Fadeout() – fades out the selected elements.
• Fadeto() – to fade in/out the selected elements to a required opacity.
• Dequeue() – to execute the functions after removing the next function from the queue.
• Fadetoggle() – to toggle between fadeout() and fadein() methods.
• Finish() – to stop, remove and complete any/all queued animations for the selected elements.

The jQuery toggle() is a type of method which is used to toggle between two or more functions such as hide() & show() method

• Show() is used to show the hidden elements.
• Hide() is used to hide the visible elements.

Css() method in jQuery is used to set or return style properties of one or more style for the selected elements. It is an easy way to get the computed style properties for the elements in the set of matched elements.

jQuery is a plugin that is used to connect or bind a function to another function. It is more of assigning a handler for another function. It is used to execute a function when a function from another plugin is executed.

CDN stands for a (Content Delivery Network). It is a system of computers with scripts and other content on them that are widely used by many web pages. It can be a very effective way to speed up a web page

The jQuery filter() method returns elements that match a certain criterion. The filter () method can construct a new jQuery object from a subset of the matching elements. The required criteria are matched against each element. Elements that do not match the supplied criteria are removed from the selection and those that match are returned.

The ID and class selector in jQuery helps to find and select DOM elements easily. The class selector is used in case we need to select multiple elements, which have the same CSS class. Searching and finding HTML elements using selectors are natural and very easy.

Serialize() method serializes a set of input elements into a string of data. It creates a URL encoded text string by serializing form values. The serialized values can be used in the URL query string while making an AJAX request.

Syntax : 
$(selector).serialize()

Event.stopPropogation() is used for stopping event propagation. It prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event. You can use the event.isPropagationStopped() method to check whether this method was called for the event.

Syntax : 
event.stopPropagation()

The animate() method performs custom animation of a set of CSS properties. This method changes an element from one state to another with CSS styles. The CSS property value is changed gradually to create an animated effect.

Syntax : 
(selector).animate({styles},speed,easing,callback)

The speed parameter specifies the duration of the effect.

The callback parameter is a function to be executed after the animation completes.

In jQuery, reading, writing and deleting cookies are done by using dough cookie plugin.

The syntax for reading cookie :

$.dough(“cookie_name”);

The syntax for writing cookie :

$.dough(“cookie_name”,”cookie_value”);

The syntax for deleting cookies :

$.dough(“cookie_name”,”remove”)

jQuery UI is a set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. jQuery UI is the perfect choice for building highly interactive web applications and to add a date picker to a form of control.

It contains many widgets that maintain state and therefore have a slightly different usage pattern than typical jQuery plugins. All of jQuery UI's widgets use the same patterns, so if you learn how to use one, then you'll know how to use all of them.

The slice() method reduces the set of matched elements to a subset specified by a range of indices.

Syntax : 
.slice(start[,end])

A start has a type integer indicating the 0-based position at which the elements begin to be selected. If negative, it indicates an offset from the end of the set.

The end has a type integer indicating the 0-based position at which the elements stop being selected. If negative, it indicates an offset from the end of the set.

Different selectors can be used to select the required element or even a class of elements.

jQuery selectors allow a user to select and manipulate HTML element(s).

The selection or finding of HTML elements can be based on their name, id, classes, type, attributes, values of attributes and many others.

All selectors in jQuery start with a $() dollar sign.

For example, User can select all elements on a page as following: $("a")

To set any form value of an element using jQuery val() function is to be used.

Here is a demonstration of how to set content with the jQuery val() methods:

$(“#btn”).click(function(){
	$(“#test”).val(“hello”);
});

This jQuery method also comes with a get/return/callback function. The callback function has two parameters: the index of the current element and the original (old) value. A user then returns the string they wish to use as the new value from the function.

A page to be manipulated safely needs the document to be ready. jQuery detects this state of readiness for you. A page document object model (DOM) which is ready for javascript code to execute includes inside $(document).ready(). Code included inside $(window).on("oad",function(){…}) will run once the entire page, not just the DOM, is ready. A developer sometimes can use the shortform $() for $(document).ready().

Example: chaining together the css(), slideup() and slidedown() methods – $("#A1").css("colour","pink").slideup(200).slidedown(200);

jQuery allows users to chain together actions/methods. Chaining allows users to run multiple jQuery methods within a single statement. This technique of chaining allows us to run multiple jQuery commands, one after the other, on the same elements.

This helps browsers by reducing the time to find the same element more than once. A chain an action user appends the action to the previous action.

c

The following example uses how to get the value of the href attribute in a page:

$(“button”).click(function(){
	Alert($(“#w3s”).attr(“href”));
});

The unbind() method removes event handlers from selected elements. The unbind() function removes all or selected event handlers, or stops specific functions from running when the event occurs. This is used to unbind an event from within itself.

This method works on any event handler attached to jQuery.

$(selector).unbind(event,function,eventObj)

This function can be used to seamlessly iterate over both objects and arrays. An object with a length property is iterated by a numeric index from 0 to 1. The $.each() function is different from the $(selector).each() which is used to iterate over a jQuery object.

For example:

$.each([50,9],function(index, value){
	Alert(index + “:” +value);
});

This produces two messages:
0: 50
1: 9

In jQuery, there are mainly three selectors, which are ID, class, and attribute. Among these, Id selector is the fastest of all, the reason being that ID is supposed to be unique, so the searching stops after ID is found on the Document object model. Whereas, class and attribute search through the entire page to find the required match taking a bit longer then ID selector.

The data() method gives the user the ability to attached data to or gets data from, within DOM nodes and Javascript objects. When a user uses the data method, the user needs to pass two parameters such as key and a value to be stored.

For example,
$(“mydiv”).data({“name”:”pooja”,”age”:24});