2021年10月7日 星期四

jQuery 系列 事件基本觀念 執行彈出訊息

 


$(選取對象).事件項目(執行動作,事件回傳)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Event</title>
<style>
*{margin: 0px;}
body{width: 610px;
margin: 10px auto}
section{
width: 600px;
background-color: #04A0A3;
margin: 3px;
}
span{
background-color: #01C43C;
width: 100px;
display: inline-block;
text-align: center;
margin-right: 5px;
}
#contant{background-color: #999966}
</style>
<script src="jquery-2.1.4.js"></script>
<script>
$(document).ready(function(){
//alert(123)
$("h3").mouseover(function(event){
alert("hi~")
})
})

</script>
</head>
<body>
<form action="">
<h3>事件說明</h3>
<section><span>文字輸入:</span><input type="text"></section>
<section><span>密碼輸入:</span><input type="password"></section>
<section><span>下拉選單:</span>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</section>
<section><span>表單送發:</span><input type="submit" value=""></section>
<section><span>選取圓鈕:</span><input type="radio" name="" id=""></section>
<section><span>核取方塊:</span><input type="checkbox" name="" id=""></section>
<section><span>基本按鈕:</span><input type="button" value=""></section>
</form>
<hr/>
<div id="contant">訊息內容</div>

</body>

</html>

沒有留言:

張貼留言

新鮮人必知的勞動權益 課後測驗

  青年職涯發展中心的服務不包括哪一項? * 3/3 職涯諮詢 模擬面試 履歷健檢 找另一半   職業適性測驗 職涯講座 團體學習 企業參訪   通訊保障及監察法(通保法)適用對象為 * 10/10 兩者皆是   兩者皆非 公務員 民間從業人員   近期社會上Mee too事件頻...