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实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
jQuery操作之效果详解
May 19 jQuery
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
jQuery 动画与停止动画效果实例详解
May 19 jQuery
原生jQuery实现只显示年份下拉框
Dec 24 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 ignore_user_abort与register_shutdown_function 使用方法
2009/06/14 PHP
PHP之APC缓存详细介绍 apc模块安装
2014/01/13 PHP
php字符串过滤与替换小结
2015/01/26 PHP
PHP魔术方法的使用示例
2015/06/23 PHP
PHP实现批量修改文件后缀名的方法
2015/07/30 PHP
[原创]php实现 data url的图片生成与保存
2016/12/04 PHP
WHOOPS PHP调试库的使用
2017/09/29 PHP
php框架CI(codeigniter)自动加载与自主创建对象操作实例分析
2020/06/06 PHP
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
2014/11/08 Javascript
Javascript实现禁止输入中文或英文的例子
2014/12/09 Javascript
nodejs批量修改文件编码格式
2015/01/22 NodeJs
JavaScript 七大技巧(一)
2015/12/13 Javascript
jquery实现无刷新验证码的简单实例
2016/05/19 Javascript
Node.js 日志处理模块log4js
2016/08/28 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
2016/12/27 Javascript
three.js实现3D视野缩放效果
2017/11/16 Javascript
jQuery实现的简单对话框拖动功能示例
2018/06/05 jQuery
浅谈在vue中使用mint-ui swipe遇到的问题
2018/09/27 Javascript
一步步教你利用Docker设置Node.js
2018/11/20 Javascript
微信小程序实现的一键连接wifi功能示例
2019/04/24 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
2020/08/03 Javascript
python机器学习实战之树回归详解
2017/12/20 Python
Python动态导入模块的方法实例分析
2018/06/28 Python
Python对象转换为json的方法步骤
2019/04/25 Python
Python面向对象进阶学习
2019/05/21 Python
利用selenium爬虫抓取数据的基础教程
2019/06/10 Python
pytorch 求网络模型参数实例
2019/12/30 Python
Python 生成VOC格式的标签实例
2020/03/10 Python
python字典和json.dumps()的遇到的坑分析
2020/03/11 Python
全球销量第一生发产品:Viviscal
2017/12/21 全球购物
幼儿园五一活动方案
2014/02/07 职场文书
家具促销活动方案
2014/02/16 职场文书
2014年学校安全工作总结
2014/11/13 职场文书
土地租赁协议书
2015/01/29 职场文书
狼牙山五壮士观后感
2015/06/09 职场文书
2019安全宣传标语大全
2019/08/14 职场文书