jQuery动画，jQuery事件机制

6.10

jQuery动画

//显示
//show(执行时间，回调函数（动画完成之后的函数）)
$('.show').click(function(){
$('.box').show(500)
})
//隐藏
$('.hide').click(function(){
$('.box').hide(1000)
})
//切换显示与隐藏
$('.toggle').click(function(){
$('box').toggle(1000)
})
//jQuery淡入淡出 切换
$('.fadeIn')
$('.fadeOut')
$('.fadeToggle').click(function(){})
$('.fadeTo').click(function(){
$('.box').fadeTo(1000,0.5)  //执行时间 ,透明度
})
//滑动  slideUp   slideDown  slideToggle
$('.slideUp')
$('.slideDown')
$('.slideToggle')
//jQuery自定义动画  不能设置颜色，要设置需要引入颜色插件
$('.animate').click(function(){
$('.box').animate({
height:'100px',
width:"100px",
left:'300px'
},3000,function(){}) 
})

jQuery事件机制

//链式调用
$('.btn').click(function(){
$('this').css('color','red')
}).mouseenter(funvtion(){
$('this').css('font-size','30px')
})
//bind on
$('.btn').bind('click',function(){

})
$('.btn').on('click',function(){

})
$('.btn').bind({
'click':function(){},
'mouseenter':function(){},
mouseleave(){}
})
//事件对象event
$('btn').bind('click',function(event){
//阻止冒泡
event.stopPropagation()
//阻止默认事件
event.preventDefault()
//key:键名
//keyCode:键码
if(event.keyCode === 13){
console.log('登录')
}
})
//each()方法为每个匹配元素规定要运行的函数
$('li').each(function(){
console,log(this)
})  //循环
//$.each() 函数用于遍历指定的对象或数组		
//jQuery.each(要遍历的数组或对象，回调函数(索引,每一个元素))
var arr = [1,2,3,4]
$.each(arr,function(index,item){
cosole.log(item)
})
var obj = {
name:'zs',
age:18
}
$.each(obj,function(key,value){
console.log(key);
console.log(value);
})

bind 与 on的区别

1、
on()兼容所有版本的jQuery
2、
bind() 方法只能为已经存在于 DOM 中的元素绑定事件，如果新元素后来添加到 DOM 中，那么这些新元素将不会有绑定的事件处理函数
on() 方法 可以为父元素（或更高层的元素）绑定事件，然后指定子元素（或更具体的选择器）作为事件的目标。当这些子元素被点击或触发其他事件时，事件处理函数将会执行。更适用于动态添加到 DOM 中的元素
3、
bind() 的语法是 $(selector).bind(eventType, handler)
on() 的基本语法是 $(selector).on(eventType, handler)
on() 还支持事件代理的语法，如 $(parentSelector).on(eventType, childSelector, handler)
4、在处理大量元素时，使用 on() 进行事件代理通常比直接使用 bind() 为每个元素绑定事件更高效，on() 只需要为一个父元素绑定一个事件处理函数，而不是为每个子元素都绑定一个