1.鼠标移入移出
$(function(){
/*进入子元素也触发*/
/*$('#div1').mouseover(function() {
$(this).animate({marginTop: 50});//.stop()
});
$('#div1').mouseout(function() {
$(this).animate({marginTop: 100});//.stop()
});*/
/*进入子元素不触发*/
/*$('#div1').mouseenter(function() {
$(this).stop().animate({marginTop: 50});//
});
$('#div1').mouseleave(function() {
$(this).stop().animate({marginTop: 100});//
});*/
/*通过hover(mouseenter+mouseleave)实现简写*/
$('#div1').hover(function() {
$(this).stop().animate({marginTop: 50});
}, function() {
$(this).stop().animate({marginTop: 100});
});
})
2.input框事件
$(function(){
// //一开始就获取焦点,相当于设置了autofocus自动获取焦点了(HTML5 新增表单控件属性)
// $('#txt01').focus();
// //文本框获取焦点的时候(有光标闪烁的时候)
// $('#txt01').focus(function() {
// alert('focus');
// });
// //失去焦点的时候(光标离开的时候)
// $('#txt01').blur(function() {
// alert('blur');
// });
// //输入框内容发生变化的时候,失去焦点后触发,可用于注册时验证用户名是否已存在
// $('#txt01').change(function() {
// alert('change');
// });
//松开键盘按键就触发
$('#txt01').keyup(function() {
alert('keyup');
});
})
3.jQuery其他事件
// //JS原生写法
// window.onload = function(){
// }
// //jQuery写法,等同于上面写法
// $(window).load(function(){
// })
// //ready的写法
// $(document).ready(function(){
// })
// //ready的简写
// $(function(){
// })
// 窗口改变尺寸的时候,会高频触发
$(window).resize(function() {
console.log('3');
});