一：事件

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>
<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>

二：键盘事件：

mouseover,mouseout事件：

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

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

 $(document).ready(function(){

     $("#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

    </div>

</div>

</body>

</html>

三：表单

<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>

二： 动画

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)

    .fadeOut("slow", function () {

        $(this).css("display", "block");

        $(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 事件 动画

    事件 $(function){} bind(type, [data],function) 事件类型, 传递参数, 处理函数 hover(enter, leave) 光标停留时,函数enter,离开时函 ...

  2. 锋利的JQuery —— 事件和动画

    大图猛戳

  3. 【锋利的jQuery】中全局事件ajaxStart、ajaxStop不执行

    最近一直都在研究[锋利的jQuery],确实是一本好书,受益匪浅.但由于技术发展及版本更新等原因,里面还是有些坑需要踩的. 比如:第六章七节中提到的全局事件ajaxStart.ajaxStop照着案例 ...

  4. 《锋利的jQuery》读书笔记（DOM+事件）

    前阵子买了一批书,就从锋利的jQuery看起吧,书中一些太过常规以及没有强记必要性的操作就不记录了. 1.DOM加载后执行JS $(document).ready(function(){ //.... ...

  5. 【学习笔记】锋利的jQuery（三）事件和动画

    一.jQuery事件 1,加载事件 $(document).ready(function(){...}) //等同于$(function(){..}) $(window).load(function( ...

  6. 锋利的jQuery学习总结

    通过对<锋利的jQuery>(第二版)一书的学习,发现此书讲解通俗易懂,是学习jQuery的一本很好的指导书,特作如下总结.此书主要讲解了jQuery的常用操作,包括认识jQuery,jQ ...

  7. jQuery事件对象的属性

    注:摘自<锋利的jQuery(第二版)> JQuery在遵循W3C规范的情况下,对事件对象的常用属性进行了封装,使得事件处理在各大浏览器下都可以正常运行而不需要进行浏览器类型判断. 1. ...

  8. 锋利的jQuery（第二版）学习总结

    通过对<锋利的jQuery>(第二版)一书的学习,发现此书讲解通俗易懂,是学习jQuery的一本很好的指导书,特作如下总结. 此书主要讲解了jQuery的常用操作,包括认识jQuery,j ...

  9. jQuery事件篇---基础事件

    写在前面: 有一段时间未更新博客了,利用这段时间,重新看了<jQuery基础教程 第四版>和<锋利的jQuery 第二版>,这两本书绝对是jQuery入门非常好的书,值得多读几 ...

随机推荐

  1. Delphi判断一个字符是否为汉字的最佳方法

    //判断字符是否是汉字 function IsHZ(ch: WideChar): boolean; var i:integer; begin i:=ord(ch); if( i<19968) o ...

  2. 在iOS微信浏览器中自动播放HTML5 audio(音乐)的2种正确方式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. HDU-1166-敌兵布阵（线段树）

    前言: 线段树是一种二叉搜索树,与区间树相似,它将一个区间划分成一些单元区间,每个单元区间对应线段树中的一个叶结点.       对于线段树中的每一个非叶子节点[a,b],它的左儿子表示的区间为[a, ...

  4. ImageView及其子类（二）

    实例:强大的图片按钮 下面的实例定义了多个图片按钮,并定义了两个ZoomButton.两个ZoomButton的android:src属性分别指定为@android:drawable/btn_minu ...

  5. MapReduce深度分析(二)

    MapReduce深度分析(二) 五.JobTracker分析 JobTracker是hadoop的重要的后台守护进程之一,主要的功能是管理任务调度.管理TaskTracker.监控作业执行.运行作业 ...

  6. HTTP协议系列(3)---包括WebSocket简单介绍

    一.HTTPS     HTTP是超文本传输协议,那HTTPS是什么尼?要明白HTTPS是什么先要明白HTTP的缺点,想一下我们在使用HTTP的时候会有那些缺点尼? 1.通信使用的明文(不加密),内容 ...

  7. MySQL各存储引擎

    MySQL中的数据用各种不同的技术存储在文件(或者内存)中.这些技术中的每一种技术都使用不同的存储机制.索引技巧.锁定水平并且最终提供广泛的不同的功能和能力.通过选择不同的技术,你能够获得额外的速度或 ...

  8. macOS Sierra安装Apache2.4+PHP7.0+MySQL5.7.16

    Mac系统上虽然自带PHP和Apache,但是有时不是我们想要的版本呢.今天我们就在macOS Sierra(10.12.1)上安装比较新的版本的PHP版本,也就是PHP7.0+了.本篇博客我们安装的 ...

  9. 离职了，在家温故而知新----1 设计模式 & 开头

    工作四年有余,编写的代码都是业务代码.不涉及低层. 目前离职在家,过年完了,准备找工作了. 决定温故而知新,复习也是学习. 本着随遇而安的原则,随便从之前设计的众多条目中选择了一条开始复习. 设计模式 ...

  10. JAVA中浮点数显示

    //Java小数点后留两位 double num1 =11; double num2 =21; String num3 =""; //函数可以确定十进制数的显示格式:百分数,限定小 ...