題目1：利用Jquery來設計為表格添加隔行換色并且滑鼠指向某行，改行變色的功能，
問題1：未分清楚Jquery的事件型別：來源：菜鳥網
一開始想用“focus”、“blur”觸發table事件，它們其實是form表單是事件，
問題2：hover和mouseenter、mouseleave的區別：
hover() 方法規定當滑鼠指標懸停在被選元素上時要運行的兩個函式，
$("tr").hover(function(){
$(this).addClass("abd");
},function(){
$(this).removeClass("abd");
})
方法觸發 mouseenter 和 mouseleave 事件，
注意: 如果只指定一個函式，則 mouseenter 和 mouseleave 都執行它，
$(function(){
$("tr").mouseenter(function(){
$(this).addClass("abc");
})
$("tr").mouseleave(function(){
$(this).removeClass("abc");
})
})
二者等效
題目2：用Jquery制作猜拳游戲，
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function(){
$(":image").mouseenter(function(){ // ********疑問：為什么click觸發后，向頁面添加顯示結果時會一閃而過，而mouseenenter或者hover會正常添加顯示************
var un=$(this).val(); //用戶出拳數
//alert(un);
un=parseInt(un);//從form取過來的值是字串，需要轉換為int
var computer=Math.floor(Math.random()*3)+1; //alert(computer);//電腦出拳數
var result="";//最后輸出的結果字串
switch(un)
{
case 1: result+="你出石頭";break;
case 2: result+="你出剪子";break;
case 3: result+="你出布";break;
}//alert(result);處理un的結果
switch(computer)
{
case 1: result+="，電腦出石頭";break;
case 2: result+="，電腦出剪子";break;
case 3: result+="，電腦出布";break;
}//alert(result);
switch(un-computer)
{
case 0:result+="，平局";break;
case 1:result+="，你輸了";break;
case -1:result+="，你贏了";break;
case 2:result+="，你贏了";break;
case -2:result+="，你輸了";break;
}//alert(result);
var start = document.getElementById("show");
var child = document.createElement("p");
var child_value = document.createTextNode(result);
child.appendChild(child_value);
start.appendChild(child);
start.style.color="black";
start.style.fontSize="36px";
start.style.textAlign="center";
})
})//function
</script>
</head>
<body>
<div>
<form style="text-align:center">
<input type="image" id="shitou" value="1" style="width:60px;height:60px" src="./img/stone.jpg" />
<input type="image" id="jiandao" value="2" style="width:60px;height:60px" src="./img/scissors.jpg" />
<input type="image" id="bu" value="3" style="width:60px;height:60px" src="./img/cloth.jpg" /><br>
</form>
</div>
<div id="show" align="center">
玩家 電腦 結果
</div>
</body>
</html>
</body>
</html>
顯示結果
問題2疑問有疑問，用click觸發，向html頁面輸出結果時會閃過，希望讀者不吝賜教，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/241423.html
標籤：其他
上一篇：縱橫杯babymaze1WP