bink绑定事件

hover合成事件

代码示例：

<!DOCTYPE html>

<html>

  <head>

    <title>test1.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>

    <style type="text/css">

        #panel{

            width:300px;

            height:300px;

            border:1px solid;

        }

        #head{

            background:red;

        }

        #content{

            width:100px;

            height:100px;

            border:1px solid;

        }

    </style>

    <script type="text/javascript">

        $(function(){

            //hover合成事件

            /* $("#head").hover(function(){

            $(this).next().show();

            },function(){

                $("#content").hide();

            }); */

            //绑定事件b

            $("#head").bind("click",function(){

                $("#content").show();

            });

        });

    </script>

  </head>

  <body>

    <div id="panel">

        <h5 id="head">什么是jquery</h5>

        <div id="content" style="display:none">jquery是一门前端的语言</div>

    </div>

  </body>

</html>

模拟操作：trigger(触发自定义的事件)

<!DOCTYPE html>

<html>

  <head>

    <title>test5.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>

    <script type="text/javascript">

        $(function(){

            //自定义事件

        /*     $("#btn").bind("myclick",function(){

                $("#div1").append("<p>never</p>");

            }); */

            //自定义带参数的事件

            /* $("#btn").bind("myclick",function(event,mes1,mes2){

                $("#div1").append("<p>never"+mes1+mes2+"</p>");

            }); */

            $("input").bind("focus",function(){

                $("#div1").append("<p>never</p>");

            });

            //触发自定义事件

            /* $("#btn").trigger("myclick"); */

            //触发带参数的自定义事件：注意参数是以数组的形式传送

            /* $("#btn").trigger("myclick",["111","222"]); */

            //不仅触发为input元素绑定的focus事件，也会使得input元素本身得到焦点。

            //$("input").trigger("focus");

            //只会触发为input元素绑定的focus事件，不会使得input元素本身得到焦点。

            $("input").triggerHandler("focus");

        });

    </script>

  </head>

  <body>

    <button id="btn">button</button>

    <div id="div1" style="width:100px;height:100px;border:1px solid;"></div>

    input:<input type="text" value="hello world">

  </body>

</html>

事件对象的属性：event.type , event.preventDefault 等

<!DOCTYPE html>

<html>

  <head>

    <title>test3.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>

    <script type="text/javascript">

        $(function(){

        /*     $("#sub").click(function(event){

                //event.type事件的类型

                alert(event.type);

            }); */

            //event.preventDefault() 阻止默认事件的行为********

            $("#sub").click(function(event){

                var name = $("#username").val();

                if(name==null||name==""){

                    event.preventDefault();

                } ;

            });

            //event.target获取到触发事件的元素

            /* $("#a1").click(function(event){

                alert(event.target);

                return false;  // 阻止链接跳转

            }); */

            //event.pageX和event.pageY获取相当于光标对于页面的x坐标和y坐标

            /* $("body").click(function(event){

                alert("x:"+event.pageX+"   y:"+event.pageY);

            }); */

            //event.which在鼠标点击事件中获取鼠标的左（1），中（2），右（3）键

            /* $("#username").mousedown(function(event){

                alert(event.which);

            }); */

            //获得键盘的按键

            /* $("#username").keyup(function(event){

                alert(event.which);

            }); */

            //event.metaKey*********

            /* $("#username").click(function(event){

                alert(event.metaKey);

            }) */;

        });

    </script>

  </head>

  <body>

      <a href="test1.html">超链接</a>

      <form action="test1.html">

          用户名：<input type="text" id="username"/>

          <input type="submit" value="提交" id="sub"/>

      </form>

      <div id="msg" style="border:1px solid;width:100px;height:100px"></div>

       <a id="a1" href="http://baidu.com">百度</a>

       <div id="div1" style="width:100px;height:100px;border:1px solid"></div>

       <span>span元素</span>

       <input id="inp1" type="text">

  </body>

</html>

