1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>菜鸟教程(runoob.com)</title> 6 <script src="http://cdn.static.runoob.com/libs/jquery/2.0.0/jquery.min.js"> 7 </script> 8 <script> 9 $(document).ready(function(){ 10 $("button").click(function(){ 11 $(this).hide(); 12 }); 13 }); 14 </script> 15 <script> 16 $(document).ready(function(){ 17 $("a").click(function(){ 18 $(this).hide(); 19 }); 20 }); 21 </script> 22 </head> 23 24 <body> 25 <a>点我看看</a> 26 <button>点我</button> 27 </body> 28 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>菜鸟教程(runoob.com)</title> 6 <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"> 7 </script> 8 <script> 9 $(document).ready(function(){ 10 $("button").click(function(){ 11 $(".test").hide(); 12 }); 13 }); 14 </script> 15 </head> 16 <body> 17 18 <h2 class="test">这是一个标题</h2> 19 <p class="test">这是一个段落。</p> 20 <p>这是另外一个段落。</p> 21 <button>点我</button> 22 </body> 23 </html>
1 !DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>菜鸟教程(runoob.com)</title> 6 <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"> 7 </script> 8 <script> 9 $(document).ready(function(){ 10 $("p").dblclick(function(){ 11 $(this).hide(); 12 }); 13 }); 14 </script> 15 </head> 16 <body> 17 18 <p>双击鼠标左键的，我就消失。</p> 19 <p>双击我消失！</p> 20 <p>双击我也消失！</p> 21 22 </body> 23 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>菜鸟教程(runoob.com)</title> 6 <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"> 7 </script> 8 <script> 9 $(document).ready(function(){ 10 $("#p1").mouseenter(function(){ 11 alert('您的鼠标移到了 id="p1" 的元素上!'); 12 }); 13 }); 14 </script> 15 </head> 16 <body> 17 18 <p id="p1">鼠标指针进入此处，会看到弹窗。</p> 19 20 </body> 21 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>菜鸟教程(runoob.com)</title> 6 <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"> 7 </script> 8 <script> 9 $(document).ready(function(){ 10 $("#p1").mouseleave(function(){ 11 alert("再见，您的鼠标离开了该段落。"); 12 }); 13 }); 14 </script> 15 </head> 16 <body> 17 18 <p id="p1">这是一个段落。</p> 19 20 </body> 21 </html>
mousedown鼠标按下事件
<script>
$(document).ready(function(){
$("#p1").mousedown(function(){
alert("鼠标在该段落上按下");
});
});
</script>
<body>
<p id="p1">这是一个段落</p>
</body>
mouseup鼠标按下放开事件
<script>
$(document).ready(function(){
$("#p1").mouseup.(function(){
alert("鼠标在段落上松开");
})
})
</script>
<body>
<p id="p1" >这是一个段落<p>
</body>