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://www.g230.com/index.php/168209738.html">谁是nba历史上最伟大的球员</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.g230.com/index.php/1895871766103153020.html">求大神告知这是什么品牌？</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.g230.com/index.php/2059882857656967747.html">我想离婚，可是舍不得孩子怎么办?</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.g230.com/index.php/428159104975040932.html">明明读一本科技书，第一天读了全书总页数的10分之一，第2天比第一天多读八页，还剩120页没读</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.g230.com/index.php/1738210380131115147.html">更换刹车片的时候需要连刹车盘一起换掉吗？</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.g230.com/index.php/75438125.html">我现在很需要你们的帮忙啊！！</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.g230.com/index.php/519558180720769125.html">平沿的帽子和弯沿的棒球帽那个戴起来好看 5950能弄弯么</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.g230.com/index.php/1390019739565823980.html">汽车刹车盘需要更换吗？</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.g230.com/index.php/747738188050051332.html">美发店焗油机，清洗了之后，无法正常工作了，是什么原因？</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.g230.com/index.php/36628289.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://www.g230.com/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?78733b427b0a9dce19688d903e89fc12"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>