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.serializeJSON
Jun 23 jQuery
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
jquery获取input输入框中的值
Nov 13 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
jquery选择器和属性对象的操作实例分析
Jan 10 jQuery
jQuery实现获取多选框的值示例
Feb 07 jQuery
jQuery实现本地存储
Dec 22 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 intval的测试代码发现问题
2008/07/27 PHP
php实现字符串首字母转换成大写的方法
2015/03/17 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
Gambit vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
[原创]来自ImageSee官方 JavaScript图片浏览器
2008/01/16 Javascript
javascript getElementsByClassName实现代码
2010/10/11 Javascript
JS、CSS加载中的小问题探讨
2013/11/26 Javascript
JavaScript手机振动API
2016/06/11 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
2016/07/14 Javascript
深入理解react-router@4.0 使用和源码解析
2017/05/23 Javascript
webpack自动打包和热更新的实现方法
2019/06/24 Javascript
从零使用TypeScript开发项目打包发布到npm
2020/02/14 Javascript
js实现烟花特效
2020/03/02 Javascript
nodejs如何在package.json中设置多条启动命令
2020/03/16 NodeJs
vue3.0实现插件封装
2020/12/14 Vue.js
[01:35]2018年度CS GO最佳战队-完美盛典
2018/12/17 DOTA
Python中的魔法方法深入理解
2014/07/09 Python
Python对文件和目录进行操作的方法(file对象/os/os.path/shutil 模块)
2017/05/08 Python
Python将一个Excel拆分为多个Excel
2018/11/07 Python
python程序文件扩展名知识点详解
2020/02/27 Python
详解python方法之绑定方法与非绑定方法
2020/08/17 Python
python中xlrd模块的使用详解
2021/02/01 Python
CSS3实现的炫酷菜单代码分享
2015/03/12 HTML / CSS
CSS3实现同时执行倾斜和旋转的动画效果
2016/10/27 HTML / CSS
美国时尚女装在线:Missguided
2016/12/03 全球购物
美国市场上最实惠的送餐服务:Dinnerly
2018/03/18 全球购物
Carolina工作鞋官网:Carolina Footwear
2019/03/14 全球购物
实现strstr功能,即在父串中寻找子串首次出现的位置
2016/08/05 面试题
值传递还是引用传递
2015/02/08 面试题
中学生自我评价范文
2014/02/08 职场文书
高中生国庆节演讲稿范文2014
2014/09/21 职场文书
七一建党节慰问信
2015/02/14 职场文书
患者身份识别制度
2015/08/06 职场文书
OpenCV-Python实现轮廓拟合
2021/06/08 Python
uniapp 微信小程序 自定义tabBar 导航
2022/04/22 Javascript