jQuery对象和Dom对象的互相转换

最新推荐文章于 2021-04-26 14:05:01 发布

滕rush

最新推荐文章于 2021-04-26 14:05:01 发布

阅读量178

点赞数

分类专栏： jQuery学习文章标签： jQuery对象和Dom对象的互相转换

本文链接：https://blog.csdn.net/weixin_43935849/article/details/100880682

版权

jQuery学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

jQuery对象是Dom元素的集合，也称为伪类数组，而Dom对象就是一个Dom元素。
一、根据这一点可以进行两者的互相转换，而jQuery对象转换为Dom对象有两种方法：
1、借助数组下标来读取jQuery对象集合中的某个Dom元素对象；

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>好好儿学习</title>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script>
	$(function(){
		var $li = $("li");
		var li = $li[0];
		alert(li.innerHTML);
	})
</script>
</head>
<body>
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>
</body>
</html>

2、借助jQuery对象方法，如：get（）方法，为get（）方法传递一个下标值，即可从jQuery对象中取出一个Dom对象元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>好好儿学习</title>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script>
	$(function(){
		var $li = $("li");
		var li = $li.get(0);
		alert(li.innerHTML);
	})
</script>
</head>
<body>
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>
</body>
</html>

二、把Dom对象转换为jQuery对象
对于Dom元素来说，直接把它传递给$()函数即可，jQuery会自动把它包装为jQuery对象。然后可以自由调用jQuery定义的方法。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>好好儿学习</title>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script>
	$(function(){
		var li =document.getElementsByTagName("li");
		var $li = $(li[0]);
		alert($li.html());
	})
</script>
</head>
<body>
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>
</body>
</html>

实际上，也可以把Dom元素数组传递给$()函数，jQuery对象会自动把所有Dom元素包装在一个jQuery对象中。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>好好儿学习</title>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script>
	$(function(){
		var li =document.getElementsByTagName("li");
		var $li = $(li);
		alert($li.html());
	})
</script>
</head>
<body>
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>
</body>
</html>

滕rush

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery对象和Dom对象的互相转换

jQuery对象是Dom元素的集合，也称为伪类数组，而Dom对象就是一个Dom元素。一、根据这一点可以进行两者的互相转换，而jQuery对象转换为Dom对象有两种方法：1、借助数组下标来读取jQuery对象集合中的某个Dom元素对象；<!DOCTYPE html><html><head><meta charset="UTF-8">&lt...
复制链接

扫一扫