版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/dyw_666666/article/details/82705669
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>jquery对象与DOM对象的关系与转换</h1>
<ul>
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
<li>导航4</li>
</ul>
<p id="test">test</p>
</body>
<script src="jquery.js"></script>
<script>
// 选择器找到了test才能改背景
// 下面一行,充分证明$(选择器)返回值不是DOM对象
$('#test').style.background = 'blue';
// 下面二行, 充分证明, DOM对象 ,也不是 $()的返回值.
var test = document.getElementById('test');
test.css('background' , 'blue');
// $()返回的到底是什么? 是对象,但不是DOM对象,而是jQuery对象
/*
jquery对象与DOM对象有什么关系?
答: jQuery按选择器,选中1个或多个DOM对象,
把这些DOM对象,放在jQuery对象上,
索引分别是 0 1 2 3 ...N
*/
console.log($('li'));
// 找到0123依次的4个li对象
// jquery对象转化为DOM对象, 直接[索引] 取值即可
$('li')[2].style.background = 'blue'; // 第三个li标签对象
// 也可以用get(索引)方法
$('li').get(3).style.background = 'green'; // 第四个li标签对象
// DOM对象,转化为 jquery对象, 直接把DOM对象,传给$()
$(test).css('background','orange');
// $('xxx')找xxx标签 $(xxx)找xxxjQuery对象
var lis = document.getElementsByTagName('li');
// ByTagName会找到4个li
console.log($(lis));
// 会把4个DOM对象找出来放到他内部
</script>
</html>