Web Development Course - JQuery by RSOLUTIONS

Your Requirement. Our Commitment.

Index No Index No
Introduction 01 Events 24
Features 02 Binding events 25
Install jQuery 03-04 Unbinding events 26
Syntax 05 Event Methods 27-28
Document ready event 06 Traversing 29
Selectors 07 parent 30
Element selector 08 parents 31
#ID selector 09 parentsUntil 32
.Class selector 10 children 33
Manipulation 11-15 find 34
Apply multiple CSS properties 16 siblings 35
Get CSS values 17 next 36
CSS Manipulation 18-19 nextAll 37
Chaining 20 nextUntil 38
Dimensions 21-23 prev 39

Index No Index No
prevAll 40 slideDown 55
prevUntil 41 slideUp 56
first 42 slideToggle 57
last 43 animate elements 58-59
eq 44 stop elements 60
filter 45 callback 61-62
not 46 noConflict() 63-64
Effects 47
show elements 48
hide elements 49
toggle elements 50
fadeIn 51
fadeOut 52
fadeToggle 53
fadeTo 54

Introduction
 jQuery is a fast and concise JavaScript library
 jQuery eases the usage of JavaScript on your webpage
 jQuery binds all the huge code lines of JavaScript into methods thus reducing the code
 Is used to create interactive and responsive websites
01

Features
 Enables event handling
 Supports AJAX technology
 Allows animations
 Provides Cross Browser Support
 Consumes less space in the system (approximately 19KB) as it is very lightweight library.
 Works well with the latest technology as jQuery supports CSS3 selectors
 Supports DOM manipulation
02

Install jQuery
 Download the jQuery library from jQuery.com.
 Place the downloaded jQuery.js file in a directory of your website.
<head>
<script src="jQuery.js"> </script>
</head>
03
Method 1:
 The two versions of jQuery available for download are: Production & Development version.

Install jQuery
 Include jQuery from a Content Delivery Network (CDN)
 It can offer performance benefit and offers an advantage of reusing already downloaded a copy of
jQuery from the same CDN by an other website.
 CDNs: Google, Microsoft, MaxCDN, etc.
 To use jQuery from Google website, you must include the below code:
04
Method 2:
<script src="//ajax.googleapis.com/ajax/libs/jQuery/1.11.1/jQuery.min.js"></script>

Syntax
05
 Uses the CSS syntax to select elements
 $(selector).action();
 $ sign is a synonym of jQuery() function and can be replaced by jQuery name such as jQuery().
 (selector) is used to find the HTML elements.
 action() specifies the jQuery action to be performed on the elements.
 Example :
 $(".test"). slideUp();

Document ready event
06
 All the jQuery methods are enclosed within a document ready event.
 This is done to avoid any jQuery code from execution before the document is completely loaded.
$(document).ready(function(){
// jQuery methods go here...
});
 While programming, you need to have knowledge of the following basic entities in the jQuery:
String , Numbers , Boolean , Objects , Arrays

Selectors
07
 A jQuery Selector can be defined as an expression to find out matching elements from a DOM
based on the given conditions.
 The jQuery selectors are used to select the HTML elements based on their ID, classes, types,
attributes, values of attributes.
 The factory function $() uses the following three building blocks namely:
 Tag Name: Denotes a tag name available in the DOM.
 Tag ID: Denotes a tag available with the given ID in the DOM.
 Tag Class: Denotes a tag available with the given class in the DOM.

Element selector
08
Syntax $(“HTML_TagName”)
Description Selects all elements that matches with the given element Name.
Illustration $(document).ready(function()
{ $("button").click(function(){
$("p").show();
});
});

#ID selector
09
Syntax $(“#IdName”)
Description Selects a single element that matches with the given ID. This selector
uses the id attribute of an HTML tag to find the specific element. You
must make sure to use a unique ID within a page and hence easily
locate a single, unique element. In order to locate an element with a
specific id, you must include a hash character, followed by the id of
the element.
Illustration $(document).ready(function(){
$("button").click(function(){
$("#test").show();
});
});

.Class selector
10
Syntax $(“.ClassName”)
Description Selects all elements that matches with the given Class. In order to
locate the elements with a specific class, you must include a period
character, followed by the name of the class
$(“.test").show();
});
});

