Jquery

The $() factory function
Every jQuery selector start with thiis sign $(). This sign is known as the factory function. It uses the three
basic building blocks while selecting an element in a given document.
S.No. Selector Description
Tag It represents a tag name available in the DOM.

1)
Name: For example: $('p') selects all paragraphs'p'in the document.
It represents a tag available with a specific ID in the DOM.

2) Tag ID: For example: $('#real-id') selects a specific element in the document that has an ID of
real-id.
It represents a tag available with a specific class in the DOM.

3) Tag Class: For example: $('real-class') selects all elements in the document that have a class of
real-class.
S.No. Selector Description
1) Name: It selects all elements that match with the given element name.
2) #ID: It selects a single element that matches with the given id.
3) .Class: It selects all elements that matches with the given class.
4) Universal(*) It selects all elements available in a DOM.
5) Multiple Elements A,B,C It selects the combined results of all the specified selectors A,B and C.
Selector Example Description
* $("*") It is used to select all elements.
#id $("#firstname") It will select the element with id="firstname"
.class $(".primary") It will select all elements with class="primary"
It will select all elements with the class "primary" or

class,.class $(".primary,.secondary")
"secondary"
element $("p") It will select all p elements.
el1,el2,el3 $("h1,div,p") It will select all h1, div, and p elements.

:first $("p:first") This will select the first p element
:last $("p:last") This will select he last p element
:even $("tr:even") This will select all even tr elements
:odd $("tr:odd") This will select all odd tr elements
It will select all p elements that are the first child of their
:first-child $("p:first-child")
parent
It will select all p elements that are the first p element of

:first-of-type $("p:first-of-type")
their parent
It will select all p elements that are the last child of their
:last-child $("p:last-child")
parent
It will select all p elements that are the last p element of

:last-of-type $("p:last-of-type")
their parent
This will select all p elements that are the 2nd child of their
:nth-child(n) $("p:nth-child(2)")
parent
This will select all p elements that are the 2nd child of their
:nth-last-child(n) $("p:nth-last-child(2)")
parent, counting from the last child
It will select all p elements that are the 2nd p element of

:nth-of-type(n) $("p:nth-of-type(2)")
their parent
:nth-last-of- This will select all p elements that are the 2nd p element of
$("p:nth-last-of-type(2)")
type(n) their parent, counting from the last child
It will select all p elements that are the only child of their
:only-child $("p:only-child")
parent
It will select all p elements that are the only child, of its
:only-of-type $("p:only-of-type")
type, of their parent
It will select all p elements that are a direct child of a div

parent > child $("div > p")
element
parent It will select all p elements that are descendants of a div

$("div p")
descendant element
element + next $("div + p") It selects the p element that are next to each div elements
element ~ siblings $("div ~ p") It selects all p elements that are siblings of a div element
:eq(index) $("ul li:eq(3)") It will select the fourth element in a list (index starts at 0)
:gt(no) $("ul li:gt(3)") Select the list elements with an index greater than 3
:lt(no) $("ul li:lt(3)") Select the list elements with an index less than 3
:not(selector) $("input:not(:empty)") Select all input elements that are not empty
:header $(":header") Select all header elements h1, h2 ...
:animated $(":animated") Select all animated elements
:focus $(":focus") Select the element that currently has focus
:contains(text) $(":contains('Hello')") Select all elements which contains the text "Hello"
:has(selector) $("div:has(p)") Select all div elements that have a p element
:empty $(":empty") Select all elements that are empty
:parent $(":parent") Select all elements that are a parent of another element
:hidden $("p:hidden") Select all hidden p elements
:visible $("table:visible") Select all visible tables
:root $(":root") It will select the document's root element
Select all p elements with a lang attribute value starting

:lang(language) $("p:lang(de)")
with "de"
[attribute] $("[href]") Select all elements with a href attribute
Select all elements with a href attribute value equal to

[attribute=value] $("[href='default.htm']")
"default.htm"
It will select all elements with a href attribute value not

[attribute!=value] $("[href!='default.htm']")
equal to "default.htm"
It will select all elements with a href attribute value ending

[attribute$=value] $("[href$='.jpg']")
with ".jpg"
Select all elements with a title attribute value equal to

[attribute|=value] $("[title|='Tomorrow']") 'Tomorrow', or starting with 'Tomorrow' followed by a
hyphen
Select all elements with a title attribute value starting with

[attribute^=value] $("[title^='Tom']")
"Tom"
Select all elements with a title attribute value containing
[attribute~=value] $("[title~='hello']")
the specific word "hello"
Select all elements with a title attribute value containing

[attribute*=value] $("[title*='hello']")
the word "hello"
:input $(":input") It will select all input elements
:text $(":text") It will select all input elements with type="text"
:password $(":password") It will select all input elements with type="password"
:radio $(":radio") It will select all input elements with type="radio"
:checkbox $(":checkbox") Itwill select all input elements with type="checkbox"
:submit $(":submit") It will select all input elements with type="submit"
:reset $(":reset") It will select all input elements with type="reset"
:button $(":button") It will select all input elements with type="button"
:image $(":image") It will select all input elements with type="image"
:file $(":file") It will select all input elements with type="file"
:enabled $(":enabled") Select all enabled input elements
:disabled $(":disabled") It will select all disabled input elements
:selected $(":selected") It will select all selected input elements
:checked $(":checked") It will select all checked input elements
jQuery Effects
jQuery enables us to add effects on a web page. jQuery effects can be categorized into fading,
sliding, hiding/showing and animation effects.
No. Method Description
1) animate() performs animation.
2 clearQueue() It is used to remove all remaining queued functions from the selected elements.
3) delay() sets delay execution for all the queued functions on the selected elements.
4 dequeue() It is used to remove the next function from the queue, and then execute the function.
shows the matched elements by fading it to opaque. In other words, it fades in the
5) fadein()
selected elements.
shows the matched elements by fading it to transparent. In other words, it fades out
6) fadeout()
the selected elements.
adjusts opacity for the matched element. In other words, it fades in/out the selected
7) fadeto()
elements.
shows or hides the matched element. In other words, toggles between the fadeIn()
8) fadetoggle()
and fadeOut() methods.
9) finish() It stops, removes and complete all queued animation for the selected elements.
10) hide() hides the matched or selected elements.
shows or manipulates the queue of methods i.e. to be executed on the selected

11) queue()
elements.
12) show() displays or shows the selected elements.

13) slidedown() shows the matched elements with slide.
shows or hides the matched elements with slide. In other words, it is used to toggle
14) slidetoggle()
between the slideUp() and slideDown() methods.
15) slideup() hides the matched elements with slide.
16) stop() stops the animation which is running on the matched elements.
shows or hides the matched elements. In other words, it toggles between the hide()
17) toggle()
and show() methods.
jQuery html()
jQuery html() method is used to change the entire content of the selected elements. It replaces
the selected element content with new contents.
Note: It is a very useful function but works in a limited area because of its API documentation.
The API documentation of the jQuery html function consists of three method signatures.
The first method signature has no argument, so it just returns the HTML within that element. The
remaining two signatures take a single argument: i.e. a string or a function that returns a string.
Syntax:
1. $(selector).html()
It is used to return content.
1. $(selector).html(content)
It is used to set content.
1. $(selector).html(function (index, currentcontent))
It is used to set content by calling function.
The jQuery html() method is used either for set the content or return the content of the selected
elements.
To set content: When you use this method to set content, it overwrites the content of the all
matched elements.
To return content: When you use this method to return content, it returns the content of the
first matched element.
The text() method is used to set or return only the text content of the selected elements.
Parameters of jQuery html() method
Parameter Description
It is an essential parameter. It is used to specify the new content for the

Content
selected elements. It can also contain HTML tags.
It is an optional parameter. It specifies a function that returns the new content

for the selected elements.
Function (index,
currentcontent) Index: It shows the index position of the element in the set.
Currentcontent: It shows the current HTML content of the selected
element.
jQuery text()
The jQuery text() method is used to set or return the text content of the selected elements.
To return content: When this method is used to return content, it returns the combined text
content of all matched elements without the HTML markup.
To set content: When this method is used to set content, it overwrites the content of all matched
elements.
Difference between jQuery text() method and jQuery html() method
Sometimes, this confusion is occurred because both of the methods are used to set or return the
html content. But, the jQuery text() method is different from html() method.
Following is the main differences:
The jQuery text() method is used to set or return html content without HTML markup while,
html() method is used to set or return the innerHtml (text + HTML markup).
The jQuery text() method can be used in both XML and HTML document while jQuery html()
method can't.
Syntax:
To return text content:
1. $(selector).text()
To set text content:
1. $(selector).text(content)
To set text content using a function:

1. $(selector).text(function(index,currentcontent))
Parameters of jQuery text() method

It is a mandatory parameter. It specifies the new text content for the

Content
selected elements. The special characters will be encoded in this parameter.
It is an optional parameter. It specifies the function that returns the new text
content for the selected elements.
Function
(index,currentcontent) Index: It provides the index position of the element in the set.
Currentcontent: It provides the current content of the selected
elements.
jQuery val()
There are two usage of jQuery val() method.
It is used to get current value of the first element in the set of matched elements.
It is used to set the value of every matched element.
Syntax:
1. $(selector).val()
It is used to get value.
1. $(selector).val(value)
It is used to set value.
1. $(selector).val(function(index,currentvalue))
It is used to set value using function.
Parameters of jQuery val() method

Value It is a mandatory parameter. It is used specify the value of the attribute.
Function (index, It is an optional parameter. It is used to specify a function that returns the
currentvalue) value to set.
jQuery val(value) example
This method is used to set a string of text, a number, an array of strings corresponding to the
value of each matched element. This method facilitates you to set the value by passing in the
function.
jQuery css()
The jQuery CSS() method is used to get (return)or set style properties or values for selected
elements. It facilitates you to get one or more style properties.
jQuery CSS() method provides two ways:
1) Return a CSS property
It is used to get the value of a specified CSS property.
Syntax:
1. css("propertyname");
2) Set a CSS property
This property is used to set a specific value for all matched element.
Syntax:
1. css("propertyname","value");
3) Set multiple CSS properties
It is just an extension of Set CSS property. It facilitates you to add multiple property values
together.
Syntax:
1. css({"propertyname":"value","propertyname":"value",...});
jQuery before()
The jQuery before() method is used to insert the specified content before the selected elements. It
adds the content specified by the parameter, before each element in the set of matched elements.
The before() and insertBefore() both methods are used to perform same task. The main
difference between them is in syntax, and the placement of the content and the target.
Syntax:
1. $(selector).before(content, function(index))
Parameters of jQuery before() method

It is a mandatory parameter. It specifies the content to insert. Its possible values are:
Content HTML elements

jQuery objects
DOM elements
It specifies a function that returns the content which is used to insert.

Function (index)
Index: It provides the index position of the element in the set.
jQuery prepend()
The jQuery prepend() method is used to insert the specified content at the beginning (as a first
child) of the selected elements. It is just the opposite of the jQuery append() method.
If you want to insert the content at the end of the selected elements, you should use the append
method.
Syntax:
1. $(selector).prepend(content,function(index,html))
Parameters of jQuery prepend() method

It is a mandatory parameter. It specifies the content which you want to insert. Its
possible values are:
Content
HTML elements
jQuery objects
DOM elements
It is an optional parameter. It specifies a function that returns the content which is

