We have the ability to create dynamic web pages by using events. Events are actions that can be detected by your Web Application.
Following are the examples events:

• A mouse click
• A web page loading
• Taking mouse over an element
• Submitting an HTML form
• A keystroke on your keyboard
• etc.
  

When these events are triggered you can then use a custom function to do pretty much whatever you want with the event. These custom functions call Event Handlers.

Binding event handlers:

Using the jQuery Event Model, we can establish event handlers on DOM elements with the bind() method as follows:

$('div').bind('click', function( event ){ alert('Hi there!'); });

This code will cause the division element to respond to the click event; when a user clicks inside this division

The full syntax of the bind() command is as follows:

selector.bind( eventType[, eventData], handler)

Following is the description of the parameters:

• eventType: A string containing a JavaScript event type, such as click or submit. Refer to the next section for a complete list of event types.
• eventData: This is optional parameter is a map of data that will be passed to the event handler.
• handler: A function to execute each time the event is triggered.

Removing event handlers:

Typically, once an event handler is established, it remains in effect for the remainder of the life of the page. There may be a need when you would like to remove event handler.
jQuery provides the unbind() command to remove an exiting event handler. The syntax of unbind() is as follows:

selector.unbind(eventType, handler) or selector.unbind(eventType)

Following is the description of the parameters:

• eventType: A string containing a JavaScript event type, such as click or submit. Refer to the next section for a complete list of event types.
• handler: If provided, identifies the specific listener that.s to be removed.

Event Types:

The following are cross platform and recommended event types which you can bind using JQuery:

Event Type	Description
blur	Occurs when the element loses focus
change	Occurs when the element changes
click	Occurs when a mouse click
dblclick	Occurs when a mouse double-click
error	Occurs when there is an error in loading or unloading etc.
focus	Occurs when the element gets focus
keydown	Occurs when key is pressed
keypress	Occurs when key is pressed and released
keyup	Occurs when key is released
load	Occurs when document is loaded
mousedown	Occurs when mouse button is pressed
mouseenter	Occurs when mouse enters in an element region
mouseleave	Occurs when mouse leaves an element region
mousemove	Occurs when mouse pointer moves
mouseout	Occurs when mouse pointer moves out of an element
mouseover	Occurs when mouse pointer moves over an element
mouseup	Occurs when mouse button is released
resize	Occurs when window is resized
scroll	Occurs when window is scrolled
select	Occurs when a text is selected
submit	Occurs when form is submitted
unload	Occurs when documents is unloaded

The Event Object:

The callback function takes a single parameter; when the handler is called the JavaScript event object will be passed through it.
The event object is often unneccessary and the parameter is omitted, as sufficient context is usually available when the handler is bound to know exactly what needs to be done when the handler is triggered, however there are certail attributes which you would need to be accessed.

The Event Attributes:

The following event properties/attributes are available and safe to access in a platform independent manner:

Property	Description
altKey	Set to true if the Alt key was pressed when the event was triggered, false if not. The Alt key is labeled Option on most Mac keyboards.
ctrlKey	Set to true if the Ctrl key was pressed when the event was triggered, false if not.
data	The value, if any, passed as the second parameter to the bind() command when the handler was established.
keyCode	For keyup and keydown events, this returns the key that was pressed.
metaKey	Set to true if the Meta key was pressed when the event was triggered, false if not. The Meta key is the Ctrl key on PCs and the Command key on Macs.
pageX	For mouse events, specifies the horizontal coordinate of the event relative from the page origin.
pageY	For mouse events, specifies the vertical coordinate of the event relative from the page origin.
relatedTarget	For some mouse events, identifies the element that the cursor left or entered when the event was triggered.
screenX	For mouse events, specifies the horizontal coordinate of the event relative from the screen origin.
screenY	For mouse events, specifies the vertical coordinate of the event relative from the screen origin.
shiftKey	Set to true if the Shift key was pressed when the event was triggered, false if not.
target	Identifies the element for which the event was triggered.
timeStamp	The timestamp (in milliseconds) when the event was created.
type	For all events, specifies the type of event that was triggered (for example, click).
which	For keyboard events, specifies the numeric code for the key that caused the event, and for mouse events, specifies which button was pressed (1 for left, 2 for middle, 3 for right)

The Event Methods:

There is a list of methods which can be called on an Event Object:

Method	Description
preventDefault()	Prevents the browser from executing the default action.
isDefaultPrevented()	Returns whether event.preventDefault() was ever called on this event object.
stopPropagation()	Stops the bubbling of an event to parent elements, preventing any parent handlers from being notified of the event.
isPropagationStopped()	Returns whether event.stopPropagation() was ever called on this event object.
stopImmediatePropagation()	Stops the rest of the handlers from being executed.
isImmediatePropagationStopped()	Returns whether event.stopImmediatePropagation() was ever called on this event object.

