JavaScript Tutorial/jQuery/Event Mouse — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
| |
Текущая версия на 08:25, 26 мая 2010
Содержание
- 1 30. Cascaded Mouse leave event
- 2 30. Mouse down event
- 3 30. mousedown(fn) event fires when the pointing device button is pressed over an element.
- 4 30. Mouse enter
- 5 30. Mouse enter event
- 6 30. mouseenter event triggering
- 7 30. Mouse leave event
- 8 30. mouseleave event triggering
- 9 30. mousemove(fn) event fires when mouse is moved
- 10 30. Mouse out event
- 11 30. mouseout(fn) event fires when mouse is moved away from an element.
- 12 30. Mouse over action
- 13 30. Mouse over event
- 14 30. mouseover event triggering
- 15 30. Mouse up event
- 16 30. Show texts when mouseup and mousedown event triggering.
- 17 30. Show the mouse coordinates when the mouse is moved over the yellow div. Coordinates are relative to the window which in this case is the iframe.
30. Cascaded Mouse leave event
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").mouseover(function(){
$(this).append("<span style="color:#F00;">mouseover.</span>");
}).mouseleave(function(){
$(this).append("<span style="color:#00F;">mouseleave</span>");
});
});
</script>
</head>
<body>
<body>
<div>adsf</div>
</body>
</html>
30. Mouse down event
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").mouseup(function(){
$(this).append("<span style="color:#F00;">Mouse up.</span>");
}).mousedown(function(){
$(this).append("<span style="color:#00F;">Mouse down.</span>");
});
});
</script>
</head>
<body>
<body>
<div>adsf</div>
</body>
</html>
30. mousedown(fn) event fires when the pointing device button is pressed over an element.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").mouseup(function(){
$(this).append("<span style="color:#F00;">Mouse up.</span>");
}).mousedown(function(){
$(this).append("<span style="color:#00F;">Mouse down.</span>");
});
});
</script>
<style>
div.dbl { background:yellow;color:black; }
</style>
</head>
<body>
<body>
<p>Press mouse and release here.</p>
</body>
</html>
30. Mouse enter
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").mouseover(function(){
$(this).append("<span style="color:#F00;">mouseover.</span>");
}).mouseenter(function(){
$(this).append("<span style="color:#00F;">mouseenter</span>");
});
});
</script>
</head>
<body>
<body>
<div>adsf</div>
</body>
</html>
30. Mouse enter event
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("h1").bind("mouseenter mouseleave", function(e){
var str = "( " + e.pageX + ", " + e.pageY + " )";
$("h1").text("Click happened! " + str);
});
});
</script>
</head>
<body>
<body>
<div><h1>header 1</h1></div>
</body>
</html>
30. mouseenter event triggering
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").mouseenter(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>
</head>
<body>
<body>
<p>
<span>Move the mouse over the div.</span>
<span> </span>
</p>
<div>asdf</div>
</body>
</html>
30. Mouse leave event
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("h1").bind("mouseenter mouseleave", function(e){
var str = "( " + e.pageX + ", " + e.pageY + " )";
$("h1").text("Click happened! " + str);
});
});
</script>
</head>
<body>
<body>
<div><h1>header 1</h1></div>
</body>
</html>
30. mouseleave event triggering
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").mouseleave(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>
</head>
<body>
<body>
<p>
<span>Move the mouse over the div.</span>
<span> </span>
</p>
<div>asdf</div>
</body>
</html>
30. mousemove(fn) event fires when mouse is moved
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("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>
</head>
<body>
<body>
<p>
<span>Move the mouse over the div.</span>
<span> </span>
</p>
<div>asdf</div>
</body>
</html>
30. Mouse out event
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").mouseover(function(){
$(this).append("<span style="color:#F00;">mouseover.</span>");
}).mouseout(function(){
$(this).append("<span style="color:#00F;">mouseout</span>");
});
});
</script>
</head>
<body>
<body>
<div>adsf</div>
</body>
</html>
30. mouseout(fn) event fires when mouse is moved away from an element.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").mouseout(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>
</head>
<body>
<body>
<p>
<span>Move the mouse over the div.</span>
<span> </span>
</p>
<div>asdf</div>
</body>
</html>
30. Mouse over action
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("b").mouseover(function () {
$(this).css({"background-color" : "yellow", "font-weight" : "bolder"});
});
});
</script>
</head>
<body>
<body>
<b>Hello</b>
</body>
</html>
30. Mouse over event
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").mouseover(function(){
$(this).append("<span style="color:#F00;">mouseover.</span>");
}).mouseenter(function(){
$(this).append("<span style="color:#00F;">mouseenter</span>");
});
});
</script>
</head>
<body>
<body>
<div>adsf</div>
</body>
</html>
30. mouseover event triggering
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").mouseover(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>
</head>
<body>
<body>
<p>
<span>Move the mouse over the div.</span>
<span> </span>
</p>
<div>asdf</div>
</body>
</html>
30. Mouse up event
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").mouseup(function(){
$(this).append("<span style="color:#F00;">Mouse up.</span>");
}).mousedown(function(){
$(this).append("<span style="color:#00F;">Mouse down.</span>");
});
});
</script>
</head>
<body>
<body>
<div>adsf</div>
</body>
</html>
30. Show texts when mouseup and mousedown event triggering.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").mouseup(function(){
$(this).append("<span style="color:#F00;">Mouse up.</span>");
}).mousedown(function(){
$(this).append("<span style="color:#00F;">Mouse down.</span>");
});
});
</script>
<style>
div.dbl { background:yellow;color:black; }
</style>
</head>
<body>
<body>
<p>Press mouse and release here.</p>
</body>
</html>
30. Show the mouse coordinates when the mouse is moved over the yellow div. Coordinates are relative to the window which in this case is the iframe.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("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>
</head>
<body>
<body>
<p>
<span>Move the mouse over the div.</span>
<span> </span>
</p>
<div>asdf</div>
</body>
</html>