My Coding World: Day 9

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  <title>jQuery Demo here</title>
  <style type="text/css">
   .red{color:red;}
   .blue{color:blue;}
   .green{color:green;}
   .myborder{color:black;border:1px solid red;background-color:yellow;}
   

  </style>
  
  <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
  <script type="text/javascript">
   $(document).ready(function() {
    var arr = ["apple", "orange", "lemon"]; 
    
    function alertMe(){
     alert(1);
    }
    
    $("button").click(function(){
     $(".p1").addClass("red");
     $("#orderedlist > li").removeClass("blue");
     //alertMe();
     //$(".p1").slideToggle();
    }); 

    //$("#orderedlist > li").addClass("blue");
    /*
    $("#orderedlist li:last").hover(function(){
         $(this).addClass("green");
       },function(){
         $(this).removeClass("green");
       });
*/
     $("#orderedlist > li").find("li").each(function(counter) {
         $(this).append( " BAM! " + counter );
     });

     $("#reset").click(function() {
         $("form")[0].reset();
     });

     //$("li").not(":has(ul)").css("border", "1px solid black"); 
     $("li").not(":has(ul)").addClass("myborder"); 

     //$("li").each(function(i){
    //  $(this).text(arr[i]);
     //}); 
    var txt="";
     for(var i=0; i<arr.length; i++){
      txt += "<li>"+arr[i]+"</li>";
     } 
     $("#orderedlist").html(txt);

     $("div").last().hide();
     $("div").css("border", "1px solid black").css("width", "100px")
      .hover(function(){
      $(this).next().slideToggle();
     });
   });   
  </script>
 </head>
 <body>
  <div>this is header</div>
  <div>this is description</div>
 
  <ul id="orderedlist"></ul>
  
  <form class="a">
   <input type="text" value="" />
   <a href="#" id="reset">reset all</a>
  </form>
  <form class="a">
   <input type="text" value="" />   
  </form> 
  
  <button>Toggle Paragraph</button>
  <p class="p1">Try my first jQuery here<br/>
  Try my first jQuery here<br/>
  Try my first jQuery here<br/>
  Try my first jQuery here<br/>
  Try my first jQuery here<br/>
  Try my first jQuery here
  </p>
 </body>
</html>
My Coding World

Search This Blog

Thursday, June 21, 2012

Day 9 - JQuery Demo

No comments:

Post a Comment
