jQuery如何实现点击页面获得当前点击元素的id或其他信息
如下代码可以实现点击页面获得被点击元素的id
1
2
3
|
$(document).click( function (e) { // 在页面任意位置点击而触发此事件
$(e.target).attr( "id" ); // e.target表示被点击的目标
})
|
示例代码如下
-
创建Html元素
12345678910<
div
class
=
"box"
>
<
span
>点击页面后,设置被点击元素背景色并获取其id:</
span
>
<
div
class
=
"content"
id = "test">test
<
div
id = "test1">test1
<
div
id = "test2">test2
<
div
id = "test3">test3</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
-
设置css样式
12345div.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
;}
-
编写jquery代码
123456$(
function
(){
$(document).click(
function
(e) {
alert($(e.target).attr(
'id'
));
// 获取id
})
})
-
观察效果