jQuery如何实现点击页面获得当前点击元素的id或其他信息

如题所述

如下代码可以实现点击页面获得被点击元素的id

$(document).click(function(e) { // 在页面任意位置点击而触发此事件
  $(e.target).attr("id");       // e.target表示被点击的目标
})

示例代码如下

    创建Html元素

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

    设置css样式

    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;}

    编写jquery代码

    $(function(){
    $(document).click(function (e) {
    $(e.target).addClass('bg');     // 设置背景色
    alert($(e.target).attr('id'));  // 获取id
    })
    })

    观察效果

    初始状态

    点击id为test2的div

温馨提示:答案为网友推荐,仅供参考
第1个回答  2018-05-26

点击页面获得当前点击元素的id或者其他信息,使用jquery可以轻松做到这一点

复制代码 代码如下:

得到了当前元素
可以的要标签名,name等你想要的属性 可以控制点击哪写标签触发事件 

js判断字串是否包含另一个字串 ,便可以得到元素id和其他信息。

资料拓展

jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

本回答被网友采纳
第2个回答  2018-06-03

如下代码可以实现点击页面获得被点击元素的id。

编写jquery代码

拓展:

jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。

jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

本回答被网友采纳
第3个回答  2018-06-11

jquery 失去焦点隐藏菜单:

本实例主要用到了一个切换显示与隐藏的事件 hover 与点击事件 click;

以及is.("hidden")对某个元素状态的判断。

<html>

<head>

<title></title

<style>

*{margin:0px;padding:0px;}

body{background:#cccccc;}

ul,ol{list-style-type:none;display:none;}

.menu div{

height:35px;

line-height:35px;

background:#99CC33;

border-bottom:1px solid #333333;

text-align:center;

cursor:pointer;

}
ul{height:auto;margin:1px auto;background:
#99CCCC;text-align:center;}
ul li{width:220px;height:30px;line-height:30px;text-align:center;

}
ul li:hover{background:#ccff33;}
ul li a{text-decoration:none;}
</style>

<script src="../jquery.js"></script>
<script>
$(function(){
var dv=$(".menu div");
dv.click(function(){ //出发页面的其他部分

var aixuexi=$(this);
if(aixuexi.next("ul").is(":hidden")){
aixuexi.next("ul").show();
}else{
aixuexi.next("ul").hide();

<ul>
<li><a href="siteInfo.php" target="main">网站基本信息</a></li>
<li><a href="updateSite.php" target="main">网站配置</a></li>
</ul>

<div>权限管理</div>
<ul>
<li><a href="userGroupList.php" target="main">用户组列表</a></li>
<li><a href="usersPower.php" target="main">用户权限列表</a></li>
</ul>

<div>用户管理</div>
<ul>
<li><a href="userList.php" target="main">用户列表</a></li>
<li><a href="addUser.php" target="main">添加用户</a></li>

</ul>
</div>
</body>
</html>。

本回答被网友采纳
第4个回答  2014-11-03

$(this).attr(属性名)


$('div').click(function(e){
    alert($(this).attr('id'));
    
    //alert($(e.target).attr('id'));
});

本回答被提问者和网友采纳