<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul> <li id="cloth">衣服</li> <li>裤子</li> <li>袜子</li> <li>鞋子</li> </ul> <script src="jquery-1.12.4.js"></script> <script> $(function () { //1。什么是DOM对象（js对象）：使用js的方式获取到的元素就是js对象（DOM对象） var cloth = document.getElementById("cloth"); cloth.style.backgroundColor = "pink"; //2.什么是jq对象：使用jq的方式获取到的元素就是jq对象 var $li = $("li"); $li.text("我改了内容"); //3.jq对象与js对象的区别 //js对象不能调用jq对象的方法 //4.jq对象与js对象的联系（jq对象其实就是js对象的一个集合，伪数组，里面存放了一大堆的js对象）（宏观上） //jq对象不能调用DOM对象的方法 //DOM无法调用jQuery对象的方法：因为是两个不同的对象 //DOM对象调用jquery对象的方法：需要把DOM对象转换成jq对象 //$(cloth).text("hehe"); DOM对象就变成了jq对象 //jquery对象怎么转换成DOM对象（取出来） //$li[0].style.backgroundColor = "red"; }); </script> </body> </html>