Jquery记录

jQuery中的事件
1. 事件绑定
1)on(events,[data],handler(eventObject),)
　　融合了bind、live、delegate三种函数的特殊,是1.7版本之后新增的一个绑定事件函数,提供了一种统一绑定事件的方法(之前是前三种方法都在用,使用比较混乱)
events -> 事件类型
　　data -> 当一个事件被触发时，要传递给事件处理函数的event.data。
　　handler(eventObject):事件被触发时，执行的函数。
　　在选定的元素上绑定一个或多个事件处理函数。
　　$("p").on("click", function(){
　　　　alert( $(this).text() );
　　});
例如:
jquery代码:
//注意这里的代码和delegate函数的参数顺序是不一样的
　　$("#dd").on({
　　　　click:function(){
　　　　console.log("click...");
　　},
　　mouseover:function(){
　　　　console.log("mouseover...");
　　},"button");
　　$("button").after($("<button>新增按钮1</button>"));
　　$("body").after($("<button>新增按钮2</button>"));
　　$("#dd").after($("<button>新增按钮3</button>"));

　　结果是和上面delegate的结果一样的。
　　注意:on函数只有在指定了绑定事件的范围后,动态添加进来的元素才能也有事件的处理,否则on的效果和bind差不多。
off( events )
　　如果没有参数，删除所有绑定的事件，如果提供了事件类型，只删除该事件类型的绑定事件.(专门针对on绑定的事件)
$("p").off();
$("p").off("click");
　　2)one( events [, data ], handler(eventObject) )
　　给对象绑定一次数据处理,触发处理完之后就失效
　　$( "#btn" ).one( "click", function( event ) {
　　　　alert("hello");
　　});

2. 事件冒泡，事件会按照DOM的层次结构像水泡一样不断向上直至顶端
举例说明:
html代码:
<div>
<span>test</span>
</div>

jQuery代码:
$("div").on("click",function(){
alert("hello");
});
$("span").on("click",function(event){
alert("world");
});

这个时候点击span的时候会触发span的onclick事件,同时也会触发div的onclick事件,因为span在div里面,这种现象就叫做事件冒泡

可以调用事件对象的特定方法来组织事件冒泡: stopPropagation()
$("element").bind("click",function(event){
　//event:事件对象，当点击“element”元素时，事件对象就被创建了，这个事件对象只有事件处理函数才能访问到，事件处理函数执行完毕后，事件对象就被销毁
　　event.stopPropagation(); //停止事件冒泡
})

2.1 对象的默认行为
默认行为:单击超链接会跳转，单击提交会提交表单
例如:
html代码:
<a href="test.html">点击超链接</a>

jquery代码:
$("a").on("click",function(event){
　　alert("大家好");
});

点击超链接后会触发onclick事件,然后执行绑定的函数,函数执行完接着就会进行超链接的跳转,因为这是点击超链接的默认行为。

如果我们想处理完绑定事件,然后阻止这个对象的接下来的默认行为的话,那么需要调用事件对象的指定方法来实现:preventDefault()
jquery代码:
$("a").on("click",function(event){
　　alert("大家好");
　　event.preventDefault();
});

特别注意:如果想同时对事件对象停止冒泡和默认行为，可以在事件处理函数中返回false即可
jquery代码:
$("a").on("click",function(event){
　　alert("大家好");
　　return false;//同时阻止事件冒泡和默认行为
});

jQuery中的动画
1，基础
1)hide()
　　隐藏匹配的元素。 style="display:none"
　　hide( [duration ] [, complete ] )
　　duration 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
　　complete 在动画完成时执行的函数。

2)show()
显示匹配的元素(和hide的参数作用一致)

3)toggle( [duration ] [, complete ] )
toggle()默认是切换元素的显示和隐藏效果
　　$("#my_input").click(function(){
　　　　$("#div2").toggle();
　　});

也可以自定义转换的俩个或者多个函数:
//点击#my_input按钮后#div2就会在c1和c2俩个提前定义好的样式间转换
$("#my_input").toggle(function(){
　　$("#div2").attr("class","c1");
},function(){
$("#div2").attr("class","c2");
});

2，渐变
1)fadeIn( [duration] ,[fn] )
　　通过淡入的方式显示匹配隐藏元素。
　　如果不写duration
　　duration = ("slow","normal", or "fast")/5000毫秒
2)fadeOut( duration ,[fn] )
　　通过淡出的方式隐藏匹配显示元素。
　　duration = ("slow","normal", or "fast")/5000毫秒
3)fadeTo( duration, opacity ,[fn] )
　　opacity:0和1之间的数字表示目标元素的不透明度。
4)fadeToggle( [duration ] [, complete ] )
　　切换渐变效果
　　通过匹配的元素的不透明度动画，来显示或隐藏它们。
　　当被可见元素调用时，元素不透明度一旦达到0，display样式属性设置为none ，所以元素不再影响页面的布局。
3，滑动
1)slideDown( [duration ] [, complete ] )
将给匹配元素的高度的动画，这会导致页面的下面部分滑下去，弥补了显示的方式。
2)slideUp( [duration ] [, complete ] )
向上滑动
3)slideToggle( [duration ] [, complete ] )
切换滑动效果