jQuery_事件學習
阿新 • • 發佈：2017-11-09
執行c 其他 ctype 失去焦點 body scrip css code del
一、click事件
click事件----鼠標單擊事件
$(‘.bt‘).click(function() { alert("本身的事件");})
當class為bt的div被但單擊時執行函數體的內容部分
$(‘.bt‘).click(function() {
$(‘.bt2‘).click();
})
當class為bt的div被但單擊時執行class為bt2的div的click（）事件
栗子：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
.bt{
background:#F00;
}
.bt2{
background:#f0f;
display:none;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<div class="bt">click（）鼠標單擊事件</div>
<div class="bt2">間接響應</div>
<script type="text/javascript">
$(‘.bt‘).click(function() {
alert("本身的事件");
$(‘.bt2‘).click();
})
$(‘.bt2‘).click(function() {
alert("調用其他對象綁定的事件");
})
</script>
</body>
</html>
二、mousemove（）和mousemout（）
鼠標移入（當鼠標移入到該元素的內部時觸發）和移出事件（當鼠標移出元素的內部時觸發）
栗子：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<style>
.test{
height:100px;
width:100px;
background:#F00;
}
</style>
<body>
<h2>.mousemove()方法</h2>
<div class="test"></div>
<script type="text/javascript">
//鼠標移入事件
$(".test").mousemove(function(){
$(".test").css({"background":"blue","width":"100px","height":"100px"});
});
//鼠標移出事件
$(".test").mouseout(function(){
$(".test").css({"background":"yellow","width":"50px","height":"50px"});
});
</script>
</body>
</html>
三、hover事件
hover()方法是同時綁定 mouseenter和 mouseleave事件。
使用：hover(function(){
鼠標移入元素時觸發的內容
},function(){
鼠標移出元素時觸發的內容
})
栗子：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
.test{
width:100px;
height:100px;
background:#000;
color:#FFF;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<div class="test">hover()事件</div>
<script type="text/javascript">
$(".test").hover(function(){
$(".test").css("background","red");
},function(){
$(".test").css("background","blue");
});
</script>
</body>
</html>
四、focusin（）聚焦事件和focusout（）失焦事件
聚焦事件--當該元素獲得聚焦時觸發
失焦事件---當該元素失去焦點時觸發
栗子：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<p>聚焦事件：<input class="in"/></p>
<p>失焦事件：<input class="ot"/></p>
<script type="text/javascript">
//input聚焦元素增加一個邊框
$(".in").focusin(function() {
$(this).css(‘border‘,‘2px solid red‘);
});
$(".ot").focusout(function(){
alert("真的要放棄填寫嗎?");
});
</script>
</body>
</html>
jQuery_事件學習