Manipulation
11
 Using jQuery, you can perform the following manipulations on the HTML elements:
 Get content
 Set content
 Add content
 Remove content
 Get/Set content: To fetch or to set the content of the selected HTML elements
 text() – set or get the text content of selected elements.
 html() - set or get the content of selected elements that includes the HTML markup.
 val() - set or get the value of form fields.

Manipulation
12
 Example: Get content
$("#showVal").click(function(){
alert("Value: " + $("#elem").val());
});
$("#showVal").click(function(){
alert("HTML: " + $("#elem").html());
});
$("#btn2").click(function(){
alert("Username: " + $("#username").value());
});
 Example: Set content
$("#update").text("Hello world!");
$("#update").html("<b>Hello world!</b>");
$("#username").val(“Karthik");

Manipulation
13
 Remove content: To remove the content of the selected HTML elements, jQuery offers the following
methods:
 remove() – This method is used to remove the selected element and its child elements.
 empty() – This method is used to remove the child elements from the selected element.
$("#div1").remove();
$("#div1").empty();
 In addition to this, you can use the jQuery remove() method to accept one parameter that enables
you to filter the elements to be removed.
$("p").remove(".italic");
 The jQuery library supports all the CSS3 selectors.
 Typically, most of the jQuery CSS methods do not change the content of the jQuery objects.
 Instead they are used to apply CSS properties on DOM elements

Manipulation
14
 To add new elements or content to the selected HTML elements, jQuery offers the following
methods:
 append() – This method is used to insert content at the end of the selected elements.
 prepend() - This method is used to insert content at the beginning of the selected elements.
 after() - This method is used to insert content after the selected elements.
 before() - This method is used to insert content before the selected elements.
$("p").append("Some appended text.");
$("p").prepend("Some prepended text.");
$("img").after("Some text after");
$("img").before("Some text before");
 The jQuery library supports all the CSS3 selectors.
 Typically, most of the jQuery CSS methods do not change the content of the jQuery objects.
 Instead they are used to apply CSS properties on DOM elements.

Manipulation
15
 Using the jQuery you can apply the CSS property
 Syntax: selector.css( PropertyName, PropertyValue );
 PropertyName: You can assign a JavaScript string based on its value.
 PropertyValue: You can assign a string or integer
<html>
<head>
<script type="text/javascript" src="/jQuery/jQuery-1.3.2.min.js">
</script> <script type="text/javascript" language="javascript">
$(document).ready(function() {
$("p").eq(2).css("color", "red");
});
</script>
</head>
<body>
<p>Welcome</p>
</body>
</html>

Apply multiple CSS properties
16
 Syntax: selector.css( {key1:val1, key2:val2....keyN:valN})
 You can assign key as property and val as its value in the above syntax.
 Example
<html>
<head>
<script type="text/javascript" src="/jQuery/jQuery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("p").eq(2).css({"color":"red", "background-color":"green"});
});
</script>
</head>
<body>
<p>Welcome</p>
</body>
</html>

Get CSS values
17
 Using the jQuery, you can return the value of a specified CSS property by using the following
 Syntax: css("propertyname");
 Example: $("p").css("background-color");

CSS Manipulation
18
 The jQuery offers a simple way to manipulate the CSS.
 addClass() – This method is used to add one or more classes to the selected elements.
 removeClass() – This method is used to remove one or more classes from the selected
elements.
 toggleClass() – This method is used to toggle between adding and removing classes from the
selected elements.
 removeClass() : removes specific class attribute from different elements.
$("h1,h2,p").removeClass("blue");
});
 addClass(): add a class attributes to different elements.
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});

CSS Manipulation
19
 toggleClass(): toggle between adding and removing classes from the selected elements.
$("h1,h2,p").toggleClass("blue");
});

Chaining
20
 Chaining can be used to execute multiple jQuery methods one after another on the same element.
 This is an advantage to browsers since it does not need to locate the same elements more than
once.
 In order to chain an action, you must append the action to the previous action.
$("#p1").css("color","red").slideUp(2000).slideDown(2000);

Dimensions
21
 jQuery supports the following methods to get/set the dimensions of HTML elements.
 width
 innerWidth
 outerWidth
 height
 innerHeight
 outerHeight

Dimensions
22
 width():This method is used to set or return the width of an element excluding padding, border, or
margin.
 innerWidth(): This method is used to return the width of an element that includes padding.
 outerWidth(): This method is used to return the width of an element that includes padding and
