jQuery for Beginners

- I W I L L S T U D Y . C O M
jQuery Basics

hide()
 $("#hide").click(function(){
$("p").hide();
});
 $("button").click(function(){
$("p").hide(1000);
});
"slow", "fast
", or
milliseconds
.

show()
 $("#show").click(function(){
$("p").show();
});

toggle()
$("p").toggle();
});
 $(selector).toggle(speed,callback);
 The optional callback parameter is a function to be
executed after toggle() completes.

jQuery Effects - Fading
 With jQuery you can fade an element in and out of
visibility.
 jQuery has the following fade methods:
 fadeIn()
 fadeOut()
 fadeToggle()
 fadeTo()

fadeIn()
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
 The jQuery fadeIn() method is used to fade in a
hidden element.

fadeOut()
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
 The jQuery fadeOut() method is used to fade out a
visible element.

fadeToggle()
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
 The jQuery fadeToggle() method toggles between the
fadeIn() and fadeOut() methods.

fadeTo()
 The jQuery fadeTo() method allows fading to a given
opacity (value between 0 and 1).
$("#div1").fadeTo("slow",0.15);
});

jQuery Effects - Sliding
 With jQuery you can create a sliding effect on
elements.
 jQuery has the following slide methods:
 slideDown()
 slideUp()
 slideToggle()

slideDown()
 $("#flip").click(function(){
$("#panel").slideDown();
});
 The jQuery slideDown() method is used to slide
down an element.

slideUp()
$("#panel").slideUp();
});
 The jQuery slideUp() method is used to slide up an
element.

slideToggle()
$("#panel").slideToggle();
});
 The jQuery slideToggle() method toggles between
the slideDown() and slideUp() methods.

jQuery Animations
 The jQuery animate() method lets you create custom
animations.
 $(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 a function to be executed
after the animation completes.

animate()
$("div").animate({left:‘450px'});
});
 Example demonstrates a simple use of the animate()
method; it moves a <div> element to the left, until it
has reached a left property of 450px:

animate() – Manipulate Multiple Properties
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});

animate() – Using Relative Properties
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});

animate() – Using Pre-defined values
$("div").animate({
height:'toggle'
});
});

animate() – Using Queue Functionality
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"
);
});
 if you write multiple animate() calls after each
other, jQuery creates an "internal" queue with

jQuery – Stop animation
 The jQuery stop() method is used to stop animations
or effects before it is finished.
 The stop() method works for all jQuery effect
functions, including sliding, fading and custom
animations.
 $("#stop").click(function(){
$("#panel").stop();
});

jQuery – Stop animation
 $(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.

jQuery – Callback Function
 IMPORTANT
 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);

Callback Function - Example
 Correct
 $("button").click(function(){
$("p").hide("slow",function(){
alert("The paragraph is now hidden");
});
});
 Incorrect
 $("button").click(function(){
$("p").hide(1000);
alert("The paragraph is now hidden");
});

jQuery Chaining
 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).

jQuery Chaining Example
 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
 $("#p1").css("color","red").slideUp(2000).slideDown(2000);
 Or
 $("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);

jQuery GET Content
 Get Content - text(), html(), and val()
 Three simple, but useful, jQuery methods for DOM
manipulation are:
 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

jQuery text() & html()
 $("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});

val() and attr()
alert("Value: " + $("#test").val());
});
alert($("#w3s").attr("href"));
});

Set & Get Attributes
$("#test1").text("Hello world!");
});
$("#test2").html("<b>Hello world!</b>");
});
$("#test3").val("Dolly Duck");
});

Thanks
 References: w3schools.com and Google

jQuery for Beginners

More Related Content

What's hot (20)

Viewers also liked (18)

Similar to jQuery for Beginners (20)

More from NAILBITER (20)

Recently uploaded (20)

jQuery for Beginners