为了更好地说明后面的问题，先将代码贴上来（代码可以直接运行）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>
<ul>
<li id="cloth">衣服</li>
<li>裤子</li>
<li>鞋子</li>
<li>袜子</li>
</ul>
<p>
我是第一个原生的 p 标签中的内容
</p>
<p>
我是第二个原生的 p 标签中的内容
</p>
</body>
<script>
$(function() {
var cloth = document.getElementById("cloth"); //得到的是 DOM 对象
cloth.style.backgroundColor = "pink"; //DOM 对象操作 DOM 对象的方法，没有问题
//cloth.text("哈哈哈"); //程序报错，因为 DOM 对象不能调用 jQuery 对象的方法
//变量名前面加 $ 符号，只是提醒自己这是个 jQuery 对象，并不是必须要这样做
var $p = $("p"); //得到的是 jQuery 对象
console.log($p); //打印 jQuery 对象会看到很多有用的东西，自己可以试一下
$p.text("我是更改后的 p 标签中的内容"); //jQuery 对象操作 jQuery 对象的方法，没有问题
/*
* 如果写成 $p[0].setAttribute("name","thisisp");
* 那么我们在浏览器中打开开发者工具后，点击 Elements 选项，
* 就会看到第一个 p 标签被加上了一个 name 属性，
* 这就是我们后面会讲到的如何将 jQuery 对象转为 DOM 对象
* */
//$p.setAttribute("name","thisisp"); //程序报错，因为 jQuery 对象不能调用 DOM 对象的方法
/*
* DOM 对象转为 jQuery 对象，将 DOM 对象放在 $() 里面即可
* */
$(cloth).text("我现在是 jQuery 对象");
/*
* jQuery 对象转为 DOM 对象：
* 总体思路就是将 jQuery 对象看成一个伪数组，然后将其中的单个元素取出来，得到的就是 DOM 对象
* */
//方法一：$p 是 jQuery 对象，$p[0] 就变成了 DOM 对象
$p[0].style.backgroundColor = "red";
//方法二：$p 是 jQuery 对象，$p.get(1) 就变成了 DOM 对象
$p.get(1).style.backgroundColor = "yellow";
});
</script>
</html>
基本概念
-
什么是 jQuery 对象？
用 jQuery 的方式获取到的对象就是 jQuery 对象。如上面代码中的变量 $p 就是 jQuery 对象
-
什么是 DOM 对象？
使用 js 的方式获取到的对象就是 DOM 对象（ js 对象）。如上面代码中的变量 cloth 就是 DOM 对象
区别与联系
-
jQuery 对象和 DOM 对象有什么区别？
从使用上来讲，它们之间最大的区别就是：jQuery 对象不能调用 DOM 对象的方法，DOM 对象也不能调用 jQuery 对象的方法，因为它们本来就是两个不同的对象。
-
jQuery 对象和 DOM 对象有什么联系？
jQuery 对象其实就是 DOM 对象 ( js 对象) 的一个集合，可以将 jQuery 对象理解为一个伪数组，里面存放的是一大堆的 DOM 对象。所谓伪数组可以将其简单地理解为它没有数组的方法，但有属于自己的一些方法
相互转换（重点）
-
jQuery 对象转为 DOM 对象，方法有两种，具体方法请看上面代码，注释写得很清楚
-
DOM 对象转为 jQuery 对象，将 DOM 对象放在 $() 里面即可，具体方法请看上面代码
158
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
