jquery事件

1、
$(document).ready(function(){
      
});
等效于
$(function(){
});
2、重要的事件
on() ：在选择元素上绑定一个或多个事件的事件处理函数。on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。
off() ：在选择元素上移除一个或多个事件的事件处理函数。off() 方法移除用​​.on()​​绑定的事件处理程序。
toggle() ：用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
$(
             function()
             {
                 $(".clsOne").toggle(
                     function()
                     {
                         $(this).next().hide(1000);    
                     },
                     function()
                     {
                         $(this).next().show(1000);    
                     }
                 );            
             }
         );    
         <div class="clsOne">人事部</div>
         <div style="background-color: pink;">
             人多多
             <br/>
             事多多
             <br/>
             话多多    
         </div>
         <div class="clsOne">财务部</div>
         <div style="background-color: pink;">
             钱多多
             <br/>
             财多多
             <br/>
             金多多    
         </div>blur([fn])：当元素失去焦点时触发 blur 事件。这个函数会调用执行绑定到blur事件的所有函数，包括浏览器的默认行为。可以通过返回false来防止触发浏览器的默认行为。blur事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的。
live(type, [data], fn) ：jQuery 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。这个方法是基本是对 .bind() 方法的一个变体。使用 .bind() 时，选择器匹配的元素会附加一个事件处理函数，而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。
$(
             function()
             {
                 $("input[name='btnOK']").live("click",
                     function()
                     {
                         alert("触发！！");
                     }
                 );
                 
                 $("#btnAppend").click(
                     function()
                     {
                         $("div").append('<input type="button" name="btnOK" id="btnOK1" value="OK" />');        
                     }
                 );
                 
                 
             }
         );    
         <input type="button" name="btnOK" id="btnOK" value="OK" />
         <input type="button" id="btnAppend" value="btnAppend" />
         <div>
             
         </div>
  one() ： 为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。在每个对象上，这个事件处理函数只会被执行一次。其他规则与bind()函数相同。这个事件处理函数会接收到一个事件对象，可以通过它来阻止（浏览器）默认的行为。如果既想取消默认的行为，又想阻止事件起泡，这个事件处理函数必须返回false。多数情况下，可以把事件处理函数定义为匿名函数。在不可能定义匿名函数的情况下，可以传递一个可选的数据对象作为第二个参数（而事件处理函数则作为第三个参数）。
change([fn])：当元素的值发生改变时，会发生 change 事件。该事件仅适用于文本域（text field），以及 textarea 和 select 元素。当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生。
click([fn])
mouseout([fn])：当鼠标指针从元素上移开时，发生 mouseout 事件。该事件大多数时候会与 mouseover 事件一起使用。
                                注释：与 mouseleave 事件不同，不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。只                                   有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。
mouseover([fn])：当鼠标指针位于元素上方时，会发生 mouseover 事件。该事件大多数时候会与 mouseout 事件一起使用。
                                注释：与 mouseenter 事件不同，不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。只有在                                 鼠标指针穿过被选元素时，才会触发 mouseenter 事件。
submit(fn)：当提交表单时，会发生 submit 事件。该事件只适用于表单元素。
bind()：on()
unbind()：off()
function funId1()
         {
             alert("张三!");
         }
         
         function funId2()
         {
             alert("张四!");
         }
     
         $(
             function()
             {
                 $("#btnOK").bind("click" , funId1);
                 $("#btnOK").bind("click" , funId2);
                 
                 $("#btnCancle").click(
                     function()
                     {
                         $("#btnOK").unbind("click" , funId2);
                     }
                 );
             }
         );    
         <input type="button" id="btnOK" value="OK" />
         <input type="button" id="btnCancle" value="Cancle" />在文档中看到[]代表可选，可以输入，也可以不输，当传入参数的时候，代表动态为某一个元素注册一个事件，当不传入参数的时候，代表代码在某一个时机自动触发的。