Function (index,
inserted.
html)
Index:It is used to provide the index position of the element in the set.
Html: : It provides the current HTML of the selected element.
jQuery after()
The jQuery after() method is used to insert specified content after the selected element. It is just
like jQuery append() method.
If you want to insert content before the selected element, you should use jQuery before() method.
Syntax:
1. $(selector).after(content,function(index))
Parameters of jQuery after() method

It is a mandatory parameter. It specifies the content to insert. Its possible values are:
Content HTML elements

jQuery objects
DOM elements
It specifies a function that returns the content which is used to insert.

Function (index)
index: It provides the index position of the element in the set.
jQuery insertAfter()
The jQuery after() and jQuery insertAfter() both methods are used to perform the same task of
inserting additional contents after the selected elements.
Difference between jQuery after() and insertAfter()
The main difference between after() and insertAfter is in syntax and placement of the content
and target.
In after() method, target is the selected element and content is placed as an argument of the
method.
1. $(target).after(contentToBeInserted)
In insertAfter() method, content is the selected element and target is placed as an argument of the
method.
1. $(contentToBeInserted).insertAfter(target)
Note: If you want to insert HTML elements before the selected element, you should use the
insertBefore() method.
Syntax:
1. $(content).insertAfter(selector)
Parameters of jQuery insertAfter() method

Content It is a mandatory parameter. It specifies the content which you want to insert.
Selector It is also a mandatory parameter. It specifies the place where you insert the content.>
jQuery append()
The jQuery append() method is used to insert specified content as the last child (at the end of) the
selected elements in the jQuery collection.
The append () and appendTo () methods are used to perform the same task. The only difference
between them is in the syntax.
Syntax:
1. $(selector).append(content, function(index, html))
Parameters of jQuery append() method

It is a mandatory parameter. It specifies the content which you want to insert. Its
possible values are:
Content
HTML elements
jQuery objects
DOM elements
It is an optional parameter. It specifies the function that returns the content to

insert.
Function
(index,html)
Index: It returns the index position of the element in the set.
HTML: It returns the current HTML of the selected element.
jQuery appendTo()
The appendTo() method is used to add additional content at the end of the selected elements. It is
same as jQuery append() method. There is only syntactical difference between append() and
appendTo() methods.
Syntax:
1. $(content).appendTo(selector)
jQuery clone()
The jQuery clone() method is used to make copies of the set of matched elements. It also makes
copies of their child nodes, texts and attributes. The clone() method is a convenient way to
duplicate elements on a page.
Syntax:
1. $(selector).clone(true|false)
Parameters of jQuery clone() method

True It specifies that event handlers also should be copied.
False It is a default parameter. It specifies that event handler should not be copied.
jQuery remove()
The jQuery remove() method is used to remove the selected elements out of the DOM. It
removes the selected element itself, as well as everything inside it (including all texts and child
nodes). This method also removes the data and the events of the selected elements.
If you want to remove elements without removing data and events, you should use the detach()
method. If you want to remove only data and events, use the empty() method.
Syntax:
1. $(selector).remove(selector)
Parameters of jQuery remove() method:

is an optional parameter. It specifies whether to remove one or more elements. If you have
Selector
to remove more than one element then you should separate them with comma (,).
jQuery empty()
The jQuery empty() method is used to remove all child nodes and content from the selected
elements. This method doesn't remove the element itself.
If you want to remove the element without removing data and events, you should use the
detach() method.
If you want to remove the element as well as its data and events, you should use the remove()
method.
Syntax:
1. $(selector).empty()
jQuery detach()
The jQuery detach() method is used to remove the selected elements, including all texts and child
nodes and keeps only data and events.
This method saves a copy of the removed elements to reinsert them whenever they needed later.
There are some other methods also which are used to remove elements e.g. jQuery remove()
method, jQuery empty() method etc. But there is a little difference among them.
jQuery remove() method: This method is used to remove the elements as well as its data and
events.
jQuery empty() method: This method is used to remove only the content from the selected
elements.
Syntax:
1. $(selector).detach()
jQuery scrollTop()
The jQuery scrollTop method is used to set or return the vertical scrollbar position for the
selected element. When the scrollbar is on the top, it specifies the position 0.
To return the position: When this method is used to return the position, it provides the
current vertical position of the first matched element in the set.
To set the position: When this method is used to set the position, it sets the vertical
position of the scrollbar for all matched element.
Syntax:
To return vertical scrollbar position:

1. $(selector).scrollTop()
Parameters of jQuery scrollTop() method

Position It specifies the vertical scrollbar position in pixels.
jQuery attr()
The jQuery attr() method is used to set or return attributes and values of the selected elements.
There are two usage of jQuery attr() method.
1. To return attribute value: This method returns the value of the first matched element.
2. To set attribute value: This method is used to set one or more attribute/value pairs of the set of
matched elements.
Syntax:
To return an attribute's value:
1. $(selector).attr(attribute)
To set an attribute and value:
1. $(selector).attr(attribute,value)
To set an attribute and value by using a function:
1. $(selector).attr(attribute,function(index,currentvalue))
To set multiple attributes and values:
1. $(selector).attr({attribute:value, attribute:value,...})
Parameters of jQuery attr() method

Attribute This parameter is used to specify the name of the attribute.
Value This parameter is used to specify the value of the attribute.
It is a parameter to specify a function that returns an attribute value to set.

Function (index,
currentvalue) Index: It is used to receive the index position of the element in the
set.
Currentvalue: It is used to provide the current attribute value of
selected elements.
jQuery prop()
jQuery prop() method is used for two purpose.
1. It is used to return the value of a property for the first element in a set of matched elements.
2. It is used to set one or more property value for a set of matched element.
The jQuery prop() method is generally used to retrieve property values i.e. DOM properties (like
tagName, nodeName, defaultChecked) or own custom made properties. This is a very convenient
way to set the values of properties, especially the multiple properties.
If you want to retrieve HTML attributes, you should use the attr() method instead.
The removeProp() method is used to remove a property.
Syntax:
To return the value of a property:
1. $(selector).prop(property)
To set the property and value:
1. $(selector).prop(property,value)
To set property and value by using a function:
1. $(selector).prop(property,function(index,currentvalue))
To set multiple properties and values:
1. $(selector).prop({property:value, property:value,...})
Parameters of jQuery prop() method

Property It specifies the name of the property.
Value It defines the value of the property.
It specifies a function which returns the value of the property to set.

Function(index,
currentvalue)
Currentvalue: It provides the current property value of the selected
element.
jQuery offset()
The jQuery offset() method is used to get the current offset of the first matched element.
It provides two methods: to set or return the offset co-ordinates for the selected elements, relative
to the document.
To return the offset: When this method is used to return the offset, it returns the offset
co-ordinates of the FIRST matched element. It specifies the object's two properties: the
top and left positions in pixels.
To set the offset: When this method is used to set the offset, it sets the offset co-
ordinates of ALL matched elements.
Syntax:
To RETURN the offset co-ordinates:
1. $(selector).offset()
To SET the offset co-ordinates:
1. $(selector).offset({top:value,left:value})
To SET offset co-ordinates using a function:
1. $(selector).offset(function(index,currentoffset))
Parameters of jQuery offset method

It is a mandatory parameter while setting the offset. It specifies the
{top:value,left:value}
top and left co-ordinates in pixels.
It is an optional parameter. It specifies a function that returns an
object containing the top and left coordinates.
Function
Index: It returns the index position of the element in the set.
(index,currentoffset):
Currentoffset:It returns the current coordinates of the
selected element.
jQuery position()
The jQuery position () method makes you able to retrieve the current position of an element
relative to the parent element. It returns the position of the first matched element. This method
returns the object with two properties: top and left position in pixels.
The jQuery position() method is different from jQuery offset() method because the
position() method retrieves the current position of an element relative to the parent element
while the offset() method retrieves the current position relative to the document.
The position() method is more useful when you want to position a new element near
another one within the same containing DOM element.
Syntax:
1. $(selector).position()
jQuery addClass()
The addclass() method is used to add one or more class name to the selected element. This
method is used only to add one or more class names to the class attributes not to remove the
existing class attributes.
If you want to add more than one class separate the class names with spaces.
Syntax:
1. $(selector).addClass(classname,function(index,oldclass))
Parameters of jQuery addClass() method

It is a mandatory parameter. It specifies one or more class names which
Classname
you want to add.
It is an optional parameter. It specifies a function that returns one or
more class names to be added.
Function (index, Index: It is used to provide the index position of the element in
currentclass) the set.
Currentclass: It is used to return the current class name of the
selected element.
jQuery hasClass()
The jQuery hasClass() method is used to check whether selected elements have specified class
name or not. It returns TRUE if the specified class is present in any of the selected elements
otherwise it returns FALSE.
Syntax:
1. $(selector).hasClass(classname)
Parameters of jQuery hasClass() method

It is a mandatory parameter. It specifies the name of the CSS class to search for in
className
the selected elements.
jQuery toggleClass()
The jQuery toggleCLass() method is used to add or remove one or more classes from the
selected elements. This method toggles between adding and removing one or more class name. It
checks each element for the specified class names. If the class name is already set, it removes
and if the class name is missing, it adds.
In this way, it creates the toggle effect. It also facilitates you to specify to only add or only
remove by the use of switch parameter.
Syntax:
1. $(selector).toggleClass(classname,function(index,currentclass),switch)
Parameters of jQuery toggleClass() method

It is a mandatory parameter. It specifies one or more class name to add or
classname
remove. If you use several classes then separate them by space.
It is an optional parameter. It specifies one or more class names that you
want to add or remove.
function (index,
currentclass)
Currentclass: It provides the current class name of the selected
element.
It is also an optional parameter. It is a Boolean value which specifies

switch
whether the class should be added (true) or removed (false).
jQuery width()
jQuery width() method is used to return or set the width of matched element.
To return width: When this method is used to return the width, it returns the width of first
matched element.
To set width:When this method is used to set the width, it sets the width for every matched
element.
This method is one of a jQuery dimension.
List of jQuery dimension:

width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
Syntax:
To return the width:
1. $(selector).width()
To set the width:
1. $(selector).width(value)
To set the width using a function:
1. $(selector).width(function(index,currentwidth))
Parameters of jQuery width() method

It is a mandatory parameter. It is used for setting width. It specifies the
Value
width in px, em, pt etc. The default value of jQuery width() method is px.
It is an optional parameter. It specifies a function that provides the new
width of selected element.
Function(index,
currentwidth) Index:IIt provides the index position of the element in the set.
currentwidth:It provides the current width of the selected element.
jQuery height()
The jQuery height() method is used to return the current computed height for the first element or
set the height of every matched element. In other words, you can say that the height() method is
used for two purposes:
To return height: When this method is used to return height, it returns the height of first
matched element.
To set height: When this method is used to set height, it sets height of all matched elements.
This method is a very common jQuery dimension.
The before() and insertBefore() both methods are used to perform same task. The main
difference between them is in syntax, and the placement of the content and the target.
Syntax:
To return the height:
1. $(selector).height()
To set the height:
1. $(selector).height(value)
To set the height by using a function:
1. $(selector).height(function(index,currentheight))
Parameters of jQuery height() method

