August 2011 ~ TechieIT

Wednesday, August 24, 2011

jQuery Events Part - I : Document loading Events and Keyboard Events

9:31 PM Posted by Avinash , , No comments
jQuery basically have following type of events:

    • .ready()
      Indicates that DOM is fully loaded that mean all controls and it's hierarchy is fully loaded .This is the best place to do all event handling and jacascript/jQuery code manipulations.
                    Example:
                    $(document).ready(function() {  
                    // Handler for .ready() called.                      
                    });
    • .load()
      load event executes code when page is rendered or a perticular element is rendered. Use this event when code is relies on loaded assests like images.
                    Example:
                    Triggers event when page is fully loaded with all control:
                    $(window).load(function () {
                      // Add code here                              
                    });
                         
                    You may call if any element on page is loaded
                    <img src="something.png" id="imageDemo" />
                    $("#imageDemo").load()(function() {
                      // Add code here.
                    });
    • .unload()
      Use this event when user navigates away from the page or window.
                    Example:
                    $(window).unload(function() {
                       alert('I am unloading.');
                    });

    • .keydown()
      Event on element get triggered when user presses any key on keyboard. If you want keydown event get fired when user start typing in some text box.
                   so for textbox you can write it like:
                      <input id="keyDownDemo" type="text" value="Hello" />
                     $('#keyDownDemo).keydown(function() { 
                      alert(Hello jQuery KeyDown Happened.');
                     });
    • .keydown()
      Event on element get triggered when user releases key on keyboard. If you want keyup event get fired when user start typing in some text box.
                   so for textbox you can write it like:
                      <input id="keyUpDemo" type="text" value="Hello" />
                     $('#keyUpDemo).keyup(function() { 
                      alert(Hello jQuery KeyUp happened.');
                     });
    • .keypress()
      It is similar to keydown, except separate keypress events are triggered for each inserted character. Keys called modifier keys like shift, alt...etc does only keydown event.
                   so for textbox you can write it like:
                      <input id="keyPressDemo" type="text" value="Hello" />
                     $('#keyPressDemo).keypress(function() { 
                      alert(Hello jQuery KeyPress happened.');
                     });

                 

jQuery basics

9:29 PM Posted by Avinash , , No comments
jQuery,  a Javascript library with cross-browser support and open source which simplify the client side scripting in web/html.
It supports
  • DOM,

  • CSS manipulation,

  • Ajax,

  • animations and effect 

  • extendible plugins. 

Get Started using jQuery:
jQuery needs to add library in html or web page which is a .js file that contains Ajax funcions, effects, DOM, events ...etc. You can download jQuery library from http://docs.jquery.com/Downloading_jQuery

Sample to start with jQuery:

After downloading jQuery library add it to page like below:

<!DOCTYPE html>
<html >
<head>
<title>jQuery Demo</title>
    <script type="text/javascript" src="jquery.js"></script>
</head>
<body>
  <form id="Form1" method="post" runat="server">

  </form>
</body>
</html>


jQuery basics

9:29 PM Posted by Avinash , , No comments
jQuery,  a Javascript library with cross-browser support and open source which simplify the client side scripting in web/html.
It supports
  • DOM,

  • CSS manipulation,

  • Ajax,

  • animations and effect 

  • extendible plugins. 

Get Started using jQuery:
jQuery needs to add library in html or web page which is a .js file that contains Ajax funcions, effects, DOM, events ...etc. You can download jQuery library from http://docs.jquery.com/Downloading_jQuery

Sample to start with jQuery:

After downloading jQuery library add it to page like below:

<!DOCTYPE html>
<html >
<head>
<title>jQuery Demo</title>
    <script type="text/javascript" src="jquery.js"></script>
</head>
<body>
  <form id="Form1" method="post" runat="server">

  </form>
</body>
</html>