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 相关文章推荐
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
jQuery中的for循环var与let的区别
Apr 21 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
jquery插件懒加载的示例
Oct 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 上传文件的方法(类)
2009/07/30 PHP
linux下删除7天前日志的代码(php+shell)
2011/01/02 PHP
php中文验证码实现方法
2015/06/18 PHP
分享微信扫码支付开发遇到问题及解决方案-附Ecshop微信支付插件
2015/08/23 PHP
PHP简单计算两个时间差的方法示例
2017/06/20 PHP
php中文语义分析实现方法示例
2019/09/28 PHP
laravel 实现关闭CSRF(全部关闭、部分关闭)
2019/10/21 PHP
Jquey拖拽控件Draggable使用方法(asp.net环境)
2010/09/28 Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
2012/02/27 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
2013/06/26 Javascript
JS正则表达式验证数字代码
2014/01/28 Javascript
javascript setinterval 的正确语法如何书写
2014/06/17 Javascript
Javascript编写2048小游戏
2015/07/07 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
2016/04/30 Javascript
JS去除空格和换行的正则表达式(推荐)
2016/06/14 Javascript
js实现简单的碰壁反弹效果
2016/08/30 Javascript
详解Vue自定义过滤器的实现
2017/01/10 Javascript
vue.js与后台数据交互的实例讲解
2018/08/08 Javascript
vue 基于element-ui 分页组件封装的实例代码
2018/12/10 Javascript
js类的继承定义与用法分析
2019/06/21 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
2019/08/09 Javascript
python操作mysql数据库
2017/03/05 Python
pyqt5 从本地选择图片 并显示在label上的实例
2019/06/13 Python
python selenium登录豆瓣网过程解析
2019/08/10 Python
Python中使用gflags实例及原理解析
2019/12/13 Python
解决pytorch报错:AssertionError: Invalid device id的问题
2020/01/10 Python
Java爬虫技术框架之Heritrix框架详解
2020/07/22 Python
python3列表删除大量重复元素remove()方法的问题详解
2021/01/04 Python
CSS3对背景图片的裁剪及尺寸和位置的设定方法
2016/03/07 HTML / CSS
英国HYPE双肩包官网:英国本土时尚潮牌
2018/09/26 全球购物
加拿大在线隐形眼镜和眼镜店:VisionPros
2019/10/06 全球购物
对党的十八届四中全会的期盼
2014/10/17 职场文书
党员教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
2014年个人业务工作总结
2014/11/17 职场文书
财务负责人岗位职责
2015/02/03 职场文书
2016学校先进集体事迹材料
2016/02/29 职场文书