一、jQuery常见的事件
on:添加事件/事件委托
off:删除事件
$('#btn').on({
'click': function(){
console.log('click')
},
'mouseenter': function(){
console.log('mouseenter')
}
})
trigger: 主动触发事件,会触发浏览器默认行为
triggerHandler: 主动触发事件
$('#btn').trigger('click')
$('#btn').triggerHandler('mouseenter')
hover([over,]out)
over:鼠标移到元素上要触发的函数
out:鼠标移出元素要触发的函数
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
click
点击事件
$("p").click( function () { $(this).hide(); });
鼠标事件
mousedown:鼠标按下
mouseup:鼠标松开
mouseenter:鼠标移入
mouseleave:鼠标移出
mousemove:鼠标移动
$("p").mouseenter(function(){
$("p").css("background-color","yellow");
});
二、jQuery效果
重点掌握
show(), hide()
fadeIn(), fadeOut()
animate, stop
一般写法: stop().animate()
show:显示隐藏的匹配元素
hide:隐藏显示的元素
fadeIn:淡入
fadeOut:淡出
fadeToggle:显示淡出,隐藏淡入(当透明度开始时去除display样式)
slideDown 动画显示隐藏元素
slideToggle 动画切换隐藏与显示元素
slideUp 动画隐藏显示元素
//先给body添加一个按钮btn,两个div盒子,使用display:none隐藏其中一个
//<button id="btn">开始动画</button>
//<div style="height: 100px;width: 100px;background: red;"></div>
//<div style="height: 100px;width: 100px;background: green;display: none;"></div>
$('#btn').clicl(function(){
$('div').show()
$('div').show(2000)//动画时长2000毫秒
$('div').hide()
$('div').hide(2000)//动画时长2000毫秒
$('div').fadeIn(3000)//动画时长3000毫秒
$('div').fadeOut(3000)动画时长3000毫秒
$('div').fadeToggle(3000)
$('div').fadeTo(2000, 0.4)
$('div').slideDown(1000)
$('div').slideUp(1000)
$('div').slideToggle(1000)
})
animate:同时执行多个属性的动画
//添加一个div和按钮
//<div id="box" style="width: 100px; height: 100px; background: gold; position: absolute; left: 50px; top: 200px;"></div>
//<button id="btn">开始动画</button>
$('#btn').click(function(){
$('#box').animate({left: 200}, 1000)
.animate({top: 300}, 1000)
.fadeOut(1000)
.fadeIn(1000)
.animate({width: 200}, 1000)
.animate({height: 200}, 1000)
})
stop:停止动画
//添加一个停止按钮
//<button id="stop">stop</button>
$('#stop').click(function(){
// $('#box').stop() // 只能停止当前正在执行的动画
$('#box').stop(true) // 停止所有动画
})