1. JQuery Syntax
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)
$(document).ready(function(){
// jQuery methods go here...
});
2. 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.
3. JQuery Events
All the different visitors actions that a web page can respond to are called events.
An event represents the precise moment when something happens.
•click •dblclick
•keypress •keyup •keydown
•load •unload
•mouseenter •mouseleave
•submit
•change
•resize
•focus
•scroll
•blur
4. JQuery hide(), show() and toggle()
jQuery hide() and show()
With jQuery, you can hide and show HTML elements with the hide() and show() methods:
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
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:
$("button").click(function(){
$("p").toggle();
});
5. Jquey Fade Methods
With jQuery you can fade an element in and out of visibility.
jQuery has the following fade methods:
•fadeIn()
•fadeOut()
•fadeToggle()
•fadeTo()
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
6. JQuery Sliding Methods
With jQuery you can create a sliding effect on elements.
jQuery has the following slide methods:
•slideDown()
•slideUp()
•slideToggle()
$("#flip").click(function(){
$("#panel").slideDown();
$("#panel").slideUp();
$("#panel").slideToggle();
});
7. JQuery animate() method
The jQuery animate() method lets you create custom animations.
Syntax:
$(selector).animate({params},speed,callback);
The required params parameter defines the CSS properties to be animated.
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 the name of a function to be executed after the animation completes.
8. JQuery stop() Method
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 parameter specifies whether also the animation queue should be cleared or not. Default is false, which means that only the active animation will be stopped, allowing any queued animations to be performed afterwards.
The optional goToEnd parameter specifies whether or not to complete the current animation immediately. Default is false.
So, by default, the stop() method kills the current animation being performed on the selected element.
The following example demonstrates the stop() method, with no parameters:
Example
$("#stop").click(function(){
$("#panel").stop();
});
9. JQuery Callback Functions
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.
A callback function is executed after the current effect is finished.
Typical syntax: $(selector).hide(speed,callback);
10. JQuery Method Chaining
Until now we have been writing jQuery statements one at a time (one after the other).
However, there is a technique called chaining, that allows us to run multiple jQuery commands, one after the other, on the same element(s).
Tip: This way, browsers do not have to find the same element(s) more than once.
To chain an action, you simply append the action to the previous action.
The following example chains together the css(), slideUp(), and slideDown() methods. The "p1" element first changes to red, then it slides up, and then it slides down:
Example
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