This is a mandatory parameter. It specifies the height in px, em, pt, etc.
Value
its defauly unit is px.
This is an optional parameter. This is used to specify a function that
returns the new height of the selected element.
Function (index,
Index:It provides the index position of the element in the set.
currentHeight)
currentHeight: It provides the current height of the selected
element.
jQuery innerWidth()
jQuery innerWidth() method is used to return the inner width of the first matched
element without including border and margin.
This method includes padding but excludes border and margin.
This image explains that jQuery innerWidth () method includes padding but not border and
margin.
Syntax:
1. $(selector).innerWidth()
jQuery innerHeight()
The jQuery innerHeight () method is used to return the inner height of first matched element. It
includes padding but not border and margin.
In the above image, you can see that innerHeight () method includes padding but not border and
margin.
Syntax:
1. $(selector).innerHeight()
jQuery outerWidth()
jQuery outerWidth() method is used to return the outer width of the first matched
element with padding and border.
The jQuery outerWidth () method works for both visible and hidden elements.
In the above image, you can see that jQuery outerWidth() method includes border and padding
both.
Syntax:
1. $(selector).outerWidth(includeMargin)
Parameters of jQuery outerWidth() method

It is an optional parameter. It is a Boolean value which specifies whether to include the

margin or not.
includeMargin
False:It is a default value. It specifies that not to include margin.
True:It specifies that include the margin.
jQuery outerHeight()
The jQuery outerHeight () method is used to return the outer height of first matched element.
This method includes padding and border both.
In the above example, you can see that border and padding both are included in the outerHeight()
method.
Syntax:
1. $(selector).outerHeight(includeMargin)
Parameters of jQuery outerHeight() method

This is a Boolean value which specifies whether to include the margin or not.
includeMargin
False:It specifies that: Not to include the margin. It is a default value.
True:It specifies that: Include the margin.
jQuery wrap()
jQuery wrap() method is used to wrap specified HTML elements around each selected element.
The wrap () function can accept any string or object that could be passed through the $() factory
function.
Syntax:
1. $(selector).wrap(wrappingElement,function(index))
Parameters of jQuery wrap() method

It is a mandatory parameter. It specifies what HTML elements to wrap around each

selected element. Its possible values are:
WrappingElement
HTML elements
jQuery objects
DOM elements
It is an optional parameter. It specifies a function that returns the wrapping element.

Function(index)
jQuery wrapInner()
The jQuery wrapInner() method is used to wrap an HTML structure around the content of each
element in the set of matched element. This method can accept any string or object that could be
passed to the $() factory function.
Syntax:
1. $(selector).wrapInner(wrappingElement,function(index))
Parameters of jQuery wrapInner() method

It is a mandatory parameter. It specifies what HTML elements are to be wrapped

wrappingElement
around the content of each selected element. Its possible values are:
HTML elements
jQuery objects
DOM elements
It is an optional parameter. It specifies a function that returns the wrapping element.

Function(index)
Index:It provides the index position of the element in the set.
jQuery wrapAll()
jQuery wrapAll() method is used to wrap specified HTML elements around all selected
elements, in a set of matched elements.
Syntax:
1. $(selector).wrapAll(wrappingElement)
Parameters of jQuery wrapAll() method

It is a mandatory parameter. It specifies the HTML elements that you wrap around the
selected elements. Its possible values are:
wrappingElement
HTML elements
jQuery objects
DOM elements
jQuery Events
jQuery events are the actions that can be detected by your web application. They are used to
create dynamic web pages. An event shows the exact moment when something happens.
These are some examples of events.
A mouse click
An HTML form submission
A web page loading
A keystroke on the keyboard
Scrolling of the web page etc.
These events can be categorized on the basis their types:
Mouse Events
click
dblclick
mouseenter
mouseleave
Keyboard Events
keyup
keydown
keypress
Form Events
submit
change
blur
focus
Document/Window Events
load
unload
scroll
resize
Note: A term "fires" is generally used with events. For example: The click event fires in the
moment you press a key.
Syntax for event methods
Most of the DOM events have an equivalent jQuery method. To assign a click events to all
paragraph on a page, do this:
1. $("p").click ();
The next step defines what should happen when the event fires. You must pass a function to the
event.
1. $("p").click(function(){
2. // action goes here!!
3. });
jQuery click()
When you click on an element, the click event occurs and once the click event occurs it execute
the click () method or attaches a function to run.
It is generally used together with other events of jQuery.
Syntax:
1. $(selector).click()
It is used to trigger the click event for the selected elements.
1. $(selector).click(function)
It is used to attach the function to the click event.
jQuery bind()
The jQuery bind() event is used to attach one or more event handlers for selected elements from
a set of elements. It specifies a function to run when the event occurs.
It is generally used together with other events of jQuery.
Syntax:
1. $(selector).bind(event,data,function,map)
Parameters of jQuery bind() event

It is a mandatory parameter. It specifies one or more events to attach to the elements. If you
Event
want to add multiple events they they must be separated by space.
Data It is an optional parameter. It specifies additional data to pass along to the function.
Function It is a mandatory parameter. It executes the function to run when the event occurs.
It specifies an event map which contains one or more events or functions attached to the
Map
element.
jQuery blur()
The jQuery blur event occurs when element loses focus. It can be generated by via keyboard
commands like tab key or mouse click anywhere on the page.
It makes you enable to attach a function to the event that will be executed when the element loses
focus. Originally, this event was used only with form elements like <input>. In latest browsers, it
has been extended to include all element types.
The blur () method is often used together with focus () method.
Syntax:
1. $(selector).blur()
It triggers the blur event for selected elements.

1. $(selector).blur(function)
It adds a function to the blur event.
Parameters of jQuery blur() event

It is an optional parameter. It is used to specify the function to run when the element loses
Function
the focus (blur).
jQuery focus()
The jQuery focus event occurs when an element gains focus. It is generated by a mouse click or
by navigating to it.
This event is implicitly used to limited sets of elements such as form elements like <input>,
<select> etc. and links <a href>. The focused elements are usually highlighted in some way by
the browsers.
The focus method is often used together with blur () method.
Syntax:
1. $(selector).focus()
It triggers the focus event for selected elements.
1. $(selector).focus(function)
It adds a function to the focus event.
Parameters of jQuery focus() event

It is an optional parameter. It is used to specify the function to run when the element gets
Function
the focus.
jQuery select()
jQuery select event occurs when a text is marked or selected in text area or a text field. This
event is limited to <input type="text"> fields and <textarea> boxes. When the select event
occurs, the select() method attaches a function to run.
Syntax:
1. $(selector).select()
It triggers the select event for selected elements.
1. $(selector).select(function)
It adds a function to the select event.
Parameters of jQuery select() event

It is an optional parameter. It is used to specify the function to run when the select event is
Function
executed.
jQuery change()
jQuery change event occurs when the value of an element is changed. It works only on form
fields. When the change event occurs, the change () method attaches a function with it to run.
Note: This event is limited to <input> elements, <textarea> boxes and <select> elements.
For select boxes, checkboxes, and radio buttons: The event is fired immediately when the user
makes a selection with the mouse.
For the other element types: The event is occurred when the field loses focus.
Syntax:
1. $(selector).change()
It triggers the change event for selected elements.
1. $(selector).change(function)
It adds a function to the change event.
Parameters of jQuery change() event

It is an optional parameter. It is used to specify the function to run when the change event
Function
occurs for the selected elements.
jQuery submit()
jQuery submit event is sent to the element when the user attempts to submit a form.
This event is only attached to the <form> element. Forms can be submitted either by clicking on
the submit button or by pressing the enter button on the keyboard when that certain form
elements have focus. When the submit event occurs, the submit() method attaches a function
with it to run.
Syntax:
1. $(selector).submit()
It triggers the submit event for selected elements.
1. $(selector).submit(function)
It adds a function to the submit event.
Parameters of jQuery submit() event

It is an optional parameter. It is used to specify the function to run when the submit event is
Function
executed.
jQuery keydown()
When you press a key on the keyboard, the keydown() event is occurred and once the keydown()
event is occurred, it executes the function associated with keydown() method to run.
The keydown() event is generally used with two other events.
Keypress() event: It specifies that the key is pressed down.

Keyup() event: It specifies that the key is released.
Syntax:
1. $(selector).keydown()
It triggers the keydown event for selected elements.
1. $(selector).keydown(function)
It adds a function to the keydown event.
Parameters of jQuery keydown() event

Function It is an optional parameter. It is executed itself when the keydown event is triggered.
jQuery keypress()
The jQuery keypress () event is occurred when a keyboard button is pressed down. This event is
similar to keydown() event. The keypress() method is executed or attach a function to run when a
keypress() event occurs.
Syntax:
1. $(selector).keypress()
It triggers the keypress event for selected elements.
1. $(selector).keypress(function)
It adds a function to the keypress event.
Parameters of jQuery keypress() event

Function It is an optional parameter. It is executed itself when the keypress event is triggered.
jQuery keyup()
The jQuery keyup() event occurs when a keyboard button is released after pressing. This method
is executed or attach a function to run when a keyup() event occurs.
Syntax:
1. $(selector).keyup()
It triggers the keyup event for selected elements.
1. $(selector).keyup(function)
It adds a function to the keyup event.
Parameters of jQuery keyup() event

Function It is an optional parameter. It is executed itself when the keypress event is triggered.
jQuery mouseenter()
The mouseenter() method adds an event handler function to an HTML element. This function is
executed, when the mouse pointer enters the HTML element.
When you enter your mouse cursor over the selected element, it triggers the mouseenter event
and once the mouseenter event is occurred, it executes the mouseenter() method to attach the
event handler function to run.
This event is generally used together with mouseleave() event.
Syntax:
1. $(selector).mouseenter()
It triggers the mouseenter event for selected elements.
1. $(selector).mouseenter(function)
It adds a function to the mouseenter event.
Parameters of jQuery mouseenter() event

Function It is an optional parameter. It executes itself when the mouseenter event is triggered.
jQuery mouseenter()
The mouseenter() method adds an event handler function to an HTML element. This function is
executed, when the mouse pointer enters the HTML element.
When you enter your mouse cursor over the selected element, it triggers the mouseenter event
and once the mouseenter event is occurred, it executes the mouseenter() method to attach the
event handler function to run.
This event is generally used together with mouseleave() event.
Syntax:
1. $(selector).mouseenter()
It triggers the mouseenter event for selected elements.
1. $(selector).mouseenter(function)
It adds a function to the mouseenter event.
Parameters of jQuery mouseenter() event

Function It is an optional parameter. It executes itself when the mouseenter event is triggered.
jQuery mouseleave()
The mouseleave() method adds an event handler function to an HTML element. This function is
executed, when the mouse pointer leaves the HTML element.
When your mouse cursor leaves the selected element, it triggers the mouseleave event and once
the mouseleave event is occurred, it executes the mouseleave() method attached with the event
handler function to run.
This event is generally used together with mouseenter() event.
Syntax:
1. $(selector).mouseleave()
It triggers the mouseleave event for selected elements.
1. $(selector).mouseleave(function)
It adds a function to the mouseleave event.
Parameters of jQuery mouseleave() event

Function It is an optional parameter. It executes itself when the mouseleave event is triggered.
jQuery hover()
The jQuery hover() method executes two functions when you roam the mouse pointer over the
selected element. The hover() method triggers both the mouseenter and mouseleave events.
Syntax:
1. $(selector).hover(inFunction,outFunction)
Note: If you specify only one function then it will be run for both the mouseenter and
mouseleave event.
Parameters of jQuery hover() event

InFunction It is a mandatory parameter. It is executed the function when mouseenter event occurs.
OutFunction It is an optional parameter. It is executed the function when mouseleave event occurs.
jQuery mousedown()
The mousedown() method adds an event handler function to an HTML element. This function is
executed, when the left mouse button is pressed down, at the time while the mouse is over the
HTML element.
This event is generally used together with mouseup() event.