border.
<p style="margin:10px; padding:20px; border:1px solid red">This is a paragraph</p>
<p id="output"></p>
<script>
var elem = $("p:first-child");
$("#output").text( "width: " + elem.width() + " innerwidth: " + elem.innerWidth() + " outerWidth: " +
elem. outerWidth()); elem.width(500);
</script>

Dimensions
23
 height():This method is used to set or return the height of an element excluding padding, border, or
margin.
 innerHeight(): This method is used to return the height of an element that includes padding.
 outerHeight(): This method is used to return the height of an element that includes padding and
border.
<p style="margin:10px; padding:20px; border:1px solid red">This is a paragraph</p>
<p id="output"></p>
<script> var elem = $("p:first-child");
$("#output").text("ht: " + elem.height() + " inner ht: " + elem.innerHeight() + " outer ht: " + elem.
outerHeight()); elem.height(500);
</script>

Events
24
 Events are defined as specific actions that possess the ability to generate dynamic web pages.
 These events are easily detected by the web application.
 A mouse click, a keystroke on a keyboard are some commonly seen examples of events.
 Also, you can trigger the events and use them with a custom function to achieve any kind of task
required. These custom functions are known as Event Handlers.

Binding events
25
Syntax selector.bind (eventType[,eventData],handler)
Description  It lets you launch event handlers on DOM elements with the bind()
method.
 eventType: string that indicates the event type, such as click or
submit.
 eventData: An optional parameter that contains data to be passed
to the event handler.
 handler: function to be executed each time the event is triggered.
Illustration $('div').bind('click', function( event ){
alert('Hi there!');
});

Unbinding events
26
Syntax selector.unbind(eventType[, handler])
selector.unbind(eventType)
Description By using the unbind() command, you can remove an existing event
handler. An event handler once established it remains in effect
throughout the life of that web page. However, at times you may want
to remove event handler.
 eventType: string that indicates the event type, such as click or
submit.
 handler: function to be executed each time the event is triggered.
Illustration $('div'). bind('click', function( event ){
alert('Hi there!');
});
$('div'). bind('click');

Event Methods
27
Syntax $(“p”).click();
Description Used to trigger or attach a function to an event handler for the
selected elements. You must specify the set of actions that must be
performed after the event fires. To pass a function to the event, you
must write the below code:
Illustration $("p").click(function(){
// action goes here!!
});

Traversing
29
 The jQuery language provides several DOM traversal methods that allow you to select elements in
a document either randomly or in a sequential method.
 DOM traversal methods do not modify the jQuery object.
 They just help you to filter out elements from a document based on given conditions.
 Following are the frequently used terms while traversing:
 Ancestor: Is defined as the parent, grandparent, great-grandparent, and so on.
 Descendant: Is defined as the child, grandchild, great-grandchild, and so on.
 Sibling: Is defined as the child that share the same parent.
 jQuery offers a variety of methods that enables you to traverse the DOM, wherein, the majority
class of traversal methods are tree-traversal.
 Following are some of the jQuery methods that can be used to traverse up the DOM tree.
parent() , parents() , parentsUntil() , children() , find() , next() , nextAll()

parent
30
Syntax selector.parent([selector])
Description This method is used to return the direct parent element of the
selected element. You can use this method only to traverse to a
single level up the DOM tree.
$("span").parent().css(“color”,”red”);
});

parents
31
Syntax selector.parent([selector])
Description This method is used to return all the ancestor elements of the
selected element. This can even include the root element of the
document.
$("#x", document.body).parents().each(function(){
$(this).prepend("-" + $(this).get(0).tagName + "-");
});
});

parentsUntil
32
Syntax selector.parentsUntil([selector][,filter])
Description Traverses through the ancestors until it reaches an element matched
by the selector passed within the method's argument.
 Selector: A string containing a selector expression to indicate
where to stop matching ancestor elements.
 Filter: A string containing a selector expression to match elements
against
Illustration $(document).ready(function(){ $("span").parentsUntil(“div”); });
Notes  However, it does not include the one matched by the
parentsUntil()selector.
 In case the selector is not matched or is not supplied, then, all
ancestors gets selected.

children
33
Syntax selector.children([selector])
Description Used to return all direct children of the selected element. In addition
to this, you use optional parameter to filter the search for children.
Illustration $(document).ready(function(){ $("div").children().css(“color”,”red”); });
Notes  You can use this method only to traverse to a single level down the
DOM tree.

find
34
Syntax selector.find([selector])
Description This method is used to return all the descendant elements of the
selected element, all the way down to the last descendant.
$("div").find("*");
});

