jquery-基础事件[上]
<body>
<form>
<input type="submit" value="按钮">
</form>
<input type="button" value="按钮">
<input type="text" value="1111">
<div></div>
</body>
<script>
$(function () {
$('input').bind('click', function () {
alert('弹窗！');
})
---------------------------------------------------------------------------------------
$('input').bind('click', fn);
function fn() {
alert('处理函数');
}
---------------------------------------------------------------------------------------
同时绑定多个事件
$('input').bind('click mouseover', function () {
alert('弹窗！');
})
---------------------------------------------------------------------------------------
$('input').bind('mouseover mouseout', function () {
$('div').html(function (index, value) {
return value + '1';
});
})
---------------------------------------------------------------------------------------
通过对象的键值对绑定多个参数
$('input').bind({
mouseover: function () {
console.log('移入');
},
mouseout: function () {
console.log('移出');
}
});
---------------------------------------------------------------------------------------
删除事件
$('input').bind('click mouseover', function () {
alert('弹窗！');
})
$('input').unbind(); //删除全部事件
---------------------------------------------------------------------------------------
只删除click事件，mouseover事件不删除
$('input').bind('click mouseover', function () {
alert('弹窗！');
})
$('input').unbind('click'); //只删除click事件
---------------------------------------------------------------------------------------
删除函数
$('input').bind('click', fn1);
$('input').bind('click', fn2);
function fn1() {
alert('fn1');
}
function fn2() {
alert('fn2');
}
$('input').unbind('click', fn2);
---------------------------------------------------------------------------------------
简写
$('input').mousedown(function () {
alert('鼠标左键按下');
});
$('input').mouseup(function () {
alert('鼠标左键按下弹起');
});
---------------------------------------------------------------------------------------
$(window).resize(function () {
alert('文档改变了');
});
---------------------------------------------------------------------------------------
$(window).scroll(function () {
alert('滚动条改变了');
});
---------------------------------------------------------------------------------------
$('input').select(function () {
alert('文本选定');
});
---------------------------------------------------------------------------------------
$('input').change(function () {
alert('文本改变');
});
---------------------------------------------------------------------------------------
$('form').submit(function () {
alert('表单提交');
});
})
</script>
