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 Plupload上传插件的使用
Apr 19 jQuery
简单实现jQuery弹幕效果
May 06 jQuery
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
JQuery样式与属性设置方法分析
Dec 07 jQuery
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
JQuery基于FormData异步提交数据文件
Sep 01 jQuery
jquery插件实现悬浮的菜单
Apr 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
Zend的Registry机制的使用说明
2013/05/02 PHP
php中判断数组相等的方法以及数组运算符介绍
2015/03/30 PHP
input 输入框内的输入事件详细分析
2010/03/17 Javascript
JQuery live函数
2010/12/24 Javascript
javascript动画浅析
2012/08/30 Javascript
javascript中常用编程知识
2013/04/08 Javascript
下拉列表select 由左边框移动到右边示例
2013/12/04 Javascript
js图片处理示例代码
2014/05/12 Javascript
网页中表单按回车就自动提交的问题的解决方案
2014/11/03 Javascript
jQuery大于号(&gt;)选择器的作用解释
2015/01/13 Javascript
JavaScript中获取纯正的undefined的方法
2016/03/06 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
2017/02/07 Javascript
Nodejs多站点切换Htpps协议详解及简单实例
2017/02/23 NodeJs
bootstrap table表格插件使用详解
2017/05/08 Javascript
vue自定义指令directive实例详解
2018/01/17 Javascript
微信 jssdk 签名错误invalid signature的解决方法
2019/01/14 Javascript
前端天气插件tpwidget使用方法详解
2019/06/24 Javascript
在Vue中实现随hash改变响应菜单高亮
2020/03/09 Javascript
js实现无缝轮播图效果
2020/03/09 Javascript
python pandas 对时间序列文件处理的实例
2018/06/22 Python
Python Matplotlib实现三维数据的散点图绘制
2019/03/19 Python
pytorch 实现删除tensor中的指定行列
2020/01/13 Python
Python小白学习爬虫常用请求报头
2020/06/03 Python
python GUI模拟实现计算器
2020/06/22 Python
python利用faker库批量生成测试数据
2020/10/15 Python
css3的过滤效果简单实例
2016/08/03 HTML / CSS
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
2020/08/19 HTML / CSS
微软香港官网及网上商店:Microsoft HK
2016/09/01 全球购物
自荐信不宜过于夸大
2013/11/06 职场文书
父母对孩子说的话
2014/04/12 职场文书
民事诉讼代理委托书
2014/10/08 职场文书
交通事故一次性赔偿协议书范本
2014/11/02 职场文书
2014小学教师年度考核工作总结
2014/12/03 职场文书
2015年物业管理工作总结
2015/04/23 职场文书
详解thinkphp的Auth类认证
2021/05/28 PHP
Java数组与堆栈相关知识总结
2021/06/29 Java/Android