jQuery --(2)jQuery对象 vs DOM对象

时间 2019-11-06

标签 jquery 对象 dom 栏目 JQuery 繁體版

原文原文链接

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

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

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

实例代码以下：node

<!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>