siblings
35
Syntax selector.siblings([selector])
Description This method is used to return all the sibling elements of the selected
element. Also, this method lets you to use an optional parameter to
filter the search for siblings.
$(“h2").siblings();
});

next
36
Syntax selector.next([selector])
Description This method is used to return the next sibling of the selected element.
You must note that this method returns only one element.
$(“h2").next();
});

nextAll
37
Syntax selector.nextAll([selector])
Description This method is used to return all the next siblings of the selected
element.
$(“h2").nextAll();
});

nextUntil
38
Syntax selector.nextUntil([selector][,filter])
Description Traverses through the successors until it reaches an element
matched by the selector passed within the method's argument.
against
$(“h2").nextUntill(“h6”);
});

prev
39
Syntax selector.prev([selector])
Description This method is used to return the previous siblings of the selected
element. You must note that this method returns only one element.
$(“h2").prev();
});

prevAll
40
Syntax selector.prevAll([selector])
Description This method is used to return all the previous siblings of the selected
element.
$(“h2").prevAll();
});

prevUntil
41
Syntax selector.prevUntil([selector][,filter])
Description This method is used to return all the previous siblings of an element
that is enclosed within two given arguments.
against
$(“h2").prevUntil(“h6”);
});

first
42
Syntax Selector.first()
Description This method is used to return the first element of the selected
elements.
$(“div p”).first();
});

last
43
Syntax Selector.last()
Description This method is used to return the last element of the selected
elements.
$(“div p”).last();
});

eq
44
Syntax selector.eq(index)
Description Reduce the set of matched elements to the one at the specified
index.
$(“p”).eq(1);
});
Notes  Since the index numbers usually begins from 0, the first element
contains 0 as the index number instead of 1.

filter
45
Syntax selector.filter(selector)
Description Reduce the set of matched elements to those that match the selector
or pass the function's test.
$(“p”).filter(“.intro”);
});

not
46
Syntax selector.not(selector)
Description This method is used to return all the elements that fail to match a
specific criteria.
$(“p”).not(“.intro”);
});

Effects
47
 The jQuery language offers a simple interface to produce several kinds of amazing effects.
 Some of the effects that can be produced using jQuery are:
 Show and Hide elements
 Toggle elements
 Fade elements
 Slide elements
 Animate elements
 Stop elements

show elements
48
Syntax selector.show ( [speed] [,callback] )
Description Used to show elements in a web application
Parameters:
 speed: Is optional and indicates the speed to run the animation
value:
 slow, normal, fast or the number of milliseconds
 callback: Is optional and represents a function to be executed
either when the animation completes or executes once for each
animated element.
Illustration $(“show").click(function(){
$("#div1").show();
$("#div2").show("slow");
$("#div3").show(3000);
});

hide elements
49
Syntax selector.hide ( [speed] [,callback] )
Description Used to hide elements in a web application
Parameters:
value:
 slow, normal, fast or the number of milliseconds
animated element.
Illustration $(“hide").click(function(){
$("#div1").hide();
$("#div2").hide("slow");
$("#div3").hide);
});

toggle elements
50
Syntax selector.toggle ( [speed] [,callback] )
Description  The jQuery offers methods to toggle the display state of elements
between the revealed or hidden.
 When the element is initially displayed, it will be hidden, else if
hidden, it will be displayed.
Illustration $("button").click(function(){
$("p").toggle();
});

fadeIn
51
Syntax selector.fadeIn ( [speed] [,callback] )
Description This method is used to fade in a hidden HTML element.
Parameters:
 value: slow, normal, fast or the number of milliseconds
animated element.
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});

fadeOut
52
Syntax selector.fadeOut ( [speed] [,callback] )
Description This method is used to fade out a visible element.
Parameters:
 value: slow, normal, fast or the number of milliseconds
animated element.
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut);
});

fadeToggle
53
Syntax selector.fadeToggle ( [speed] [,callback] )
Description This method is used to toggle between the fadeIn() and fadeOut()
methods.
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});

fadeTo
54
Syntax selector.fadeTo (speed, opacity, [callback]);
Description  speed: Represents parameter that defines the duration of the
effect. It can take any of the three predefined speeds namely slow,
normal, or fast or the number of milliseconds to run the animation.
 Opacity: Represents a parameter in the fadeTo() method that
