jQuery 初步應用(hover、slideToggle)

這是很簡單的應用，可以參考下面的gif檔

1. 第一、二、三章，按下會滑出，再按一次會收起
2. 圖片滑鼠滑入時會切換，滑出會換回
3. 表格裡奇、偶數列背景色不一，滑鼠滑入滑出會切換背景色

    <script src="scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            $(".MenuTitle p").click(function () {
                //設定class為MenuTitle的標籤，當按下時
                //該標籤的next("div")設為滑動展開及收起
                $(this).next("div").slideToggle();
            });

           //------------------------------------------------------------------
            $("#Img1").hover(
                //id為Img1的標籤，hover(移入,移出)
                //移入時將this()的屬性 attr 中src，改為room2.jpg
                //移出時將this()的屬性 attr 中src，改為room1.jpg
                function () { $(this).attr("src", "images/room2.jpg"); },
                function () { $(this).attr("src", "images/room1.jpg"); }
            );
            //------------------------------------------------------------------
            $("#ResultTable tbody tr:even").css("background-color", "#FFFF99")
                .hover(
                /*
                    這是一直點下去的打法，jQuery支援標籤用「.」來不斷設定
                    可以用空一格來找出其下的標籤，像本例中
                    這是指id為 ResultTable → tbody → tr 標籤中的偽標籤 even
                    even是指偶數，所以會找出表格中每一偶數列，將其css中的
                    背景顏色設為#ffff99, 而hover就是移入移出嘍。

                    移入時將this()的css改變背景色為#99ffff
                    移出時將this()的css改變背景色為#ffff99，也就是改回來
                */
                    function () { $(this).css("background-color", "#99FFFF"); },
                    function () { $(this).css("background-color", "#FFFF99"); }
                );

            //------------------------------------------------------------------
            $("#ResultTable tbody tr:odd").css("background-color", "#FFFFFF")
                .hover(
                 /*
                    本列同上，本來找偶數列，現在改為找奇數列

                    移入時將this()的css改變背景色為#99FFFF
                    移出時將this()的css改變背景色為#FFFFFF，也就是改回來
                */
                    function () { $(this).css("background-color", "#99FFFF"); },
                    function () { $(this).css("background-color", "#FFFFFF"); }
                );                        

        });
    </script>