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查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
jQuery创建及操作xml格式数据示例
May 26 jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
[jQuery] 事件和动画详解
Mar 05 jQuery
jQuery实现的分页插件完整示例
May 26 jQuery
Jquery 获取相同NAME 或者id删除行操作
Aug 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
全国FM电台频率大全 - 4 山西省
2020/03/11 无线电
杏林同学录(六)
2006/10/09 PHP
Laravel 4.2 中队列服务(queue)使用感受
2014/10/30 PHP
PHP中使用curl伪造IP的简单方法
2015/08/07 PHP
php实用代码片段整理
2016/11/12 PHP
php中实现字符串翻转的方法
2017/02/22 PHP
PHP实现的DES加密解密封装类完整实例
2017/04/29 PHP
PHP创建文件及写入数据(覆盖写入,追加写入)的方法详解
2019/02/15 PHP
Javascript代码混淆综合解决方案-Javascript在线混淆器
2006/12/18 Javascript
关于取不到由location.href提交而来的上级页面地址的解决办法
2009/07/30 Javascript
关于jquery css的使用介绍
2013/04/18 Javascript
jQuery实现单行文字间歇向上滚动源代码
2013/06/02 Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
2013/10/18 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
2013/11/19 Javascript
JavaScript中的Primitive对象封装介绍
2014/12/31 Javascript
浅谈类似于(function(){}).call()的js语句
2015/03/30 Javascript
js基于cookie方式记住返回页面用法示例
2016/05/27 Javascript
jQuery+ajax读取并解析XML文件的方法
2016/09/09 Javascript
jQuery双向列表选择器select版
2016/11/01 Javascript
javascript学习之json入门
2016/12/22 Javascript
微信小程序调用PHP后台接口 解析纯html文本
2017/06/13 Javascript
Nodejs调用WebService的示例代码
2017/09/29 NodeJs
使用Angular CLI进行Build(构建)和Serve详解
2018/03/24 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
2019/07/19 Javascript
微信小程序实现星级评价
2019/11/20 Javascript
vue element 中的table动态渲染实现(动态表头)
2019/11/21 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
2020/08/03 Javascript
Python实现的求解最大公约数算法示例
2018/05/03 Python
TensorFLow 变量命名空间实例
2020/02/11 Python
django model通过字典更新数据实例
2020/04/01 Python
简单聊聊H5的pushState与replaceState的用法
2018/04/03 HTML / CSS
澳大利亚人信任的清洁平台,您的私人管家:Jarvis
2020/12/25 全球购物
自荐书封面下载
2013/11/29 职场文书
消防安全检查制度
2014/02/04 职场文书
银行批评与自我批评
2014/02/10 职场文书
MySQL之MyISAM存储引擎的非聚簇索引详解
2022/03/03 MySQL