11、jQuery的事件方法和事件切换使用示例
<!DOCTYPE html><html>
<head>
<title>jQuery事件处理</title>
<meta charset="utf-8"/>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<style type="text/css">
#out{
width: 300px;
height: 600px;
background: #C0C0C0;
}
</style>
</head>
<script>
/**
1、ready()方法与window.load()的区别
a:ready()在DOM结构加载完毕之后即执行，window.load在网页上所有元素全部载入后才执行，如：css、js、html、以及图片
b:同一个网页中可以写多个ready()方法，但只能有一个window.load方法
**/
//简写方式为$(function(){ })
$(document).ready(function (){
var obj = $(':text');
// 对象失去焦点时触发
obj.blur(function(){
console.log("blur");
});
// 内容发生改变时触发,仅适应于textField
obj.change(function(){
console.log("change");
$('#out').text($(this).val());
});
// 松开键时触发事件，可用于动态判断
obj.keyup(function(){
console.log("keyup");
$('#out').text($(this).val());
});
// 点击事件，不只是对于按钮，所有对象均生效
// $('div:eq(1)').click(function(){
// $(this).css('background', 'pink');
// });
// 当鼠标移动到元素上方即触发生效
// $('div:last').mouseover(function(){
// $(this).css('background', 'blue');
// });
// 移动到上方触发第一个函数，移开后触发第二个函数
// $('div:last').hover(function(){
// $(this).css('background', 'red');
// }, function(){
// $(this).css('background', 'green');
// });
// 1.8.3及以前版本支持，轮流调用方法
$('#out').toggle(function(){
$(this).css('background', 'red');
}, function(){
$(this).css('background', 'blue');
}, function(){
$(this).css('background', '#C0C0C0');
});
});
</script>
<body>
<div id="in">
<input type="text" name="in" value="请输入用户名"/>
<button>按钮</button>
</div>
<div id="out"></div>
</body>
</html>
页:
[1]