jQuery使用向DOM元素附加事件

作者:enenba | 发表于:2012-05-29 19:46 | 分类:学点JQuery

Jquery绑定事件的方法: 使用click、change、mouseout等

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery使用.bind()方法向DOM元素附加事件1</title>
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
</head>
<body>
绑定的另个方法: 使用click、change、mouseout等
<input id="test" type="button" value="点我" />
<script type="text/javascript">
$(document).ready(function(){
	$('#test').click(function(){
		alert('点中了');
	});
});
</script>
</body>
</html>

jq另一个绑定事件的就是使用.bind()方法

下面使用.bind()方法向DOM元素附加事件,功能是

当输入框没有输入内容时,显示“请输入内容”。鼠标悬停时去掉“请输入内容” 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery使用.bind()方法向DOM元素附加事件</title>
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<style type="text/css">
	input{color:gray}
</style>
</head>
<body>
jQuery使用.bind()方法向DOM元素附加事件,可以绑定多个事件,如下:
<input name="text" type="text" value="请输入内容" />
<script type="text/javascript">
$(document).ready(function(){
	$('input:text').bind({
		focus : function(){
			$(this).css('color','black');
			if($(this).val()==''||$(this).val()==null||$(this).val()=='请输入内容'){
				$(this).val('');
			}
		},
		blur : function(){
			if($(this).val()==''||$(this).val()==null){
				$(this).css('color','gray');
				$(this).val('请输入内容');
			}
		}
	});
});
</script>
</body>
</html>

 使用.bind()方法可以绑多个,如上就是为输入文本框加入两个事件:

1是当鼠标聚焦时

2是当鼠标失去焦点时

end

上一篇: 【转】如何写出高效率的正则表达式   |   下一篇:php将HTML标签转成小写» 标签: JS用法总结 学点JQuery DOM

评论: