JQuery-Events-Effects

Hi everybody...

We have been working on JQuery-Core, JQuery-DOM and JQuery-CSS-JavaScript yet. Here I am going to explain JQuery-Events and JQuery-Effects.
Ok let's go...

5. Events

5.1 bind(String,Object,Function)
bind(String type, Object data, Function fn) returns jQuery

Binds a handler to a particular event (like click) for each matched element. The event handler
is passed an event object that you can use to prevent default behaviour. To stop both default
action and event bubbling, your handler has to return false.
In most cases, you can define your event handlers as anonymous functions (see first
example). In cases where that is not possible, you can pass additional data as the second
paramter (and the handler function as the third), see  second example.

Example:
$("p").bind("click", function(){
 alert( $(this).text() );
});
HTML:
<p>Hello</p>
Result:
alert("Hello")

Example:
Pass some additional data to the event handler.
function handler(event) {
 alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)
Result:
alert("bar")
 
Example:
Cancel a default action and prevent it from bubbling by returning false from your function.
$("form").bind("submit", function() { return false; })

Example:
Cancel only the default action by using the preventDefault method.
$("form").bind("submit", function(event){
 event.preventDefault();
});

Example:
Stop only an event from bubbling by using the stopPropagation method.
$("form").bind("submit", function(event){
 event.stopPropagation();
});

5.2  one(String,Object,Function)
one(String type, Object data, Function fn) returns jQuery

Binds a handler to a particular event (like click) for each matched element. The handler is
executed only once for each element. Otherwise, the same rules as described in bind()
apply.
The event handler is passed an event object that you can use to prevent default behaviour.
To stop both default action and event bubbling, your handler has to return false.
In most cases, you can define your event handlers as anonymous functions (see first
example). In cases where that is not possible, you can pass additional data as the second
paramter (and the handler function as the third), see  second example.

Example:
$("p").one("click", function(){
 alert( $(this).text() );
});
HTML:
<p>Hello</p>
Result:
alert("Hello")

5.3 unbind(String,Function)
unbind(String type, Function fn) returns jQuery

The opposite of bind, removes a bound event from each of the matched elements.
Without any arguments, all bound events are removed.
If the type is provided, all bound events of that type are removed.
If the function that was passed to bind is provided as the second argument, only that specific
event handler is removed.

Example:
$("p").unbind()
HTML:
<p onclick="alert('Hello');">Hello</p>
Result:
[ <p>Hello</p> ]

Example:
$("p").unbind( "click" )
HTML:
<p onclick="alert('Hello');">Hello</p>
Result:
[ <p>Hello</p> ]

Example:
$("p").unbind( "click", function() { alert("Hello"); } )
HTML:
<p onclick="alert('Hello');">Hello</p>
Result:
[ <p>Hello</p> ]

5.4 trigger(String)
trigger(String type) returns jQuery

Trigger a type of event on every matched element.

Example:
$("p").trigger("click")
HTML:
<p click="alert('hello')">Hello</p>
Result:
alert('hello')

5.5. toggle(Function,Function)
toggle(Function even, Function odd) returns jQuery

Toggle between two function calls every other click. Whenever a matched element is clicked,
the first specified function  is fired, when clicked again, the second is fired. All subsequent
clicks continue to rotate through the two functions.
Use unbind("click") to remove.

Example:
$("p").toggle(function(){
 $(this).addClass("selected");
},function(){
 $(this).removeClass("selected");
});

5.6 hover(Function,Function)
hover(Function over, Function out) returns jQuery

A method for simulating hovering (moving the mouse on, and off, an object). This is a custom
method which provides an 'in' to a  frequent task.
Whenever the mouse cursor is moved over a matched  element, the first specified function is
fired. Whenever the mouse  moves off of the element, the second specified function fires.
Additionally, checks are in place to see if the mouse is still within  the specified element itself
(for example, an image inside of a div),  and if it is, it will continue to 'hover', and not move
out  (a common error in using a mouseout event handler).

Example:
$("p").hover(function(){
 $(this).addClass("over");
},function(){
 $(this).addClass("out");
});

5.7 ready(Function)
ready(Function fn) returns jQuery

Bind a function to be executed whenever the DOM is ready to be traversed and manipulated.
This is probably the most important  function included in the event module, as it can greatly
improve the response times of your web applications.
In a nutshell, this is a solid replacement for using window.onload,  and attaching a function to
that. By using this method, your bound Function  will be called the instant the DOM is ready
to be read and manipulated,  which is exactly what 99.99% of all Javascript code needs to
run.
There is one argument passed to the ready event handler: A reference to the jQuery function.
You can name that argument whatever you like, and can therefore stick with the $ alias
without risc of naming collisions.
Please ensure you have no code in your <body> onload event handler,  otherwise
$(document).ready() may not fire.
You can have as many $(document).ready events on your page as you like. The functions
are then executed in the order they were added.

Example:
$(document).ready(function(){ Your code here... });

Example:
Uses both the shortcut for $(document).ready() and the argument to write failsafe jQuery
code using the $ alias, without relying on the global alias.
jQuery(function($) {
 // Your code using failsafe $ alias here...
});

5.8 scroll(Function)
scroll(Function fn) returns jQuery

Bind a function to the scroll event of each matched element.

Example:
$("p").scroll( function() { alert("Hello"); } );
HTML:
<p>Hello</p>
Result:
<p onscroll="alert('Hello');">Hello</p>

5.9 submit(Function)
submit(Function fn) returns jQuery

Bind a function to the submit event of each matched element.

Example:
Prevents the form submission when the input has no value entered.
$("#myform").submit( function() {
 return $("input", this).val().length > 0;
} );
HTML:
<form id="myform"><input /></form>

5.10 submit()
submit() returns jQuery

Trigger the submit event of each matched element. This causes all of the functions that have
been bound to thet submit event to be executed.
Note: This does not execute the submit method of the form element! If you need to submit
the form via code, you have to use the DOM method, eg. $("form")[0].submit();

Example:
Triggers all submit events registered for forms, but does not submit the form
$("form").submit();

5.11 focus(Function)
focus(Function fn) returns jQuery

Bind a function to the focus event of each matched element.

Example:
$("p").focus( function() { alert("Hello"); } );
HTML:
<p>Hello</p>
Result:
<p onfocus="alert('Hello');">Hello</p>

5.12 focus()
focus() returns jQuery

Trigger the focus event of each matched element. This causes all of the functions that have
been bound to thet focus event to be executed.
Note: This does not execute the focus method of the underlying elements! If you need to
focus an element via code, you have to use the DOM method, eg. $("#myinput")[0].focus();

Example:
$("p").focus();
HTML:
<p onfocus="alert('Hello');">Hello</p>
Result:
alert('Hello');

5.13 keydown(Function)
keydown(Function fn) returns jQuery

Bind a function to the keydown event of each matched element.

Example:
$("p").keydown( function() { alert("Hello"); } );
HTML:
<p>Hello</p>
Result:
<p onkeydown="alert('Hello');">Hello</p>

5.14 dblclick(Function)
dblclick(Function fn) returns jQuery

Bind a function to the dblclick event of each matched element.

Example:
$("p").dblclick( function() { alert("Hello"); } );
HTML:
<p>Hello</p>
Result:
<p ondblclick="alert('Hello');">Hello</p>

5.15 keypress(Function)
keypress(Function fn) returns jQuery

Bind a function to the keypress event of each matched element.

Example:
$("p").keypress( function() { alert("Hello"); } );
HTML:
<p>Hello</p>
Result:
<p onkeypress="alert('Hello');">Hello</p>

5.16 error(Function)
error(Function fn) returns jQuery

Bind a function to the error event of each matched element.

Example:
$("p").error( function() { alert("Hello"); } );
HTML:
<p>Hello</p>
Result:
<p onerror="alert('Hello');">Hello</p>

5.17 blur(Function)
blur(Function fn) returns jQuery

Bind a function to the blur event of each matched element.

Example:
$("p").blur( function() { alert("Hello"); } );
HTML:
<p>Hello</p>
Result:
<p onblur="alert('Hello');">Hello</p>

5.18 blur()
blur() returns jQuery

Trigger the blur event of each matched element. This causes all of the functions that have
been bound to thet blur event to be executed.
Note: This does not execute the blur method of the underlying elements! If you need to blur
an element via code, you have to use the DOM method, eg. $("#myinput")[0].blur();

Example:
$("p").blur();
HTML:
<p onblur="alert('Hello');">Hello</p>
Result:
alert('Hello');

5.19 load(Function)
load(Function fn) returns jQuery

Bind a function to the load event of each matched element.

Example:
$("p").load( function() { alert("Hello"); } );
HTML:
<p>Hello</p>
Result:
<p onload="alert('Hello');">Hello</p>

5.20 select(Function)
select(Function fn) returns jQuery
Bind a function to the select event of each matched element.

Example:
$("p").select( function() { alert("Hello"); } );
HTML:
<p>Hello</p>
Result:
<p onselect="alert('Hello');">Hello</p>

5.21 select()
select() returns jQuery

Trigger the select event of each matched element. This causes all of the functions that have
been bound to thet select event to be executed.

Example:
$("p").select();
HTML:
<p onselect="alert('Hello');">Hello</p>
Result:
alert('Hello');

5.22 mouseup(Function)
mouseup(Function fn) returns jQuery

Bind a function to the mouseup event of each matched element.

Example:
$("p").mouseup( function() { alert("Hello"); } );
HTML:
<p>Hello</p>
Result:
<p onmouseup="alert('Hello');">Hello</p>

5.23 unload(Function)
unload(Function fn) returns jQuery

Bind a function to the unload event of each matched element.

Example:
$("p").unload( function() { alert("Hello"); } );
HTML:
<p>Hello</p>
Result:
<p onunload="alert('Hello');">Hello</p>

5.24 change(Function)
change(Function fn) returns jQuery

Bind a function to the change event of each matched element.

Example:
$("p").change( function() { alert("Hello"); } );
HTML:
<p>Hello</p>
Result:
<p onchange="alert('Hello');">Hello</p>

5.25 mouseout(Function)
mouseout(Function fn) returns jQuery

Bind a function to the mouseout event of each matched element.

Example:
$("p").mouseout( function() { alert("Hello"); } );
HTML:
<p>Hello</p>
Result:
<p onmouseout="alert('Hello');">Hello</p>

5.26 keyup(Function)
keyup(Function fn) returns jQuery

Bind a function to the keyup event of each matched element.

Example:
$("p").keyup( function() { alert("Hello"); } );
HTML:
<p>Hello</p>
Result:
<p onkeyup="alert('Hello');">Hello</p>

5.27 click(Function)
click(Function fn) returns jQuery

Bind a function to the click event of each matched element.

Example:
$("p").click( function() { alert("Hello"); } );
HTML:
<p>Hello</p>
Result:
<p onclick="alert('Hello');">Hello</p>

5.28 click()
click() returns jQuery

Trigger the click event of each matched element. This causes all of the functions that have
been bound to thet click event to be executed.

Example:
$("p").click();
HTML:
<p onclick="alert('Hello');">Hello</p>
Result:
alert('Hello');

5.29 resize(Function)
resize(Function fn) returns jQuery

Bind a function to the resize event of each matched element.

Example:
$("p").resize( function() { alert("Hello"); } );
HTML:
<p>Hello</p>
Result:
<p onresize="alert('Hello');">Hello</p>

5.30 mousemove(Function)
mousemove(Function fn) returns jQuery

Bind a function to the mousemove event of each matched element.

Example:
$("p").mousemove( function() { alert("Hello"); } );
HTML:
<p>Hello</p>
Result:
<p onmousemove="alert('Hello');">Hello</p>

5.31 mousedown(Function)
mousedown(Function fn) returns jQuery

Bind a function to the mousedown event of each matched element.

Example:
$("p").mousedown( function() { alert("Hello"); } );
HTML:
<p>Hello</p>
Result:
<p onmousedown="alert('Hello');">Hello</p>

5.32 mouseover(Function)
mouseover(Function fn) returns jQuery

Bind a function to the mouseover event of each matched element.

Example:
$("p").mouseover( function() { alert("Hello"); } );
HTML:
<p>Hello</p>
Result:
<p onmouseover="alert('Hello');">Hello</p>

6. Effects

6.1 show()
show() returns jQuery

Displays each of the set of matched elements if they are hidden.

Example:
$("p").show()
HTML:
<p style="display: none">Hello</p>
Result:
[ <p style="display: block">Hello</p> ]

6.2 show(String|Number,Function)
show(String|Number speed, Function callback) returns jQuery

Show all matched elements using a graceful animation and firing an optional callback after
completion.
The height, width, and opacity of each of the matched elements  are changed dynamically
according to the specified speed.

Example:
$("p").show("slow");

Example:
$("p").show("slow",function(){
 alert("Animation Done.");
});

6.3 hide()
hide() returns jQuery

Hides each of the set of matched elements if they are shown.

Example:
$("p").hide()
HTML:
<p>Hello</p>
Result:
[ <p style="display: none">Hello</p> ]

6.4 hide(String|Number,Function)
hide(String|Number speed, Function callback) returns jQuery

