原生js document.getElementById(“id“)获取对象与jQuery $(“#id“)获取对象区别

最新推荐文章于 2025-01-07 15:10:08 发布

一只成序源

最新推荐文章于 2025-01-07 15:10:08 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_41191401/article/details/95641546

博客围绕点击div选中radio简化代码展开，从两方面着手。一是用$(':radio')快速选中所有radio，并用ES6循环迭代；二是简化选中方式时，发现$('#id')和getElementById('id')获取对象有差异，前者是数组对象，后者是DOM操作对象，对等需$('#id')[0]。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#li1{
				background-color: red;
				width: 300px;
			}
			#li2{
				background-color: blue;
				width: 300px;
			}
			#li3{
				background-color: cyan;
				width: 300px;
			}
		</style>
	</head>
	 <script type="text/javascript" src="jquery-1.11.0.js" ></script>
	<body>
		<div>
			<ul>
				<li>
					<div id="li1" value="1" onclick="choose(1)">
						<input id="pay1" type="radio" name="pay" value="1"/>
						鹅妈妈木么么么么么
					</div>
				</li>
				<li>
					<div id="li2" value="2" onclick="choose(2)">
						<input id="pay2" type="radio" name="pay" value="2"/>
						鹅妈妈木么么么么么
					</div>
				</li>
				<li>
					<div id="li3" value="3" onclick="choose(3)">
						<input id="pay3" type="radio" name="pay" value="3" />
						鹅妈妈木么么么么么
					</div>
				</li>
			</ul>
		</div>
	</body>
	<script>
		function choose(i){
		const radioList=$(":radio");
        //取消所有选中
		for(let radio in radioList){
			radio.checked=false;
			}
            $("#pay"+i)[0].checked=true;
		}
	</script>
</html>

上篇：点击div即可选中radio中，想了很多办法简化代码。简化思路两个方面。1.jQuery有没有快速选中所有radio的方法2.重新选中radio时方法简化。

第一个方面很轻松，在w3c上直接就找到了。即$(":radio")，当然这种方式还可以选中包括input标签的多种不同的type。相比通过name获取方便很多。直接使用ES6的for（let....in.....）循环快速迭代。

第二方面即简化选中的方式。在此期间遇到问题即：通过jQuery的$("#id")方式获取的input对象a.checked=true；不起作用！而用原生js的getElementById("id")获取的input对象b.checked=true；起到作用！

这个时候我就在想$("#id")和getElementById("id")有啥区别呢，不是一样的吗？最终找到答案。原来都是惯性思维导致的错误。

$("#id")获取的对象其实是一个数组对象，jQuery封装了的。而getElementById("id")获得的直接是DOM的操作对象。

真正想起到对等的作用需要$("#id")[0]，这样两个就相等了。

这个问题还让我了解了一点jQuery原理呢，哈哈！不过底层如何做到的还有待研究。。。。