Syntax:
1. $(selector).mousedown()
It triggers the mousedown event for selected elements.
1. $(selector).mousedown(function)
It adds a function to the mousedown event.
Parameters of jQuery mousedown() event

Function It is an optional parameter. It executes itself when the mousedown event is triggered.
jQuery mouseup()
The mouseup() method adds an event handler function to an HTML element. This function is
executed, when the left mouse button is released after pressing mouse button on the HTML
element.
The mouseup () event occurs when you release the pressed button of your mouse over a selected
element. Once the mouseup() event is occurred it executes the mouseup() method attached with a
function to run.
This event is generally used together with mousedown() event.
Syntax:
1. $(selector).mouseup()
It triggers the mouseup event for selected elements.
1. $(selector).mouseup(function)
It adds a function to the mouseup event.
Parameters of jQuery mouseup() event

Function It is an optional parameter. It executes itself when the mouseup event is triggered.
jQuery mouseover()
The mouseover event is occurred when you put your mouse cursor over the selected element
.Once the mouseover event is occurred, it executes the mouseover () method or attach a function
to run.
This event is generally used with mouseout() event.
Note: Most of the people are confused between mouseenter and mouseover.
Difference between mouseenter() and mouseover()
The mouseenter event is only triggered if the mouse pointer enters the selected element whereas
the mouseover event triggers if the mouse cursor enters any child elements as well as the selected
element.
Syntax:
1. $(selector).mouseover()
It triggers the mouseover event for selected elements.
1. $(selector).mouseover(function)
It adds a function to the mouseover event.
Parameters of jQuery mouseover() event

Function It is an optional parameter. It executes itself when the mouseover event is triggered.
jQuery mouseout()
The mouseout event is occurred when you remove your mouse cursor from the selected element
.Once the mouseout event is occurred, it executes the mouseout() method or attach a function to
run.
This event is generally used with mouseover () event.
Note: Most of the people are confused between mouseout and mouseleave.
Difference between mouseleave and mouseout
The mouseleave event is only triggered if the mouse pointer leaves the selected element whereas
the mouseout event triggers if the mouse cursor leaves any child elements as well as the selected
element.
Syntax:
1. $(selector).mouseout()
It triggers the mouseout event for selected elements.
1. $(selector).mouseout(function)
It adds a function to the mouseout event.
Parameters of jQuery mouseout() event

Function It is an optional parameter. It executes itself when the mouseout event is triggered.
jQuery load()
The load () method is used to load a specific element. It attaches an event handler to load event.
It was deprecated in jQuery 1.8 version of jQuery library.
The load event occurs when a specific element is loaded. It is generally used with a URL (image,
script, frame, iframe), and the window object.
Note: On some browsers, the load event did not trigger if the image is cached.
Syntax:
1. $(selector).load(function)
It adds a function to the load event.
Parameters of jQuery load() event

Function It is an essential parameter. It executes itself when the specified element is done loading.
jQuery unload()
The jQuery unload() method is used to unload a specific element. It attaches an event handler to
unload event. The unload event is sent to the window element when the user navigates away
from the page. It was deprecated in jQuery 1.8 version of jQuery library.
Ways to trigger unload event
An unload event is triggered if you:
Click on a link which leads to leave the page.

Use the forward or back button.
Type a new URL in the address bar.
Close the browser window.
Reload the page.
Syntax:
1. $(selector).unload(function)
It adds a function to the unload event.
Parameters of jQuery unload() event

Function It is an essential parameter. It executes itself when the unload event is triggered.
jQuery delegate()
The delegate () method is used to attach one or more event handlers for specified elements which
are the children of selected elements. This method executes a function to run when the event
occurs.
The attached event handlers with the delegate () method works for both current and future
elements.
Syntax:
1. $(selector).delegate(childSelector,event,data,function)
Parameters of jQuery delegate() event

Parameters Description
It is a mandatory parameter that is used to specify one or more child elements to attach
ChildSelector
the event handler.
It is also a mandatory parameter. It specifies one or more events to attach to the

Event
elements. If you use multiple events then they must be separated by space.
Data It is optional and specifies additional data to pass along to the function.
Function It is executed when the event occurs.

jQuery UI
What is jQuery UI
Good for highly interactive web applications

Open source and free to use
Powerful theme mechanism
Stable and maintenance friendly
Extensive browser support
jQuery UI Introduction
jQueryUI stands for jQuery User Interface. It is a collection of animated visual effects, GUI
widgets, and themes implemented with jQuery, CSS, HTML and JavaScript. These new plug-ins
add a lot of new functionalities in the jQuery core library.
It is a very popular and powerful mobile first front-end framework used for faster and easier web
development. According to a survey it is used on over 176000 websites, making it the second
most popular JavaScript library on the Web.
jQuery UI Features
jQueryUI facilitates you to make highly interactive web applications.
It is open source and free to use.
It provides a powerful theme mechanism.
It is very stable and maintenance friendly.
It provides an extensive browser support
Good documentation
jQuery UI Categorization
We can categorize the jQueryUI into four groups.
1. Interactions
2. Widgets
3. Effects
4. Utilities
1) Interactions: Interactions are the set of plug-ins which facilitates users to interact with DOM
elements. These are the mostly used interactions:
Draggable
Droppable
Resizable
Selectable
Sortable
2) Widgets: Widgets are the jQuery plug-ins which makes you able to create user interface
elements like date picker, progress bar etc. These are the mostly used widgets:
Accordion
Autocomplete
Dialog
Button
Date Picker
Menu
Progress Bar
Tabs
Tooltip
Slider
Spinner
3) Effects: The internal jQuery effects contain a full suite of custom animation and transition for
DOM elements.
Hide
Show
Add Class
Remove Class
Switch Class
Toggle Class
Color Animation
Effect
Toggle
4) Utilities: Utilities are the modular tools, used by jQuery library internally.
Position: It is used to set the position of the element according to the other element's alignment
(position).

jQuery UI Draggable
jQuery UI draggable() method is used to make any DOM element draggable. Once the element is
made draggable, you can move it by clicking on it with the mouse and drag it anywhere within
the viewport.
Syntax:
You can use the draggable () method in two forms:
1. 1. $(selector, context).draggable (options) Method
1. 2. $(selector, context).draggable ("action", params) Method

First Method
The draggable (option) method specifies that an HTML element can be moved in the HTML
page. Here, the option parameter specifies the behavior of the elements involved.
Syntax:
1. $(selector, context).draggable(options);
You can use one or more options at a time using JavaScript object. In the case of multiple
options, you should use commas to separate them. For example:
1. $(selector, context).draggable({option1: value1, option2: value2..... });
Following is a list of different options that can be used with this method:
Option Description
If this option is set to false, it will prevent the UI-draggable class from being added in
addclasses
the list of selected DOM elements. By default its value is true.
It specifies the element in which the draggable helper should be appended to while
appendto
dragging. By default its value is "parent".
This option constrains dragging to either the horizontal (x) or vertical (y) axis. Its
axis
possible values are:"x", "y".
This option is used to prevent dragging from starting on specified elements. By

cancel
default its value is "input,textarea, button,select,option".
This option is used to specify a list whose elements are interchangeable. At the end
connecttosortable
of placement, the element is part of the list. By default its value is "false".
Constrains dragging to within the bounds of the specified element or region. By

containment
default its value is "false".
It is used to specify the CSS property of the cursor when the element moves. It
cursor
represents the shape of the mouse pointer. By default its value is "auto".
It sets the offset of the dragging helper relative to the mouse cursor. Coordinates can
cursorat be given as a hash using a combination of one or two keys: { top, left, right, bottom }.
By default its value is "false".
It specifies the delay in milliseconds, after which the first movement of the mouse is
delay taken into account. The displacement may begin after that time. By default its value
is "0".
disabled It disables the ability to move items when set to true. Items cannot be moved until
this function is enabled (using the draggable ("enable") instruction). By default its
value is "false".
The number of pixels that the mouse must be moved before the displacement is
distance
taken into account. By default its value is "1".
It snaps the dragging helper to a grid, every x and y pixels. The array must be of the
grid
form [ x, y ]. By default its value is "false".
If specified, restricts dragging from starting unless the mousedown occurs on the
handle
specified element(s). By default its value is "false".
It allows for a helper element to be used for dragging display. By default its value is
helper
"original".
It prevents iframes from capturing the mousemove events during a drag. By default
iframefix
its value is "false".
opacity Opacity of the element moved when moving. By default its value is "false".
If set to true, all droppable positions are calculated on every mousemove. By default
refreshpositions
its value is "false".
It indicates whether the element is moved back to its original position at the end of
revert
the move. By default its value is "false".
It indicates the duration of displacement (in milliseconds) after which the element
revertduration
returns to its original position (see options.revert). By default its value is "500".
It is used to group sets of draggable and droppable items, in addition to droppable's

scope
accept option. By default its value is "default".
when set to true (the default), the display will scroll if the item is moved outside the
scroll
viewable area of the window. by default its value is "true".
It indicates how many pixels the mouse must exit the window to cause scrolling of
scrollsenstivity
the display. By default its value is "20".
It indicates the scrolling speed of the display once scrolling begins. By default its
scrollspeed
value is "20".
It adjusts the display of the item being moved on other elements (which are flown).
snap
By default its value is "false".
It specifies how the adjustment should be made between the moved element and
snapmode
those indicated in options.snap. By default its value is "both".
It specifies the maximum number of pixels in the difference in position necessary to