jQuery当中的事件（第六章ppt）的更多相关文章

  1. 锋利jQuery 学习整理之 第六章 jQuery 与Ajax 的应用

    1.Ajax 的XMLHttpRequest 对象 XMLHttpRequest 是Ajax 的核心,它是Ajax 实现的关键---发送异步请求.接受响应及执行回调都是通过它来完成的.XMLHttpR ...

  2. jQuery系列 第六章 jQuery框架事件处理

    第六章 jQuery框架事件处理 JavaScript以事件驱动来实现页面的交互,其核心是以消息为基础,以事件来驱动.虽然利用传统的JavaScript事件处理方式也能够完成页面交互,但jQuery框 ...

  3. 进击的Python【第十六章】：Web前端基础之jQuery

    进击的Python[第十六章]:Web前端基础之jQuery 一.什么是 jQuery ? jQuery是一个JavaScript函数库. jQuery是一个轻量级的"写的少,做的多&quo ...

  4. 第三章 jQuery中的事件与动画

    第三章jQuery中的事件与动画 一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.wind ...

  5. 第一百六十九节，jQuery，基础事件

    jQuery,基础事件 学习要点: 1.绑定事件 2.简写事件 3.复合事件 JavaScript 有一个非常重要的功能,就是事件驱动.当页面完全加载后,用户通过鼠标 或键盘触发页面中绑定事件的元素即 ...

  6. JQuery制作网页—— 第七章 jQuery中的事件与动画

    1. jQuery中的事件: ●和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现 ●jQuery事件是对JavaScript事件的封装,常用事件 ...

  7. 第4章 jQuery中的事件和动画

    4.1 jQuery中的事件 4.1.1 加载DOM jQuery就是用 `$(document).ready()方法来代替传统JavaScript的window.onload方法的. 1.执行时机 ...

  8. 第六章-jQuery

    jQuery的理念是: 写更少的代码, 完成更多的工作 jQuery有两个版本1.x和2.x, 版本2.x不再支持IE678 jQuery最明显的标志就是$, jQuery把所有的功能都封装在了jQu ...

  9. 第3章 jquery中的事件和动画

    一,jquery中的事件 (1).执行时机 $(document).ready()和window.onload方法有相似的功能,但是在执行时机方面有区别,windwo.onload在网页中所有的元素包 ...

随机推荐

  1. Linux Uptime 命令，让你知道你的系统运行了多久

    对于一些人来说系统运行了多久是无关紧要的,但是对于服务器管理员来说,这是相当重要的信息.服务器在运行重要应用的时候,必须尽量保证长时间的稳定运行,有时候甚至要求零宕机.那么我们怎么才能知道服务器运行了 ...

  2. React.js基础知识

    一. react.js的基本使用方法 (1)快速使用,hello world <div id="app"></div> <script src=&qu ...

  3. 使用e.target.dataset的问题

    在微信开发中我们经常会用到标签中属性的属性值,有时候我们通过 data-* 和 e.target.dateset 来获取属性值会出现一点小bug,即是调用出来的数据是undefined. 1)方案1– ...

  4. org.springframework.web.HttpRequestMethodNotSupportedException: Request method 'GET' not supported解决！

    org.springframework.web.HttpRequestMethodNotSupportedException: Request method 'GET' not supported解决 ...

  5. codevs 3305 水果姐逛水果街Ⅱ&&codevs3006

    题目描述 Description 水果姐第二天心情也很不错,又来逛水果街. 突然,cgh又出现了.cgh施展了魔法,水果街变成了树结构(店与店之间只有一条唯一的路径). 同样还是n家水果店,编号为1~ ...

  6. Opencv 学习笔记之——鼠标，进度条操作

    Opencv中提供一个鼠标调用的函数,SetMouseCallback()函数,它配合一个回调函数来实现鼠标操作的功能.   首先看一下SetMouseCallback的函数原型: c++: void ...

  7. LeetCode 4 :Majority Element

    problem:Given an array of size n, find the majority element. The majority element is the element tha ...

  8. Kuangbin带你飞 AC自动机

    模板: struct Ac_Automation { int ch[MAXNNODE][SIGMA_SIZE]; int val[MAXNNODE]; int fail[MAXNNODE],last[ ...

  9. springboot 整合jdbcTemplate

    springboot 整合jdbcTemplate 〇.搭建springboot环境(包括数据库的依赖) 一.添加依赖 如果导入了jpa的依赖,就不用导入jdbctemplete的依赖了jpa的依赖: ...

  10. selenium+python自动化79-文件下载（SendKeys）【转载】

    前言 文件下载时候会弹出一个下载选项框,这个弹框是定位不到的,有些元素注定定位不到也没关系,就当没有鼠标,我们可以通过键盘的快捷键完成操作. SendKeys库是专业的处理键盘事件的,所以这里需要用S ...