JQ通过$()获得的对象与JS语句获得的对象的区别

最新推荐文章于 2023-07-07 15:41:41 发布

lilysmileforyou

最新推荐文章于 2023-07-07 15:41:41 发布

阅读量3.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JS获得的html DOM对象与JQ中$()获得的JQ对象文章标签： #video1和document.get JQ和JS 对象 js

本文链接：https://blog.youkuaiyun.com/lilysmileforyou/article/details/46709393

JS获得的html DOM对象与JQ中$()获得的JQ对象专栏收录该内容

1 篇文章

订阅专栏

本文探讨了使用jQuery和JavaScript获取DOM元素的区别，并提供了两种方法实现jQuery对象与原生JavaScript对象之间的相互转换。

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

今天遇到了一个问题，一直认为JQ获得的元素和JS获得的元素随时可以通用，其实不是...

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>try</title>
	<script src="jquery-1.11.3.min.js"></script>
	<script>
	$(function(){
		var myVideo = $("#video1"); //JQ语句获得的元素
		// var myVideo = document.getElementById('video1'); //JS语句获得的元素
		var btus = $("button");
		// alert(btus.eq(2).index());
		btus.click(function(){
			if($(this).index()==0)
				// alert($(this).index()==0);
				// alert(myVideo.attr("width"));
				myVideo.pause(); //不同获取方式，结果不同
			else
				alert('flase');
		});
	});
	</script>
</head>
<body>
	<div style="width:500px; margin:0 auto;" >
		<button>play/pause</button>
		<button>bigger</button>
		<button>moderate</button>
		<button>smaller</button>
		<br>
		<video width="320px" id="video1" style="margin-top:15px;" autoplay="autoplay">
			<source src="http://www.w3school.com.cn/i/movie.mp4" type="video/mp4"> //此视频是从W3C中文网上找的，不用更换路径，直接可以用
		</video>
	</div>
</body>
</html>

然后，可以操作一下，用$()获得的是不起作用的，为什么呢？在网上查了一下，也调试了，其原因就是$()获得的是JQ对象，JS获得是HTML DOM对象，一直认为都是获得DOM对象，现在就要将两者进行转换了。

JQ对象转换为JS获得的DOM对象：$("#video1").get(0) //如果通过id获得的，那get(index)中的index值就是0，如果获得的是集合，那么index的值可以是你想获得的元素的下标。还可以这样：$("#video1")[0]

JS转JQ：$(document.getElementById("video1"))

以上也是我的知识，整合在一起的。