Event Manipulation Methods:

Following table lists down important event-related methods:

Method	Description
bind( type, [data], fn )	Binds a handler to one or more events (like click) for each matched element. Can also bind custom events.
die( type, fn )	This does the opposite of live, it removes a bound live event.
hover( over, out )	Simulates hovering for example moving the mouse on, and off, an object.
live( type, fn )	Binds a handler to an event (like click) for all current - and future - matched element. Can also bind custom events.
one( type, [data], fn )	Binds a handler to one or more events to be executed once for each matched element.
ready( fn )	Binds a function to be executed whenever the DOM is ready to be traversed and manipulated.
toggle( fn, fn2, fn3,... )	Toggle among two or more function calls every other click.
trigger( event, [data] )	Trigger an event on every matched element.
triggerHandler( event, [data] )	Triggers all bound event handlers on an element .
unbind( [type], [fn] )	This does the opposite of bind, it removes bound events from each of the matched elements.

Event Helper Methods:

jQuery also provides a set of event helper functions which can be used either to trigger an event to bind any event types mentioned above.

Trigger Methods:

Following is an example which would triggers the blur event on all paragraphs:

$("p").blur();

Binding Methods:

Following is an example which would bind a click event on all the <div>:

$("div").click( function () { // do something here });

Here is a complete list of all the support methods provided by jQuery:

Method	Description
blur( )	Triggers the blur event of each matched element.
blur( fn )	Bind a function to the blur event of each matched element.
change( )	Triggers the change event of each matched element.
change( fn )	Binds a function to the change event of each matched element.
click( )	Triggers the click event of each matched element.
click( fn )	Binds a function to the click event of each matched element.
dblclick( )	Triggers the dblclick event of each matched element.
dblclick( fn )	Binds a function to the dblclick event of each matched element.
error( )	Triggers the error event of each matched element.
error( fn )	Binds a function to the error event of each matched element.
focus( )	Triggers the focus event of each matched element.
focus( fn )	Binds a function to the focus event of each matched element.
keydown( )	Triggers the keydown event of each matched element.
keydown( fn )	Bind a function to the keydown event of each matched element.
keypress( )	Triggers the keypress event of each matched element.
keypress( fn )	Binds a function to the keypress event of each matched element.
keyup( )	Triggers the keyup event of each matched element.
keyup( fn )	Bind a function to the keyup event of each matched element.
load( fn )	Binds a function to the load event of each matched element.
mousedown( fn )	Binds a function to the mousedown event of each matched element.
mouseenter( fn )	Bind a function to the mouseenter event of each matched element.
mouseleave( fn )	Bind a function to the mouseleave event of each matched element.
mousemove( fn )	Bind a function to the mousemove event of each matched element.
mouseout( fn )	Bind a function to the mouseout event of each matched element.
mouseover( fn )	Bind a function to the mouseover event of each matched element.
mouseup( fn )	Bind a function to the mouseup event of each matched element.
resize( fn )	Bind a function to the resize event of each matched element.
scroll( fn )	Bind a function to the scroll event of each matched element.
select( )	Trigger the select event of each matched element.
select( fn )	Bind a function to the select event of each matched element.
submit( )	Trigger the submit event of each matched element.
submit( fn )	Bind a function to the submit event of each matched element.
unload( fn )	Binds a function to the unload event of each matched element.

 +jQuery +jQuery Plugins +jQuery Blog By Yogesh Chaudhari +jQuery1 
+jQuery Italia +jQuery Reel +Jquery Demos +Jquery Italia   

Description:

The unbind( [type], [fn] ) method does the opposite of bind, it removes bound events from each of the matched elements.

Syntax:

Here is the simple syntax to use this method:

selector.unbind( [type], [fn] )

Parameters:

Here is the description of all the parameters used by this method:

• type: One or more event types separated by a space.
• fn: A function to unbind from the event on each of the set of matched elements.

Example:

Following is a simple example a simple showing the usage of this method:

<html>
<head>
<title>the title</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" language="javascript">
   
   $(document).ready(function() {

       function aClick() {
         $("div").show().fadeOut("slow");
       }
       $("#bind").click(function () {
         $("#theone").click(aClick)
                  .text("Can Click!");
       });
       $("#unbind").click(function () {
         $("#theone").unbind('click', aClick)
                  .text("Does nothing...");
       });
   });

   </script>
   <style>
      button { margin:5px; }
      button#theone { color:red; background:yellow; }
  </style>
</head>
<body>
  <button id="theone">Does nothing...</button>
  <button id="bind">Bind Click</button>
  <button id="unbind">Unbind Click</button>
  <div style="display:none;">Click!</div>
</body>
</html> 

 +jQuery +jQuery Plugins +jQuery Blog By Yogesh Chaudhari +jQuery1 
+jQuery Italia +jQuery Reel +Jquery Demos +Jquery Italia   

Description:

The triggerHandler( event, [data] ) method triggers all bound event handlers on an element (for a specific event type) WITHOUT executing the browser's default actions, bubbling, or live events.
This method behaves very similarly to the trigger method, with two major exceptions:

• First: No default browser actions are triggered, the triggered event does not bubble, and live events aren't triggered.
• Second: The event is only triggered on the first element within the jQuery collection.

This method returns the return value of the triggered handler instead of a chainable jQuery object.

Syntax:

Here is the simple syntax to use this method:

selector.triggerHandler( event, [data] )

Parameters:

Here is the description of all the parameters used by this method:

• event: An event object or type to trigger.
• data : This is an optional parameters and represents additional data to pass as arguments (after the event object) to the event handler.

Example:

Following is a simple example a simple showing the usage of this method:

<html>
<head>
<title>the title</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" language="javascript">
   
   $(document).ready(function() {

      $("#old").click(function(){
         $("input").trigger("focus");
      });
      
      $("#new").click(function(){
         $("input").triggerHandler("focus");
      });
      
      $("input").focus(function(){
       $("<span>Focused!</span>").appendTo("body").fadeOut(1000);
      });

   });
   </script>
</head>
<body>
   <button id="old">.trigger("focus")</button>
   <button id="new">.triggerHandler("focus")</button><br/><br/>
   <input type="text" value="To Be Focused"/>
</body>
</html> 

 +jQuery +jQuery Plugins +jQuery Blog By Yogesh Chaudhari +jQuery1 
+jQuery Italia +jQuery Reel +Jquery Demos +Jquery Italia  

Description:

The trigger( event, [data] ) method triggers an event on every matched element.
Triggered events aren't limited to browser-based events, you can also trigger custom events registered with bind.

Syntax:

Here is the simple syntax to use this method:

selector.trigger( event, [data] )

Parameters:

Here is the description of all the parameters used by this method:

• event: An event object or type to trigger.
• data : This is an optional parameters and represents additional data to pass as arguments (after the event object) to the event handler.

Example:

Following is a simple example a simple showing the usage of this method. Here you would trigger a click event on square TWO by clicking on square ONE:

<html>
<head>
<title>the title</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" language="javascript">
   
   $(document).ready(function() {

      $("#div1").click( function () {
           $("#div2").trigger('click');
      });

      $("#div2").click( function () {
           alert( "Square TWO is clicked");
      });

   });
   </script>
   <style>
      div{ margin:10px;padding:12px;
             border:2px solid #666;
             width:60px;
           }
  </style>
</head>
<body>
   <span>Click square ONE to see the result:</span>
   <div id="div1" style="background-color:blue;">ONE</div>
   <div id="div2" style="background-color:blue;">TWO</div>
</body>
</html> 

 +jQuery +jQuery Plugins +jQuery Blog By Yogesh Chaudhari +jQuery1 
+jQuery Italia +jQuery Reel +Jquery Demos +Jquery Italia  

Description:

The toggle( fn, fn2, fn3,... ) method toggles among two or more function calls every other click.
Whenever a matched element is clicked, the first specified function is fired, when clicked again, the second is fired, and so on.

Syntax:

Here is the simple syntax to use this method:

selector.toggle( fn, fn2, fn3,... )

Parameters:

Here is the description of all the parameters used by this method:

• fn, fn2, fn3....: The functions to be executed against clicks.

Example:

Following is a simple example a simple showing the usage of this method:

<html>
<head>
<title>the title</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" language="javascript">
   
   $(document).ready(function() {
      $("div").toggle(
         function () {
           $(this).css({"background-color":"red"});
         },
         function () {
           $(this).css({"background-color":"yellow"});
         },
         function () {
           $(this).css({"background-color":"black"});
         }
       );

   });

   </script>
   <style>
      .div{ margin:10px;padding:12px;
             border:2px solid #666;
             width:200px;
           }
  </style>
</head>
<body>
   <span>Click below square to see the result:</span>
   <div class="div" style="background-color:blue;"></div>
</body>
</html> 

 +jQuery +jQuery Plugins +jQuery Blog By Yogesh Chaudhari +jQuery1 
+jQuery Italia +jQuery Reel +Jquery Demos +Jquery Italia  

Description:

The ready( fn ) method binds a function to be executed whenever the DOM is ready to be traversed and manipulated.
This method is a replacement for using window.onload

Syntax:

Here is the simple syntax to use this method:

selector.ready( fn )

Parameters:

Here is the description of all the parameters used by this method:

• fn: The function to be executed when the DOM is ready.

Example:

Following is a simple example a simple showing the usage of this method:

<html>
<head>
<title>the title</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" language="javascript">
   
   $(document).ready(function() {
      $("div").text("The DOM is now loaded...");
   });

   </script>
   <style>
      .div{ margin:10px;padding:12px;
             border:2px solid #666;
             width:200px;
           }
  </style>
</head>
<body>
   <div class="div" style="background-color:blue;"></div>
</body>
</html>

 +jQuery +jQuery Plugins +jQuery Blog By Yogesh Chaudhari +jQuery1 
+jQuery Italia +jQuery Reel +Jquery Demos +Jquery Italia   
 

Description:

The one( type, [data], fn ) method binds a handler to one or more events to be executed once for each matched element. The handler is executed only once for each element. Otherwise, the same rules as described in bind() apply.
Possible event values: blur, focus, load, resize, scroll, unload, click etc.

Syntax:

Here is the simple syntax to use this method:

selector.one( type, [data], fn )

Parameters:

Here is the description of all the parameters used by this method:

• type: An event type.
• data: This is optional paramter and represents additional data passed to the event handler as event.data.
• fn: A function to bind to the event on each of the set of matched elements.

Example:

Following is a simple example a simple showing the usage of this method. Here it binds click event with each <div> element. Try to click any square two times, it won't react unlike bind() method:

<html>
<head>
<title>the title</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" language="javascript">
   
   $(document).ready(function() {

     $('div').one('click', function( event ){
         alert('Hi there!');
     });

   });

   </script>
   <style>
      .div{ margin:10px;padding:12px;
             border:2px solid #666;
             width:60px;
           }
  </style>
</head>
<body>
   <p>Click on any square below to see the result:</p>
   <div class="div" style="background-color:blue;"></div>
   <div class="div" style="background-color:green;"></div>
   <div class="div" style="background-color:red;"></div>
</body>
</html> 

 +jQuery +jQuery Plugins +jQuery Blog By Yogesh Chaudhari +jQuery1 
+jQuery Italia +jQuery Reel +Jquery Demos +Jquery Italia   

Description:

The live( type, fn ) method binds a handler to an event (like click) for all current - and future - matched element. Can also bind custom events.
Possible event values: blur, focus, load, resize, scroll, unload, click etc. Unlike bind() method, only a single event can be bound in each call to the live() method.

Syntax:

Here is the simple syntax to use this method:

selector.live( type, fn )

Parameters:

Here is the description of all the parameters used by this method:

• type: An event type.
• fn: A function to bind to the event on each of the set of matched elements

Example:

Following is a simple example a simple showing the usage of this method. Here it binds click event with each <div> element:

<html>
<head>
<title>the title</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" language="javascript">
   
   $(document).ready(function() {

     $('div').live('click', function( event ){
         alert('Hi there!');
     });

   });

   </script>
   <style>
      .div{ margin:10px;padding:12px;
             border:2px solid #666;
             width:60px;
           }
  </style>
</head>
<body>
   <p>Click on any square below to see the result:</p>
   <div class="div" style="background-color:blue;"></div>
   <div class="div" style="background-color:green;"></div>
   <div class="div" style="background-color:red;"></div>
</body>
</html>

+jQuery +jQuery Plugins +jQuery Blog By Yogesh Chaudhari +jQuery1 
+jQuery Italia +jQuery Reel +Jquery Demos +Jquery Italia   

Description:

The hover( over, out ) method simulates hovering (moving the mouse on, and off, an object). This is a custom method which provides an 'in' to a frequent task.

Syntax:

Here is the simple syntax to use this method:

selector.hover( over, out )

Parameters:

Here is the description of all the parameters used by this method:

• over: The callback function to fire when the mouse is moved over a matched element.
• out: The callback function to fire when the mouse is moved off of a matched element.

Example:

Following is a simple example a simple showing the usage of this method:

<html>
<head>
<title>the title</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" language="javascript">
   
   $(document).ready(function() {

     $('div').hover(
         function () {
           $(this).css({"background-color":"red"});
         }, 
         function () {
           $(this).css({"background-color":"blue"});
         }
     );

   });

   </script>
   <style>
      .div{ margin:10px;padding:12px;
             border:2px solid #666;
             width:60px;
           }
  </style>
</head>
<body>
   <p>Move mouse on any square below to see the result:</p>
   <div class="div" style="background-color:blue;"></div>
   <div class="div" style="background-color:blue;"></div>
   <div class="div" style="background-color:blue;"></div>
</body>
</html>

+jQuery +jQuery Plugins +jQuery Blog By Yogesh Chaudhari +jQuery1 
+jQuery Italia +jQuery Reel +Jquery Demos +Jquery Italia  

Description:

The die( type, fn ) method does the opposite of live() method, it removes a bound live event.

Syntax:

Here is the simple syntax to use this method:

selector.die( type, fn )

Parameters:

Here is the description of all the parameters used by this method:

• type: This is an optional paramter and represents a live event type to unbind.
• fn: A function to unbind from the event on each of the set of matched elements.

Example:

Following is a simple example a simple showing the usage of this method.

<html>
<head>
<title>the title</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" language="javascript">
   
   $(document).ready(function() {

       function aClick() {
         $("div").show().fadeOut("slow");
       }
       $("#bind").click(function () {
         $("#theone").live("click", aClick)
                  .text("Can Click!");
       });
       $("#unbind").click(function () {
         $("#theone").die("click", aClick)
                  .text("Does nothing...");
       });

   });

   </script>
   <style>
     button { margin:5px; }
     button#theone { color:red; background:yellow; }
  </style>
</head>
<body>
    <button id="theone">Does nothing...</button>
    <button id="bind">Bind Click</button>
    <button id="unbind">Unbind Click</button>
    <div style="display:none;">Click!</div>
</body>
</html>

 +jQuery +jQuery Plugins +jQuery Blog By Yogesh Chaudhari +jQuery1 
+jQuery Italia +jQuery Reel +Jquery Demos +Jquery Italia 

Description:

The bind( type, [data], fn ) method binds a handler to one or more events (like click) for each matched element. Can also bind custom events.
Possible event values: blur, focus, load, resize, scroll, unload, click etc.

Syntax:

Here is the simple syntax to use this method:

selector.bind( type, [data], fn )

Parameters:

Here is the description of all the parameters used by this method:

• type: One or more event types separated by a space.
• data: This is optional paramter and represents additional data passed to the event handler as event.data.
• fn: A function to bind to the event on each of the set of matched elements.

Example:

Following is a simple example a simple showing the usage of this method. Here it binds click event with each <div> element:

<html>
<head>
<title>the title</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" language="javascript">
   
   $(document).ready(function() {

     $('div').bind('click', function( event ){
         alert('Hi there!');
     });

   });

   </script>
   <style>
      .div{ margin:10px;padding:12px;
             border:2px solid #666;
             width:60px;
           }
  </style>
</head>
<body>
   <p>Click on any square below to see the result:</p>
   <div class="div" style="background-color:blue;"></div>
   <div class="div" style="background-color:green;"></div>
   <div class="div" style="background-color:red;"></div>
</body>
</html> 

  +jQuery +jQuery Plugins +jQuery Blog By Yogesh Chaudhari +jQuery1 
+jQuery Italia +jQuery Reel +Jquery Demos +Jquery Italia 

Description:

The isImmediatePropagationStopped() method checks whether event.stopImmediatePropagation() was ever called on this event object.
This method returns true in case event.stopImmediatePropagation() method has already been called, otherwise it returns false:

Syntax:

Here is the simple syntax to use this method:

event.isImmediatePropagationStopped()

Parameters:

Here is the description of all the parameters used by this method:

• NA

Example:

Following is a simple example a simple showing the usage of this method:

<html>
<head>
<title>the title</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" language="javascript">
   
   $(document).ready(function() {

      $("div").click(function(event){

          if ( event.isImmediatePropagationStopped() ){
             alert( "Event bubbling is disabled - 1" );
          }else{
             alert( "Event bubbling is enabled - 1" );
          }
          event.stopImmediatePropagation();
          if ( event.isImmediatePropagationStopped() ){
             alert( "Event bubbling is disabled - 2" );
          }else{
             alert( "Event bubbling is enabled - 2" );
          }

      });

   });
   </script>
   <style>
      div{ margin:10px;padding:12px;
             border:2px solid #666;
             width:160px;
           }
  </style>
</head>
<body>
   <p>Click on any box to see the result:</p>
   <div id="div1" style="background-color:blue;">
       BOX 1
  </div>
  <div id="div2" style="background-color:red;">
       BOX 2
  </div> 
</body>
</html>

  +jQuery +jQuery Plugins +jQuery Blog By Yogesh Chaudhari +jQuery1 
+jQuery Italia +jQuery Reel +Jquery Demos +Jquery Italia 

Description:

The stopImmediatePropagation() method stops the rest of the handlers from being executed. This method also stops the bubbling by calling event.stopPropagation().
You can use event.isImmediatePropagationStopped() to know whether this method was ever called (on that event object).

Syntax:

Here is the simple syntax to use this method:

event.stopImmediatePropagation()

Parameters:

Here is the description of all the parameters used by this method:

• NA

Example:

Following is a simple example a simple showing the usage of this method:

<html>
<head>
<title>the title</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" language="javascript">
   
   $(document).ready(function() {

      $("div").click(function(event){
          alert("1 - This is : " + $(this).text());
          // Comment the following to see the effect.
          event.stopImmediatePropagation();
      });

      // This won't be executed.
      $("div").click(function(event){
          alert("2 - This is : " + $(this).text());
      });

   });
   </script>
   <style>
      div{ margin:10px;padding:12px;
             border:2px solid #666;
             width:160px;
           }
  </style>
</head>
<body>
   <p>Click on any box to see the result:</p>
   <div id="div1" style="background-color:blue;">
       BOX 1
  </div>
  <div id="div2" style="background-color:red;">
         BOX 2
  </div> 
</body>
</html>

  +jQuery +jQuery Plugins +jQuery Blog By Yogesh Chaudhari +jQuery1 
+jQuery Italia +jQuery Reel +Jquery Demos +Jquery Italia 

Description:

The isPropagationStopped() method checks whether event.stopPropagation() was ever called on this event object.
This method returns true in case event.stopPropagation() method has been already called, otherwise it returns false.

Syntax:

Here is the simple syntax to use this method:

event.isPropagationStopped()

Parameters:

Here is the description of all the parameters used by this method:

• NA

Example:

Following is a simple example a simple showing the usage of this method:

<html>
<head>
<title>the title</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" language="javascript">
   
   $(document).ready(function() {

      $("div").click(function(event){
          alert("This is : " + $(this).text());
          if ( event.isPropagationStopped() ){
             alert( "Event bubbling is disabled - 1" );
          }else{
             alert( "Event bubbling is enabled - 1" );
          }
          event.stopPropagation();
          if ( event.isPropagationStopped() ){
             alert( "Event bubbling is disabled - 2" );
          }else{
             alert( "Event bubbling is enabled - 2" );
          }
      });

   });
   </script>
   <style>
      div{ margin:10px;padding:12px;
             border:2px solid #666;
             width:160px;
           }
  </style>
</head>
<body>
   <p>Click on any box to see the effect:</p>
   <div id="div1" style="background-color:blue;">
       OUTER BOX
       <div id="div2" style="background-color:red;">
             INNER BOX
      </div> 
  </div>
</body>
</html>

  +jQuery +jQuery Plugins +jQuery Blog By Yogesh Chaudhari +jQuery1 
+jQuery Italia +jQuery Reel +Jquery Demos +Jquery Italia 

Description:

The stopPropagation() method stops the bubbling of an event to parent elements, preventing any parent handlers from being notified of the event.
You can use the method event.isPropagationStopped() to know whether this method was ever called (on that event object).

Syntax:

Here is the simple syntax to use this method:

event.stopPropagation()

Parameters:

Here is the description of all the parameters used by this method:

• NA

Example:

Following is a simple example a simple showing the usage of this method. This example demonstrate how you can prevent other event handlers from being called:

<html>
<head>
<title>the title</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" language="javascript">
   
   $(document).ready(function() {

      $("div").click(function(event){
          alert("This is : " + $(this).text());
          // Comment the following to see the difference
          event.stopPropagation();
      });

   });

   </script>
   <style>
      div{ margin:10px;padding:12px;
             border:2px solid #666;
             width:160px;
           }
  </style>
</head>
<body>
   <p>Click on any box to see the effect:</p>
   <div id="div1" style="background-color:blue;">
       OUTER BOX
       <div id="div2" style="background-color:red;">
             INNER BOX
      </div> 
  </div>
</body>
</html>

  +jQuery +jQuery Plugins +jQuery Blog By Yogesh Chaudhari +jQuery1 
+jQuery Italia +jQuery Reel +Jquery Demos +Jquery Italia 

Description:

The isDefaultPrevented() method checks whether event.preventDefault() was ever called on this event object.
This method returns true in case preventDefault() has been called otherwise it returns false.

Syntax:

Here is the simple syntax to use this method:

event.isDefaultPrevented()

Parameters:

Here is the description of all the parameters used by this method:

• NA

Example:

Following is a simple example a simple showing the usage of this method. This example demonstrate how you can stop the browser from changing the page to the href of any anchors.

<html>
<head>
<title>the title</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" language="javascript">
   
   $(document).ready(function() {

      
      $("a").click(function(event){

         if ( event.isDefaultPrevented() ){
            alert( "Default behavior is disabled - 1" );
         }else{
            alert( "Default behavior is enabled - 1" );
         }
         event.preventDefault();
         if ( event.isDefaultPrevented() ){
            alert( "Default behavior is disabled - 2" );
         }else{
            alert( "Default behavior is enabled - 2" );
         }

      });

   });
   </script>
</head>
<body>
   <span>Click the following link and it won't work:</span>
   <a href="http://www.google.com">GOOGLE Inc.</a>
</body>
</html> 

 +jQuery +jQuery Plugins +jQuery Blog By Yogesh Chaudhari +jQuery1 
+jQuery Italia +jQuery Reel +Jquery Demos +Jquery Italia 

Description:

The preventDefault() method prevents the browser from executing the default action.
You can use the method isDefaultPrevented to know whether this method was ever called (on that event object).

Syntax:

Here is the simple syntax to use this method:

event.preventDefault()

Parameters:

Here is the description of all the parameters used by this method:

• NA

Example:

Following is a simple example a simple showing the usage of this method. This example demonstrate how you can stop the browser from changing the page to the href of any anchors.

<html>
<head>
<title>the title</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" language="javascript">
   
   $(document).ready(function() {

      $("a").click(function(event){
         event.preventDefault();
         alert( "Default behavior is disabled!" );
      });

   });
   </script>
</head>
<body>
   <span>Click the following link and it won't work:</span>
   <a href="http://www.google.com">GOOGLE Inc.</a>
</body>
</html>

+jQuery +jQuery Plugins +jQuery Blog By Yogesh Chaudhari +jQuery1 

+jQuery Italia +jQuery Reel +Jquery Demos +Jquery Italia 

JQuery provides methods to manipulate DOM in efficient way. You do not need to write big code to modify the value of any element's attribute or to extract HTML code from a paragraph or division.
JQuery provides methods such as .attr(), .html(), and .val() which act as getters, retrieving information from DOM elements for later use.

Content Manipulation:

The html( ) method gets the html contents (innerHTML) of the first matched element.
Here is the syntax for the method:

selector.html( )

Example:

Following is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML content from the object and then .text( val ) method sets value of the object using passed parameter:

<html> <head> <title>the title</title> <script type="text/javascript" src="/jquery/jquery-1.3.2.min.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function() { $("div").click(function () { var content = $(this).html(); $("#result").text( content ); }); }); </script> <style> #division{ margin:10px;padding:12px; border:2px solid #666; width:60px; } </style> </head> <body> <p>Click on the square below:</p> <span id="result"> </span> <div id="division" style="background-color:blue;"> This is Blue Square!! </div> </body> </html>

DOM Element Replacement:

You can replace a complete DOM element with the specified HTML or DOM elements. The replaceWith( content ) method serves this purpose very well.
Here is the syntax for the method:

selector.replaceWith( content )

Here content is what you want to have instead of original element. This could be HTML or simple text.

Example:

Following is an example which would replace division element with "<h1>JQuery is Great</h1>":

<html> <head> <title>the title</title> <script type="text/javascript" src="/jquery/jquery-1.3.2.min.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function() { $("div").click(function () { $(this).replaceWith("<h1>JQuery is Great</h1>"); }); }); </script> <style> #division{ margin:10px;padding:12px; border:2px solid #666; width:60px; } </style> </head> <body> <p>Click on the square below:</p> <span id="result"> </span> <div id="division" style="background-color:blue;"> This is Blue Square!! </div> </body> </html>

Removing DOM Elements:

There may be a situation when you would like to remove one or more DOM elements from the document. JQuery provides two methods to handle the situation.
The empty( ) method remove all child nodes from the set of matched elements where as the method remove( expr ) method removes all matched elements from the DOM.
Here is the syntax for the method:

selector.remove( [ expr ]) or selector.empty( )

You can pass optional paramter expr to filter the set of elements to be removed.

Example:

Following is an example where elements are being removed as soon as they are clicked:

<html> <head> <title>the title</title> <script type="text/javascript" src="/jquery/jquery-1.3.2.min.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function() { $("div").click(function () { $(this).remove( ); }); }); </script> <style> .div{ margin:10px;padding:12px; border:2px solid #666; width:60px; } </style> </head> <body> <p>Click on any square below:</p> <span id="result"> </span> <div class="div" style="background-color:blue;"></div> <div class="div" style="background-color:green;"></div> <div class="div" style="background-color:red;"></div> </body> </html>

Inserting DOM elements:

There may be a situation when you would like to insert new one or more DOM elements in your existing document. JQuery provides various methods to insert elements at various locations.
The after( content ) method insert content after each of the matched elements where as the method before( content ) method inserts content before each of the matched elements.
Here is the syntax for the method:

selector.after( content ) or selector.before( content )

Here content is what you want to insert. This could be HTML or simple text.

Example:

Following is an example where <div> elements are being inserted just before the clicked element:

<html> <head> <title>the title</title> <script type="text/javascript" src="/jquery/jquery-1.3.2.min.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function() { $("div").click(function () { $(this).before('<div class="div"></div>' ); }); }); </script> <style> .div{ margin:10px;padding:12px; border:2px solid #666; width:60px; } </style> </head> <body> <p>Click on any square below:</p> <span id="result"> </span> <div class="div" style="background-color:blue;"></div> <div class="div" style="background-color:green;"></div> <div class="div" style="background-color:red;"></div> </body> </html>

+jQuery1 +jQuery +jQuery Plugins +jQuery Italia +Jquery Demos

DOM Manipulation Methods:

Following table lists down all the methods which you can use to manipulate DOM elements:

Method	Description
after( content )	Insert content after each of the matched elements.
append( content )	Append content to the inside of every matched element.
appendTo( selector )	Append all of the matched elements to another, specified, set of elements.
before( content )	Insert content before each of the matched elements.
clone( bool )	Clone matched DOM Elements, and all their event handlers, and select the clones.
clone( )	Clone matched DOM Elements and select the clones.
empty( )	Remove all child nodes from the set of matched elements.
html( val )	Set the html contents of every matched element.
html( )	Get the html contents (innerHTML) of the first matched element.
insertAfter( selector )	Insert all of the matched elements after another, specified, set of elements.
insertBefore( selector )	Insert all of the matched elements before another, specified, set of elements.
prepend( content )	Prepend content to the inside of every matched element.
prependTo( selector )	Prepend all of the matched elements to another, specified, set of elements.
remove( expr )	Removes all matched elements from the DOM.
replaceAll( selector )	Replaces the elements matched by the specified selector with the matched elements.
replaceWith( content )	Replaces all matched elements with the specified HTML or DOM elements.
text( val )	Set the text contents of all matched elements.
text( )	Get the combined text contents of all matched elements.
wrap( elem )	Wrap each matched element with the specified element.
wrap( html )	Wrap each matched element with the specified HTML content.
wrapAll( elem )	Wrap all the elements in the matched set into a single wrapper element.
wrapAll( html )	Wrap all the elements in the matched set into a single wrapper element.
wrapInner( elem )	Wrap the inner child contents of each matched element (including text nodes) with a DOM element.
wrapInner( html )	Wrap the inner child contents of each matched element (including text nodes) with an HTML structure.

Description:

The append( content ) method appends content to the inside of every matched element.

Syntax:

Here is the simple syntax to use this method:

selector.append( content )

Parameters:

Here is the description of all the parameters used by this method:

• content: Content to insert after each target. This could be HTML or Text content

Example:

Following is a simple example a simple showing the usage of this method:

<html>
<head>
<title>the title</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" language="javascript">
   
   $(document).ready(function() {

     $("div").click(function () {
       $(this).append('<div class="div"></div>' );
    });

   });

   </script>
   <style>
      .div{ margin:10px;padding:12px;
             border:2px solid #666;
             width:60px;
           }
  </style>
</head>
<body>
   <p>Click on any square below to see the result:</p>
   <div class="div" style="background-color:blue;"></div>
   <div class="div" style="background-color:green;"></div>
   <div class="div" style="background-color:red;"></div>
</body>
</html>

Description:

The before( content ) method inserts content before each of the matched elements.

Syntax:

Here is the simple syntax to use this method:

selector.before( content )

Parameters:

Here is the description of all the parameters used by this method:

• content: Content to insert before each target. This could be HTML or Text content

Example:

Following is a simple example a simple showing the usage of this method:

<html>
<head>
<title>the title</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" language="javascript">
   
   $(document).ready(function() {

     $("div").click(function () {
       $(this).before('<div class="div"></div>' );
    });

   });

   </script>
   <style>
      .div{ margin:10px;padding:12px;
             border:2px solid #666;
             width:60px;
           }
  </style>
</head>
<body>
   <p>Click on any square below to see the result:</p>
   <div class="div" style="background-color:blue;"></div>
   <div class="div" style="background-color:green;"></div>
   <div class="div" style="background-color:red;"></div>
</body>
</html>