使用jquery hover事件實現表格的隔行換色功能示例

2019-11-20 22:20:29

字體：大中小

來源：轉載

供稿：網友

jQuery hover事件

hover(over,out)一個模仿懸停事件（鼠標移動到一個對象上面及移出這個對象）的方法。這是一個自定義的方法，它為頻繁使用的任務提供了一種“保持在其中”的狀態。
當鼠標移動到一個匹配的元素上面時，會觸發指定的第一個函數。當鼠標移出這個元素時，會觸發指定的第二個函數。而且，會伴隨著對鼠標是否仍然處在特定元素中的檢測（例如，處在div中的圖像），如果是，則會繼續保持“懸停”狀態，而不觸發移出事件（修正了使用mouseout事件的一個常見錯誤）。

參數：
over (Function) : 鼠標移到元素上要觸發的函數
out (Function): 鼠標移出元素要觸發的函數

示例：
鼠標懸停的表格加上特定的類

jQuery 代碼：

復制代碼代碼如下:

 
$(".table_list tr").hover( 
function () { 
$(this).addClass("hover"); 
}, 
function () { 
$(this).removeClass("hover"); 
} 

); 

這里自己注意幾點：

1,.hover是個類，想要什么效果自己寫。

2,別忘記引入jquery.js文件，要不然不起作用還報錯。

3,相比于傳統的css，比如this.bgColor='red'這樣的方式，簡單很多了，不需要再一行行添加了。

4,當然可以實現奇偶行效果不同，讀者自己去研究吧。

今日發現一個更為簡單的辦法，就是使用jquery的each方法，這個只需要一行代碼既可以實現隔行換色效果。只不過不會隨著鼠標的移動而變化罷了。

復制代碼代碼如下:

 
$(".tablist tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]}); 

上一篇：iframe的父子窗口之間的對象相互調用基本用法

下一篇：使用js操作cookie的一點小收獲分享

學習交流

索泰發布一款GTX 1070 Mini迷你版本:小機

索泰發布一款GTX 1070 Mini迷你版本:小機箱大愛...

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注

麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

使用jquery hover事件實現表格的隔行換色功能示例