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. webkit在vs2008中编译

    转载自:http://xjchilli.blog.163.com/blog/static/4534773920091016115533158/ webkit的官方网站写的webkit需要在vs2005 ...

  2. c++ fstream用法

    今天介绍一个复制 粘贴的函数,用fstream实现 #include "stdafx.h" #include<iostream> #include<fstream ...

  3. SCC模板

    vector<int> G[maxn]; int pre[maxn], low[maxn], c[maxn]; int n, m; stack<int> s; int dfst ...

  4. bzoj3786 星际探索 splay dfs序

    这道题 首先 因为他求的是当前点到根节点的路径和 我们可以将题目转换为括号序列的写法 将点拆为左括号以及右括号 左括号为正 右括号为负 这样题目就变为了求前缀和了 如果一个点是这个点的子树 那么他的左 ...

  5. C++11 lambda函数符

    #include<iostream> #include<vector> #include<algorithm> #include<cmath> #inc ...

  6. Oracle基础 05 联机日志 redolog

    --两个相关视图v$logv$logfile alter system switch logfile;  --强制日志切换alter system checkpoint;      --强制检查点 - ...

  7. Oracle基础 02 临时表空间 temp

    --查看临时文件的使用/剩余空间 SQL> select * from v$temp_space_header; --查看SCOTT用户所属的临时表空间 SQL> select usern ...

  8. 【C++】嵌套类、友元

    黄邦勇帅 里面关于嵌套类的介绍我有疑惑.里面11.9说在创建一个外围类的对象时先执行嵌套类的构造函数然后再执行外围类的构造函数,析构函数则以相反的方式执行. 可是我编程实验了一下,创建外围类对象时并不 ...

  9. 回车和换行有什么区别？我们平时按下的Enter键是回车还是换行？

    来源:http://www.52rd.com/blog/Detail_RD.Blog_imjacob_12317.html -------------------------------------- ...

  10. 最小生成树的Kruskal算法

        库鲁斯卡尔(Kruskal)算法是一种按照连通网中边的权值递增的顺序构造最小生成树的方法.Kruskal算法的基本思想是:假设连通网G=(V,E),令最小生成树的初始状态为只有n个顶点而无边的 ...