<!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(){
//$(對象).事件類型(對應動作)
//滑鼠事件
//.click()---點一下
// $("#contant").val('預設值').click(function(e){alert(e)})
//.contextmenu() -----右鍵功能表
// $("body").contextmenu(function(e){alert("右鍵功能失效");return false})
//.dblclick() -----點二下
// $("input[type=text]").dblclick(function(e){alert(e)})
//.hover() -----滑過時
// $("h3").hover(function(e){alert(e)})
//.mousedown() -----滑鼠按下
// $("#contant").mousedown(function(e){alert("按下")})
//.mouseup() -----滑鼠放開
// $("#contant").mouseup(function(e){alert("放開")})
//.mouseout() -----滑鼠離開
// $("input[type=text]").mouseout(function(e){alert("out")})
//.mouseover() -----滑鼠移過去
// $("input[type=text]").mouseover(function(e){alert("over")})
//.toggle()-----反轉開關
$("input[type=text]").toggle(function(e){alert(e)})
})
</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>
<!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(){
//.keydown() -----鍵盤按下
//$("input[type='text']").keydown(function(e){alert("keydown")})
//.keypress() -----敲擊鍵盤
$("input[type='text']").keypress(function(e){alert("keypress")})
//.keyup()-----鍵盤彈上
//$("input[type='text']").keyup(function(e){alert("keyup")})
})
</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>
表單事件
表
沒有留言:
張貼留言