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正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
jquery dataTable 获取某行数据
May 05 jQuery
jQuery实现 RadioButton做必选校验功能
Jun 15 jQuery
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
jQuery+ajax实现用户登录验证
Sep 13 jQuery
原生jQuery实现只显示年份下拉框
Dec 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
防止本地用户用fsockopen DDOS攻击对策
2011/11/02 PHP
PHP实现的蚂蚁爬杆路径算法代码
2015/12/03 PHP
php unlink()函数使用教程
2018/07/12 PHP
php和redis实现秒杀活动的流程
2019/07/17 PHP
JavaScript 面向对象编程(2) 定义类
2010/05/18 Javascript
如何在node的express中使用socket.io
2014/12/15 Javascript
jquery attr()设置和获取属性值实例教程
2016/09/25 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
2020/03/26 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
2017/06/17 Javascript
JS获取字符对应的ASCII码实例
2017/09/10 Javascript
自定义vue组件发布到npm的方法
2018/05/09 Javascript
Vue.js 2.x之组件的定义和注册图文详解
2018/06/19 Javascript
浅谈Angular6的服务和依赖注入
2018/06/27 Javascript
vue中接口域名配置为全局变量的实现方法
2018/09/20 Javascript
jQuery中each和js中forEach的区别分析
2019/02/27 jQuery
js实现简单分页导航栏效果
2019/06/28 Javascript
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
Python 如何访问外围作用域中的变量
2016/09/11 Python
pycharm重置设置,恢复默认设置的方法
2018/10/22 Python
python ipset管理 增删白名单的方法
2019/01/14 Python
ERLANG和PYTHON互通实现过程详解
2019/07/05 Python
在python image 中安装中文字体的实现方法
2019/08/22 Python
Django操作session 的方法
2020/03/09 Python
学会python自动收发邮件 代替你问候女友
2020/05/20 Python
Flask中sqlalchemy模块的实例用法
2020/08/02 Python
数学专业推荐信范文
2013/11/21 职场文书
2014年教师党员公开承诺书
2014/05/28 职场文书
财会专业大学生求职信
2014/09/26 职场文书
四风对照检查剖析材料
2014/10/07 职场文书
中班下学期个人工作总结
2015/02/12 职场文书
2015年乡镇民政工作总结
2015/05/13 职场文书
中小学生安全教育观后感
2015/06/17 职场文书
课程设计感想范文
2015/08/11 职场文书
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫
python使用opencv对图像添加噪声(高斯/椒盐/泊松/斑点)
2022/04/06 Python