Conversion between DOM and Jquery

  • DOM to Jquery
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.3.1.js" type="text/javascript"></script>
		<script type="text/javascript">
			/*
				节点对象:是指页面中的标签、标签中的属性、标签中的文本
				DOM对象:是指通过js代码获取的节点对象
				Jquery对象:是指jQuery封装DOM后得到的对象
				需要注意的一点:DOM对象和jQuery对象都有各自的一套方法 不能混用
			*/
			//文档就绪函数
			$(function(){
    
    
				//DOM
				var d=document.getElementById("one");
				//jQuery对象
				var $j=$("#one");
				
				//console.log($j.html());//html()是jQuery对象 DOM对象无法使用
				
				//DOM对象转Jquery
				var $a=$(d);
				console.log($a.html());
			})
		</script>
	</head>
	<body>
		<h1 id="one">一级标题</h1>
	</body>
</html>

  • Jquery to DOM
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<script src="js/jquery-3.3.1.js" type="text/javascript"></script>
	<script>
		/*
			jquery对象看作是一个数组 想要转换为DOM对象
			根据数组的下标获取其中的DOM对象
		*/
	   //文档就绪函数
	   $(function(){
    
    
		   var $j=$("h1");
		   
		   //方式一
		   var d=$j[0];
		   console.log(d.innerHTML);
		   
		   //方式二
		   var d=$j.get(0);
		   console.log(d.innerHTML);
	   })
	</script>
	</head>
	<body>
		<h1 id="one">一级标题</h1>
	</body>
</html>

Guess you like

Origin blog.csdn.net/morensheng/article/details/120635502