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>

  • 相关阅读:
    PHP 扩展开发
    redis 简单动态字符串 SDS
    解决 call to undefined function mssql_connect 报错
    aws lnmp环境搭建 绑定域名
    PHP 内存管理 写时复制 垃圾回收
    CSS3详解:transform、transition
    详细图解window环境mongodb下载、安装、配置与使用
    介绍一款好用 mongodb 可视化工具
    安装MongoDB启动时报错‘发生系统错误2’的解决办法
    .md即markdown文件的基本常用编写语法
  • 原文地址:https://www.cnblogs.com/tiansan/p/7804630.html
Copyright © 2011-2022 走看看