snaptolerance
establish the adjustment. By default its value is "20".
It controls the z-index of the set of elements that match the selector, always brings
stack the currently dragged item to the front. It is very useful in things like window
managers. By default its value is "false".
zindex z-index for the helper while being dragged. By default its value is "false".
jQuery UI Droppable
jQuery UI facilitates you to use droppable() method to make any DOM element droppable at a
specified target.
Syntax:
You can use the droppable () method in two forms:
1. 1. $(selector, context).droppable (options) Method
1. 2. $(selector, context).droppable ("action", params) Method
First Method
The droppable (options) method specifies that you can use an HTML element as an element in
which you can drop other elements. Here, the option parameter specifies the behavior of the
elements involved.
Syntax:
1. $(selector, context).droppable (options);
You can use one or more options at a time using JavaScript object. If you are using more than
one option then will have to separate them by using a comma. For example:
1. $(selector, context).droppable({option1: value1, option2: value2..... });
Following is a list of the different options that can be used with this method:
Option Description
This option is used when you need to control which draggable elements are to be accepted
accept
for dropping. by default its value is *.
This option is a string representing one or more css classes to be added to the droppable
activeclass element when an accepted element (one of those indicated in options.accept) is being
dragged. by default its value is false.
This option when set to false will prevent the ui-droppable class from being added to the
addclasses
droppable elements. by default its value is true.
diasabled This option when set to true disables the droppable. by default its value is false.
This option is used when you need to control which draggable elements are to be accepted
greedy for dropping on nested droppables. by default its value is false. if this option is set to true,
any parent droppables will not receive the element.
This option is string representing one or more css classes to be added to the element of
hoverclass droppable when an accepted element (an element indicated in options.accept) moves into it.
by default its value is false.
This option is used to restrict the droppable action of draggable elements only to items that
scope have the same options.scope (defined in draggable (options)). by default its value is
"default".
This option is a string that specifies which mode to use for testing whether a draggable is
tolerence
hovering over a droppable. By default its value is "intersect".
jQuery UI resizable
jQuery UI resizable() method is used to resize any DOM element. It simplifies the method of
resizing of elements and reduces time and a lot of coding.
The resizable () method displays an icon in the bottom right of the item to resize.
Syntax:
You can use the resizable () method in two forms:
1. $(selector, context).resizable (options) Method
1. $(selector, context).resizable ("action", params) Method
First Method
The resizable (options) method specifies that you can resize an HTML element. Here the
?options? parameter is an object that specifies the behavior of the elements involved when
resizing.
Syntax:
1. $(selector, context).resizable (options);
You can use one or more options at a time of using JavaScript object. In the case of more than
one option, you have to separate them using a comma as follows:
1. $(selector, context).resizable ({option1: value1, option2: value2..... });
Option Description
This option is of type selector, jQuery , or any DOM element. It represents elements
alsoResize
that also resize when resizing the original object. By default its value is FALSE.
If you set this option to TRUE, it enables a visual effect during resizing when the mouse
animate
button is released. The default value is FALSE (no effect).
This option specifies the duration of the resizing effect in millisecond. It is used only
animateDuration
when animate option is true. By default its value is "slow".
This option specifies which easing should be applied when using the animate option.
animateEasing
By default its value is "swing".
This option indicates the aspect (height and width) ratio for the item. By default its
aspectRatio
value is false.
This option is used to hide the magnification icon or handles, except when the mouse
autoHide
is over the item. By default its value is false.
This option is used to prevent resizing on specified elements. By default its value is
cancel
input, textarea, button, select, option.
This option is used restrict the resizing of elements within a specified element or
containment
region. By default its value is false.
This option is used to set tolerance or delay in milliseconds. After that, resizing or
delay
displacement will begin. By default its value is 0.
If you set this option to TRUE, it disables the resizing mechanism. The mouse no longer
disabled resizes elements, until the mechanism is enabled, using the resizable ("enable"). By
default its value is false.
This option specifies that the resizing will start only when the mouse moves a
distance distance(pixels). By default its value is 1 pixel. This can help prevent unintended
resizing when clicking on an element.
If you set this option to TRUE, a semi-transparent helper element is shown for resizing.
ghost This ghost item will be deleted when the mouse is released. By default its value is
false.
This option is of type array [x, y], indicating the number of pixels that the element
grid expands horizontally and vertically during movement of the mouse. By default its
value is false.
This option is a character string that specifies which sides or angles of the element can
handles
be resized. By default its values are e, s, se.
This option is used to add a CSS class to style the element which you want to resize.
When the element is resized a new <div> element is created, which is the one that is
helper
scaled (UI-resizable-helper class). Once the resize is complete, the original element is
sized and the <div> element disappears. By default its value is false.
This option is used to set the maximum height the resizable should be allowed to
maxHeight
resize to. By default its value is NULL.
This option is used to set the maximum width the resizable should be allowed to resize
maxWidth
to. By default its value is NULL.
This option is used to set the minimum height the resizable should be allowed to resize
minHeight
to. By default its value is 10.
This option is used to set the minimum width the resizable should be allowed to resize
minWidth
to. By default its value is 10.
jQuery UI Selectable
jQuery UI selectable() method is used to select DOM element individually or in a group. With
this method, you can select element by dragging a box with the mouse over the element. You can
also use the ctrl button to select more than one element.
Syntax:
You can use the selectable () method in two forms:
1. $(selector, context).selectable (options) Method
1. $(selector, context).selectable ("action", params) Method
First Method
The selectable (options) method specifies that an HTML element contains selectable items. Here
the ?options? parameter is an object that specifies the behavior of the elements involved when
selecting.
You can use one or more than one options at a time using JavaScript object. In the case of more
than one option, you have to separate them using a comma as follows:
1. $(selector, context).selectable({option1: value1, option2: value2..... });
Option Description
This option specifies which element the selection helper (the lasso) should be appended to.
appendTo
By default its value is body.
If you set this option to true, the position and size of each selectable item is computed at
autoRefresh
the beginning of a select operation. By default its value is true.
This option forbids selecting if you start selection of elements. By default its value is input,
cancel
textArea, button, select, option.
This option defines when the selecting should start. It sets the time in millisecond. This can
delay
be used to prevent unwanted selections. By default its value is 0.
If you set this option to true, it disables the selection mechanism. You cannot select the
disabled
elements until the mechanism is set to enable. able") By default its value is false.
This option is the distance (in pixels) the mouse must move to consider the selection in
distance progress. This is useful, for example, to prevent simple clicks from being interpreted as a
group selection. By default its value is 0.
This option is a selector indicating which elements can be part of the selection. By default
filter
its value is *.
This option specifies which mode to use for testing whether the selection helper (the lasso)
tolerance
should select an item. By default its value is touch.
jQueryUI Sortable
jQueryUI sortable() method is used to re-order elements in the list or grid form, by using the
mouse. The sorting ability of this method is based on an operation string passed as the first
parameter.
Syntax:
You can use the sortable () method in two forms:
1. 1. $(selector, context).sortable (options) Method
1. 2. $(selector, context).sortable ("action", params) Method
First Method
The sortable (options) method specifies that an HTML element contains interchangeable
elements. Here the options parameter specifies the behavior of the elements involved during the
process of reordering.
Syntax:
1. $(selector, context).sortable (options);
Option Description
This option specifies the element in which the new element created with
appendto options.helper will be inserted during the time of the move/drag. By default its
value is parent.
This option indicates an axis of movement ("x" is horizontal, "y" is vertical). By

axis
This option is used to prevent sorting of elements by clicking on any of the selector
cancel
elements. By default its value is "input,textarea,button,select,option".
This option is a selector that identifies another sortable element that can accept
items from this sortable. This allows items from one list to be moved to other lists,
connectwith
a frequent and useful user interaction. If omitted, no other element is connected.
This is a one-way relationship. By default its value is false.
This option indicates an element within which the displacement takes place. The
element will be represented by a selector (only the first item in the list will be
containment
considered), a DOM element, or the string "parent" (parent element) or "window"
(html page).
It specifies the cursor CSS property when the element moves. It represents the
cursor
shape of the mouse pointer. By default its value is "auto".
It sets the offset of the dragging helper relative to the mouse cursor. Coordinates
cursorat can be given as a hash using a combination of one or two keys: { top, left, right,
bottom }. By default its value is "false".
It specifies delay in milliseconds, after which the first movement of the mouse is
delay taken into account. The displacement may begin after that time. By default its
value is "0".
This option if set to true, disables the sortable functionality. By default its value is
disabled
false.
It indicates the number of pixels that the mouse must be moved before the sorting
distance starts. If specified, sorting will not start until after mouse is dragged beyond
distance. By default its value is "1".
If you set this option to false, then items from this sortable can't be dropped on an
droponempty
empty connect sortable. By default its value is true.
forcehelpersize If you set this option to true, it forces the helper to have a size. By default its value
is false.
This option when set to true, takes into account the size of the placeholder when
forceplaceholdersize an item is moved. This option is only useful if options.placeholder is initialized. By
This option is an array [x, y] indicating the number of pixels that the sorting
grid element moves horizontally and vertically during displacement of the mouse. By
If specified, restricts sort from starting unless the mousedown occurs on the
handle
specified element(s). By default its value is false.
It is allowed for a helper element to be used for dragging display. By default its
helper
value is original.
This option specifies which items inside the DOM element to be sorted. By default
items
its value is > *.
This option is used to define the opacity of the helper while sorting. By default its
opacity
value is false.
This option is used to class name that gets applied to the otherwise white space.
placeholder
By default its value is false.
This option decides whether the sortable items should revert to their new
revert
positions using a smooth animation. By default its value is false.
This option is used to enable scrolling. If you set this option to true the page scrolls
scroll
when coming to an edge. By default its value is true.
This option indicates how many pixels the mouse must exit the visible area to
scrollsenstivity cause scrolling. By default its value is 20. This option is used only with
options.scroll set to true.
This option indicates the scrolling speed of the display once the scrolling begins. By
scrollspeed
default its value is 20.
This option is a string that specifies which mode to use for testing whether the
tolerance
item being moved is hovering over another item. By default its value is "intersect".
This option represents z-Index for element/helper while being sorted. By default its
zIndex
value is 1000.
jQuery UI Accordion
jQuery UI Accordian is an expandable and collapsible content holder that is broken into sections
and probably looks like tabs.
Syntax:
You can use the accordion () method in two forms:
1. $(selector, context).accordion (options) Method
1. $(selector, context).accordion ("action", params) Method
First Method
$(selector, context).accordion (options) Method:
The accordion (options) method specifies that an HTML element and its contents should be
treated and managed as accordion menus. The options parameter is an object that specifies the
appearance and behavior of the menu involved.
Syntax:
1. $(selector, context).accordion (options);
You can use one or more options at a time using Javascript object. In the case of more than one
options to be provided, you have to separate them using a comma as follows:
1. $(selector, context).accordion({option1: value1, option2: value2..... });
Option Description
It specifies the index of the menu that is open when the page is first accessed. By default its
value is 0. It is of two types:
active boolean: if set to false will collapse all panels. This requires the collapsible option to be true.
integer: The zero-based index of the panel that is active (open). a negative value selects
panels going backward from the last panel.
The animate option is used to set how to animate changing panels. By default its value is {}.
this is of four types:

animate
boolean: a value of false will disable animations.
number: this is a duration in milliseconds
string: name of easing to use with default duration.

object: animation settings with easing and duration properties.
This option allows users to click on the open panel's header have no effect when it is set to
collapsible false. It facilitates users to close a menu by clicking on it when it is set to true. By default its
value is false.
disabled If you set this option's value true then it disables the accordion. By default its value is false.
This option specifies the event used to select an accordion header. By default its value is
event
click.
This option specifies a selector or element to override the default pattern for identifying the
header
header elements. By default its value is > li > :first-child,> :not(li):even.
The heightStyle option is used to control the height of accordion and panels. By default its
value is auto.
Its possible values are:

heightStyle
auto: all panels will be set to the height of the tallest panel.
fill: expand to the available height based on the accordion's parent height.
content: each panel will be only as tall as its content.
This option is an object that defines the icons to use to the left of the header text for opened
and closed panels. The icon to use for closed panels is specified as a property named header,
icons
whereas the icon to use for open panels is specified as a property named headerselected. By
default its value is { "header": "ui-icon-triangle-1-e", "activeheader": "ui-icon-triangle-1-s" }.
jQuery UI Autocomplete
Autocomplete mechanism is frequently used in modern websites to provide the users a list of
suggestion while typing the beginning word in the text box. It facilitates the user to select an item
from the list, which will be displayed in the input field. This feature prevents the users from
having to enter an entire word or a set of words.
jQueryUI provides an autocomplete widget to facilitates users by giving a list of suggestions to

type in a text box. It is a control that acts a lot like a <select> dropdown, but filters the choices to
present only those that match what the user is typing into a control.
Syntax:
You can use the autocomplete() method in two forms:
1. $(selector, context).autocomplete (options) Method
1. $(selector, context).autocomplete ("action", params) Method

