您的位置：首页 > Web前端 > JQuery
jQuery事件处理（一）

2015-04-20 10:34 134 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery 事件处理(一)</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
/*
|——————————————————————————————————————
1.ready()
$(document).ready(function(){});
2.ready()和window.load的区别
（1）.ready()在DOM结构加载完成之后马上执行
window.load在网页上所有元素全部加载ok后才会执行
例如：一个图片网站有css，js，html和大量图片文件，建议使用ready方法。而不是使用window.load。会有更好的用户体验。
（2）同一个网页，可以多个ready(),但是只能有一个生效的window.
load方法。
3.ready()方法的简写方法
$(function(){});
|——————————————————————————————————————
jQuery事件处理方法
blur([[data],fn])触发失去焦点
$(function(){
$(':text').blur(function(){
alert("####");
});
});
change([[data],fn])当元素的值发生改变的时候会发生change事件

click([[data],fn])
$('div:eq(1)').click(function(){
$(this).css('background','red');
});
dblclick([[data],fn])
error([[data],fn])
focus([[data],fn])
focusin([data],fn)
focusout([data],fn)
keydown([[data],fn])
keypress([[data],fn])
keyup([[data],fn])
$(':text').change(function(){
$('#out').text($(this).val());
});
mousedown([[data],fn])
mouseenter([[data],fn])
mouseleave([[data],fn])
mousemove([[data],fn])
mouseout([[data],fn])
mouseover([[data],fn])
mouseup([[data],fn])
resize([[data],fn])
scroll([[data],fn])
select([[data],fn])
submit([[data],fn])
unload([[data],fn])
|--------------------------------
事件切换
hover([over,]out)
一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。
$('div:last').hover(function(){
$(this).css('background','red');
},function(){
$(this).css('background','green');
});
toggle(fn, fn2, [fn3, fn4, ...])
用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。注意：必须绑定的是click事件！！！！！
$('#out').toggle(function(){
$(this).css('background','red');
},function(){
$(this).css('background','green');
},function(){
$(this).css('background','white');
},function(){
$(this).css('background','yellow');
});

|________________________________

*/
$(function(){
/*$(':text').keyup(function(){
var value = $.trim($(this).val());
if(value == '111'){
$('#out').text('########');
}else{
$('#out').text('&&&&&&&&');
}
});*/
// $('div:last').mouseover(function(){
//     $(this).css('background','red');
// });

});
</script>
<style type="text/css">
#out{width:300px;height:400px;background:#c0c0c0;}
input{
width:250px;
}
</style>
</head>
<body>
<div id="in"><input type="text" name="in" value="请输入用户名">
<button>按钮</button>
</div>
<div id="out"></div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航