jQuery鼠标事件之click与dbclick事件
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
.test2 {background: #bbffaa;}
.test3 {background: yellow;}
.test2,.test3{border: 1px solid red;}
</style>
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>.click()方法</h2>
<h4>测试一</h4>
<button>元素绑定事件,弹出回调中的this</button>
<script type="text/javascript">
//this指向button元素
$("button:eq(0)").click(function() {
alert(this)
})
</script>
<h4>测试二</h4>
<div class="test2">
<p>dblclick</p>
</div>
<button>指定触发事件</button>
<script type="text/javascript">
$('p').dblclick(function(e) {
alert(e.target.textContent)
})
//this指向button元素
$("button:eq(1)").click(function() {
$('p').dblclick() //指定触发绑定的事件
})
</script>
<h4>测试三</h4>
<button>不同函数传递数据</button>
<script type="text/javascript">
//不同函数传递数据
function data(e) {
alert(e.data)
}
function a() {
$("button:eq(2)").click(12345, data)
}
a();
</script>
</body>
</html>
jQuery鼠标事件之mousedown与mouseup事件
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
.test2 {background: #bbffaa;}
.test3 {background: yellow;}
.test2,.test3 {border: 1px solid red;}
</style>
</style>
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>.mousedown()方法</h2>
<h4>测试一</h4>
<button>弹出回调中的鼠标键</button>
<script type="text/javascript">
//this指向button元素
$("button:eq(0)").mousedown(function(e) {
alert('e.which: ' + e.which)
})
</script>
<h4>测试二</h4>
<div class="test2">
<p>$('button:first').mousedown(function(e) {alert(this)})</p>
</div>
<button>指定触发事件</button>
<script type="text/javascript">
$('p').mousedown(function(e) {
alert(e.target.textContent)
})
//this指向button元素
$("button:eq(1)").mousedown(function() {
$('p').mousedown() //指定触发绑定的事件
})
</script>
<h4>测试三</h4>
<button>不同函数传递数据</button>
<script type="text/javascript">
//不同函数传递数据
function data(e) {
alert(e.data) //1111
}
function a() {
$("button:eq(2)").mousedown(1111, data)
}
a();
</script>
</body>
</html>
jQuery鼠标事件之mousemove事件
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
.left div,.right div {width: 300px;height: 80px;padding: 5px;margin: 5px;border: 1px solid #ccc;}
.left div {background: #bbffaa;}
.right div {background: yellow;}
</style>
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>.mousemove()方法</h2>
<h4>测试一</h4>
<button>点击：指定触发mousemove事件</button>
<script type="text/javascript">
$('h2').mousemove(function(e) {
alert('触发h2元素绑定的mousemove')
})
$("button:eq(0)").click(function(e) {
$('h2').mousemove() //指定触发绑定的事件
})
</script>
<h4>测试二</h4>
<div class="left">
<div class="aaron1">
<p>鼠标在绿色区域移动触发mousemove</p>
<p>移动的X位置：</p>
</div>
</div>
<script type="text/javascript">
//绑定一个mousemove事件
//触发后修改内容
$(".aaron1").mousemove(function(e) {
$(this).find('p:last').html('移动的X位置：' + e.pageX)
})
</script>
<h4>测试三</h4>
<div class="right">
<div class="aaron3">
<p>鼠标移动：不同函数传递数据</p>
<p>数据：</p>
</div>
</div>
<script type="text/javascript">
//不同函数传递数据
function data(e) {
$(this).find('p:last').html('数据:' + e.data)
}
function a() {
$(".right").mousemove(11811, data)
}
a();
</script>
</body>
</html>
jQuery鼠标事件之mouseover与mouseenter
<html>
<head>
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript">
x=0;
y=0;
$(document).ready(function(){
$("div.over").mouseover(function(){
$(".over span").text(x+=1);
});
$("div.enter").mouseenter(function(){
$(".enter span").text(y+=1);
});
});
</script>
</head>
<body>
<p>不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。</p>
<p>只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</p>
<div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">
<h2 style="background-color:white;">被触发的 Mouseover 事件：<span></span></h2>
</div>
<div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">
<h2 style="background-color:white;">被触发的 Mouseenter 事件：<span></span></h2>
</div>
</body>
</html>
jQuery鼠标事件之mouseout与mouseleave
<html>
<head>
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript">
x=0;
y=0;
$(document).ready(function(){
$("div.over").mouseout(function(){
$(".over span").text(x+=1);
});
$("div.enter").mouseleave(function(){
$(".enter span").text(y+=1);
});
});
</script>
</head>
<body>
<p>不论鼠标指针穿过被选元素或其子元素，都会触发 mouseout 事件。</p>
<p>只有在鼠标指针穿过被选元素时，才会触发 mouseleave 事件。</p>
<div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">
<h2 style="background-color:white;">被触发的 Mouseout 事件：<span></span></h2>
</div>
<div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">
<h2 style="background-color:white;">被触发的 Mouseleave 事件：<span></span></h2>
</div>
</body>
</html>
jQuery鼠标事件之hover事件
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
p{transition: ease .3s;color: #bbffaa}
</style>
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>hover()方法</h2>
<p>嘻嘻哈哈</p>
<script type="text/javascript">
$("p").hover(
function() {
$(this).css("color", 'red');
},
function() {
$(this).css("color", '#bbffaa');
}
);
</script>
</body>
</html>
jQuery鼠标事件之focusin事件
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
input{outline: 0;}
</style>
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>.focusin()方法</h2>
<p>点击聚焦：<input type="text" /></p>
<p>点击聚焦并传递参数：<input type="text" /></p>
<script type="text/javascript">
//input聚焦
//给input元素增加一个边框
$("input:first").focusin(function() {
$(this).css('border','1px solid red')
})
//不同函数传递数据
function fn(e) {
$(this).val(e.data)
}
function a() {
$("input:last").focusin('慕课网', fn)
}
a();
</script>
</body>
</html>
jQuery鼠标事件之focusout事件
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>.focusout()方法</h2>
<p>点击触发失去焦点：<input type="text" /></p>
<p>点击触发失去焦点并传递参数：<input type="text" /></p>
<script type="text/javascript">
//input失去焦点
//给input元素增加一个边框
$("input:first").focusout(function() {
$(this).css('border','2px solid red')
})
//不同函数传递数据
function fn(e) {
$(this).val(e.data)
}
function a() {
$("input:last").focusout('慕课网', fn)
}
a();
</script>
</body>
</html>
