11、jQuery的事件方法和事件切换使用示例

Sian · 发表于 2016-2-20 21:15:02

[HTML] 纯文本查看 复制代码

<!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>

帐号		自动登录	找回密码
密码			立即注册

[jQuery] 11、jQuery的事件方法和事件切换使用示例