事件
- 绑定事件：
1）方式一：bind( type,function(){} )
$('#d1').bind('click',function(){//正式写法，常用于解决浏览器兼容性
$(this).html('hello java');
});
2）方式二（绑定的简写形式）：click( function(){} );
$('#d1').click(function(){//简写形式
$(this).html('hello java');
});
方法：
1）$ele.click()：不带任何参数一般是用来指定触发一个事件（手动触发），用的比较少
2）$ele.click( handler(eventObject) )：每次$ele元素触发点击操作会执行回调 handler函数
3）$ele.click( [eventData ], handler(eventObject) )：可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题
其他事件有：
鼠标相关：$ele.mousedown/mouseup/mousemove/mouseover/mouseout/mouseenter/mouseleave/hover/focusin/focusout/select()
表单相关：blur/focus/change/submit()
键盘相关：keydown/keyup/keypress()
【注意：mouseenter事件只会在绑定它的元素上被调用，而不会在后代节点上被触发;
form元素是有默认提交表单的行为，如果通过submit处理的话，需要禁止浏览器的这个默认行为传统的方式是调用事件对象 e.preventDefault() 来处理， jQuery中可以直接在函数中最后结尾return false即可】
on()：多事件绑定，如：$(“#elem").on("mouseover mouseout",function(){ });或不同的事件绑定不同的函数 ：
$("#elem").on({
mouseover:function(){},
mouseout:function(){},
});
//将数据传递到处理程序
function greet( event ) {
alert( "Hello " + event.data.name );
}
$( "button" ).on( "click", {
name: "ffff"
}, greet );
—>事件委托：.on( events ,[ selector ] ,[ data ], handler(eventObject) )
<div class="left">
<p class="aaron">
<a>目标节点</a> //点击在这个元素上
</p>
</div>
$(“div”).on(“click”,"p",fn)//事件绑定在最上层div元素上，当用户触发在a元素上，事件将往上冒泡，
一直会冒泡在div元素上。如果提供了第二参数，那么事件在往上冒泡的过程中遇到了选择器匹配的元素，
将会触发事件回调函数
off()：通过.on绑定事件后，可用.off()移除该绑定。如：$("elem").off("mousedown mouseup”)//移除指定事件；$(‘ele’).off();//移除所有
合成事件
1）hover(enter,leave)：模拟光标悬停事件。
$(function(){ $('.s1').hover(function(){ $(this).addClass('s2');//光标进入
},function(){ $(this).removeClass('s2');//光标离开 });
});
2）不使用合成事件的方式。
$('.s1').mouseenter(function(){//鼠标移入
$(this).addClass('s2');//绑定了mouseenter事件的div
});
$('.s1').mouseleave(function(){//鼠标移出
$(this).removeClass('s2');
});
3）toggle(function1(){},function2(){},…)：模拟光标连续单击事件。
$(function(){
$('a').toggle(function(){
$('#d1').show('slow');},function(){
$('#d1').hide('slow');
});
});
事件冒泡
1）概述：子节点产生的事件，会依次向上抛出给相应的父节点。
2）取消冒泡：使用event对象，e.cancelBubble=true;
事件处理：
1）获得事件对象
click(function(e){ //e：对底层的事件对象做了一个封装 });
2）事件对象的属性：
①event.type：事件类型
②event.target：返回事件源（是DOM对象）
③event.pageX/pageY：返回点击的坐标
④event.which：获取鼠单击时的按下的哪个键⑤event.currentTarget：在事件冒泡过程中的当前DOM元素【注意：this和event.target的区别：js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；】
3）停止冒泡：event.stopPropagation()
4）停止默认行为：event.preventDefault()【注意：原来的写法为<a href="del.do" onclick="return false"></a>】
5）模拟操作（自定义事件）：
.trigger(‘click’)：可传递参数，如；$(‘#elem’).trigger(‘onbindEle’,[‘参数1’,'参数2'])
.triggerHandler()：可触发通过jQuery绑定的事件,而不会触发系统事件。且只影响第一个匹配到的元素；
不会向上冒泡，若不是由目标元素直接触发，则不会调用(.trigger与此相反)；返回最后一个处理的事件返回值，若没有触发则返回underfined.*
动画
1）show()/hide()：
①作用：通过同时改变元素的“宽度”和“高度”来实现显示或隐藏。
②用法：show(速度,[回调函数]); （hide同理）
A.回调函数：整个动画执行完毕之后，会执行该函数。
B.速度：'slow'，'fast'，'normal' 或者使用毫秒数。slow=600,fast=200,narmal=400
【注意：show/hide是修改display的属性，通过visibility属性布局的需要单独设置；若设置了!important,必须使用.css(‘display’,’block !important’)来让show()生效】* .toggle(duration,func)：互斥的方法(从右至左，横向动作)，相当于：
if ( display === true ) {
$( "elem" ).show();
} else if ( display === false ) {
$( "elem" ).hide();
}
可用 .toggle()来替换
2）slideUp()/slideDown()
①作用：通过同时改变元素的“高度”来实现显示或隐藏。即上滑/滑动动画
②用法：同上。
slideToggle()：同toggle()，从上到下，竖向动作。用于slideUp/slideDown()
3）fadeIn()/fadeOut()
①作用：通过改变元素的不透明度来实现显示或隐藏。0透明0.5半透明1不透明（用法同上）
fadeToggle()：同toggle()，用于fadeIn/fadeOut
fadeTo(duration,opacity,callback)：指定透明度变化的目标值opacity.
4）自定义动画animate(params,speed,[callback])
①params：是一个JavaScript对象，描述动画执行结束之后元素的样式，比如：{'height':'200px'}
②speed：速度，只能用毫秒数。
③callback：回调函数。
$aaron.animate({
width : “+=100px”,//或者width: “toggle" width : "+=100px"
fontSize: “5em”，
opacity: 'show', //或者： opacity: ‘0.5',
});
.animate(properties,options)：可观察动画的一些执行情况，或在动画进行中的某一时刻进行一些其他处理。参数：
- duration - 设置动画执行的时间
- easing - 规定要使用的 easing 函数，过渡使用哪种缓动函数
- step：规定每个动画的每一步完成之后要执行的函数
- progress：每一次动画调用的时候会执行这个回调，就是一个进度的概念
- complete：动画完成回调
$aaron.animate({height: '50'}, {
duration :2000,
//每一个动画都会调用
step: function(now, fx) {
$aaron.text('高度的改变值:'+now)
}
})
$aaron.animate({ height: '50'}, {
duration :2000,
//每一步动画完成后调用的一个函数，
//无论动画属性有多少，每个动画元素都执行单独的函数
progress: function(now, fx) {
$aaron.text('进度:'+arguments[1])
}
})
stop()：停止当前动画；
- .stop(true)：如果同一元素调用多个动画方法，尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始，直到第一个完成。
- .stop(true,true)：当前动画将停止，但该元素上的 CSS 属性会被立刻修改成动画的目标值
类数组的操作
jQuery对象里面可能包含多个DOM对象，所谓类数组，指的就是这些DOM对象。
1）each(function(i))：循环遍历每一个元素，this代表被遍历的DOM对象，$(this)代表被迭代的jQuery对象，i代表正在被遍历的那个对象的下标。下标从0开始。
如：$obj.each(function(i){//i：表示正在被遍历的那个节点的下标，下标从0开始
2）eq(index)：返回index位置处的jQuery对象。
3）index(obj)：返回下标，其中obj可以是DOM对象或者jQuery对象。
4）length属性：获得jQuery对象包含的DOM对象的个数。
5）get()：返回DOM对象组成的数组。
6）get(index)：返回第index个DOM对象。支持负索引值，即从后向前开始
7）inArray(value,array,[fromIndex])：在数组中查找是否存在，并可指定起始位置；返回value在array中的索引，没有则返回-1.
8）trim()：同java中的trim()，用于去空格。
数据存储
主要是针对HTML5 dataset的简化操作。
- $.data(element,’key’,’value’)：静态接口，存数据
- $.data(element,’key’)：静态接口，取数据
- ele.data(‘key’,’value’)：实例接口，存数据
- ele.data(key)：实例接口，取数据
将JavaScript与HTML分开
目的是使用行为与数据分开。
博客地址：Web基础之jQuery（二）
