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

2024-10-31 06:06:13

推荐回答（5个）

回答1：

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

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

示例代码如下

创建Html元素


	点击页面后，设置被点击元素背景色并获取其id：

	test
		test1
			test2
				test3

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

回答2：

点击页面获得当前点击元素的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+等。

回答3：

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

编写jquery代码

拓展：

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

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

回答4：

jquery 失去焦点隐藏菜单：

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

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

</title</p> <p><style></p> <p>*{margin:0px;padding:0px;}</p> <p>body{background:#cccccc;}</p> <p>ul,ol{list-style-type:none;display:none;}</p> <p>.menu div{</p> <p>height:35px;</p> <p>line-height:35px;</p> <p>background:#99CC33;</p> <p>border-bottom:1px solid #333333;</p> <p>text-align:center;</p> <p>cursor:pointer;</p> <p>}<br>ul{height:auto;margin:1px auto;background:<br>#99CCCC;text-align:center;}<br>ul li{width:220px;height:30px;line-height:30px;text-align:center;</p> <p>}<br>ul li:hover{background:#ccff33;}<br>ul li a{text-decoration:none;}<br></style></p> <p><script src="../jquery.js"></script><br><script><br>$(function(){<br>var dv=$(".menu div");<br>dv.click(function(){ //出发页面的其他部分</p> <p>var aixuexi=$(this);<br>if(aixuexi.next("ul").is(":hidden")){<br>aixuexi.next("ul").show();<br>}else{<br>aixuexi.next("ul").hide();</p> <p><ul><br><li><a href="siteInfo.php" target="main">网站基本信息</a></li><br><li><a href="updateSite.php" target="main">网站配置</a></li><br></ul></p> <p><div>权限管理</div><br><ul><br><li><a href="userGroupList.php" target="main">用户组列表</a></li><br><li><a href="usersPower.php" target="main">用户权限列表</a></li><br></ul></p> <p><div>用户管理</div><br><ul><br><li><a href="userList.php" target="main">用户列表</a></li><br><li><a href="addUser.php" target="main">添加用户</a></li></p> <p></ul><br></div><br></body><br></html>。</p></p> </div> </div> <div class="clear"></div> </div> <div class="wdhdnr"> <div class="huidanrtop"> <div class="wdhuidaxinx"> <div class="wdhuidaxm">回答5：</div> </div> </div> <div class="clear"></div> <div class="wdhuidanrmid"> <div class="zuijiacont"> <p><p>$(this).attr(属性名)</p> <p><br></p> <pre t="code" l="js">$('div').click(function(e){<br> alert($(this).attr('id'));<br> <br> //alert($(e.target).attr('id'));<br>});</pre></p> </div> </div> <div class="clear"></div> </div> </div> </div> <div class="wendaright"> <div class="wdluluerwema"> <div class="wdxgwttop">相关问答</div> <div class="wdxgwtnr"> </div> <div class="clear"></div> </div>  <div class="wdluluerwema"> <div class="wdxgwttop">最新问答</div> <div class="wdxgwtnr"> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://o15.net/index.php/312509128.html">图书编辑职业前景怎样呢？</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://o15.net/index.php/418434032.html">磁电式转速传感器测很低的转速时会降低精度，甚至不能测量。如何创造条件保证磁电式转速传感器正常测转速？</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://o15.net/index.php/597506500.html">智能手机屏幕向右上角倾斜，不知是怎么回事，什么原因，高人解答</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://o15.net/index.php/34443566.html">订书机的用途</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://o15.net/index.php/594535068.html">刚才发了个放大版的很多人说是水牛天牛之类的，其实它没有那么大，没有翅膀是爬行动物，重新发个请问这虫</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://o15.net/index.php/561957551.html">本科护理与卫校的区别</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://o15.net/index.php/537624623.html">请问谁知道<哑舍.长命锁>的故事啊，没有原文，大概讲一下也好，开头最好详细点。谢谢</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://o15.net/index.php/1644700129805998180.html">4⼀19+15乘括号2⼀5+19分之一括号完怎么算</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://o15.net/index.php/202412487368751805.html">厦门市到晋江市青羊镇有动车吗?</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://o15.net/index.php/315272984.html">嗜睡多梦，四肢乏力，虚胖，便溏，医生说是脾肾阳虚，建议我吃归脾丸，可是吃了几天早上口苦</a></div> </div> </div> </div> </div> <div class="clear"></div> <div class="footer">  <div class="fanhuitop"><a href="#top" ref="nofollow"><img src="https://o15.net/static/old/img/fhtop.png" alt="返回顶部" title="返回顶部"></a></div> <div class="dibu"> <div class="dibu"> </div> </div> <div class="banquan"> <p>内容全部来源于网络收集，如有侵权，请联系网站删除：QQ：24596024</p> </div> </div> </div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?f3a9e88f5de712f94fca1c4003dfb2e7"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>