这其实是一个比较简单的js,但由于本人并不擅长js,顶多也就会点皮毛,简简单单的能看懂或写出简简单单的js而已...

由于项目开发的过程中,一个功能需要点击时获取当前点击对象的id,很明显,这是一个事件。之前一直都习惯性用写原生js,现在想试试jQuery,毕竟jQuery比较流行,咱们做技术的也不能不思进步是不o(∩_∩)o

本来对jQuery就不感冒,度娘的时候也没有几个正确的答案,捣腾了一上午,终于把这个功能实现了。

下面直接上代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="http://www.chingli.net/wp-content/uploads/2016/04/jquery-2.0.0.min.js" type=text/javascript></script>
	<style>
		div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}
		div.box span{color:#999;font-style:italic;}
		div.content{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}
		div.content div{min-width:20px;min-height:20px;padding:30px;border:1px solid #446699;background:#ffffff;}
		.bg{background:#ff99cc !important;}
	</style>
	<script>
		$(function(){
			$('.content').click(function (e) {
				$(e.target).addClass('bg');     // 设置背景色
				alert($(e.target).attr('id'));  // 获取id
			})
		})
	</script>
</head>
<body>
	<div class="box">
		<span>点击页面后,设置被点击元素背景色并获取其id:</span><br>
		<div class="content" id = "test">test
			<div id = "test1">test1
				<div id = "test2">test2
					<div id = "test3">test3</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

下面看效果展示图:

点击获取对象id