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 EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
jQuery中的deferred对象和extend方法详解
May 08 jQuery
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
Jquery EasyUI $.Parser
Jun 02 jQuery
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
jquery实现图片放大镜效果
Dec 23 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生成excel时单元格内换行问题的解决方法
2010/08/26 PHP
php模板函数 正则实现代码
2012/10/15 PHP
php判断ip黑名单程序代码实例
2014/02/24 PHP
Mac系统下使用brew搭建PHP(LNMP/LAMP)开发环境
2015/03/03 PHP
建立良好体验度的Web注册系统ajax
2007/07/09 Javascript
javascript 折半查找字符在数组中的位置(有序列表)
2010/12/09 Javascript
JS自动缩小超出大小的图片
2012/10/12 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
2013/02/01 Javascript
举例讲解jQuery中可见性过滤选择器的使用
2016/04/18 Javascript
Jquery ajax请求导出Excel表格的实现代码
2016/06/08 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
2018/09/18 Javascript
详解为生产环境编译Angular2应用的方法
2018/12/10 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
2019/02/12 Javascript
webpack4实现不同的导出类型
2019/04/09 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
2019/05/10 Javascript
javascript使用正则表达式实现注册登入校验
2020/09/23 Javascript
在阿里云服务器上配置CentOS+Nginx+Python+Flask环境
2016/06/18 Python
Python中摘要算法MD5,SHA1简介及应用实例代码
2018/01/09 Python
Jupyter安装nbextensions,启动提示没有nbextensions库
2020/04/23 Python
使用pandas中的DataFrame数据绘制柱状图的方法
2018/04/10 Python
python验证码识别教程之利用投影法、连通域法分割图片
2018/06/04 Python
pygame游戏之旅 计算游戏中躲过的障碍数量
2018/11/20 Python
python GUI库图形界面开发之PyQt5中QWebEngineView内嵌网页与Python的数据交互传参详细方法实例
2020/02/26 Python
基于Python pyecharts实现多种图例代码解析
2020/08/10 Python
美国高端寝具品牌:Coyuchi
2017/02/08 全球购物
俄罗斯最大的灯具网站:Fandeco
2020/03/14 全球购物
父母对孩子的寄语
2014/04/09 职场文书
创先争优标语
2014/06/27 职场文书
司机岗位职责说明书
2014/07/29 职场文书
2014年超市工作总结
2014/11/19 职场文书
爱心捐助活动总结
2015/05/09 职场文书
js实现模拟购物商城案例
2021/05/18 Javascript
分享CSS盒子模型隐藏的几种方式
2022/02/28 HTML / CSS
动画「进击的巨人」第86话播出感谢绘公开
2022/03/21 日漫
JavaScript正则表达式实现注册信息校验功能
2022/05/30 Java/Android
Android Gradle 插件自定义Plugin实现注意事项
2022/06/16 Java/Android