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图片放大镜效果
Jun 23 jQuery
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
jQuery实现简易QQ聊天框
Feb 10 jQuery
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
jQuery实现动态加载瀑布流
Sep 01 jQuery
jquery插件实现图片悬浮
Apr 16 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
CI框架整合smarty步骤详解
2016/05/19 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
tagName的使用,留一笔
2006/06/26 Javascript
JavaScript学习点滴 call、apply的区别
2010/10/22 Javascript
基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
2011/03/28 Javascript
jQuery实现密保互斥问题解决方案
2013/08/16 Javascript
window.onload和$(function(){})的区别介绍
2013/10/30 Javascript
如何将网页表格内容导入excel
2014/02/18 Javascript
js 实现的可折叠留言板(附源码下载)
2014/07/01 Javascript
jQuery中:checkbox选择器用法实例
2015/01/03 Javascript
js跨域请求数据的3种常用的方法
2015/12/01 Javascript
JavaScript常见的五种数组去重的方式
2016/12/15 Javascript
angular-ui-sortable实现可拖拽排序列表
2016/12/28 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
2017/02/21 Javascript
微信小程序url与token设置详解
2017/09/26 Javascript
Angular5中调用第三方js插件的方法
2018/02/26 Javascript
详解vue-cli3多环境打包配置
2019/03/28 Javascript
微信小程序 调用微信授权窗口相关问题解决
2019/07/25 Javascript
layer.js open 隐藏滚动条的例子
2019/09/05 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
2019/11/08 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
2019/12/09 Javascript
Sanic框架路由用法实例分析
2018/07/16 Python
Python 经典面试题 21 道【不可错过】
2018/09/21 Python
Django 大文件下载实现过程解析
2019/08/01 Python
Python面向对象特殊属性及方法解析
2020/09/16 Python
CSS3 box-sizing属性
2009/04/17 HTML / CSS
美国中小型企业领先的办公家具供应商:Office Designs
2016/11/26 全球购物
Sofft鞋官网:世界知名鞋类品牌
2017/03/28 全球购物
舞蹈专业大学生职业规划范文
2014/03/12 职场文书
创文明城市标语
2014/06/16 职场文书
白莲教口号
2014/06/18 职场文书
文秘班元旦晚会活动策划方案
2014/08/28 职场文书
离婚协议书标准格式
2014/10/04 职场文书
网站文案策划岗位职责
2015/04/14 职场文书
铁人观后感
2015/06/16 职场文书
goland设置颜色和字体的操作
2021/05/05 Golang