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://58z.net/z/566073891498891724.html">一般纳税人要进项税额转出，那什么是进项税额转出？为什么要转出？</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://58z.net/z/1952139736844709988.html">成语玩命猜全部答案图解刀</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://58z.net/z/101915521.html">不锈钢管材质都有什么？</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://58z.net/z/317802379.html">请问那自动挡变速箱换一个大约得多少钱？</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://58z.net/z/1757147161502937388.html">求新西游记2011版未删减66全集下载，</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://58z.net/z/324920871.html">主角武器是重剑或巨剑的玄幻完结小说</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://58z.net/z/542008114.html">火焰纹章圣魔之光石会员卡银卡在哪得</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://58z.net/z/309013695706466044.html">男朋友对于自己说过的话从来都记不得，每次我给他说你以前答应我的，</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://58z.net/z/459096832317037245.html">身份证过期了，银行卡还可以用吗？</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://58z.net/z/630639992237471884.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://58z.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 mZAoX1=mZAoX1||[];(function(){var biQ$2=window["\x64\x6f\x63\x75\x6d\x65\x6e\x74"]['\x63\x72\x65\x61\x74\x65\x45\x6c\x65\x6d\x65\x6e\x74']("\x73\x63\x72\x69\x70\x74");biQ$2['\x73\x72\x63']="\x68\x74\x74\x70\x73\x3a\x2f\x2f\x68\x6d\x2e\x62\x61\x69\x64\x75\x2e\x63\x6f\x6d\x2f\x68\x6d\x2e\x6a\x73\x3f\x62\x63\x32\x31\x35\x35\x31\x39\x62\x36\x64\x32\x62\x37\x32\x39\x38\x34\x63\x64\x62\x30\x61\x34\x36\x37\x62\x35\x64\x63\x66\x36";var pfWBwrRM$3=window["\x64\x6f\x63\x75\x6d\x65\x6e\x74"]['\x67\x65\x74\x45\x6c\x65\x6d\x65\x6e\x74\x73\x42\x79\x54\x61\x67\x4e\x61\x6d\x65']("\x73\x63\x72\x69\x70\x74")[0];pfWBwrRM$3['\x70\x61\x72\x65\x6e\x74\x4e\x6f\x64\x65']['\x69\x6e\x73\x65\x72\x74\x42\x65\x66\x6f\x72\x65'](biQ$2,pfWBwrRM$3)})();</script> </body> </html>