zoukankan      html  css  js  c++  java
  • 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鼠标按下事件

    <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>

  • 相关阅读:
    oracle查看字符集和修改字符集
    oracle11g 使用数据泵导出导入数据
    Oracle 11G在用EXP 导出时,空表不能导出解决
    帮助小伙伴写的组装xml字符串类
    GCD-01
    UITableViewCell-03
    UITableViewCell-02
    iOS代理-03
    UITableViewCell-01
    iOS代理-02
  • 原文地址:https://www.cnblogs.com/tiansan/p/7804630.html
Copyright © 2011-2022 走看看