1、toggle事件

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>toggle事件</title>
  <!-- toggle事件 ： 1.9之后的版本之后废除了该事件！
  01.是一个循环事件！
  02.显示和隐藏-->
  </head>
  <body>
   
  <input type="button" id="hidebtn" value="toggle循环">
  <input type="button" id="showbtn" value="toggle显示和隐藏">
  <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
  <script type="text/javascript">
  $(function(){
  //设置按钮的toggle事件
  $("input[type='button']").toggle(
  function(){ //第1次触发的事件
  $("body").css("background","red");
  },
  function(){//第2次触发的事件
  $("body").css("background","pink");
  },
  function(){//第3次触发的事件
  $("body").css("background","yellowgreen");
  }
  );
  //显示和隐藏
  $("#showbtn").click(function(){
  $("#hidebtn").toggle();
  })
   
  })
   
   
  </script>
   
  </body>
  </html>

2、事件绑定

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>事件绑定on</title>
  </head>
  <body>
  <button type="button" id="add">添加商品</button>
   
  <button type="button" id="btnClose">解除绑定</button>
   
  <ul>
  <li>手机</li>
  <li>充电器</li>
  <li>耳机</li>
  </ul>
  <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
  <script type="text/javascript">
   
  $(function(){
  /*01.鼠标移入和移出li的事件! 这种方式 后面增加的节点没有事件
  $("li").hover(function(){ //mouseover
  $(this).css({"background":"red"});
  },function(){//mouseout
  $(this).css({"background":"pink"});
  })*/
   
  /*02.当我们点击按钮的时候 动态的增加li*/
  $("#add").click(function(){
  $("ul").append("<li>吹风机</li>");
  })
  /*针对于我们 新增的li 没有事件 解决方案！ 绑定事件
  $("ul").on("mouseover","li",function(){
  $(this).css({"background":"red"});
  });
  $("ul").on("mouseout","li",function(){
  $(this).css({"background":"pink"});
  });*/
  $("ul").on({ //同时绑定多个事件
  mouseover:function(){
  $(this).css({"background":"red"});
  },
  mouseout:function(){
  $(this).css({"background":"pink"});
  }},"li");
   
  /*解除绑定事件*/
  $("#btnClose").click(function(){
  $("ul").off("mouseover");
  })
   
   
   
  })
   
   
   
  </script>
  </body>
  </html>

3、事件绑定bind

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>事件绑定bind</title>
  </head>
  <body>
  <button type="button" id="add">添加商品</button>
   
  <button type="button" id="btnClose">解除绑定</button>
   
  <ul>
  <li>手机</li>
  <li>充电器</li>
  <li>耳机</li>
  </ul>
  <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
  <script type="text/javascript">
  //增加节点
  $("#add").click(function(){
  $("ul").append("<li>吹风机</li>");
  })
   
  /*事件bing 绑定 解除绑定 unbind*/
  $("li").bind({
  mouseover:function(){
  $(this).css({"background":"red"});
  },
  mouseout:function(){
  $(this).css({"background":"pink"});
  }
  })
  /*事件live 绑定 解除绑定 die*/
  $("li").live({
  mouseover:function(){
  $(this).css({"background":"red"});
  },
  mouseout:function(){
  $(this).css({"background":"pink"});
  }
  })
   
   
   
   
  </script>
  </body>
  </html>

4、键盘事件

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>键盘事件</title>
  </head>
  <body>
   
  <form action="#" method="get" id="myForm">
  用户名：<input name="userName" placeholder="请输入用户名">
  密码：<input type="password" name="pwd" placeholder="请输入密码">
  <button type="submit">登录</button>
  </form>
   
  <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
  <script type="text/javascript">
  /*点击回车键 触发表单的提交事件 key用户的按键*/
  $(document).keypress(function(key){
  if(key.keyCode==13){
  //表单提交
  $("#myForm").submit();
  }
  })
   
  </script>
  </body>
  </html>

