jquery学习

 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鼠标按下事件

$(document).ready(function(){

$("#p1").mousedown(function(){

alert("鼠标在该段落上按下");

});

</script>

<body>

<p id="p1">这是一个段落</p>

</body>

mouseup鼠标按下放开事件

$(document).ready(function(){

$("#p1").mouseup.(function(){

alert("鼠标在段落上松开");

})

</script>

<body>

<p id="p1" >这是一个段落<p>

</body>