Jquery
- A JavaScript Library
By : Anita M. Rooge
What is Jquery ?
JQuery is a lightweight, "write less, do
more", JavaScript library.
An open source JavaScript library that
simplifies the interaction between HTML
and JavaScript.
Jquery is easy to learn and master.
Installing JQuery
Steps for adding Jquery to your web pages :
Go to http://docs.jquery.com/Main_Page OR
Go to https://
ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js
Use following code snippet
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
</body>
</html>
jQuery Syntax
With jQuery you select (query) HTML elements and
perform "actions" on them.
Basic syntax is: $(selector).action()
A $ sign to define/access jQuery
A (selector) HTML elements
A jQuery action() to be performed on the
element(s)
Examples:
$("p").hide() - hides all <p> elements.
$("#test").hide() - hides the element with id="test".
$(".test").hide() - hides all elements with
class="test".
The Document Ready Event
$(document).ready(function(){
// jQuery methods go here...
});
This is to prevent any jQuery code from running
before the document is finished loading (is
ready).
Jquery Selectors
jQuery selectors allow you to select and manipulate
HTML element(s).
With jQuery selectors you can find elements based on
their id, classes, types, attributes, values of attributes
and much more. It's based on the existing
CSS Selectors, and in addition, it has some own
custom selectors.
All type of selectors in jQuery, start with the dollar
sign and parentheses: $().
Types of jquery selectors :
Element selector
Id (#) selector
Class (.) selector
Element Selector
The jQuery element selector selects elements
based on their tag names.
Example :
$(document).ready(function(){
$(“#button").click(function(){
$("p").hide();
});
});
HTML Tag <P> is specified as element here
Written as <p> text goes here</p>
Id (#) Selector
The jQuery #id selector uses the id attribute of
an HTML tag to find the specific element.
Example :
$(document).ready(function(){
$(“#bt1").click(function(){
$("#test").hide();
});
});
#button and #test used as id here. The html tags
used as
<input type =“button” id = “bt1” value =“Click”>
<p id = “test”>Para txt goes here </p>
Class (.) Selector
The jQuery class selector finds elements with a
specific class.
Example :
$(document).ready(function(){
$(“#button").click(function(){
$(".test").hide();
});
});
.test used as class here. The html tags used as
<p class = “test”>Para txt goes here </p>
More Jquery Selectors
Syntax Description
$("*") Selects all elements
$(this) Selects the current HTML element
$("p.intro") Selects all <p> elements with class="intro"
$("p:first") Selects the first <p> element
$("ul li:first") Selects the first <li> element of the first <ul>
$("ul li:first-child") Selects the first <li> element of every <ul>
$("[href]") Selects all elements with an href attribute
Jquery Hide and Show Methods
With jQuery you can Hide or Show an element visibility.
jQuery has the following methods:
hide() : used to hide element
show() : used show element
toggle() : toggle between hide and fade show
Syntax :
$(selector).hide(speed, callback);
$(selector).show(speed, callback);
$(selector).toggle(speed, callback);
Example : hodeshow.html
Jquery Fading
Methods
With jQuery you can fade an element in and out of visibility.
jQuery has the following fade methods:
fadeIn() : used to fade in a hidden element
fadeOut() : used to fade out a visible element
fadeToggle() : toggle between fade in and fade out
fadeTo() : used to fade element to opacity value (0 and 1)
Syntax :
$(selector).fadeIn(speed, callback);
$(selector).fadeOut(speed, callback);
$(selector).fadeToggle(speed, callback);
$(selector).fadeTo(speed, callback);
Example : fadeinout1.html
Jquery Effects : Sliding
With jQuery you can create a sliding effect on elements.
jQuery has the following slide methods :
slideDown() : used to slide down an element
slideUp() : used to slide up an element
slideToggle() : toggles between the slideDown() and slideUp()
Syntax :
$(selector).slideDown(speed, callback);
$(selector). slideUp(speed, callback);
$(selector).slideToggle(speed, callback);
Example : slide.html
Jquery Effects :
Animation
The jQuery animate() method lets you create custom
animations.
Syntax :
$(selector).animate( { params }, speed, callback);
Here is the description of all the parameters used by this
method
params − A map of CSS properties that the animation will
move toward.
speed − This is optional parameter representing how long
the animation will run.
callback − This is optional parameter representing a
function to call once the animation is complete
Example : animate.html
Jquery Effects :Stop
The jQuery stop() method is used to stop an
animation or effect before it is finished.
The stop() method works for all jQuery effect
functions, including sliding, fading and custom
animations.
Syntax :
$(selector).stop(stopAll , goToEnd );
The optional stopAll Boolean parameter specifies
whether to remove queued animation or not. Default
value is false, that means only the current animation
will be stopped, rest of the animations in the queue will
run afterwards.
The optional goToEnd Boolean parameter specifies
whether to complete the current animation
immediately. Default value is false.
Jquery : Callback
A callback function is executed after the current effect is 100%
finished.
JavaScript statements are executed line by line. However, with
effects, the next line of code can be run even though the effect is
not finished. This can create errors.
To prevent this, you can create a callback function.
Syntax :
$(selector).hide(speed, callback);
Example : callback1.html
Jquery : chaining
The jQuery provides another robust feature called method
chaining that allows us to perform multiple action on the same set
of elements, all within a single line of code.
This is possible because most of the jQuery methods return a
jQuery object that can be further used to call another method.
Syntax :
$(selector).hide(speed, callback);
Example : chain.html
Jquery : Get & Set Content &
Attributes
jQuery contains powerful methods for changing and manipulating
HTML elements and attributes.
Three simple, but useful, jQuery methods for DOM manipulation is:
text() - Sets or returns the text content of selected elements
html() - Sets or returns the content of selected elements (including
HTML markup)
val() - Sets or returns the value of form fields
Syntax :
$(selector).text( ) ; Get the content of selector
$(selector).html( ) ; Get the content with html markup of selector
$(selector).val( ) ; Get value of form elements
$(selector).attr( attribute name) ; Get value elements attribute
Example : contentattributes.html
jQuery text() Method : get text
The jQuery text() method is either used to get the
combined text contents of the selected elements,
including their descendants
jQuery text() Method : set text
The jQuery text() method is also used to set the
combined text contents of the selected elements,
including their descendants.
settext.html
Usesettext.html
jQuery html() Method
The jQuery html() method is used to get or set the
HTML contents of the elements.
If multiple elements are selected, the html() method
only returns the HTML contents of the first element
from the set of matched elements.
Get content eg. : gethtml.html
Set content eg : sethtml.html
jQuery attr() Method
You can use the jQuery attr() method to
either get the value of an element's
attribute or set one or more attributes for
the selected element.
Getattr.html
Setattr.html
jQuery val() Method
You can use the jQuery val() method to
either get the value of an form elements or
set value for selected form element.
getsetval.html
Jquery : Add remove
Elements/Content
With jQuery, it is easy to add new elements/content.
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.
remove() :The jQuery remove() method is used to
remove the selected elements out of the DOM.
Example :appdel.html
jquery - Get and Set CSS Classes
Query provides several methods as follows to
manipulate the CSS classes assigned to HTML
elements.
addClass() - Adds one or more classes to the
selected elements
removeClass() - Removes one or more classes
from the selected elements
toggleClass() - Toggles between adding/removing
classes
Example : addclass.html