5、silde事件

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>silde事件</title>
  <style type="text/css" >
  ul{
  list-style:none;
  padding:5px;
  width:210px;
  border:1px solid red;
  }
  a{
  text-decoration:none;
  line-height: 30px;
  }
  .menu_style li{
  border-bottom:1px solid #666;
  }
  </style>
  </head>
  <body>
  <div id="menu" class="menu_style">
  <ul>
  <li><a href="#">手机通讯、数码电器</a></li>
  <li><a href="#">食品饮料、酒水、果蔬</a></li>
  <li><a href="#">进口食品、进口牛奶</a></li>
  <li><a href="#">美容化妆、个人护理</a></li>
  <li><a href="#">母婴用品、个人护理</a></li>
  <li><a href="#">厨卫清洁、纸、清洁剂</a></li>
  <li id="menu_07" class="element_hide"><a href="#">家居家纺、锅具餐具</a></li>
  <li id="menu_08" class="element_hide"><a href="#">生活电器、汽车生活</a></li>
  <li id="menu_09" class="element_hide"><a href="#">电脑、外设、办公用品</a></li>
  <li class="btn">
  <input name="more_btn" type="button" value="展开或关闭菜单项" />
  </li>
  </ul>
  </div>
   
  <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
  <script type="text/javascript">
  /*让li下标大于5的 但是不包含最后一个 显示或者隐藏*/
  $(function(){
  $("input").toggle(
  function(){
  //$("li:gt(5):not(:last)").slideUp(1000); 毫秒数
  $("li:gt(5):not(:last)").slideUp("fast");
  },
  function(){
  $("li:gt(5):not(:last)").slideDown("slow");
  }
  );
   
   
  })
   
  </script>
  </body>
  </html>

6、fade事件

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title></title>
  </head>
  <body>
  <button type="button" id="showImg">淡入</button>
  <button type="button" id="hideImg">淡出</button>
  <img src="../images/cat.jpg">
   
  <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
  <script type="text/javascript">
  $(function(){
  /*其实就是对元素的透明度进行修改*/
  $("#showImg").click(function(){ //淡入
  $("img").fadeIn(3000);
  })
  $("#hideImg").click(function(){//淡出
  $("img").fadeOut("slow");
  })
   
  })
   
  </script>
  </body>
  </html>

7、animate动画事件

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>animate动画事件</title>
  </head>
  <body>
   
   
  <button type="button" id="showAnimate">开始动画</button>
  <img src="../images/cat.jpg">
   
  <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
  <script type="text/javascript">
  /*
  * animate(prop,speed,easing,callback)
  * prop:我们需要设置的css属性，可以是0-N个
  * speed:动画执行的速度
  * easing:速度曲线
  * callback: 指的是我们动画完成所有动作之后的回调函数 （function）
  * */
  $(function(){
  //点击按钮
  $("#showAnimate").click(function(){
  //图片发生变化
  $("img").animate( // start animate
  {
  "height":200,
  "width":200,
  "marginRight":50
  },
  "slow",
  "swing",
  function(){
  alert("动画已经完成！");
  }); // end animate
  })
  })
   
  </script>
  </body>
  </html>