find(expr|obj|ele) ：搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
$(
             function()
             {
                 $("p").find("span").css("color","red").end().css("backgroundColor","orange");
                 
                 $("p").find("span").css("color","red");
                 $("p").css("backgroundColor","orange");             
             }
 );    <p><span>Hello</span> how are you?</p>
get([index]) ：取得其中一个匹配的元素。 num表示取得第几个匹配的元素。从0开始，返回的是DOM对象，类似的有eq(index),不过eq(index)返回的是jQuery对象。这能够让你选择一个实际的DOM 元素并且对他直接操作，而不是通过 jQuery 函数。$(this).get(0)与$(this)[0]等价。
$(
             function()
             {
                 $("div").filter(".clsOne").filter("#hr").css("color","pink");
                 $("div.clsOne#hr").css("backgroundColor","blue");
                 $("div").filter(".clsOne#hr").css("color","orange");
                 
                 $("p").append( 
                             $("input").map(function(){
                                   return $(this).val();
                             })
                         .get().join(", ") 
                 );                
             }
         );    
         <div class="clsOne" id="hr">人事部</div>
         <div style="background-color: pink;">
             人多多
             <br/>
             事多多
             <br/>
             话多多    
         </div>
         <div class="clsOne" id="ac">财务部</div>
         <div style="background-color: pink;">
             钱多多
             <br/>
             财多多
             <br/>
             金多多    
         </div>$("img").get().reverse();
filter(expr|obj|ele|fn)：筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。
$(
             function()
             {
                 $("div").filter(
                     function()
                     {
                         if($(this).attr("class") == "clsOne")
                         {
                             return true;
                         }else
                         {
                             return false;
                         }
                     }
                 ).css("color" , "red");
              }
         );    
  3、json
本质上是一个字符串
作用：json是js对象的字符串表示法，用来表示js的一个对象
表示法：花括号表示对象，方括号表示数组，逗号分割数据，键值对表示数据
数组表示：
[
{"isbn":"","bname"=""},
{"isbn":"","bname"=""},
{"isbn":"","bname"=""}
]
var ary=[
{"isbn":"","bname"=""},
{"isbn":"","bname"=""},
{"isbn":"","bname"=""}
]
得值：ary[0].bname;
4、json->服务端（服务端能够解析json）
服务端（List,Object）->客户端（json）java能够将（List,Object）转换成json数组、对象
5、练习
6、animate(params,[speed],[easing],[fn])  ：用于创建自定义动画的函数。
这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left.
而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。
在 jQuery 1.2 中，你可以使用 em 和 % 单位。另外，在 jQuery 1.2 中，你可以通过在属性值前面指定 "<em>+=</em>" 或 "<em>-=</em>" 来让元素做相对运动。
jQuery 1.3中，如果duration设为0则直接完成动画。而在以前版本中则会执行默认动画。
jQuery 1.8中，当你使用CSS属性在css()或animate()中，我们将根据浏览器自动加上前缀(在适当的时候)，比如("user-select", "none"); 在Chrome/Safari浏览器中我们将设置为"-webkit-user-select", Firefox会使用"-moz-user-select", IE10将使用"-ms-user-select".
params:一组包含作为动画属性和终值的样式属性和及其值的集合
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
fn:在动画完成时执行的函数，每个元素执行一次。
$(
             function()
             {
                 window.setInterval("fly()", 10);    
             }
  );    
         
         var index = 0 ;
         function fly()
         {
             index = index + 1;
               $("#img1").animate(
                     {
                         left: index +  "px",
                         top: index + "px"
                     },50,function()
                     {
                         if( index % 2 == 1 )
                         {
                             $(this).attr("src","image/fly002.png");
                         }else
                         {
                             $(this).attr("src","image/fly001.png");    
                         }
                     }
                 );       
         }
         <img id="img1" alt="" src="image/fly001.png"  style="width: 20px;height: 20px;position: absolute;">