1 <!DOCTYPE html> 2 <html lang="cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 8 <!--引入jquery文件--> 9 <script src="jquery-2.1.1.min.js"></script> 10 11 <script> 12 <!--入口函数--> 13 $(function () { 14 15 // js对象: 通过js方式获取的对象, 也叫dom对象 16 // 通过id获取对象, 并设置该对象的背景色 17 var li = document.getElementById("老子"); 18 li.style.backgroundColor = "red"; 19 20 // jquery对象: 通过jquery试获取的对象 21 // 通过jq获取对象, 并设置该对象的文字 22 var jqLi = $("li"); 23 jqLi.text("哈哈"); 24 25 // 设置该jq对象数组里的第三个对象的背景色 26 jqLi[1].style.backgroundColor = "pink"; 27 28 /* 29 * jq对象相当于一个伪数组, 里面包含的是js对象 30 * 它俩可以相互转换 31 * $符号的实质: 32 * 1. $(function(){}); 入口函数 33 * 2. $(js对象); 将对象转换为jq对象 34 * 3. $("字符串"); 选择器, 用来找对象 35 * */ 36 37 // js对象转换成jq对象 38 $(li).text("嘻嘻"); 39 40 // jq对象转换成js对象(直接取出来就可以) 41 jqLi[3].style.backgroundColor = "blue"; 42 }); 43 </script> 44 <body> 45 <ul> 46 <li id = "老子">老子</li> 47 <li>孙子</li> 48 <li>孔子</li> 49 <li>孟子</li> 50 </ul> 51 </body> 52 </html>