jQuery复合事件用法示例


Posted in jQuery onJune 10, 2017

本文实例讲述了jQuery复合事件用法。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>复合事件</title>
  <style type="text/css" >
    a{
      color:#000;
      text-decoration:none;
    }
    ul{
      list-style:none;
    }
    ul li{
      width:140px;
    }
    #menu_1{
      border:1px dotted #666;
      border-top:none;
      padding:0px 5px 5px 5px;
    }
    #menu_1 li{
      margin: 5px 0px;
    }
    li.fli{
      display:block;
      float:left;
      padding:0px 10px;
    }
  </style>
  <script src="js/jquery-1.8.3.js" type="text/javascript"></script>
  <script language="JavaScript">
    $(document).ready(function () {
      $("#myaccound").hover(
          function () {
            $("#menu_1").css("display","block");
          },
          function () {
            $("#menu_1").css("display","none");
          });
    });
  </script>
</head>
<body>
<div id="nav">
  <ul>
    <li class="fli"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >我的订单</a></li>
    <li class="fli" id="myaccound">
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >我的宜美惠?</a>
      <ul id="menu_1" style="display:none;">
        <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >我的优惠券</a></li>
        <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >收藏夹</a></li>
        <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >短信息</a></li>
      </ul>
    </li>
    <li class="fli"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >我网站导航?</a></li>
  </ul>
</div>
</body>
</html>

运行效果图如下:

jQuery复合事件用法示例

PS:这里再附上javascript常见事件与功能说明的在线对照表供大家参考:

javascript事件与功能说明大全:
http://tools.3water.com/table/javascript_event

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
jQuery获取随机颜色的实例代码
May 21 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
jQuery位置选择器用法实例分析
Jun 28 jQuery
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
jQuery实现本地存储
Dec 22 jQuery
jQuery简单绑定单个事件的方法示例
Jun 10 #jQuery
jQuery正则验证注册页面经典实例
Jun 10 #jQuery
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 #jQuery
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 #jQuery
jQuery为某个div加入行样式
Jun 09 #jQuery
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 #jQuery
jQuery Validate表单验证插件实现代码
Jun 08 #jQuery
You might like
用PHP实现图象锐化代码
2007/06/14 PHP
遍历指定目录下的所有目录和文件的php代码
2011/11/27 PHP
PHP 设计模式之观察者模式介绍
2012/02/22 PHP
在WordPress中安装使用视频播放器插件Hana Flv Player
2016/01/04 PHP
php生成网页桌面快捷方式
2017/05/05 PHP
php对微信支付回调处理的方法
2018/08/23 PHP
超级强大的表单验证
2006/06/26 Javascript
利用jquery操作select下拉列表框的代码
2010/06/04 Javascript
javascript中的delete使用详解
2013/04/11 Javascript
常用原生JS兼容性写法汇总
2016/04/27 Javascript
功能强大的Bootstrap使用手册(一)
2016/08/02 Javascript
js创建对象几种方式的优缺点对比
2016/09/28 Javascript
jQuery-mobile事件监听与用法详解
2016/11/23 Javascript
js 判断登录界面的账号密码是否为空
2017/02/08 Javascript
详解用webpack2搭建angular2的项目
2017/06/22 Javascript
JavaScript 自定义事件之我见
2017/09/25 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
2018/10/19 Javascript
通过js示例讲解时间复杂度与空间复杂度
2019/08/06 Javascript
Javascript查看大图功能代码实现
2020/05/07 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
2020/07/13 Javascript
如何实现vue的tree组件
2020/12/03 Vue.js
Python使用matplotlib简单绘图示例
2018/02/01 Python
Python实现查询某个目录下修改时间最新的文件示例
2018/08/29 Python
Django实现一对多表模型的跨表查询方法
2018/12/18 Python
伦敦高达60%折扣的钻石珠宝商:Purely Diamonds
2018/06/24 全球购物
Herve Leger官网:标志性绷带连衣裙等
2018/12/26 全球购物
台湾家适得:Homeget
2019/02/11 全球购物
说出你对remoting 和webservice的理解和应用
2014/06/08 面试题
最新的大学生找工作自我评价
2013/09/29 职场文书
五四演讲稿范文
2014/09/03 职场文书
大学新生军训自我鉴定范文
2014/09/13 职场文书
2015年小学校长工作总结
2015/05/19 职场文书
暗恋桃花源观后感
2015/06/12 职场文书
大学体育课感想
2015/08/10 职场文书
无故旷工检讨书
2015/08/15 职场文书
看完这篇文章获得一些java if优化技巧
2021/07/15 Java/Android