jQuery--DOM对象与jQuery对象的转换

最新推荐文章于 2023-04-08 10:41:35 发布

吴声子夜歌

最新推荐文章于 2023-04-08 10:41:35 发布

阅读量661

点赞数 4

分类专栏： jQuery 文章标签： jQuery

本文链接：https://blog.csdn.net/cold___play/article/details/101799959

版权

jQuery 专栏收录该内容

30 篇文章 2 订阅

订阅专栏

在JavaScript中，通过getElementById()、getElementsByClassName()和querySelector()等方法来获取要页面中的HTML元素。

示例：获取DOM对象

var menuDiv = document.getElementById("menuDiv");
var baseSpan = menuDiv.getElementsByClassName("baseClass");
var span = document.querySelector("#menuDiv");

jQuery对象是通过jQuery库中提供的方法来获取元素对象；jQuery对象本身不能直接调用DOM对象的方法，而是通过将jQuery对象转换成DOM对象后再调用DOM对象的方法。

DOM对象转成jQuery对象

使用jQuery库中的$()方法将DOM对象封装起来，并返回一个jQuery对象。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
	</head>
	<body>
		<div id="myDiv">Hello World</div>
		<script type="text/javascript">
			//获得DOM对象
			var domObject = document.getElementById("myDiv");
			//获得DOM对象中的innerHTML属性值
			alert(domObject.innerHTML);
			//将DOM对象转换成jQuery对象
			var jQueryObject = $(domObject);
			//调用jQuery对象的html()方法
			alert(jQueryObject.html());
		</script>
	</body>
</html>

jQuery对象转换成DOM对象

将jQuery对象转换成DOM对象时，可以把jQuery对象看作一个数组，通过索引[index]或get(index)方法来获得DOM对象。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
	</head>
	<body>
		<div id="myDiv">Hello World</div>
		<script type="text/javascript">
			//获得jQuery对象
			var jQueryObject = $("div");
			//1.通过下标获取DOM对象
			var domObject1 = jQueryObject[0];
			//2.通过get()方法获取DOM对象
			var domObject2 = jQueryObject.get(0);
			alert("方式1：" + domObject1.innerHTML + "方式2：" + domObject2.innerHTML);
		</script>
	</body>
</html>

吴声子夜歌

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery--DOM对象与jQuery对象的转换

在JavaScript中，通过getElementById()、getElementsByClassName()和querySelector()等方法来获取要页面中的HTML元素。示例：获取DOM对象var menuDiv = document.getElementById("menuDiv");var baseSpan = menuDiv.getElementsByClassName("b...
复制链接

扫一扫

专栏目录