jQuery事件和动画的更多相关文章

  1. jQuery事件以及动画

    jQuery事件以及动画 一.jQuery事件 加载DOM 在页面加载完毕后, 浏览器会通过 JavaScript 为 DOM 元素添加事件. 在常规的 JavaScript 代码中, 通常使用 wi ...

  2. jQuery事件与动画

    一 事件 1 加载DOM事件 $(document).ready():执行时机:DOM元素准备就绪  执行次数:多次  简单写法:原:$(document).ready(function(){})  ...

  3. JQuery 事件与动画

    第一大部分 提纲 事件与动画 一.事件 1.在JavaScript语法中的事件,把onxxxxx中的on去掉,就是JQuery中的事件. onclick - click ondblclick - db ...

  4. 第三章 jQuery事件和动画

    1.什么是事件:事件指的是用于对网页操作的时候,网页做出的一个回应. 2.JQuery中的事件:JQuery事件是对JavaScript事件的封装,常用事件的分类如下:(1)基础事件:window事件 ...

  5. JavaScript jQuery 事件、动画、扩展

    事件 因为JavaScript在浏览器中以单线程模式运行,页面加载后,一旦页面上所有的JavaScript代码被执行完后,就只能依赖触发事件来执行JavaScript代码. 浏览器在接收到用户的鼠标或 ...

  6. 初学jQuery之jQuery事件与动画

    今天我们就谈谈jquery中的事件和简单动画吧,它们毕竟基础是进阶华丽的根本!! 1.事件 1.window事件 ready   准备就绪 2.鼠标事件 方法                      ...

  7. JQuery事件与动画总结

    1.加载DOM 1.1.window事件 window.onload=function(){}.... 时机:其他资源都加载完毕后,再执行 $(function(){}) ……:只是等待标签完毕,即可 ...

  8. jquery事件和动画操作集锦

    一,事件 1,加载事件 1 2 3 4 5 6 $(document).ready(function(){   //todo }); //dom准备就绪后执行ready里面的函数,此时dom对应的相关 ...

  9. python 之 前端开发（ jQuery事件、动画效果、.each()、 .data()）

    11.58 事件 11.581 事件绑定方法与解绑 绑定事件: // 绑定方式一: $('.box1').click(function () { alert('绑定方式一') }); ​ // 绑定方 ...

随机推荐

  1. ARC官方文档翻译！ - iPhone App开发外包专区 - 威锋论坛 - 威锋网

    CHENYILONG Blog ARC官方文档翻译! - iPhone App开发外包专区 - 威锋论坛 - 威锋网  http://bbs.weiphone.com/read-htm-tid-344 ...

  2. CodeForces 714A

    Description Today an outstanding event is going to happen in the forest — hedgehog Filya will come t ...

  3. [SDOI2010]外星千足虫 题解 高斯消元+bitset简介

    高斯消元 + bitset 简介: 高斯消元其实就是以加减消元为核心求唯一解.这道题还是比较裸的,可以快速判断出来.我们将每一只虫子看作一个未知数,这样根据它给出的 m 组方程我们可以高斯消元得出每一 ...

  4. Linux IO调度算法

    Linux IO调度算法  操作系统的调度 CPU调度    CPU scheduler IO调度       IO scheduler   IO调度器的总体目标是希望让磁头能够总是往一个方向移动,移 ...

  5. 【总结】2017年当下最值得你关注的前端开发框架，不知道你就OUT了！

    近几年随着 jQuery.Ext 以及 CSS3 的发展,以 Bootstrap 为代表的前端开发框架如雨后春笋般挤入视野,可谓应接不暇. 在这篇分享中,我将总结2017年当下最值得你关注的前端开发框 ...

  6. H5学习笔记1

    H5学习笔记 1.创建超链接: target=”_blank”:链接的目标网页会在新的窗口中打开. target=”_parent”:链接的目标会在当前窗口中打开,如果在框架网页中,则会在上一层框架打 ...

  7. 【FCS NOI2018】福建省冬摸鱼笔记 day1

    省冬的第一天. 带了本子,笔,一本<算法导论>就去了.惊讶于为什么同学不带本子记笔记. 他们说:“都学过了.”,果然这才是巨神吧. 第一天:数论,讲师:zzx 前几页的课件挺水,瞎记了点笔 ...

  8. java基础24 线程、多线程及线程的生命周期(Thread)

    1.1.进程 正在执行的程序称作为一个进程.进程负责了内存空间的划分 疑问1:windows电脑称之为多任务的操作系统,那么Windows是同时运行多个应用程序呢? 从宏观的角度:windows确实在 ...

  9. java IO流知识点总结

    I/O类库中使用“流”这个抽象概念.Java对设备中数据的操作是通过流的方式.表示任何有能力产出数据的数据源对象,或者是有能力接受数据的接收端对象.“流”屏蔽了实际的I/O设备中处理数据的细节.IO流 ...

  10. TDictionary 与 TObjectDictionary

    TDictionary 与 TObjectDictionary 的区别是 : TObjectDictionary 可以做到 free的时候 里面的对象 一并free,从而不会出现内存 泄露. 用途: ...