当前位置:首页 > jQuery技术文章 > jQuery复合事件用法示例

jQuery复合事件的使用

  • 发布时间:
  • 作者:码农之家原创
  • 点击:135

这篇文章主要知识点是关于jQuery、复合事件、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

jQuery实战
jQuery实战高清第三版
  • 类型:jQuery大小:99.0 MB格式:PDF作者:Bear Bibeault
立即下载

jQuery复合事件用法示例

本文实例讲述了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" >
        <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.jb51.net/table/javascript_event

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

推荐内容

Python中模块导入时全局变量__all__的作用

介绍centos上快速搭建ghost博客方法

分享ThinkPHP和UCenter接口冲突解决方案

分享Python全局变量的用法

详解基于VuePress 轻量级静态网站生成器如何实现

展开 +

收起 -

jQuery 相关电子书
学习笔记
网友NO.399579

JQuery中attr属性和jQuery.data()学习笔记【必看】

用html直接data-key来存放,key必须全部小写。 div data-mydata="123"/divconsoloe.log($("div").data("mydata"));//output 123 二避免在key中使用短横线 a id="bar" data-foo-bar-baz="fizz-buzz" href="#"fizz buzz!/a $('#bar').data().fooBarBaz; //works$('#bar').data()['fooBarBaz']; //works$('#bar').data()['foo-bar-baz']; //does not work 以上这篇JQuery中attr属性和jQuery.data()学习笔记【必看】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农之家。 ……

网友NO.418335

分享jquery选择器大全

选择器并没有一个固定的定义,在某种程度上说,jQuery的选择器和样式表中的选择器十分相似。选择器具有如下特点: 1.简化代码的编写 2.隐式迭代 3.无须判断对象是否存在 其中$是选择器不可缺少的部分,在jQuery库中,$就是jQuery的一个简写形式,比如$(#foo)和jQuery(#foo)是等价的,$.ajax和jQuery.ajax是等价的。如果没有特别说明,可以把程序中的$符号都理解为jQuery的简写形式。 现在我们正式进入jQuery选择器的学习。根据选择器的功能习惯将选择器进行分类,下面将不同类型的分类器进行分类,并且分别进行解释说明,使读者达到掌握程度。 一、基本选择器 基本选择器包括5种选择器:#id、element、.class、*和selectorl,selector2.selectorN,下面将配合实例分别介绍每种选择器的作用及使用方法。 1.#id选择器 #id选择器根据给定的ID匹配一个元素。如果选择器中……

网友NO.701958

jquery ajax加载数据前台渲染方式 不用for遍历的方法

如下所示: var provinces = res.res;var html = [];var option_select='option value="" 请选择/option';var tpl = 'option value="{1}" data-id="{1}" data-name="{0}"{0}/option';html.push(option_select); $.each(provinces, function (i, n) {span /spanhtml.push(tpl.format(n.name, n.id));});//alert(html.join());$('#class').html(html.join('')); function getXueke() {var gradeId = $('#grade_id').val();if (gradeId == '') {$('#textbook_id').html('option value=""-选择-/option');return;}$.get('index.php?m=Homea=getgradesandCourse', {'grade_id': gradeId}, function (res) {var options = [];$.each(res, function (index, item) {options.push('option value="{0}"{1}/option'.format(item.id, item.course_name));});if (options.length 0) {$('#textbook_id').html(options.join(''));} else {$('#textbook_id').html('option value=""-请选择-/option');}})} 以上这篇jquery ajax加载数据前台渲染方式 不用for遍历的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也……

网友NO.851987

jQuery实现iframe父窗体和子窗体的相互调用

本文实例讲述了jQuery实现iframe父窗体和子窗体的相互调用方法。分享给大家供大家参考,具体如下: 父窗体 html head titleusually function/title /head body iframe src="http://www.baidu.com" /iframe iframe src="myifame.html" id="name_iframe" name="name_iframe"/iframe button value="buttonvalue" id="testid"buttonvalue/button /bodyhtmlscript type="text/javascript" src="jquery-1.4.4.js"/scriptscript//contentWindow这个属性,相当于获取iframe网页里面的window对象$(function(){ //父窗体获取子窗体的变量 alert(document.getElementById("name_iframe").contentWindow.vname);//父窗体获取子窗体的方法 document.getElementById("name_iframe").contentWindow.test();//父窗体获取子窗体的内容 alert(document.getElementById("name_iframe").contentWindow.document.body.outerHTML);});var myname="hb";function parentFunction(){ alert("parentFunction");}/script 子窗体 html head titleusually function/title /head body button onclick="get……

<
1
>

电子书 编程教程 文档 软件 源码 视频

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757