First Method
The autocomplete (options) method specifies that an HTML <input> element must be managed
as an input field that will be displayed above a list of suggestions. Here the options parameter is
an object that specifies the behavior of the list of suggestions when the user is typing in the input
field.
Syntax:
1. $(selector, context).autocomplete (options);
You can use one or more options at a time using JavaScript object. In the case of more than one
options, you will have to separate them using a comma as follows:
1. $(selector, context).autocomplete({option1: value1, option2: value2..... });
Option Description
appendTo This option is used append an element to the menu. By default its value is null.
If you set this option as TRUE, the first item of the menu will automatically be focused when
autoFocus
the menu is shown. By default its value is FALSE.
This option specifies the time delay in milliseconds to wait before trying to obtain the
delay
matching values (as specified by the source option). By default its value is 300.
If you set this option as true, the autocomplete widget is initially disabled. By default its value
disabled
is false.
It specifies the number of characters that must be entered before trying to obtain the
minlength
matching values (as specified by the source option). By default its value is 1.
This option identifies the position of the suggestions menu iaccording to the input element.
position
By default its value is { my: "left top", at: "left bottom", collision: "none" }.
This option specifies the manner in which the data that matches the input data is obtained.
source You must have to provide a value or the autocomplete widget won?t be created. By default
its value is none; must be specified.
jQuery UI Button
jQuery UI button() method is used to transform the HTML elements (like buttons, inputs and
anchors etc.) It transforms HTML elements into themeable buttons, with automatic management
of mouse movements on them. They areall managed transparently by jQuery UI.
Syntax:
You can use the button() method in two forms:
1. $(selector, context).button (options) Method
1. $(selector, context).button ("action", params) Method
First Method
The button (options) method specifies that an HTML element should be treated as button. Here
the ?options? parameter is an object that specifies the behavior and appearance of the button.
Syntax:
1. $(selector, context).button (options);
option, you have to separate them using a comma as follows:
1. $(selector, context).button({option1: value1, option2: value2..... });
Following is a list of options that can be used with this method:
Option Description
disabled If you set this option to true, it deactivates the button. By default its value is false.
This option specifies that one or two icons are to be displayed in the button: Primary icons to
the left, secondary icons to the right.Primary icon is identified by the primary property of the
icons
object, and the secondary icon is identified by the secondary property. By default its primary
and seconadary value is set to NULL.
This option specifies text to display on the button that overrides the natural label. In the case of
label radio buttons and checkboxes, the natural label is the <label> element associated with the
control. By default its value is NULL.
This option specifies whether text is to be displayed on the button. If specified as false, text is
text suppressed if (and only if) the icons option specifies at least one icon. By default its value is
true.
jQuery UI Datepicker
jQuery UI datepicker widget facilitates users to enter dates easily and visually. A user can
customize the date format and language, restrict the selectable date ranges, adds buttons and
other navigation options easily.
The jQuery UI datepicker() method creates a datepicker and changes the appearance of HTML
element on the pages by adding new CSS classes.
Syntax:
You can use the datepicker() method in two forms:
1. $(selector, context).datepicker (options) Method
1. $(selector, context).datepicker ("action", [params]) Method
First Method
The datepicker (options) method specifies that an <input> element (or <div>, or <span> ,
depending on how you choose to display the calendar) should be managed as a datepicker. The
options parameter specifies the behavior and appearance of the datepicker elements.
Syntax:
1. $(selector, context).datepicker(options);
options you should separate them using a comma as follows:
1. $(selector, context).datepicker({option1: value1, option2: value2..... });
Following is a list of different options that can be used with this method.
Option Description
This option specifies a jQuery selector for a field that is also updated with any
date selections. The altFormat option can be used to set the format for this
altField value. This is quite useful for setting date values into a hidden input element to
be submitted to the server, while displaying a more user-friendly format to the
user. By default its value is "".
This option is used when an altField option is specified. it provides the format
altFormat
for the value to be written to the alternate element. By default its value is "".
This option is a string value to be placed after the <input> element, intended
appendText
to show instructions to the user. By default its value is "".
This option when set to true resizes the <input> element to accommodate the
autoSize datepicker?s date format as set with the dateformat option. By default its
value is false.
This option is a callback function that?s invoked just before a datepicker is

displayed, with the <input> element and datepicker instance passed as
beforeShow
parameters. This function can return an options hash used to modify the
datepicker. By default its value is "".
beforeShowDay This option is a callback function which takes a date as parameter, that?s
invoked for each day in the datepicker just before it?s displayed, with the date
passed as the only parameter. This can be used to override some of the default
behavior of the day elements. This function must return a three-element array.
By default its value is null.
This option specifies the path to an image to be displayed on the button

enabled by setting the showOn option to one of buttons or both. If buttonText
buttonImage
is also provided, the button text becomes the alt attribute of the button. By
default its value is "".
This option if set to true, specifies that the image specified by buttonImage is
buttonImageOnly to appear standalone (not on a button). The showOn option must still be set to
one of button or both for the image to appear. By default its value is false.
This option specifies the caption for the button enabled by setting the showOn
buttonText
option to one of button or both. By default its value is "...".
This option is a custom function to calculate and return the week number for a
calculateWeek date passed as the lone parameter. The default implementation is that
provided by the $.datepicker.iso8601week() utility function.
This option if set to true, a month dropdown is displayed, allowing the user to
changeMonth directly change the month without using the arrow buttons to step through
them. By default its value is false.
This option if set to true, a year dropdown is displayed, allowing the user to
directly change the year without using the arrow buttons to step through
changeYear
them. The option yearRange can be used to control which years are made
available for selection. By default its value is false.
This option specifies the text to replace the default caption of done for the
closeText close button. It is used when the button panel is displayed via the
showbuttonpanel option. By default its value is "done".
This option if set true (the default), text entry into the <input> element is
constrainInput constrained to characters allowed by the current dateformat option. By default
its value is true.
This option specifies the text to replace the default caption of today for the
currentText current button. This is used if the button panel is displayed via the
showButtonPanel option. By default its value is today.
This option specifies the date format to be used. By default its value is
dateFormat
mm/dd/yy.
This option is a 7-element array providing the full day names with the 0th
dayNames element representing Sunday. It can be used to localize the control. by default
its value is [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday",
"Friday", "Saturday" ].
This option is a 7-element array providing the minimal day names with the 0th
element representing Sunday, used as column headers. It can be used to
dayNamesMin
localize the control. by default its value is [ "Su", "Mo", "Tu", "We", "Th", "Fr",
"Sa" ].
This option specifies a 7-element array providing the short day names with the
dayNamesShort 0th element representing Sunday. It can be used to localize the control. By
default its value is [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ].
This option sets the initial date for the control, overriding the default value of
today, if the <input> element has no value. This can be a date instance, the
defaultDate
number of days from today, or a string specifying an absolute or relative date.
This option specifies the speed of the animation that makes the datepicker
duration appear. It can be one of slow, normal, or fast, or the number of milliseconds
for the animation to span. By default its value is normal.
This option specifies which day is considered the first day of the week, and will
firstday
be displayed as the left-most column. By default its value is 0.
This option when set to true, the current day link is set to the selected date,
gotocurrent
overriding the default of today. By default its value is false.
This option if set to true, hides the next and previous links (as opposed to
hideIfNoPrevNext merely disabling them) when they aren?t applicable, as determined by the
settings of the mindate and maxdate options. By default its value is false.
If this option is set to true, it specifies the localizations as a right-to-left

isRTL
language. By default its value is false.
This option sets the maximum selectable date for the control. This can be a
maxDate date instance, the number of days from today, or a string specifying an
absolute or relative date. By default its value is null.
This option sets the minimum selectable date for the control. This can be a
minDate date instance, the number of days from today, or a string specifying an
absolute or relative date. By default its value is null.
This option is a 12-element array providing the full month names with the 0th
element representing January. It can be used to localize the control. by default
monthnames
its value is [ "January", "February", "March", "April", "May", "June", "July",
"August", "September", "October", "November", "December" ].
monthNamesShort This option specifies a 12-element array providing the short month names with
the 0th element representing January. It can be used to localize the control. by
default its value is [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug",
"Sep", "Oct", "Nov", "Dec" ].
If this option is set to true, the navigation links for nexttext, prevtext, and
currenttext are passed through the $.datepicker.formatdate() function prior to
navigationAsDateFormat
display. This allows date formats to be supplied for those options that get
replaced with the relevant values. By default its value is false.
This option specifies the text to replace the default caption of next for the next
nexttext month navigation link. themeRoller replaces this text with an icon. By default
its value is next.
This option specifies the number of months to show in the datepicker. By

numberOfMonths
This option is a callback that?s invoked when the datepicker moves to a new
month or year, with the selected year, month (1-based), and datepicker
onChangeMonthYear
instance passed as parameters, and the function context is set to the input
field element. By default its value is null.
This option is a callback invoked whenever a datepicker is closed, passed the

selected date as text (the empty string if there is no selection), and the
onClose
datepicker instance, and the function context is set to the input field element.
This option is a callback invoked whenever a date is selected, passed the

selected date as text (the empty string if there is no selection), and the
onSelect
datepicker instance, and the function context is set to the input field element.
This option specifies the text to replace the default caption of prev for the
prevText previous month navigation link. (note that the themeroller replaces this text
with an icon). By default its value is PrevdefaultDatedayNamesMin.
This option if set to true, days shown before or after the displayed month(s)
selectOtherMonths are selectable. Such days aren?t displayed unless the showOtherMonths
option is true. by default its value is false.
This option if its a number, specifies a value between 0 and 99 years before
which any 2-digit year values will be considered to belong to the previous
shortYearCutoff century. If this option is a string, the value undergoes a numeric conversion
and is added to the current year. The default is +10 which represents 10 years
from the current year.
This option specifies sets the name of the animation to be used to show and
showAnim hide the datepicker. If specified, must be one of show (the default), fadein,
slidedown, or any of the jquery ui show/hide animations. By default its value is
show.
This option if set to true, a button panel at the bottom of the datepicker is
displayed, containing current and close buttons. The caption of these buttons
showButtonPanel
can be provided via the currentText and closeText options. By default its value
is false.
This option specifies the 0-based index, starting at the upper left, of where the
showCurrentAtPos month containing the current date should be placed within a multi-month
display. By default its value is 0.
This option specifies if set to true, the positions of the month and year are
showMonthAfterYear
reversed in the header of the datepicker. By default its value is false.
This option specifies when the datepicker should appear. The possible values
showOn
are focus, button or both. by default its value is focus.
This option provides a hash to be passed to the animation when a jQuery UI

