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>

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