Hide all matched elements using a graceful animation and firing an optional callback after
completion.
The height, width, and opacity of each of the matched elements  are changed dynamically
according to the specified speed.

Example:
$("p").hide("slow");

Example:
$("p").hide("slow",function(){
 alert("Animation Done.");
});

6.5 toggle()
toggle() returns jQuery

Toggles each of the set of matched elements. If they are shown, toggle makes them hidden.
If they are hidden, toggle makes them shown.

Example:
$("p").toggle()
HTML:
<p>Hello</p><p style="display: none">Hello Again</p>
Result:
<p style="display: none">Hello</p>, <p style="display: block">Hello Again</p>

6.6 slideDown(String|Number,Function)
slideDown(String|Number speed, Function callback) returns jQuery

Reveal all matched elements by adjusting their height and firing an optional callback after
completion.
Only the height is adjusted for this animation, causing all matched elements to be revealed in
a "sliding" manner.

Example:
$("p").slideDown("slow");

Example:
$("p").slideDown("slow",function(){
 alert("Animation Done.");
});

6.7 slideUp(String|Number,Function)
slideUp(String|Number speed, Function callback) returns jQuery

Hide all matched elements by adjusting their height and firing an optional callback after
completion.
Only the height is adjusted for this animation, causing all matched elements to be hidden in a
"sliding" manner.

Example:
$("p").slideUp("slow");

Example:
$("p").slideUp("slow",function(){
 alert("Animation Done.");
});

6.8 slideToggle(String|Number,Function)
slideToggle(String|Number speed, Function callback) returns jQuery

Toggle the visibility of all matched elements by adjusting their height and firing an optional
callback after completion.
Only the height is adjusted for this animation, causing all matched elements to be hidden in a
"sliding" manner.

Example:
$("p").slideToggle("slow");

Example:
$("p").slideToggle("slow",function(){
 alert("Animation Done.");
});

6.9 fadeIn(String|Number,Function)
fadeIn(String|Number speed, Function callback) returns jQuery

Fade in all matched elements by adjusting their opacity and firing an optional callback after
completion.
Only the opacity is adjusted for this animation, meaning that all of the matched elements
should already have some form of height and width associated with them.

Example:
$("p").fadeIn("slow");

Example:
$("p").fadeIn("slow",function(){
 alert("Animation Done.");
});

6.10 fadeOut(String|Number,Function)
fadeOut(String|Number speed, Function callback) returns jQuery

Fade out all matched elements by adjusting their opacity and firing an optional callback after
completion.
Only the opacity is adjusted for this animation, meaning that all of the matched elements
should already have some form of height and width associated with them.

Example:
$("p").fadeOut("slow");

Example:
$("p").fadeOut("slow",function(){
 alert("Animation Done.");
});

6.11 fadeTo(String|Number,Number,Function)
fadeTo(String|Number speed, Number opacity, Function callback) returns jQuery

Fade the opacity of all matched elements to a specified opacity and firing an optional
callback after completion.
Only the opacity is adjusted for this animation, meaning that all of the matched elements
should already have some form of height and width associated with them.

Example:
$("p").fadeTo("slow", 0.5);

Example:
$("p").fadeTo("slow", 0.5, function(){
 alert("Animation Done.");
});

6.12 animate(Hash,String|Number,String,Function)
animate(Hash params, String|Number speed, String easing, Function callback) returns jQuery

A function for making your own, custom, animations. The key aspect of this function is the
object of style properties that will be animated, and to what end. Each key within the object
represents a style property that will also be animated (for example: "height", "top", or
"opacity").
The value associated with the key represents to what end the property will be animated. If a
number is provided as the value, then the style property will be transitioned from its current
state to that new number. Oterwise if the string "hide", "show", or "toggle" is provided, a
default animation will be constructed for that property.

Example:
$("p").animate({
 height: 'toggle', opacity: 'toggle'
}, "slow");

Example:
$("p").animate({
 left: 50, opacity: 'show'
}, 500);

Example:
An example of using an 'easing' function to provide a different style of animation. This will
only work if you have a plugin that provides this easing function (Only 'linear' is provided by
default, with jQuery).
$("p").animate({
 opacity: 'show'
}, "slow", "easein");

Ok. I think if you pass my JQuery training posts, you will be able to write your own needed jquery scripts. To improve more our jquery skill, I think it is good to do a sample using jquery. In my next JQuery post I will describe my new JQuery based game; Car Driving Game.

all rights reserved by Mostafa Rastgar and Programmer Assistant weblog