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插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
jQuery操作事件完整实例分析
Jan 10 jQuery
jquery实现烟花效果(面向对象)
Mar 10 jQuery
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
JavaScript枚举选择jquery插件代码实例
Nov 17 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
长波有什么东西
2021/03/01 无线电
咖啡店都有些什么常规豆子呢?有什么风味在里面
2021/03/04 咖啡文化
php简单实现文件或图片强制下载的方法
2016/12/06 PHP
PHP如何实现订单的延时处理详解
2017/12/30 PHP
Thinkphp框架+Layui实现图片/文件上传功能分析
2020/02/07 PHP
封装好的省市地区联动控件附下载
2007/08/13 Javascript
JS打开图片另存为对话框实现代码
2012/12/26 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
2013/07/07 Javascript
JavaScript排序算法之希尔排序的2个实例
2014/04/04 Javascript
JavaScript中的函数嵌套使用
2015/06/04 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
2017/10/14 Javascript
nodejs实现套接字服务功能详解
2018/06/21 NodeJs
在vue项目中引用Iview的方法
2018/09/14 Javascript
js中怎么判断两个字符串相等的实例
2019/01/17 Javascript
vue-router重定向和路由别名的使用讲解
2019/01/19 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
2019/10/08 jQuery
element 动态合并表格的步骤
2020/12/31 Javascript
Python操作mysql数据库实现增删查改功能的方法
2018/01/15 Python
python读取和保存视频文件
2018/04/16 Python
Pyspider中给爬虫伪造随机请求头的实例
2018/05/07 Python
python实现顺序表的简单代码
2018/09/28 Python
python获取中文字符串长度的方法
2018/11/14 Python
不到20行代码用Python做一个智能聊天机器人
2019/04/19 Python
Python列表的切片实例讲解
2019/08/20 Python
python 进程 进程池 进程间通信实现解析
2019/08/23 Python
解决Python import docx出错DLL load failed的问题
2020/02/13 Python
如何安装并在pycharm使用selenium的方法
2020/04/30 Python
阿里健康官方海外旗舰店:阿里健康国际自营
2017/11/24 全球购物
旅游管理专业学生求职信
2013/09/28 职场文书
2014年党员自我评议总结
2014/09/23 职场文书
2015年置业顾问工作总结
2015/04/07 职场文书
确保工程质量承诺书
2015/04/29 职场文书
欢迎新生标语2015
2015/07/16 职场文书
微信小程序实现录音Record功能
2021/05/09 Javascript
python状态机transitions库详解
2021/06/02 Python
详细了解java监听器和过滤器
2021/07/09 Java/Android