2015年3月9日

[教學] jQuery學習筆記 第四堂（hover語法：滑鼠移過表格時，該列產生不同格式色彩或字體）

      , , , , ,  

在閱讀網頁表格的時候，如果表格太多，瀏覽網頁的人常會無法對齊，不知道自己現在看的是哪一列，這時候，有一個作法是把奇數列和偶數列用不同的底色呈現，就像我們在上一堂課所教的，可參考：jQuery學習筆記 第二堂。

另一種辦法是我們這裡要用的，我們想要讓滑鼠移到某一列的時候（完成結果），那一列的底色就會變色，讓我們看看要怎麼做吧！

這一堂課會學到的語法包含：

hover( , )
addClass( )
remove( )

首先我們利用第二堂課建立的表格當作範例：
先在body裡面，建立表格，並把表格的id取名叫做type


接著，同樣利用前幾堂課所學的CSS，先幫表格美化一下，建立樣式：
除此之外，這裡要利用「.」來新建一個名稱為enter的class，是當滑鼠移過時會產生的效果。


一樣，先寫好jQuery的起手勢，分別是「引入jQuery」，還有「當網頁準備好的時候執行...」


接著要來寫jQuery中hover的語法。
第一步要寫的是請針對id為type的表格的列（tr）執行hover這個指令


然後，因為hover會同時包含滑鼠移入時和移出時的兩個動作，所以我們要在hover的中間逗號，等等前後會分別加入兩個不同的指令


hover的前後，我們會分別執行兩個不同的動作，讓我們先把function打好


前面的funtion我們要寫的是，當滑鼠移入的時候，請把該列的格式增加class（這時同時會用到 addClass 這個指令），這時候就是要增加我們剛剛建立的enter的這個class。


後面的function則是寫，當滑鼠移出時，請把該列的enter格式移除（這時會用到 removeClass 這個指令）


做到這一步其實就大功告成了，不難吧～！！


讓我們來看看完成的結果吧！

程式範例

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>滑鼠移入移出效果，用jQuery的hover函式</title>
    <style>
        #type{border:1px purple solid; border-collapse: collapse; width:300px;}
        #type td{border:1px purple solid; text-align: center}
        #type th{background-color: purple; color:white}
        .enter{background-color: #0099CC; color:white}
    </style>
    <script src="jquery-1.11.2.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#type tr").hover(function(){
                $(this).addClass("enter")
            },function(){
                $(this).removeClass("enter")
            })
        })
    </script>
</head>
<body>

<table id="type">
<tr>
    <th> 座號 </th>
    <th> 身高 </th>
</tr>
<tr>
    <td> 01</td>
    <td>130</td>
</tr>
<tr>
    <td>02</td>
    <td>140</td>
</tr>
<tr>
    <td> 03</td>
    <td>145</td>
</tr>
<tr>
    <td> 04</td>
    <td>150</td>
</tr>
<tr>
    <td> 05</td>
    <td>155</td>
</tr>
<tr>
    <td> 06</td>
    <td>160</td>
</tr>
</table>

</body>
</html>

以上內容均為本人在馬老師雲端研究室學習所整理之筆記