jquery background height change
===

I anm new to jquery so  I am learning the JQuery from w3schools.com .The below code is from w3sch

     <!DOCTYPE html>
     <html>
      <head>
      <script type="text/javascript" src="jquery.js"></script>
      <script type="text/javascript">
      $(document).ready(function(){
      $("button").click(function(){
      $("#div1").height("200px");
      });
      });
    </script>
     </head>

    <body>
    <div id="div1" style="background:yellow;height:100px;width:100px">HELLO</div>
    <div style="background:yellow;height:100px;width:100px">W3SCHOOLS</div>
    <button>Click me</button>
     </body>

I saved it as some_name.htm. When I open the it in browser it is as follows:

![enter image description here][1]

but when i click on **Click me** there is no change in the size.

according to code and flow the height should increase

anyone knows how to get this working ??


  [1]: http://i.stack.imgur.com/njYjz.png