JQuery应用实例学习 —— 19 JQuery对象与DOM对象的关系与转换_为什么进行jquery对象与mod对象之间的转换-CSDN博客

本文链接：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>