6月 12, 2011

jquery

<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
    <script type = "text/javascript" >
        $(document).ready(function () {
            $("a").click(function () { alert("hello!"); return false; }); //對a標籤
            $("#hp").click(function () { alert("hello!"); return false; }); //對ID為HP
            $(".mp").click(function () { alert("hello!"); return false; }); //對class為mp 各自獨立
            $("*").addClass(); //表示所有物件
            //$("#bb1").click(function () { $("#Image1").addClass('css'); }); //套用CSS


            $("#box").hide();
            $("#bb1").click(function () { $("#box").toggle("slow"); });
            //屌光棒
            $("tr").hover(function () { $(this).addClass('color'); }, function () { $(this).removeClass('color'); });


            $("#bb1").click(function () { $("#tb1").attr({ disabled: "disabled" }); });


 


        });
    </script>
    <style type="text/css">
   
    .css{border:1px solid #ababab;}
    .color{background-color: red;}
        .style1
        {
            width: 100%;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
   
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <a href="#">dowmload</a>
    <a href="#" id="hp">dowmload2</a>
    <a href="#" class="mp">dowmload3</a><br>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Button ID="bb1" runat="server" Text="Button" /><br>
        </ContentTemplate>
   
    </asp:UpdatePanel>
    <asp:TextBox ID="tb1" runat="server"></asp:TextBox>
    <asp:Image ID="Image1" runat="server" ImageUrl="~/img/logo.png" />
    <div class="asd" id="box">
    123456789
    </div>


 



    </form>
            <table class="style1" id="bg">
                <tr>
                    <td>
                        1</td>
                </tr>
                <tr>
                    <td>
                        2</td>
                </tr>
                <tr>
                    <td>
                        3</td>
                </tr>
                <tr>
                    <td>
                        4</td>
                </tr>
                <tr>
                    <td>
                        5</td>
                </tr>
                <tr>
                    <td>
                        6</td>
                </tr>
            </table>
</body>
</html>

沒有留言: