jQuery.事件
一、是什么
jQuery事件是對JavaScript事件的封裝，常用事件分類如下：
- 基礎事件
- 滑鼠事件
- 鍵盤事件
- 表單事件
- 復合事件，是多個事件的組合
- 滑鼠游標懸停
- 滑鼠連續點擊
二、滑鼠事件
滑鼠事件是當用戶在檔案上移動或單擊滑鼠時而產生的事件，常用滑鼠事件有：
代碼實體如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滑鼠事件</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<style type="text/css">
li {
list-style: none;
float: left;
text-decoration: none;
padding: 0px 5px;
}
.show1 {
background-color: blueviolet;
}
</style>
</head>
<body>
<script type="text/javascript">
$(function(){
$("li").mouseover(function(){//當滑鼠移動到導航欄時觸發
$(this).addClass("show1");//添加了一個樣式
});
$("li").mouseout(function(){//當滑鼠移出導航欄時觸發
$(this).removeClass();//移除樣式
});
});
</script>
<ul>
<li>首頁</li>
<li>電器城</li>
<li>服裝城</li>
<li>生活用品</li>
</ul>
</body>
</html>
運行結果如下：
三、鍵盤事件
用戶每次按下或者釋放鍵盤上的鍵時都會產生事件，常用鍵盤事件有：
代碼實體如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鍵盤事件</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
</head>
<body>
<script type="text/javascript">
$(function(){
$("[type=password]").keydown(function(){
$("#show").append("keydown");
}).keyup(function(){
$("#show").append("keyup");
}).keypress(function(){
$("#show").append("keypress");
});
$(document).keydown(function(event){
if(event.keyCode=="13"){
alert("確認要提交嗎??");
}
});
});
</script>
用戶名<input type="text" name="userName"><br/>
密碼<input type="password" name="pwd"><br/>
<input type="submit" value="提交"><br/>
<span id="show"></span>
</body>
</html>
運行結果如下：
四、表單事件
當元素獲得焦點時，會觸發focus事件，失去焦點時，會觸發blur事件，詳見下表：
代碼實體如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表單事件</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<style type="text/css">
.show2 {
background-color: aqua;
}
</style>
</head>
<body>
<script type="text/javascript">
$(function () {
$("[type=text]").focus(function () {
$(this).addClass("show2");
});
$(" [type=text]").blur(function () {
$(this).removeClass();
});
});
</script>
用戶名<input type="text" name="userName"><br />
密碼<input type="password" name="pwd"><br />
<input type="submit" value="提交"><br />
<span id="show"></span>
</body>
</html>
運行結果如下：
五、系結事件
除了使用事件名系結事件外，還可以使用bind()方法
代碼示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
</head>
<body>
<script type="text/javascript">
$(function () {
$("#show3").bind("click", function () {
$("p").css("background-color", "aqua");
});
$("li").bind({mouseover:function(){
$("p").css("display", "none");
},mouseout:function() {
$("p").css("display","block");}
});
});
</script>
<h2>hahahha</h2>
<p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈或</p>
<hr/>
<button id="show3"> 點我</button>
<ul>
<li>看我</li>
</ul>
</body>
</html>
運行結果如下：
六、移除事件
移除事件使用unbind()方法，其語法如下：
七、滑鼠游標懸停事件
hover()方法相當于mouseover與mouseout事件的組合
代碼實體如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<style type="text/css">
li {
list-style: none;
float: left;
text-decoration: none;
padding: 0px 5px;
}
#show4{
list-style: none;
float: none;
}
</style>
</head>
<body>
<script type="text/javascript">
$(function(){
$("#l1").hover(function(){//游標移入時觸發
$("#show4").css("display","block");
},function(){//游標移出時觸發
$("#show4").css("display","none");
});
});
</script>
<ul>
<li>首頁</li>
<li id="l1">電器城
<ul id="show4" style="display: none;">
<li>電腦</li>
<li>電視</li>
<li>冰箱</li>
<li>洗衣機</li>
</ul>
</li>
<li>家具</li>
</ul>
</body>
</html>
運行結果如下：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/266389.html
標籤：其他
上一篇：雙飛翼布局