jquey復習(一) – JAVA編程語言程序開發技術文章

<!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() {


    /*
    $(p>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(“p”)).addClass(“red”);
     */
    //?    $(li).not([p]).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(p).addClass(green);


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


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


    });
</script>


</head>
<body>
    <p>one</p>
    <p>
        <p>two</p>
    </p>
    <p>three</p>
    <ul>
        <li>i</li>
        <li>like</li>
        <li style=”display: no”>you</li>
        <li>ok
            <p>this is a p</p></li>
        <li name=”hi”>have a name</li>
    </ul>
    <p>
        <a href=”Googlewww.google.com”>Google</a> <br /> <a href=”Baiduwww.baidu.com”>Baidu</a>
        <br /> <a href=”Yahoowww.yahoo.com”>Yahoo</a> <br />
    </p>
</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;
}


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


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


            $(p[name*=p1]).addClass(“red”).end().toggle(function() {
                $(p[class*=yellow]).hide(slow);
            }, function() {
                $(p[class*=yellow]).show(fast);
            });
            $(p[name*=p2]).addClass(“green”);
         */
        /*
         $(“a”).toggle(function() {


         $(“p[name*=p1]”).animate({
         height : “hide”,
         opacity : hide
         }, “slow”);
         }, function() {
         $(“p[name*=p2]”).animate({
         height : “show”,
         opacity : show
         }, “slow”);
         });
         */


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


    <p name=”p1″ class=”red”>p1</p>
    <p name=”p2″ class=”green”>p2</p>
    <p class=”yellow”>p3</p>
    <p class=”black”>p4</p>


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



    <table id=”large” cellspacing=”0″>
        <thead>


         

發佈留言