JQuery_and_Ajax.pptx

JQuery and Ajax
• jQuery is a JavaScript Library.
• jQuery greatly simplifies JavaScript programming.
• jQuery is easy to learn.

jQuery is a lightweight, "write less, do more", JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on your website.
jQuery takes a lot of common tasks that require many lines of JavaScript code to
accomplish, and wraps them into methods that you can call with a single line of code.
jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls
and DOM manipulation.
Introduction

Features
The jQuery library contains the following features:
◦ HTML/DOM manipulation
◦ CSS manipulation
◦ HTML event methods
◦ Effects and animations
◦ AJAX
◦ Utilities
There are lots of other JavaScript frameworks out there, but jQuery seems to be the most popular, and also the most
extendable.
Many of the biggest companies on the Web use jQuery, such as:
Google
Microsoft
IBM
Netflix

Why Jquery
There are lots of other JavaScript frameworks out there, but jQuery seems to be the most
popular, and also the most extendable.
Many of the biggest companies on the Web use jQuery, such as:
Google
Microsoft
IBM
Netflix
Will jQuery work in all browsers?
The jQuery team knows all about cross-browser issues, and they have written this
knowledge into the jQuery library. jQuery will run exactly the same in all major browsers, including
Internet Explorer 6!

Jquery Install
There are several ways to start using jQuery on your web site. You can:
•Download the jQuery library from jQuery.com
To use jquery you need to download the jquery library and include it on the
pages you wish to use it.
The jQuery library is a single JavaScript file, and you reference it with the HTML <script> tag (notice
that the <script> tag should be inside the <head> section):
Syntax
<head>
<script src="jquery-1.12.4.min.js"></script>
</head>
Tip: Place the downloaded file in the same directory as the pages where you wish to use it.

Jquery Syntax
With jQuery you select (query) HTML elements and perform "actions" on them.
jQuery Syntax
The jQuery syntax is tailor-made for selecting HTML elements and performing some action on the
element(s).
Basic syntax is:
$(selector).action()
A $ sign to define/access jQuery
A (selector) to "query (or find)" HTML elements
A jQuery action() to be performed on the element(s)
Examples:
$(this).hide() - hides the current element.
$("p").hide() - hides all <p> elements.
$(".test").hide() - hides all elements with class="test".
$("#test").hide() - hides the element with id="test".

The Document Ready Event
You might have noticed that all jQuery methods in our examples, are inside a 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).
Tip: The jQuery team has also created an even shorter method for the document ready
event:
$(function(){
// jQuery methods go here...
});

Jquery Selectors
jQuery selectors are one of the most important parts of the jQuery library.
jQuery Selectors
jQuery selectors allow you to select and manipulate HTML element(s).
jQuery selectors are used to "find" (or select) HTML elements based on their name, 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 selectors in jQuery start with the dollar sign and parentheses: $().

Jquery Element Selectors
The jQuery element selector selects elements based on the element name.
You can select all <p> elements on a page like this:
$("p")
Example
When a user clicks on a button, all <p> elements will be hidden:
Example
$("button").click(function(){
$("p").hide();
});
});

The #id Selector
The jQuery #id selector uses the id attribute of an HTML tag to find the specific element.
An id should be unique within a page, so you should use the #id selector when you want to find a single,
unique element.
To find an element with a specific id, write a hash character, followed by the id of the HTML element:
$("#test")
Example
When a user clicks on a button, the element with id="test" will be hidden:
Example
$("#test").hide();
});
});

The .class Selector
The jQuery class selector finds elements with a specific class.
To find elements with a specific class, write a period character, followed by the name of the class:
$(".test")
Example
When a user clicks on a button, the elements with class="test" will be hidden:
Example
$(".test").hide();
});
});

More Examples of 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 Try it
$("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
$(":button") Selects all <button> elements and <input> elements of type="button"

jQuery Event Methods
jQuery is tailor-made to respond to events in an HTML page.
What are Events?
All the different visitor's actions that a web page can respond to are called events.
An event represents the precise moment when something happens.
Examples:
moving a mouse over an element
selecting a radio button
clicking on an element
The term "fires/fired" is often used with events. Example: "The keypress event is fired, the moment you press a key".
Here are some common DOM events:
Mouse Events KeyboardEvents Form Events Document/Window Events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload

jQuery Syntax For Event Methods
In jQuery, most DOM events have an equivalent jQuery method.
To assign a click event to all paragraphs on a page, you can do this:
$("p").click();
The next step is to define what should happen when the event fires. You
must pass a function to the event:
$("p").click(function()
{
// action goes here!!
});

Commonly Used jQuery Event Methods
Here some commonly used Jquery events and methods are
Event method Description
$(document).ready(function) Specifies a function when the DOM is fully Loaded
$(selector).click(function) Binds/Triggers the click event
$(selector).dbclick(function) Binds/Triggers the double click event
$(selector).focus(function) Binds/Triggers the focus event
$(selector).mouseover(function) Binds/Triggers the mouseover event
$(selector).hover(function) Binds/Triggers the hover event
$(selector).mouseEnter(function) Binds/Triggers the mouseenter event

jQuery Effects
jQuery hide() and show()
With jQuery, you can hide and show HTML elements with the hide() and show() methods:
Syntax:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
The optional speed parameter specifies the speed of the hiding/showing, and can take the following values: "slow", "fast",
or milliseconds.
The optional callback parameter is a function to be executed after the hide() or show() method completes (you will learn
more about callback functions in a later chapter).
The following example demonstrates the speed parameter with hide():
Example
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show(5000);
});

