Saturday, December 22, 2012

JQuery Quick Tutorial QT5 -QT6

Source: http://www.w3schools.com/jquery/default.asp

QT 5 jQuery Events

jQuery is tailor made to handle events.

QT 5.1 jQuery Event Functions

The jQuery event handling methods are core functions in jQuery.

Event handlers are method that are called when “something happens” in HTML. The term “triggered (or “fired”) by an event” is often used.

It is common to put jQuery code into event handler methods in the <head> section:

QT 5.2 Example

<html>

<head>

<script type=”text/javascript” src=”jquery.js”></script>

<script type=”text/javascript”>

$(document).ready(function(){

$(“button”).click(function(){

$(“p”).hide();

});

});

</script>

</head>

<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<button>Click me</button>

</body>

</html>

In the example above, a function is called when the click event for the button is triggered:

$(“button”).click(function() {..some code… } )

The method hides all <p> elements:

$(“p”).hide();

Functions In a Separate File

If your website contains a lot of pages, and you want your jQuery functions to be easy to maintain, put your jQuery functions in a separate .js file.

When we demonstrate jQuery here, the functions are added directly into the <head> section, However, sometimes it is preferable to place them in a separate file, like this (refer to the file with the src attribute):

Example

<head>

<script type=”text/javascript” src=”jquery.js”></script>

<script type=”text/javascript” src=”my_jquery_functions.js”></script>

</head>

QT 5.3 jQuery Name Conflicts

jQuery uses the $ sign as a shortcut for jQuery.

Some other JavaScript libraries also use the dollar sign for their functions.

The jQuery noConflict() method specifies a custom name (like jq), instead of using the dollar sign.

QT 5.4  jQuery Events

Here are some examples of event methods in jQuery:

Event Method Description

$(document).ready(function)   Binds a function to the ready event of a document

(when the document is finished loading)

$(selector).click(function) Triggers, or binds a function to the click event of selected elements

$(selector).dblclick(function) Triggers, or binds a function to the double click event of selected elements

$(selector).focus(function) Triggers, or binds a function to the focus event of selected elements

$(selector).mouseover(function) Triggers, or binds a function to the mouseover event of selected elements

For a full jQuery event reference, please go to our jQuery Events Reference.

QT 6 jQuery Effects

Hide, Show, Toggle, Slide, Fade, and Animate. WOW!

QT 6.1 Examples

jQuery hide()   Demonstrates a simple jQuery hide() method.

jQuery hide()   Another hide() demonstration. How to hide parts of text.

jQuery slideToggle()    Demonstrates a simple slide panel effect.

jQuery fadeTo() Demonstrates a simple jQuery fadeTo() method.

jQuery animate() Demonstrates a simple jQuery animate() method.

QT 6.2 jQuery Hide and Show

With jQuery, you can hide and show HTML elements with the hide() and show() methods:

Example

$(“#hide”).click(function(){

$(“p”).hide();

});

$(“#show”).click(function(){

$(“p”).show();

});

Both hide() and show() can take the two optional parameters: speed and callback.

Syntax:

$(selector).hide(speed,callback)

$(selector).show(speed,callback)

The speed parameter specifies the speed of the hiding/showing, and can take the following values: “slow”, “fast”, “normal”, or milliseconds:

Example

$(“button”).click(function(){

$(“p”).hide(1000);

});

The callback parameter is the name of a function to be executed after the hide (or show) function completes. You will learn more about the callback parameter in the next chapter of this tutorial.

QT 6.3 jQuery Toggle

The jQuery toggle() method toggles the visibility of HTML elements using the show() or hide() methods.

Shown elements are hidden and hidden elements are shown.

Syntax:

$(selector).toggle(speed,callback)

The speed parameter can take the following values: “slow”, “fast”, “normal”, or milliseconds.

Example

$(“button”).click(function(){

$(“p”).toggle();

});

The callback parameter is the name of a function to be executed after the hide (or show) method completes.

QT 6.4 jQuery Slide – slideDown, slideUp, slideToggle

The jQuery slide methods gradually change the height for selected elements.

jQuery has the following slide methods:

$(selector).slideDown(speed,callback)

$(selector).slideUp(speed,callback)

$(selector).slideToggle(speed,callback)

The speed parameter can take the following values: “slow”, “fast”, “normal”, or milliseconds.

The callback parameter is the name of a function to be executed after the function completes.

slideDown() Example

$(“.flip”).click(function(){

$(“.panel”).slideDown();

});

slideUp() Example

$(“.flip”).click(function(){

$(“.panel”).slideUp()

})

slideToggle() Example

$(“.flip”).click(function(){

$(“.panel”).slideToggle();

});

QT 6.5 jQuery Fade – fadeIn, fadeOut, fadeTo

The jQuery fade methods gradually change the opacity for selected elements.

jQuery has the following fade methods:

$(selector).fadeIn(speed,callback)

$(selector).fadeOut(speed,callback)

$(selector).fadeTo(speed,opacity,callback)

The speed parameter can take the following values: “slow”, “fast”, “normal”, or milliseconds.

The opacity parameter in the fadeTo() method allows fading to a given opacity.

The callback parameter is the name of a function to be executed after the function completes.

fadeTo() Example

$(“button”).click(function(){

$(“div”).fadeTo(“slow”,0.25);

});

fadeOut() Example

$(“button”).click(function(){

$(“div”).fadeOut(4000);

});

QT 6.6 jQuery Custom Animations

The syntax of jQuery’s method for making custom animations is:

$(selector).animate({params},[duration],[easing],[callback])

The key parameter is params. It defines the CSS properties that will be animated. Many properties can be animated at the same time:

animate({width:”70%”,opacity:0.4,marginLeft:”0.6in”,fontSize:”3em”});

The second parameter is duration. It specifies the speed of the animation. Possible values are “fast”, “slow”, “normal”, or milliseconds.

Example 1

<script type=”text/javascript”>

$(document).ready(function(){

$(“button”).click(function(){

$(“div”).animate({height:300},”slow”);

$(“div”).animate({width:300},”slow”);

$(“div”).animate({height:100},”slow”);

$(“div”).animate({width:100},”slow”);

});

});

</script>

Example 2

<script type=”text/javascript”>

$(document).ready(function(){

$(“button”).click(function(){

$(“div”).animate({left:”100px”},”slow”);

$(“div”).animate({fontSize:”3em”},”slow”);

});

});

</script>

HTML elements are positioned static by default and cannot be moved.

To make elements moveable, set the CSS position property to fixed, relative or absolute.

QT 6.7 jQuery Effects Summary

Here are some examples of effect functions in jQuery:

Function Description

$(selector).hide() Hide selected elements

$(selector).show() Show selected elements

$(selector).toggle() Toggle (between hide and show) selected elements

$(selector).slideDown() Slide-down (show) selected elements

$(selector).slideUp() Slide-up (hide) selected elements

$(selector).slideToggle() Toggle slide-up and slide-down of selected elements

$(selector).fadeIn() Fade in selected elements

$(selector).fadeOut() Fade out selected elements

$(selector).fadeTo() Fade out selected elements to a given opacity

$(selector).animate() Run a custom animation on selected elements


Source : zero2herox[dot]wordpress[dot]com

0 comments:

Post a Comment