| 事件 | 描述 |
|---|---|
| .click() | 鼠标指针在元素里面时点击触发 |
| .dblclick() | 为JavaScript 的 “dblclick” 事件绑定一个处理函数，或者触发元素上的 “dblclick” 事件。 |
| .mouseup() | 当鼠标指针在元素内，并且鼠标按键被释放时触发 |
| .hover() | 当鼠标移动到元素上时触发 |
| .mouseleave() | 当鼠标从元素上移开时触发 |
| .mousemove() | 当鼠标指针在元素内移动时触发 |
例子
- .click()
<!DOCTYPE html>
<html>
<head>
<script src="../js/jQuery3.3.1.js"></script>
<script>
$("p").click(function () {
$(this).slideUp();
});
});
</script>
</head>
<body>
<p>点击隐藏</p>
<p>点击隐藏</p>
<p>点击隐藏</p>
</body>
</html>
- .dblclick()
双击时改变背景色。
<!DOCTYPE html>
<html>
<head>
<style>
div { background:blue;
color:white;
height:100px;
width:150px;
}
div.dbl { background:yellow;color:black; }
</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div></div><span>Double click the block</span>
<script>
var divdbl = $("div:first");
divdbl.dblclick(function () {
divdbl.toggleClass('dbl');
});
</script>
</body>
</html>
- .mouseup()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Press mouse and release here.</p>
<script>
$("p").mouseup(function(){
$(this).append('<span style="color:#F00;">Mouse up.</span>');
}).mousedown(function(){
$(this).append('<span style="color:#00F;">Mouse down.</span>');
});
</script>
</body>
</html>
- .hover()
<!DOCTYPE html>
<html>
<head>
<style>
ul { margin-left:20px; color:blue; }
li { cursor:default; }
span { color:red; }
</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<ul>
<li>Milk</li>
<li>Bread</li>
<li class='fade'>Chips</li>
<li class='fade'>Socks</li>
</ul>
<script>
$("li").hover(
function () {
$(this).append($("<span> ***</span>"));
},
function () {
$(this).find("span:last").remove();
}
);
//li with fade class
$("li.fade").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});
</script>
</body>
</html>
- .mouseleave()
<!DOCTYPE html>
<html>
<head>
<style>
div.out {
width:40%;
height:120px;
margin:0 15px;
background-color:#D6EDFC;
float:left;
}
div.in {
width:60%;
height:60%;
background-color:#FFCC00;
margin:10px auto;
}
p {
line-height:1em;
margin:0;
padding:0;
}
</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="out overout"><p>move your mouse</p><div class="in overout"><p>move your mouse</p><p>0</p></div><p>0</p></div>
<div class="out enterleave"><p>move your mouse</p><div class="in enterleave"><p>move your mouse</p><p>0</p></div><p>0</p></div>
<script>
var i = 0;
$("div.overout").mouseover(function(){
$("p:first",this).text("mouse over");
}).mouseout(function(){
$("p:first",this).text("mouse out");
$("p:last",this).text(++i);
});
var n = 0;
$("div.enterleave").mouseenter(function(){
$("p:first",this).text("mouse enter");
}).mouseleave(function(){
$("p:first",this).text("mouse leave");
$("p:last",this).text(++n);
});
</script>
</body>
</html>
- .mousemove()
<!DOCTYPE html>
<html>
<head>
<style>
div { width:220px; height:170px; margin: 10px 50px 10px 10px;
background:yellow; border:2px groove; float:right; }
p { margin:0; margin-left:10px; color:red; width:220px;
height:120px; padding-top:70px;
float:left; font-size:14px; }
span { display:block; }
</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>
<span>Move the mouse over the div.</span>
<span> </span>
</p>
<div></div>
<script>
$("div").mousemove(function(e){
var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";
$("span:first").text("( e.pageX, e.pageY ) : " + pageCoords);
$("span:last").text("( e.clientX, e.clientY ) : " + clientCoords);
});
</script>
</body>
</html>
扫一扫
362
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
