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 ] )
切换滑动效果
