Web基础之jQuery（二）

事件
* 绑定事件：
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.targe**t：返回事件源（是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” οnclick=”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的简化操作。
1) $.data(element,’key’,’value’)：静态接口，存数据
2) $.data(element,’key’)：静态接口，取数据
3) ele.data(‘key’,’value’)：实例接口，存数据
4) ele.data(key)：实例接口，取数据

将JavaScript与HTML分开
目的是使用行为与数据分开。

博客地址：Web基础之jQuery（二）