jQuery与DOM的对比

最新推荐文章于 2022-12-02 10:10:44 发布

原创最新推荐文章于 2022-12-02 10:10:44 发布 · 229 阅读

1 ·

CC 4.0 BY-SA版权

笔记专栏收录该内容

129 篇文章

订阅专栏

这篇博客探讨了jQuery与DOM之间的主要区别，包括它们的方法使用、对象转化以及在网页加载后的操作。博客中展示了如何将DOM对象转换为jQuery对象，反之亦然，并通过实例说明了jQuery对象不能直接使用DOM的方法，而DOM对象也无法直接调用jQuery的方法。此外，还强调了在实际应用中，理解两者之间的转化和适用场景的重要性。

jQuery与DOM的区别

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery与DOM</title>
		<script type="text/javascript" src="jquery-3.1.0.js"></script>
		<script type="text/javascript">	
			$(function(){//表示页面加载完成之后 相当于onload事件
			//jQuery的本质是DOM对象的数组加一系列功能
			// 	var a = $("button");
			// 	for(var i = 0;i<a.length;i++){
			// 		alert(a[i]);
			// 	}
			//jQuery与DOM方法上使用的区别
			//jQuery无法使用DOM的属性与方法
			//DOM无法使用jQuery的属性与方法
			// document.getElementById("1").innerHTML = "hello";//DOM对象可以使用
			// $("#1").innerHTML = "nihao";//jQuery对象无法使用
			// 	$("#1").click(function() {
			// 		alert("jQuery对象使用");
			// 	});//jQuery对象可以使用
			// 	document.getElementById("1").click(function() {
			// 		alert("jQuery对象使用");//DOM对象无法使用
			// 	});
			//1.DOM对象转化为jQuery对象
			   //1.先有DOM对象
			   //2.$(DOM对象)就可以转化
			   alert($( document.getElementById("1")));
			//2.jQuery对象转化为DOM对象   
			   //1.先有jQuery对象
			   //2.jQuery对象(下标)取出相应的DOM对象
			   alert($( document.getElementById("1"))[0]);
			});
		</script>
	</head>
	<body>
		<button id="1">使用DOM对象调用DOM方法<^tton>
		<button id="2">使用DOM对象调用jQuery方法<^tton>
		<button id="3">使用jQuery对象调用DOM方法<^tton>
		<button id="4">使用jQuery对象调用jQuery方法<^tton>
	</body>
<cml>