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实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
jQuery实现一个简单的验证码功能
Jun 26 jQuery
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
jquery实现简单自动轮播图效果
Jul 29 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
一个用于mysql的数据库抽象层函数库
2006/10/09 PHP
ThinkPHP中公共函数路径和配置项路径的映射分析
2014/11/22 PHP
php ImageMagick windows下安装教程
2015/01/26 PHP
phalcon框架使用指南
2016/02/23 PHP
老生常谈php 正则中的i,m,s,x,e分别表示什么
2017/03/02 PHP
javascript 读取XML数据,在页面中展现、编辑、保存的实现
2009/10/27 Javascript
js 模拟实现类似c#下的hashtable的简单功能代码
2010/01/24 Javascript
JSON 学习之JSON in JavaScript详细使用说明
2010/02/23 Javascript
JQuery Ajax 跨域访问的解决方案
2010/03/12 Javascript
判断浏览器的javascript版本的代码
2010/09/03 Javascript
javascript使用isNaN()函数判断变量是否为数字
2013/09/21 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
2013/09/29 Javascript
将json对象转换为字符串的方法
2014/02/20 Javascript
详解Bootstrap插件
2016/04/25 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
2016/05/25 Javascript
jQuery EasyUI常用数据验证汇总
2016/09/18 Javascript
JavaScript获取服务器时间的方法详解
2016/12/11 Javascript
微信小程序如何获取用户手机号
2018/01/26 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
2018/12/13 Javascript
[02:09]2018DOTA2亚洲邀请赛TNC赛前采访
2018/04/04 DOTA
pytorch获取模型某一层参数名及参数值方式
2019/12/30 Python
基于Python实现人脸自动戴口罩系统
2020/02/06 Python
Keras SGD 随机梯度下降优化器参数设置方式
2020/06/19 Python
Python实现石头剪刀布游戏
2021/01/20 Python
DKNY品牌官网:纽约大都会时尚风格
2016/10/20 全球购物
英国图书音像网站:Hive.co.uk(图书、电子书、DVD、蓝光、音乐CD等)
2017/10/16 全球购物
美国在线肉类和海鲜配送:Crowd Cow
2020/10/02 全球购物
IBatis持久层技术
2016/07/18 面试题
卫校护理专业毕业生求职信
2013/11/26 职场文书
公司培训欢迎词
2014/01/10 职场文书
网络技术专业推荐信
2014/02/20 职场文书
幼儿园教师获奖感言
2014/03/11 职场文书
节水标语大全
2014/06/11 职场文书
初级党校心得体会
2014/09/11 职场文书
2014大学生学生会工作总结
2014/12/19 职场文书
2019年大学推荐信
2019/06/24 职场文书