<jQuery> 二. jQuery对象与DOM对象的关系-优快云博客

本文通过一个具体的实例展示了如何使用jQuery与JavaScript对象进行交互，包括如何获取DOM元素、修改样式及文本内容，并介绍了jQuery对象与原生JS对象之间的转换方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 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>