奋夜的奋斗  ————  事件与动画 ————  来自地狱的战镰

小小的单词难不倒我们哦！！！！！！！

   bind：绑定     unbind：接触绑定    toggle：栓牢   fadeout：渐显    fadeout：渐没

一：事件

1.鼠标事件

(1)$()是$(document)的简写，默认参数是document.

$(function(){}是$(document).ready(function(){})的简写。

(1)事件绑定 bind(type [,data],fn);

type是事件类型，有blur,focus,load,resize,scroll,unload,click,dbclick,mousedown,mouseup,

mouseover,mousemove,mouseout,mouseenter,mouseleave,change,select,submit,keydown,

keypress,keyup和error等，也可是是自定义名称。

eg：光棒效果：

 <script type="text/javascript" src="jq/jQuery1.11.1.js"></script>

    <script type="text/javascript">

           $(function(){

              $("li").bind({"mouseover":function(){

                      $(this).css("background","green");

                  },"mouseout":function(){

                      $(this).css("background","");

                  }, "click":function(){

                    alert($(this).text());

                  },

              }).unbind("mouseout mouseover");

           });

    </script>

  </head>

  <body>

    <ul>

          <li>胡椒粉和健康</li>

          <li>对付佛教快点回家</li>

          <li>解放后地上佛</li>

          <li>都会放假回家都会降低发动机和房价</li>

    </ul>

  </body>

bind的列子：

<script src="jquery-1.4.2.min.js" type="text/javascript"></script>

 <script type="text/javascript" language="javascript" >

 $(document).ready(function(){  //等待所有dom绘制完成后就执行

     $("#panel h5.head").bind("click",function(){

    var $content = $(this).next();

    if($content.is(":visible")){

        $content.hide();

        }else{

        $content.show();

        }

    });//bind

 }); //$(document)

 </script>

</head>

<body>

<div id="panel">

    <h5 class="head">什么是jQuery?</h5>

    <div class="content">

        jQuery是继prototype之后的有一个优秀的javascript类库

    </div>

</div>

</body>

</html>

二：键盘事件：

对于click,mouseover,mouseout这类事件，可以使用下面的简写方法：

<script src="jquery-1.4.2.min.js" type="text/javascript"></script>

 <script type="text/javascript" language="javascript" >

 $(document).ready(function(){  //等待所有dom绘制完成后就执行

     $("#panel h5.head").mouseover(function(){

        $(this).next().show();

    }).mouseout(function(){

        $(this).next().hide();

    });

 }); //$(document)

 </script>

</head>

<body>

<div id="panel">

    <h5 class="head">什么是jQuery?</h5>

    <div class="content">

        jQuery是继prototype之后的有一个优秀的javascript类库

    </div>

</div>

</body>

</html>

三：表单事件

eg:

<style type="text/css">

        .myred{

           color:red;

        }

    </style>

    <script type="text/javascript" src="jq/jQuery1.11.1.js"></script>

    <script type="text/javascript">

         $(function(){

             $("input").focus(function(){

                $("span").addClass("myred");

             });

          });

         $(function(){

             $("input").blur(function(){

                $("span").removeClass("myred");

             });

          });

    </script>

  </head>

  <body>

      <input><span class="myred">键盘事件 ，移除显示</span>

  </body>

DA 二： 动画

1,

(1)show()将元素display样式设置为先前的显示状态(block,inline);hide()将display样式设置为none,导致隐藏。

可以加参数fast,slow,normal,时间整数(毫秒)。

(2)fadeOut()改到透明度到消失，fadeIn()相反。

(3)slideDown()向下显示，slideUp()向上隐藏。

(4)animate(params,speed,callback)自定义动画，params为样式如{property1:"value1",property2:"value2"}

speed速度，可选；callback动画执行完执行的函数，可选。

eg：

$('input').bind('click', function () {      if ($(this).is(':visible')) {//如果内容为显示       $(this).hide();      } else {       $(this).show();      }     })

2.切换元素可见状态（toggle()）

#panel

{

    position:relative;

    width:100px;

    height:300px;

    border:1px solid #0050D0;

    background:#96e555;

    cursor:pointer;

}

html代码：

<div id="panel"></div>

jQuery代码：

$("#panel").click(function () {

    $(this).animate({ left: "+=500px" }, 3000) //累计从左移动，先执行

    .animate({ height: "-=100px" }, 2000) //累计减少高度，后执行

    .animate({ opacity: "0.5" }, 3000)//透明度降低到0.5

    .fadeOut("slow", function () { //动画都可以带有回调函数

        $(this).css("display", "block");   //显示,css方法不加入到动画队列，因此在callback中

        $(this).animate({ opacity: "1" }, 3000); //改变透明度

    });

});

(1)+=和-=可以累计改变属性的值，如果直接写数字则改变一次。

(2)animate中的left是从左，top是从上；

(3)css()方法不会加入到动画队列，而是立即执行。

(4)将多个属性放到animate中会同时执行这些动画。

3,停止动画和判断是否正在动画

(1)stop[clearQueue][gotoEnd]);可选参数,true或false;clearQueue是否要清空未执行的动画队列；gotoEnd代表

是否直接跳转到 当前动画 的末状态。 如果直接使用stop()就停止当前正在进行的动画，后面的动画继续。

(2)hover(enter,leave)是鼠标悬停事件,进入执行enter，出来执行leave;下面的例子防止动画效果与鼠标不一致：

如果有多个动画，想在enter时停止，可以将参数clearQueue设为true ,像这样stop(true)

stop(false,true)让当前动画直接到末状态。

stop(true,true)让当前动画直接到末状态，并清空动画队列。

(3)判断是否处于动画状态

(4)延迟动画  delay(1000)  延迟1秒。

欣欣向荣

锋利的jQuery中的事件与动画的更多相关文章

  1. jQuery中的事件和动画——《锋利的jQuery》（第2版）读书笔记2

    第4章 jQuery中的事件和动画 jQuery中的事件 加载DOM $(document).ready(function(){   // 编写代码... }); 可以简写成: $(function( ...

  2. jQuery中的事件与动画<思维导图>

    Javascript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的.当文档或者它的某些元素发生某些变化或操作时,浏览器会自动生成一个事件.例如当浏览器装载完一个文档后,会生成事件. ...

  3. 第三章 jQuery中的事件与动画

    第三章jQuery中的事件与动画 一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.wind ...

  4. jQuery中的事件和动画 以及视频展示效果实例

    经过这几天学习jQuery中的事件和动画,对jQuery更深的认识,接下来先把视频展示效果的代码贴出来,最后把我在学习jQuery事件和动画之后总结的思维导图 <!doctype html> ...

  5. 锋利的jQuery ——jQuery中的事件和动画（四）

    一.jQuery中的事件 1)加载DOM $(document).ready()和window.onload的区别 1>执行时机 $(document).ready(){}  方法内注册的事件, ...

  6. jQuery中的事件与动画 (你的明天Via Via)

    众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, ...

  7. Jquery中的事件和动画

    在学习Jquery中的过程中我们绝大部分都用到了事件的操作,也可以说事件是Jquery中必不可少的一部分,我们常见的一些事件有单击事件,鼠标事件,键盘事件等等.在Jquery中的学习中为了能使让页面以 ...

  8. 【jQuery基础学习】03 jQuery中的事件与动画

    关于jQuery中的事件 js与HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的. jQuery增加并扩展了基本的事件处理机制,jQuery不仅提供了更加优雅的事件处理方法,而且极大地 ...

  9. JQuery制作网页—— 第七章 jQuery中的事件与动画

    1. jQuery中的事件: ●和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现 ●jQuery事件是对JavaScript事件的封装,常用事件 ...

随机推荐

  1. 单纯觉得是篇好文——跨终端Web之Hybrid App

    [reference]http://www.infoq.com/cn/articles/hybrid-app#theCommentsSection 编者按:InfoQ开设新栏目“品味书香”,精选技术书 ...

  2. UVa 270 & POJ 1118 - Lining Up

    题目大意:给一些点,找出一条直线使尽可能多的点在这条直线上,求这条直线上点的个数. 以每一个点为原点进行枚举,求其它点的斜率,斜率相同则说明在一条直线上.对斜率排序,找出斜率连续相等的最大长度. #i ...

  3. 12.TCP的成块数据流

    1.滑动窗口协议             TCP滑动窗口的可视化表示       我们将字节从1到11进行标号,接收方通告的窗口称为提供的窗口,它覆盖了第4字节到第9字节的数据,且通告窗口大小为6.发 ...

  4. 1.3.1. 新建Xcode项目并设置故事板（Core Data 应用程序实践指南）

    创建名为Grocery Dude的Single View程序,并按默认设置处理,不勾选Core Date 和 Git. 设计故事板: 选择Main.Storyboard 拖放一个 Table View ...

  5. 配置Log4J(转载)

    Log4J的配置文件(Configuration File)就是用来设置记录器的级别.存放器和布局的,它可接key=value格式的设置或xml格式的设置信息.通过配置,可以创建出Log4J的运行环境 ...

  6. 2.6. 类型（Core Data 应用程序实践指南）

    单精度浮点数与双精度浮点数:创建NSManagedObject紫雷师,如果实体中单精度或双精度浮点数类型,那么在子类里,相关特性的类型是NSNumber. 小数:涉及货币时,建议设置为小数(decim ...

  7. 几种常用的控件（下拉框 可选框 起止日期 在HTML页面直接读取当前时间）

    下拉框 <div class="form-group">                        <label class="col-xs-3 c ...

  8. Flex中escape/encodeURI/encodeURIComponent的区别

    Flex中提供了三种转码函数,各有各的区别, escape,encodeURI,encodeURIComponent 这三个函数不仅在flex中有道运用在javascript中同样的含义 ,今天我仔细 ...

  9. 求求别再这么用log4x了

    sl4j或者log4j中,推荐的记录方式是: private Logger log = Logger.getLogger(getClass()); //或者 private static final ...

  10. HDU4734(数位dp)

    F(x) Time Limit: 1000/500 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...