jQuery toggle()
With jQuery, you can toggle between the hide() and show() methods with the toggle() method.
Shown elements are hidden and hidden elements are shown:
Syntax:
$(selector).toggle(speed,callback);
The optional speed parameter can take the following values: "slow", "fast", or milliseconds.
The optional callback parameter is a function to be executed after toggle() completes.
Example
$("p").toggle();
});

jQuery Fading Methods
With jQuery you can fade an element in and out of visibility.
jQuery has the following fade methods:
1. fadeIn()
2. fadeOut()
3. fadeToggle()
4. fadeTo()
jQuery fadeIn() Method
The jQuery fadeIn() method is used to fade in a hidden element.
Syntax:
$(selector).fadeIn(speed,callback);
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or
milliseconds.
The optional callback parameter is a function to be executed after the fading completes.
The following example demonstrates the fadeIn() method with different parameters:

Example
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
jQuery fadeOut() Method
The jQuery fadeOut() method is used to fade out a visible element.
Syntax:
$(selector).fadeOut(speed,callback);
milliseconds.
The following example demonstrates the fadeOut() method with different parameters:

Example
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
jQuery fadeToggle() Method
The jQuery fadeToggle() method toggles between the fadeIn() and fadeOut() methods.
If the elements are faded out, fadeToggle() will fade them in.
If the elements are faded in, fadeToggle() will fade them out.
Syntax:
$(selector).fadeToggle(speed,callback);
milliseconds.
The following example demonstrates the fadeToggle() method with different parameters:

Example
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
jQuery fadeTo() Method
The jQuery fadeTo() method allows fading to a given opacity (value between 0 and 1).
Syntax:
$(selector).fadeTo(speed,opacity,callback);
The required speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or
milliseconds.
The required opacity parameter in the fadeTo() method specifies fading to a given opacity (value between 0 and 1).
The optional callback parameter is a function to be executed after the function completes.
The following example demonstrates the fadeTo() method with different parameters:

Example
$("#div1").fadeTo("slow", 0.15);
});
jQuery Effects – Sliding
jQuery Sliding Methods
With jQuery you can create a sliding effect on elements.
jQuery has the following slide methods:
slideDown()
slideUp()
slideToggle()

jQuery slideDown() Method
The jQuery slideDown() method is used to slide down an element.
Syntax:
$(selector).slideDown(speed,callback);
The optional speed parameter specifies the duration of the effect. It can take the following values:
"slow", "fast", or milliseconds.
The optional callback parameter is a function to be executed after the sliding completes.
The following example demonstrates the slideDown() method:
Example
$("#flip").click(function(){
$("#panel").slideDown();
});

jQuery slideUp() Method
The jQuery slideUp() method is used to slide up an element.
Syntax:
$(selector).slideUp(speed,callback);
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow",
"fast", or milliseconds.
The following example demonstrates the slideUp() method:
Example
$("#panel").slideUp();
});

jQuery slideToggle() Method
The jQuery slideToggle() method toggles between the slideDown() and slideUp() methods.
If the elements have been slid down, slideToggle() will slide them up.
If the elements have been slid up, slideToggle() will slide them down.
$(selector).slideToggle(speed,callback);
The optional speed parameter can take the following values: "slow", "fast", milliseconds.
The following example demonstrates the slideToggle() method:
Example
$("#panel").slideToggle();
});
Try it Yourself »

jQuery Effects - Animation
jQuery Animations - The animate() Method
The jQuery animate() method is used to create custom animations.
Syntax:
$(selector).animate({params},speed,callback);
The required params parameter defines the CSS properties to be animated.
milliseconds.
The optional callback parameter is a function to be executed after the animation completes.
The following example demonstrates a simple use of the animate() method; it moves a <div> element to the right, until it
has reached a left property of 250px:
Example
$("div").animate({left: '250px'});
});

jQuery animate() - Manipulate Multiple Properties
Notice that multiple properties can be animated at the same time:
Example
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
jQuery animate() - Using Relative Values
It is also possible to define relative values (the value is then relative
to the element's current value). This is done by putting += or -= in front of the value:
Example
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});

jQuery animate() - Using Pre-defined Values
You can even specify a property's animation value as "show", "hide", or "toggle":
Example
$("div").animate({
height: 'toggle'
});
});
jQuery animate() - Uses Queue Functionality
By default, jQuery comes with queue functionality for animations.
This means that if you write multiple animate() calls after each other, jQuery creates an "internal" queue with
these method calls. Then it runs the animate calls ONE by ONE.
So, if you want to perform different animations after each other, we take advantage of the queue functionality:
Example 1
var div = $("div");
div.animate({height: '300px', opacity: '0.4'}, "slow");
div.animate({width: '300px', opacity: '0.8'}, "slow");
div.animate({height: '100px', opacity: '0.4'}, "slow");
div.animate({width: '100px', opacity: '0.8'}, "slow");
});

JQuery_and_Ajax.pptx

More Related Content

Similar to JQuery_and_Ajax.pptx (20)

Recently uploaded (20)

JQuery_and_Ajax.pptx