Hello All, We are going to start new batch from next week. message/call or mail us for more details.

7 September 2013

JQuery Event function

JQuery Event handlers are method that is called whenever any event is generated or raised in HTML control. For example if I will click on the button then event will raise and all <label> element will hide from page.

JQuery events:

$(document).ready(function(){})
This event raise one time html loading has finished.
$(document).click(function())
This event when raise if any element click like button.
$(document).focus(function())
This event when raise if any element is selected
$( selector).dblclick(function())
This event when raise if any element double click like button.
$(selector).mouseover(function())
This event when raise if mouse pointer over on element

Code:

<head runat="server">
    <title></title>
 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 
    <script type="text/javascript">
        $(document).ready(function()
         {
             $("button").click(function()//click method will execute when button is clicked
             {
                $("label").hide();//label element will hide from page
            });
        });
    </script>
 
</head>
<body>
    <h2>
        Information</h2>
    Name--><label>
        Tom</label>
    <br />
    <br />
    Age--><label>
        23</label>    <br />
    <br />
    City--><label>
        Newyork</label>
    <br />
    <br />
    School--><label>
        St.Thomas</label>
    <br />
    <br />
    <button>
        Clear</button></body>
</html>
All label will be visible on the page  as shown below:
JQuery Event function
If I click on the clear button all label will hide from page as shown below:
JQuery Event function

No comments:

Post a Comment