showOptions
animation is specified for the showAnim option. By default its value is {}.
This option if set to true, dates before or after the first and last days of the
showOtherMonths current month are displayed. These dates aren't selectable unless the
selectOtherMonths option is also set to true. By default its value is false.
This option if set to true, the week number is displayed in a column to the left
showWeek of the month display. The calculateWeek option can be used to alter the
manner in which this value is determined. By default its value is false.
This option specifies how many months to move when one of the month
stepMonths
navigation controls is clicked. By default its value is 1.
This option specifies the text to display for the week number column,
weekHeader overriding the default value of wk, when showWeek is true. By default its value
is wk.
This option specifies limits on which years are displayed in the dropdown in
the form: to when changeYear is true. The values can be absolute or relative
yearRange (for example: 2005:+2, for 2005 through 2 years from now). The prefix c can be
used to make relative values offset from the selected year rather than the
current year (example: c-2:c+3). By default its value is c-10:c+10.
This option displays additional text after the year in the datepicker header. By
yearSuffix
default its value is "".
jQuery UI Dialog
The dialog boxes are used to present information in a nice way on the HTML pages. The jQuery
UI dialog method is used to create a basic dialog window which is positioned into the viewport
and protected from page content. It has a title bar and a content area, and can be moved, resized
and closed with the 'x' icon by default.
Syntax:
You can use the dialog ()method in two forms:
1. $(selector, context).dialog (options) Method
1. $(selector, context).dialog ("action", [params]) Method
First Method
1. $(selector, context).dialog (options) Method
The dialog(options) method specifies that you can use an HTML element in the form of a dialog
box. Here, options parameter is an object that specifies the appearance and behavior of that
window.
Syntax:
1. $(selector, context).dialog(options);
options, you must have to separate them using a comma as follows:
1. $(selector, context).dialog({option1: value1, option2: value2..... });
Option Description
If you set this option to false, it will prevent the UI-draggable class from being added in
appendto
the list of selected DOM elements. By default its value is true.
If you set this option to true, the dialog box is opened upon creation. when false, the
autoopen
dialog box will be opened upon a call to dialog('open'). By default its value is true.
This option adds buttons in the dialog box. These are listed as objects, and each property
buttons is the text on the button. The value is a callback function called when the user clicks the
button. By default its value is {}.
Unless you set this option to false, the dialog box will be closed when the user presses
closeonescape
the escape key while the dialog box has focus. By default its value is true.
This option contains text to replace the default of close for the close button. by default
closetext
its value is "close".
If you set this option to false, it will prevent the UI-draggable class from being added in
dialogclass
the list of selected dom elements. By default its value is "".
you set this option to false, dialog box will be draggable by clicking and dragging the title
draggable
bar. By default its value is true.
height This option sets the height of the dialog box. By default its value is "auto".
This option is used to set the effect to be used when the dialog box is closed. By default
hide
its value is null.
This option sets maximum height, in pixels, to which the dialog box can be resized. By
maxheight
This option sets the maximum width to which the dialog can be resized, in pixels. By
maxwidth
This option is the minimum height, in pixels, to which the dialog box can be resized. By
minheight
This option is the minimum width, in pixels, to which the dialog box can be resized. By
minwidth
If this option is set to true, the dialog will have modal behavior; other items on the page
modal will be disabled, i.e., cannot be interacted with. modal dialogs create an overlay below
the dialog but above other page elements. By default its value is false.
This option specifies the initial position of the dialog box. can be one of the predefined
positions: center (the default), left, right, top, or bottom. can also be a 2-element array
position
with the left and top values (in pixels) as [left,top], or text positions such as ['right','top'].
by default its value is { my: "center", at: "center", of: window }.
This option unless set to false, the dialog box is resizable in all directions. by default its
resizeable
value is true.
This option is an effect to be used when the dialog box is being opened. by default its
show
value is null.
This option specifies the text to appear in the title bar of the dialog box. By default its
title
value is null.
width This option specifies the width of the dialog box in pixels. By default its value is 300.
jQuery UI Menu
The jQuery UI Menu widget consists of a main menu bar with pop up menus. Some items in the
pop up menus also have sub pop up menus. These menus are created by using markup elements
as long as the parent child relationship is maintained.
The jQuery UI uses the menu() method to create menus.
Syntax:
You can use the menu() method in two forms.
1. $(selector, context).menu (options) Method
1. $(selector, context).menu ("action", params) Method
First Method
The menu (options) method specifies that an HTML element and its contents should be treated
and managed as menus. Here the options parameter is an object that specifies the appearance and
behavior of the menu items involved.
Syntax:
1. $(selector, context).menu (options);
options, you have to separate them using a comma as follows:
1. $(selector, context).menu({option1: value1, option2: value2..... });
Option Description
disabled If you set this option to true, it disables the menu. By default its value is false.
icons This option sets the icons for submenus. By default its value is { submenu: "ui-icon-carat-1-e" }.
This option is a selector for the elements that serve as the menu container, including sub-
menus
menus. By default its value is ul.
This option sets the position of submenus in relation to the associated parent menu item. By
position
default its value is { my: "left top", at: "right top" }.
This option is used to customize the aria roles used for the menu and menu items. By default its
role
value is menu.
jQuery UI Progressbar
Progressbar specifies the completion percentage of an operation or progress.
Progressbar can be categorized in two types:
Determinate progressbar
Indeterminate progressbar
Determinate Progressbar:
Determinate progress bar is only used in situation where the system can accurately update the
current status. The determinate progress bar should never fill from left to right, then loop back to
empty for a single process.
Indeterminate Progressbar:
The Indeterminate progressbar is used to provide user feedback.
Syntax:
You can use the progressbar() method in two forms:
1. $(selector, context).progressbar (options) Method
1. $(selector, context).progressbar ("action", params) Method
First Method
The progressbar (options) method specifies that an HTML element can be managed in the form
of a progress bar. Here the "options" parameter is an object that specifies the appearance and
behavior of progress bars.
Syntax:
1. $(selector, context).progressbar (options);
options, you have to separate them using a comma as follows:
1. $(selector, context).progressbar({option1: value1, option2: value2..... });
Option Description
disabled If you set this option to true then it disables the progress bars. By default its value is false.
max This option is used to set the maximum value for a progress bar. By default its value is 100.
value This option specifies the initial value of the progress bar. By default its value is 0.
jQuery UI Selectmenu
jQuery UI Selectmenu is used to extend the functionality of a native HTML select element. It
provides the customization functionality in behavior and appearance far beyond the limitation of
a native select.
The jQuery UI Selectmenu widget provides a proper replacement of select element and act as a
proxy back to the original select element controlling its state for form submission or
serialization.
jQuery UI Slider
jQuery UI slider is used to obtain a numeric value within a certain range. The main advantage of
slider over text input is that it becomes impossible for the users to enter an invalid value. Every
value they can pick with the slider is valid.
Syntax:
You can use the slider () method in two forms:
1. $(selector, context).slider (options) Method
1. $(selector, context).slider ("action", params) Method
First Method
1. $(selector, context).slider (options)
The slider (options) method specifies that an HTML element should be managed as a slider. Here
the options parameter is an object that specifies the appearance and behavior of slider.
options you have to separate them using a comma as follows:
1. $(selector, context).slider({option1: value1, option2: value2..... });
Option Description
If you set this option as true, it creates an animated effect when users click directly on the
animate
axis. By default its value is false.
disabled If you set this option as true, it disables the slider. By default its value is false.
This option is used to specify the upper value of the range that the slider can attain?the
max value represented when the handle is moved to the far right (for horizontal sliders) or top
(for vertical sliders). By default its value is 100.
This option is used to specify the lower value of the range that the slider can attain?the
min value represented when the handle is moved to the far left (for horizontal sliders) or bottom
(for vertical sliders). By default its value is 0.
This option specifies the horizontal or vertical orientation of the slider. By default its value is
orientation
horizontal.
range This option indicates whether the slider represents a range. By default its value is false.
This option is used to specify discrete intervals between the minimum and maximum values
step
that the slider is allowed to represent. By default its value is 1.
This option is used to specify the initial value of a single-handle slider. In the case of multiple
value handles (see the values options), it specifies the value for the first handle. By default its
value is 1.
This option is of type array and causes multiple handles to be created and specifies the initial
values values for those handles. This option should be an array of possible values, one for each
handle. By default its value is null.
jQuery UI spinner
jQuery UI spinner widgets are used to add a up/down arrow to the input box thus allowing the
user to increase and decrease the value in the input box. It facilitates the users to type a value
directly, or modify an existing value by spinning with the keyboard, mouse or scrollwheel.
It has also some extended features like:
It facilitates you to skip values.

