jQuery --(2)jQuery对象 vs DOM对象-优快云博客

本文详细介绍了jQuery对象与DOM对象之间的关系及转换方法，并通过示例代码展示了如何在实际项目中应用这些转换。

2019独角兽企业重金招聘Python工程师标准>>>

jQuery对象与DOM对象的关系：
1.jQuery对象是通过jQuery($())包装DOM对象后产生的对象。
2.jQuery 无法使用DOM对象的任何方法，反之，DOM对象也不能使用jQuery里的方法。
3.共同约定：如果获取的是jQuery对象，那么要在变量之前加上$。

jQuery对象转DOM对象
1.jQuery对象是一个数组对象，可以通过[index]的方法获取DOM对象。
2.使用jQuery中的get(index)方法获取DOM对象。

DOM对象转jQuery对象
1.只需要使用$()将DOM对象包装起来即可。

实例代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<!-- 导入 jQuery库  -->
<script type="text/javascript" src="jquery-3.1.0.min.js"></script>
<script type="text/javascript">
	//$(function(){})相当于window.onload
	$(function(){
		//1.选取对象，如:$("对象id")
		//2.为对象添加响应函数，如：$("对象id").函数
		$("button").click(function() {
			//函数体
			alert("Hello world");
			//弹出选取对象信息，使用this，这里的this很明显代表的是button
			alert($(this).text());
			
			//jQuery对象 转 DOM对象
			//1.获取一个jQuery对象
			var $btn = $("button");
			//2.jQuery对象是一个数组
			//很明显body里面有两个button，所以这里弹框显示2
			alert($btn.length);
			//3.通过[index]方式获取DOM对象
			//很明显btn[0]对应的节点值是 click
			alert($btn[0].firstChild.nodeValue);
			
			//DOM对象 转 jQuery对象
			//1.选取一个DOM对象
			var btn = document.getElementById("btn");
			//2.将DOM对象转成jQuery对象，使用$()进行包装
			alert($(btn).text());
			
		})
	})
</script>
</head>
<body>
	<button id="btn">click</button>
	<button>click2</button>
</body>
</html>

转载于:https://my.oschina.net/u/2312022/blog/757006