jQuery 对象和 dom 对象

最新推荐文章于 2022-11-04 11:03:36 发布

少年西西

最新推荐文章于 2022-11-04 11:03:36 发布

阅读量208

点赞数

分类专栏： D_JavaWeb阶段 # D4_jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/qq_45554909/article/details/111568331

版权

D_JavaWeb阶段同时被 2 个专栏收录

104 篇文章 2 订阅

订阅专栏

D4_jQuery

11 篇文章 0 订阅

订阅专栏

1、什么是 jQuery 对象，什么是 dom 对象

Dom对象： 使用javascript的语法创建的对象叫做dom对象，也就是js对象。

1.通过 getElementById()查询出来的标签对象是 Dom 对象
2.通过 getElementsByName()查询出来的标签对象是 Dom 对象
3.通过 getElementsByTagName()查询出来的标签对象是 Dom 对象
4.通过 createElement() 方法创建的对象，是 Dom 对象
DOM 对象Alert 出来的效果是：[object HTML 标签名 Element]

jQuery对象： 使用jquery语法表示对象叫做jquery对象，注意：jquery表示的对象都是数组。

通过 JQuery 提供的 API 创建的对象，是 JQuery 对象
通过 JQuery 包装的 Dom 对象，也是 JQuery 对象
通过 JQuery 提供的 API 查询到的对象，是 JQuery 对象
jQuery 对象 Alert 出来的效果是：[objectObject]

2、jQuery 对象的本质是什么？

jQuery 对象是 dom 对象的数组 +jQuery 提供的一系列功能函数

3、jQuery 对象和 Dom 对象使用区别

jQuery 对象不能使用 DOM 对象的属性和方法 DOM 对象也不能使用 jQuery 对象的属性和方法

4、Dom 对象和 jQuery 对象互转

为什么要进行dom和jquery的转换： 目的是要使用对象的属性或者方法。当你的dom对象时，可以使用dom对象的属性或者方法，如果你要想使用jquery提供的函数，必须是jquery对象才可以。
1、dom对象转化为 jQuery 对象（重点）
1、先有 DOM 对象
2、$(DOM 对象 ) 就可以转换成为 jQuery 对象

2、jQuery 对象转为 dom 对象（重点）
1、先有 jQuery 对象
2、jQuery 对象[下标]取出相应的 DOM 对象

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>04.DOM对象和jQuery对象.html</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">

	$(function(){
		// testDiv.css("color","red")
		// testDiv.style.color = "blue";

		//JQuery是dom对象的数组+jQuery 提供的一系列功能函数。
		/*var $buttons = $("button");
		alert($buttons.length);//4

		for(var i = 0; i < $buttons.length; i++){
			alert($buttons[i]);//[object HTMLButtonElement]
		}
*/
		$("#dom2dom").click(function () {
			var dom2dom = document.getElementById("testDiv");
			dom2dom.innerHTML = "使用DOM对象调用DOM属性";
		});


		//click是jQuery的方法，dom里的是dom对象.onclick = function(){}
		var dom2jQuery = document.getElementById("dom2jQuery");
		$(dom2jQuery).click(function () {
			($("#testDiv")[0]).innerHTML = "使用jQuery对象调用DOM方法";
		});


	});

</script>
</head>
<body>
	
	<div id="testDiv">Atguigu is Very Good!</div>
	
	<button id="dom2dom">使用DOM对象调用DOM方法</button>
	<button id="dom2jQuery">使用DOM对象调用jQuery方法</button>
	<button id="jQuery2jQuery">使用jQuery对象调用jQuery方法</button>
	<button id="jQuery2dom">使用jQuery对象调用DOM方法</button>

</body>
</html>