learn jquery basic

by Deborah

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<div class="container">
    <p><a href="http://www.google.com" target="_blank">Link</a></p>
    <p><a href="http://www.google.com" target="_blank">Link 2</a></p>
    
    <div id="stuff" class="stuff">This will use "show" animate</div>
    <button id="show">show</button>
    
    <div id="morestuff" class="morestuff">This will use more animation options</div>
    <button id="animate">animate</button>
    
    <div id="stuff3" class="morestuff">This will fade</div>
    <button id="fade">fade</button>
    
    <div id="stuff4" class="morestuff">This will slide</div>
    <button id="slide">slide</button>
    
    <div class="clickable">hi clickable</div>
    <div>hi not clickable</div>
    <div id="foo">foo clickable</div>
    <div id="handler">I have a handler</div>
    <div id="event">I have an event</div>
    
    <ul id="changeable">
        <li>bullet 1</li>
        <li>bullet 2 <span>span</span></li>
    </ul>
    
    <form>
        <input type="text" />
    </form>
    <form>
        <input type="text" />
    </form>
    <form>
        <input type="text" />
    </form>
    <button id="resetfirst">reset first</button>
    <button id="resetall">reset all</button>
    <button id="reset">reset</button>
</div>

CSS

body {
 font-family: Arial;   
}

.container {
  padding: 1em;    
}

p {
 padding: .5em;   
}

a, a:visited {
 color: #2d9afd;   
}

.changed {
  color: #ff0099;   
}

.highlight {
  background: #faffda;   
}

.entered {
  color: #f5560a;
}

.green {
 color: #7fbf38;   
}

.hellomouse, .clickable, #foo, #event {
 cursor: pointer;   
}

div {
  margin: 1em 0;   
}

#foo {
 display: inline-block;   
}



ul {
 margin: 1em 0;   
}

.form, form, .stuff, .morestuff, stuff3 {
    margin: 1em 0;
    padding: 1em;
    background: #ececec;
}

input {
 font-size: 1.1em;
 padding: 2px;    
}

.placeholder {
   color: #ff0099;  
   font-weight: normal; 
}

::-webkit-input-placeholder {
   color: #cccccc;
}

:-moz-placeholder {  
   color: #cccccc;  
}

:-ms-input-placeholder {
    color: #cccccc;
}

:focus::-webkit-input-placeholder {
    color:transparent;
}

.content {
    margin-top: 5px;
    padding: 1em;
    background: #eeeeee;     
}

JavaScript

// learn basic jquery
// http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

  // no need to specify document ready
  $(function(){
   
   // don't wait         
   $("#changeable > li > span").addClass("changed");  
   
   // functions - wait for action
   $("a").hover(function(){
     $(this).parents("p").addClass("highlight");
   },function(){
     $(this).parents("p").removeClass("highlight");
   });  
     
   $("div[class='clickable']").click(function() {
     alert("Hi!");
   }); 
   
   // -----  these separate binds can be combined ------     
   //$('#foo').bind('click', function() {
   //   alert('User clicked on "foo."');
   //});
     
   $('#foo').bind('mouseenter mouseleave', function() {
      $(this).toggleClass('entered');
   });
     
   // ------------------------
   
   // ways combine bind events     
   $('#foo').bind({
      click: function() {
        alert('User clicked on "foo."');
      }
      // this does not work very well - class sticks
      //  mouseenter: function() {
      //   $(this).toggleClass('entered');
      //  }
   });
     
   $("#changeable li:last").hover(function() {
      $(this).addClass("green");
         },function(){
      $(this).removeClass("green");
   });
     
   $('#event').bind('click', function() {
      alert($(this).text());
   });
     
   $("#changeable").find("li").each(function(i) {
     $(this).append( " BAM! " + i);
   });
     
   // this would reset the first form on the page
   $("#resetfirst").click(function() {
     $("form")[0].reset();
   });
     
   // use this to reset all forms on the page at once
   $("#resetall").click(function() {
     $("form").each(function() {
       this.reset();
     });
   });
     
   // this would reset the second form on the page for array 0, 1, 2
   $("#reset").click(function() {
     $("form")[1].reset();
   });
   
   // some animation options 
   // http://ralphwhitbeck.com/demos/jqueryui/effects/easing/      
   $("a").toggle(function(){
  ...