It also enables globalized formatting options (i.e. currency, decimals, thousand separators etc.)
Syntax:
You can use spinner () method in two forms:
1. $(selector, context).spinner (options) Method
1. $(selector, context).spinner ("action", params) Method
First Method
1. $(selector, context).spinner (options)
The spinner (options) method specifies that an HTML element and its contents should be treated
and managed as spinner. Here ?options? parameter is an object that specifies the appearance and
behavior of the spinner elements involved.
1. $(selector, context).spinner ({option1: value1, option2: value2.....});
Option Description
This option sets the culture to use for parsing and formatting the value. By default its
culture
value is null which means the currently set culture in globalize is used.
disabled If you set this option to true, it disables spinner. By default its value is false.
This option is used to set icons to use for buttons, matching an icon provided by the
icons jQueryUI CSS framework. By default its value is { down: "ui-icon-triangle-1-s", up: "ui-
icon-triangle-1-n" } .
This option controls the number of steps taken when holding down a spin button. By
incremental
default its value is true.
This option is used to identify the maximum allowed value. By default its value is null
max
which means there is no maximum enforced.
This option is used to identify the minimum allowed value. By default its value is null
min
which means there is no minimum enforced.
This option specifies a format of numbers passed to globalize, if available. Most common
numberFormat
are "n" for a decimal number and "c" for a currency value. By default its value is null.
This option indicates the number of steps to take when paging via the
page
pageup/pagedown methods. By default its value is 10.
This option specifies the size of the step to take when spinning via buttons or via the
step stepup()/stepdown() methods. The element's step attribute is used if it exists and the
option is not explicitly set.
jQuery UI Tabs
Tabs are the set of logically grouped content that facilitates users to flip between them. Tabs save
the space like accordions.
Every tab must use the following set of markups to work properly.
Tabs must be in an ordered <ol> or unordered <ul> list.

Each tab title must be within each <li> and wrapped by anchor (<a>) tag with a href attribute.
Each tab panel may be any valid element but it must have an id which corresponds to the hash
in the anchor of the associated tab.
jQuery UI tabs() method is used to change the appearance of HTML elements inside the page.
This method traverses the HTML code and adds new CSS classes to the element to give them
appropriate style.
Syntax:
You can use tabs () method in two forms:
1. $(selector, context).tabs (options) Method
1. $(selector, context).tabs ("action", params) Method
First Method
The tabs (options) method specifies that an HTML element and its content should be managed as
tabs. Here "options" parameter is an object that specifies the appearance and behavior of tabs.
Syntax:
1. $(selector, context).tabs (options);
1. $(selector, context).tabs({option1: value1, option2: value2..... });
Following is a list of options that can be used with this method:
Option Description
active This option indicates the current active tab/panel. By default its value is 0.
If you set this option to TRUE, it allows tabs to be deselected. When it is set to false (the
collapsible default), clicking on a selected tab does not deselect (it remains selected). By default its
value is false.
This option uses an array to indicate index tabs that are disabled (and therefore cannot be
disabled
selected). for example, use [0, 1] to disable the first two tabs. By default its value is false.
This option is a name of the event that lets users select a new tab. If, for example, this
event option is set to "mouseover", passing the mouse over a tab will select it. By default its value
is "click".
heightStyle This option controls the height of the tabs widget. By default its value is "content".
hide This option specifies how to animate hiding of panel. By default its value is null.
show This option specifies how to animate showing of panel. By default its value is NULL.
jQuery UI Tooltip
The native tooltip is replaced by jQuery UI tooltip widget because the jQuery UI tooltip allows
customization and adds new themes.
What is Tooltip?
Tooltips are used with the element to display a title in the title box next to the element, when you
hover the element with your mouse. Tooltips can be attached to any element. If you want to
display tooltip, just add title attribute to input elements and the title attribute value will be used
as tooltip.
What does jQueryUI Tooltip do?
The jQuery UI tooltip() method adds tooltip to any element on which you want to display tooltip.
It gives a fade animation by default to show and hide the tooltip, compared to just toggling the
visibility.
Syntax:
You can use the tooltip() method in two forms.
1. $(selector, context).tooltip (options) Method
1. (selector, context).tooltip ("action", [params]) Method
First Method
The tooltip (options) method specifies that a tooltip can be added to an HTML element. The
options parameter is an object that specifies the behavior and appearance of the tooltip.
Syntax:
1. $(selector, context).tooltip(options);
You can use one or more options at a time using Javascript object. In the case of more than one
options, you will separate them using a comma as follows:
1. $(selector, context).tooltip({option1: value1, option2: value2..... });
Option Description
This option is used to represent the content of a tooltip. By default its value is function
content
returning the title attribute.
disabled If you set this option to true, it disables the tooltip. By default its value is false.
This option is used to represent the animation effect when hiding the tooltip. By default its
hide
value is true.
items This option specifies which items can show tooltips. By default its value is [title].
This option is used to indicate the position of the tooltip with respect to the associated
position target element. By default its value is function returning the title attribute. Its possible
values are: my, at, of, collision, using, within.
show This option represents how to animate the showing of tooltip. By default its value is true.
This option is a class which can be added to the tooltip widget for tooltips such as warning
tooltipClass
or errors. By default its value is null.
If you set this option to true, the tooltip follows/tracks the mouse. By default its value is
track
false.
jQuery UI hide
The jQuery hide() method is used to manage jQuery UI visual effects. It applies an animation
effect to hide elements.
Syntax:
1. .hide( effect [, options ] [, duration ] [, complete ] )
Parameters of hide method:
Effect: This parameter specifies the effects which are used for transition.
Options: This is used for specifying the specific setting and easing for the effects. Each
effect has its own set of options.
Duration: This specifies the time duration and indicates the number of milliseconds of
the effect. Its default value is 400.
Complete: It is a callback method. It is called for each element when the effect is
completed for the elements.
jQuery UI show
The jQuery show() method is used to manage jQueryUI visual effects. It is intended to display an
item using the indicated effect. It specifies the visibility of the elements, which are wrapped
within the specified effects.
Syntax:
1. .show( effect [, options ] [, duration ] [, complete ] )
Parameters of show method:

Effect:This parameter specifies the effects which are used for transition.
Options:This is used for specifying the specific setting and easing for the effects. Each
jQuery UI toggle
The jQuery toggle() method is used to toggle the show() or hide() method depending on whether
the element is hidden or not.
Syntax:
1. .hide( effect [, options ] [, duration ] [, complete ] )
Parameters of toggle method:
Effect:This parameter specifies the effects which are used for transition.
Duration:This specifies the time duration and indicates the number of milliseconds of
Complete:It is a callback method. It is called for each element when the effect is
jQuery UI addClass
The jQuery addclass() method is used to allow animating the changes to the CSS properties. It
adds specified classes to the matched elements while animating all style changes.
Syntax:
Following is a basic syntax of jQuery UI addclass() method: (Added in version 1.0)
1. .addClass( className [, duration ] [, easing ] [, complete ] )
Parameters of addclass () method:
ClassName: This is a string which contains one or more CSS classes. (In case of more
CSS classes, they are separated by space.)
Duration:This is used to specify the time duration in milliseconds. The 0 value takes the
element directly to the new style, without progress. Its default value is 400.
Easing: It is a type string and indicates the way to progress in the effect. Its default value
is swing.
Complete: It is a callback method call for each element when the when the effect is
completed for this element.
Syntax for jQuery addClass method: (Added in version 1.9)
The new version 1.9 of jQueryUI also supports children option, which will also animate
descendant elements.
Syntax:
1. .addClass( className [, options ] )
Parameters of addclass() method in version 1.9:
className: This is a string which contains one or more CSS classes. (In case of more CSS
classes, they are separated by space.)
options: It is used to specify all animation settings. All properties are optional. Its possible
values are:
Duration: This is a type of number or string and indicates the time duration of the effect.
It is counted in millisecond. The value of 0 takes the element directly in the new style,
without progress. Its default value is 400.
Easing:It is a string. It specifies the way to progress in the effect. Its default value is
swing.
Complete:It is a callback method called for each element when the effect is done for this
element.
Children: This is a Boolean type and specifies whether the animation should additionally
be applied to all descendants of the matched elements. Its default value is false.
Queue:This is of Boolean type or string type and specifies whether to place the
animation in the effects queue. Its default value is TRUE.
jQuery UI removeClass
The jQuery removeClass() method is used to manage jQueryUI visual effects. It removes applied
classes from the elements.
removeClass() method removes the specified classes to the matched elements while animating all
style changes.
Syntax:
Following is a basic syntax of jQueryUI removeclass() method: (Added in version 1.0 of

jQueryUI)
1. .removeClass( className [, duration ] [, easing ] [, complete ] )
Parameters of removeClass() method:
ClassName: This is a string which contains one or more CSS classes. (In case of more
CSS classes, they are separated by space.)
Duration:This is used to specify the time duration in milliseconds. The 0 value takes the
element directly to the new style, without progress. Its default value is 400.
Easing: It is a type string and indicates the way to progress in the effect. Its default value
is swing.
Complete: It is a callback method call for each element when the when the effect is
completed for this element.
Syntax for jQuery removeClass method: (Added in version 1.9)
Syntax:
1. .removeClass( className [, options ] )
Parameters of removeClass() method in version 1.9:
className:This is a string which contains one or more CSS classes. (In case of more CSS
classes, they are separated by space.)
values are:
Duration:This is a type of number or string and indicates the time duration of the effect.
It is counted in millisecond. The value of 0 takes the element directly in the new style,
without progress. Its default value is 400.
Easing:It is a string. It specifies the way to progress in the effect. Its default value is
swing.
Complete:It is a callback method called for each element when the effect is done for this
element.
be applied to all descendants of the matched elements. Its default value is false.
jQuery UI switchClass
The jQuery UI switchClass() method is used to move from one CSS class to another CSS class,
animating the transition from one state to another state.
Syntax:
Let's see the basic syntax of jQueryUI swithClass() method: (Added in version 1.0 of
jQueryUI)
1. .switchClass( removeClassName, addClassName [, duration ] [, easing ] [, complete ] )
Parameters of switchClass() method:
removeClassName: It is a string. It represents the CSS class name or space demarcated list of
class names, to be removed.
addClassName: It is of type string. It represents one or more class names which are added to the
class attribute of each matched element.
duration: This is of type number or string and used to specify the time duration in millisecond.
Its default value is 400.
easing: It specifies the name of the easing function to be passed to the animate() method.
complete: It is a callback method called for each element when the effect is completed for this
element.
Syntax for jQuery switchClass() method: (Added in version 1.9)
Syntax:
1. .switchClass( removeClassName, addClassName [, options ] )
Parameters of switchClass() method: (Added in version 1.9)
removeClassName: It is a string. It represents the CSS class name or space demarcated list of
class names, to be removed.
addClassName:It is of type string. It represents one or more class names which are added to the
class attribute of each matched element.
values are:
Duration:This is a string or number. It specifies how long the animation will run. Its
default value is 400.
Easing:It is a string which specifies the easing function used for transition. Its default
value is swing.
Complete:It is a callback method called for each element when the effect is completed
for this element.
be applied to all descendants of the matched elements. Its default value is FALSE.
jQuery UI Effect
The effect() method is used to apply an animation effect to the element without having to show
or hide it. It is one of the method which is used to manage jQuery UI visual effects.
Syntax:
1. .effect( effect [, options ] [, duration ] [, complete ] )

Parameters of effect() method:
Effect: This parameter specifies the effects which are used for transition.
Most used jQuery UI effects:
Add table:
Effect Description
Shows or hides the element in the manner of a window blind: by moving the bottom
Blind edge down or up, or the right edge to the right or left, depending upon the specified
direction and mode.
Causes the element to appear to bounce in the vertical or horizontal direction,
Bounce
optionally showing or hiding the element.
Shows or hides the element by moving opposite borders of the element together until
Clip
they meet in the middle, or vice versa.
Shows or hides the element by splitting it into multiple pieces that move in radial
Explode
directions as if imploding into, or exploding from, the page.
Drop Shows or hides the element by making it appear to drop onto, or drop off of, the page.
Shows or hides the element by adjusting its opacity. this is the same as the core fade
Fade
effects, but without options.
Shows or hides the element by adjusting opposite borders in or out, and then doing the
Fold
same for the other set of borders.
Calls attention to the element by momentarily changing its background color while
Highlight
showing or hiding the element.
Puff Expands or contracts the element in place while adjusting its opacity.
Shake Shakes the element back and forth, either vertically or horizontally.
Scale Expands or contracts the element by a specified percentage.
Adjusts the opacity of the element on and off before ensuring that the element is
Pulsate
shown or hidden as specified.
Resizes the element to a specified width and height. similar to scale except for how the
Size
target size is specified.
Slide Moves the element such that it appears to slide onto or off of the page.
Animates a transient outline element that makes the element appear to transfer to
Transfer another element. the appearance of the outline element must be defined via css rules
for the ui-effects-transfer class, or the class specified as an option.

Jquery

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Jquery

Uploaded by

Copyright:

Available Formats

The $() factory function

S.No. Selector Description

Tag It represents a tag name available in the DOM.

It represents a tag available with a specific ID in the DOM.

It represents a tag available with a specific class in the DOM.

S.No. Selector Description

4) Universal(*) It selects all elements available in a DOM.

Selector Example Description

* $("*") It is used to select all elements.

#id $("#firstname") It will select the element with id="firstname"

.class $(".primary") It will select all elements with class="primary"

It will select all elements with the class "primary" or

element $("p") It will select all p elements.

el1,el2,el3 $("h1,div,p") It will select all h1, div, and p elements.

:last $("p:last") This will select he last p element

:even $("tr:even") This will select all even tr elements

:odd $("tr:odd") This will select all odd tr elements

It will select all p elements that are the first p element of

It will select all p elements that are the last p element of

It will select all p elements that are the 2nd p element of

It will select all p elements that are a direct child of a div

parent It will select all p elements that are descendants of a div

:header $(":header") Select all header elements h1, h2 ...

:animated $(":animated") Select all animated elements

:focus $(":focus") Select the element that currently has focus

:has(selector) $("div:has(p)") Select all div elements that have a p element

:empty $(":empty") Select all elements that are empty

:hidden $("p:hidden") Select all hidden p elements

:visible $("table:visible") Select all visible tables

:root $(":root") It will select the document's root element

Select all p elements with a lang attribute value starting

[attribute] $("[href]") Select all elements with a href attribute

Select all elements with a href attribute value equal to

It will select all elements with a href attribute value not

It will select all elements with a href attribute value ending

Select all elements with a title attribute value equal to

Select all elements with a title attribute value starting with

Select all elements with a title attribute value containing

:input $(":input") It will select all input elements

:text $(":text") It will select all input elements with type="text"

:password $(":password") It will select all input elements with type="password"

:radio $(":radio") It will select all input elements with type="radio"

:checkbox $(":checkbox") Itwill select all input elements with type="checkbox"

:submit $(":submit") It will select all input elements with type="submit"

:reset $(":reset") It will select all input elements with type="reset"

:button $(":button") It will select all input elements with type="button"

:image $(":image") It will select all input elements with type="image"

:file $(":file") It will select all input elements with type="file"

:enabled $(":enabled") Select all enabled input elements

:disabled $(":disabled") It will select all disabled input elements

:selected $(":selected") It will select all selected input elements

:checked $(":checked") It will select all checked input elements

1) animate() performs animation.

10) hide() hides the matched or selected elements.

shows or manipulates the queue of methods i.e. to be executed on the selected

12) show() displays or shows the selected elements.

15) slideup() hides the matched elements with slide.

It is used to return content.

It is used to set content.

1. $(selector).html(function (index, currentcontent))

It is used to set content by calling function.

It is an essential parameter. It is used to specify the new content for the

It is an optional parameter. It specifies a function that returns the new content

Difference between jQuery text() method and jQuery html() method