jquey复习(一)

jquey复习(一)

<! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
< html >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8" >
< title > 1 </ title >
< script  type ="text/javascript"  src ="lib/jquery-1.5.2.js" ></ script >
< style  type ="text/css" >
.red  {
    background :  red ;
}

.green  {
    background :  green ;
}
</ style >

< script  type ="text/javascript" >
     //     $().ready(function() {

     /*
    $('div>p').click(function() {
    alert("选中");
    });
    
    $('ul>li').hover(function() {
    $(this).css("background", 'red');
    }, function() {
    $(this).css("background", 'white');
    });
    

    $('ul>li:last').hover(function() {
    $(this).addClass('green');
    });
     

    $('ul').find('li').each(function(i) {
        $(this).html($(this).html() + "Sam" + i);
    });
     
        $('li').not(':has("div")').addClass("red");
      */
     // ?    $('li').not('[div]').addClass("red");
     // $("li[name]").css("background-color", "#eee");
     /*
    $("a[href*=google]").hover(function() {
        $(this).addClass('green');
    });
      */
     /*
     $('ul').find("li").hover(function() {
     var li = $(this).next();
     if (li.is(':visible')) {
     li.slideUp();
     } else {
     li.slideDown();
     }
     });
      */
     /*
     $('a').hover(function() {
     $(this).parent('div').addClass('green');

     }, function() {
     $(this).parent('div').removeClass('green');
     });
      */

     // });
    $( function () {
         // alert("this simple write !");
         // code to execute when the DOM is ready 

    });
</ script >

</ head >
< body >
     < p > one </ p >
     < div >
         < p > two </ p >
     </ div >
     < p > three </ p >
     < ul >
         < li > i </ li >
         < li > like </ li >
         < li  style ="display: no" > you </ li >
         < li > ok
             < div > this is a div </ div ></ li >
         < li  name ="hi" > have a name </ li >
     </ ul >
     < div >
         < a  href ="www.google.com" > Google </ a >   < br  />   < a  href ="www.baidu.com" > Baidu </ a >
         < br  />   < a  href ="www.yahoo.com" > Yahoo </ a >   < br  />
     </ div >
</ body >
</ html > <! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >

< html >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8" >
< title ></ title >
< script  type ="text/javascript"  src ="lib/jquery-1.5.2.js" ></ script >
< script  type ="text/javascript"  src ="lib/jquery.tablesorter.js" ></ script >
< style  type ="text/css" >
.red  {
    background :  red ;
}

.green  {
    background :  green ;
    display :  none ;
}

.black  {
    background :  black ;
}

.yellow  {
    background :  yellow ;
}

div  {
    width :  100px ;
    height :  100px ;
    font-size :  30px ;
    font-family :  serif ;
}
</ style >

< script  type ="text/javascript" >
    $( function () {
         /*

            $('div[name*=div1]').addClass("red").end().toggle(function() {
                $('div[class*=yellow]').hide('slow');
            }, function() {
                $('div[class*=yellow]').show('fast');
            });
            $('div[name*=div2]').addClass("green");
          */
         /*
         $("a").toggle(function() {

         $("div[name*=div1]").animate({
         height : "hide",
         opacity : 'hide'
         }, "slow");
         }, function() {
         $("div[name*=div2]").animate({
         height : "show",
         opacity : 'show'
         }, "slow");
         });
          */

        $('#large').tableSorter({
            stripingRowClass : [ 'odd', 'even' ],
            stripRowStartUp :  true
        });
    });
</ script >
</ head >
< body >

     < div  name ="div1"  class ="red" > div1 </ div >
     < div  name ="div2"  class ="green" > div2 </ div >
     < div  class ="yellow" > div3 </ div >
     < div  class ="black" > div4 </ div >

     < a  href ="#" > toggle </ a >


     < table  id ="large"  cellspacing ="0" >
         < thead >

             < tr >
                 < th > Email </ th >
                 < th > Id </ th >
                 < th > Phone </ th >
                 < th > Total </ th >
                 < th > Ip </ th >
             </ tr >
         </ thead >
         < tbody >
             < tr >

                 < td > [email protected] </ td >
                 < td > 66672 </ td >
                 < td > 941-964-8535 </ td >
                 < td > $2482.79 </ td >
                 < td > 172.78.200.124 </ td >
             </ tr >
             < tr >

                 < td > 1 </ td >
                 < td > 3 </ td >
                 < td > 5 </ td >
                 < td > 9 </ td >
                 < td > 2 </ td >
             </ tr >
         </ tbody >
     </ table >
</ body >
</ html >