defines the fading to a given opacity whose value lies between 0
and 1.
 callback: Is an optional parameter that represents a function to be
executed after the function is completed.
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
});

slideDown
55
Syntax selector.slideDown (speed, [,callback]);
Description This method is used to slide down an element.
Illustration $("#flip").click(function(){
$("#panel").slideDown();
});

slideUp
56
Syntax selector.slideUp (speed, [,callback]);
Description This method is used to slide up an element.
$("#panel").slideUp();
});

slideToogle
57
Syntax selector.slideToggle (speed, [,callback]);
Description This method is used to slide up an element.
$("#panel").slideToggle();
});

animate elements
58
 The jQuery lets you create customized animation on elements by using the animate() method.
 By default, since all HTML elements are positioned static position, it does not let you move them.
 Hence, if you need to manipulate the position, you must first set the CSS position property of the
element to relative, fixed, or absolute.
Syntax selector.animate ( {params} [,speed] [,easing] [,callback]);
Description jQuery lets you create customized animation on elements.
Parameters:
 params: used to specify the CSS properties to be animated.
speed: defines the duration of the effect.
 easing: specifies the easing function to use for the transition –
linear/swing
 callback: function to be executed after the animation gets
completed.
Illustration $("button").animate(function(){
$("div").animate({left:'250px'}, 1000, “linear”);
});

animate elements
59
 Also, you can use the jQuery animate() method to manipulate the multiple properties.
 Example: Specify multiple properties.
$("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px‘ });
});
 By default, jQuery language supports the queue functionality for animations.
 If you write multiple animate() calls successively, then, jQuery generates an internal queue with
these method calls.
 Later, it runs the animate calls one after another.
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow","linear");
});

stop elements
60
Syntax selector.stop ([stopAll], [,goToEnd]);
Description  Used to terminate an animation or effect even before it is
completed.
 All the jQuery effect functions such as sliding, fading and so on
supports the stop() method.
 stopAll: A Boolean indicating whether to remove queued
animations as well.
 goToEnd: A Boolean indicating whether to complete the current
animation immediately
Illustration $("#stop").click(function(){
$("#panel").stop();
});

callback
61
 When using animations, while the animation is in progress the subsequent code will get executed.
 It does not wait for the animation to complete before continuing with the execution.
 The drawback of this process is that it can give rise to several errors.
 By using the callback function you can prevent the creation of these errors.
 Typically, a callback function is executed only after the current animation or the effect is completed.
 Syntax: $(selector).animate({params}[,speed][,easing ][,callback]);
 Example:
$("button").animate(function(){
$("div").animate({left:'250px'}, 1000, “linear”, function() {
alert(“Animation is complete”);
});
});

callback
62
 On the other hand, the below example has no callback parameter.
 In this case, the alert box gets displayed even before the hide effect gets completed.
$("button").animate(function(){
$("div").animate({left:'250px'}, 1000, “linear”);
alert(“Animation is complete”);
});

noConflict()
63
 As you already know, the $ sign is used as the symbol to denote jQuery.
 However, a few other frameworks also use the $ character as a shortcut.
 In such cases, you will have two different frameworks using the same shortcut, thus, causing your
scripts to terminate from execution.
 The jQuery development team implemented the noConflict() method to solve this issue.
 The noConflict() method is used to release the hold on the $ shortcut identifier, thus, enabling the
other scripts to use it without any ambiguity.
 However, you can still use the jQuery simply by writing the complete name instead of the shortcut.
$.noConflict(); jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery is still working!");
});
});

noConflict()
64
 In addition to this, you can create your own shortcut with ease. The noConflict() method returns a
reference to jQuery, which can be saved in a variable and called later if required.
var jq = $.noConflict(); jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery is still working!");
});
});
 Also, you can pass the $ sign as a parameter to the ready method if you decide not to change the
jQuery code block which uses the $ shortcut. This feature enables you to access the jQuery that
uses $ symbol inside this function. You must use jQuery outside of the function.
$.noConflict(); jQuery(document).ready(function($){
$("p").text("jQuery is still working!");
});
});

Mob : +91 98440 18630 / 99000 98630
Mail : enquiry@rsolutions-india.com
Url : www.rsolutions-india.com

Web Development Course - JQuery by RSOLUTIONS

More Related Content

What's hot

Similar to Web Development Course - JQuery by RSOLUTIONS

More from RSolutions

Recently uploaded

Web Development Course - JQuery by RSOLUTIONS