Simple jQuery table example

Simple jQuery example

HTML

<span> <h1>Hi My Name is Mani</h1> <span>
    table
<table border="1">
  <tr>
    <th>Company</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbköp</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
</table>
<div id="target">
  Click here
</div>
<div id="other">
  Trigger the handler
</div>
<p id="p1" style="font-weight: bold;">Changeevent: </p>
<input class="target" type="text" value="Field 1">
  <select class="target">
    <option value="option1" selected="selected">Option 1</option>
    <option value="option2">Option 2</option>
  </select>
<div id="Animate" style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
    <div style="margin-top:120px"><button id="append">Append text to List</button></div>
    <li>mani</li>

JavaScript

$(document).ready(function () {
    //Selector
    $("h1").hide();
    $("tr:even").hide();
    //Events
    $("#target").click(function () {
        alert('clicked');
        $(this).hide();
        //$(this).slideUp("slow"); //slideToggle
        //Chaining
        $(this).css("color", "red").slideUp(2000).slideDown(2000);
    });
    $("#other").click(function () {
        $("#target").click();
    });
    $( ".target" ).keypress(function(event) {
  		console.log( event.which +"is pressed" );
	});
    $( ".target" ).change(function() {
  		alert( "Handler for .change() called." );
	});
    $("#p1").mouseenter(function(){
        alert("You entered p1!");
    });
    //Effects - Animate
    $("#Animate").click(function(){
        var div = $(this);  
        div.animate({left: '100px'}, "slow");
        //With call backfunction
        div.animate({fontSize: '3em'}, "slow",function(){alert('with callback')}); 
    });
    $("#append").click(function(){
        $("li").append(" <li><b>Appended text</b></li>");
    });

});