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. 天梯赛 L2-002. （模拟） 链表去重

    题目链接 题目描述 给定一个带整数键值的单链表L,本题要求你编写程序,删除那些键值的绝对值有重复的结点.即对任意键值K,只有键值或其绝对值等于K的第一个结点可以被保留.同时,所有被删除的结点必须被保存 ...

  2. Python练习-天已经亮了计算器也终于完成了

    # 编辑者:闫龙 import re #导入re模块(正则表达式) calc2 = "1-2*((60-30+(-40/52)*(9-2*5/3+7/3*-99/4*2998+10*568/ ...

  3. imperva 默认策略添加例外

    创建违规访问 检查违规的告警类型 假如客户的这个目录下真的有这个文件,而且客户非常明确这是一个正常且安全的东西怎么办?我该如何的将它添加到例外? 添加例外的步骤: 再次构造违规的请求: 默认策略添加例 ...

  4. mysql insert锁机制【转】

    最近再找一些MySQL锁表原因,整理出来一部分sql语句会锁表的,方便查阅,整理的不是很全,都是工作中碰到的,会持续更新 笔者能力有限,如果有不正确的,或者不到位的地方,还请大家指出来,方便你我,方便 ...

  5. ajax局部刷新后里面的jquery事件失效的解决方法

    live() 与bind()作用基本一样. 最重要区别:live()可以将事件绑定到当前和将来的元素(eg:为id=zy元素绑定点击事件,而当你用js动态生成一个节点并插入到dom文档结构中时,如果你 ...

  6. 16 Go Concurrency Patterns: Timing out, moving on GO并发模式: 超时, 继续前进

    Go Concurrency Patterns: Timing out, moving on  GO并发模式: 超时, 继续前进 23 September 2010 Concurrent progra ...

  7. python网络编程--进程池

    一:进程池 进程池内部维护一个进程序列,当使用时,则去进程池中获取一个进程, 如果进程池序列中没有可供使用的进进程,那么程序就会等待,直到进程池中有可用进程为止. 进程池中有两个方法: apply a ...

  8. gbdt和xgboost api

    class xgboost.XGBRegressor(max_depth=3, learning_rate=0.1, n_estimators=100, silent=True, objective= ...

  9. 嵌入式 探讨父子线程、进程终止顺序不同产生的结果_skdkjxy_新浪博客

    嵌入式 探讨父子线程.进程终止顺序不同产生的结果 Linux下编程,线程.进程退出顺序问题纷纷扰扰,如果父进程/线程先于子进程/线程终止,系统会做什么处理呢?反之,如果子进程/线程先于父进程/线 程终 ...

  10. LeetCode691. Stickers to Spell Word

    We are given N different types of stickers. Each sticker has a lowercase English word on it. You wou ...