當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaWeb学习笔记：JavaScript-鼠标悬浮和离开
生活随笔
收集整理的這篇文章主要介紹了
JavaWeb学习笔记：JavaScript-鼠标悬浮和离开
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1、任務(wù)：實(shí)現(xiàn)在水果庫存表中鼠標(biāo)懸浮時(shí)該行背景顏色改變，鼠標(biāo)離開后恢復(fù)原狀，且鼠標(biāo)懸浮在單價(jià)單元格出鼠標(biāo)箭頭表為手勢(shì)。
html代碼：
<html><head><meta charset="uf-8"><link rel="stylesheet" href="css/demo02.css"><script type="text/javascript" src="js/demo01.js"></script></head><body><div id="div_container"><div id="div_fruit_list"><table id="tbl_fruit"><tr><th class="w20">名稱</th><th class="w20">單價(jià)</th><th class="w20">數(shù)量</th><th class="w20">小計(jì)</th><th>操作</th></tr><tr><td>蘋果</td><td>5</td><td>20</td><td>100</td><td><img src="img/67a33f27_E773381_b27076b6.png" class="delImg"></td></tr><tr><td>菠蘿</td><td>4</td><td>25</td><td>100</td><td><img src="img/67a33f27_E773381_b27076b6.png" class="delImg"></td></tr><tr><td>榴蓮</td><td>3</td><td>30</td><td>90</td><td><img src="img/67a33f27_E773381_b27076b6.png" class="delImg"></td></tr><tr><td>總計(jì)</td><td colspan="4">999</td></tr></table></div></div></body> </html>css代碼：
body{margin:0;padding:0;background-color:#808080; } div{position:relative;float:left; } #div_container{width:80%;height:100%;border:0px solid blue;margin-left:10%;float:left;background-color:honeydew;border-radius:8px; } #div_fruit_list{width:100%;border:0px solid red; } #tbl_fruit{width:60%;line-height:28px;margin-top:120px;margin-left:20%; } #tbl_fruit,#tbl_fruit tr,#tbl_fruit th,#tbl_fruit td{border:1px solid gray;border-collapse:collapse;text-align:center;font-size:16px;font-family:"黑體";font-weight:lighter;color:threeddarkshadow; } .w20{width:20%; } .delImg{width:24px;height:24px; }js代碼：
window.onload=function(){ //當(dāng)頁面加載完畢我們需要綁定各種事件 //根據(jù)id獲取到表格var fruitTbl=document.getElementById("tbl_fruit"); //獲取表格中的所有行var rows=fruitTbl.rows;for(var i=0;i<rows.length;i++){var tr=rows[i]; //1、綁定鼠標(biāo)懸浮以及離開時(shí)設(shè)置背景顏色事件tr.onmouseover=showBGColor;tr.onmouseout=clearBGColor; //獲取tr這一行的所有單元格var cells=tr.cells;var priceTD=cell[i]; //2、綁定鼠標(biāo)懸浮在單價(jià)單元格變手勢(shì)的事件priceTD.onmouseover=showHand;} }//當(dāng)鼠標(biāo)懸浮時(shí)顯示背景顏色 function showBGColor(){ //event:當(dāng)前發(fā)生的事件 //event.srcElement:事件源 //alert(event.srcElement.tagName);---->獲取TDif(event && event.srcElement && event.srcElement.tagName=="TD"){var td=event.srcElement; //td.parentElement 表示獲取的td的父元素---->TRvar tr=td.parentElement; //如果想要通過js的代碼設(shè)置某節(jié)點(diǎn)的樣式，則需要加上.styletr.style.backgroundColor="navy"; //tr.cells 表示獲取這個(gè)tr中的所有單元格var tds=tr.cells;for(var i=0;i<tds.length;i++){tds[i].style.color="white";}} }//當(dāng)鼠標(biāo)離開時(shí)恢復(fù)原始的樣式 function celarBGColor(){if(event && event.srcElement && event.srcElement.tagName=="TD"){var td=event.srcElement;var tr=td.parentElement;tr.style.backgroundColor="transparent";var tds=tr.cells;for(var i=0;i<tds.length;i++){tds[i].style.color="threeddarkshadow";}} }//當(dāng)鼠標(biāo)懸浮在單價(jià)單元格時(shí)，顯示手勢(shì) function showHand(){if(event && event.srcElement && event.srcElement.tagName=="TD"){var td=event.srcElement; //cursor：光標(biāo)td.style.cursor="hand";} }效果：
?2、關(guān)于window對(duì)象
代表瀏覽器中一個(gè)打開的窗口；
| 對(duì)象 | 描述 |
| clientInfermation | 包含關(guān)于web瀏覽器的信息 |
| clipboardData | 提供了對(duì)于預(yù)定義的剪貼板格式的訪問，以便在編輯器操作中使用 |
| document | 代表給定瀏覽器窗口中的HTML文檔 |
| event | 代表事件狀態(tài)，如事件發(fā)生的元素，鍵盤狀態(tài)，鼠標(biāo)位置和鼠標(biāo)按鈕狀態(tài) |
| external | 允許訪問由Microsoft Internet Exploror瀏覽器組件寄主應(yīng)用程序提供的附加對(duì)象模型 |
| history | 包含了用戶已瀏覽的URL信息 |
| location | 包含關(guān)于當(dāng)前URL的信息 |
| navigator | 包含關(guān)于web瀏覽器的信息 |
| screen | 包含關(guān)于客戶屏幕和渲染能力的信息 |
完結(jié)
總結(jié)
以上是生活随笔為你收集整理的JavaWeb学习笔记：JavaScript-鼠标悬浮和离开的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 爬虫利器初体验 scrapy，爬取豆瓣电
- 下一篇： 视+AR为央视网络春晚助阵，打造央视影音