2.6　案例实战

jQuery是在JavaScript基础上进行封装的，因此它的代码本质上也是JavaScript代码。因此，jQuery代码与JavaScript代码可以相互混合使用。用户不需要去区分每一行代码到底是jQuery代码，还是JavaScript代码。但是，jQuery与JavaScript是两个不同的概念，在用法上存在差异。

1．把jQuery对象转换为DOM对象

jQuery对象不能使用DOM对象的方法。如果需要使用DOM对象的方法，就应该先把jQuery对象转换为DOM对象。转换的方法有以下两种。

（1）借助数组下标来读取jQuery对象集合中的某个DOM元素对象。

【示例1】在下面示例中，使用jQuery匹配文档中的所有li元素，返回一个jQuery对象，然后通过数组下标的方式读取jQuery集合中的第一个DOM元素。此时返回的是DOM对象，然后调用DOM属性innerHTML，读取该元素包含的文本信息。

（2）借助jQuery对象方法，如get()方法，为get()方法传递一个下标值，即可从jQuery对象中取出一个DOM对象元素。

【示例2】在下面示例中，使用jQuery匹配文档中的所有li元素，返回一个jQuery对象，然后通过jQuery的get()方法读取jQuery集合中的第一个DOM元素。此时返回的是DOM对象，然后调用DOM属性innerHTML，读取该元素包含的文本信息。

2．把DOM对象转换为jQuery对象

对于DOM对象来说，直接把它传递给$()函数即可，jQuery对象会自动把它包装为jQuery对象，然后就可以自由调用jQuery定义的方法。

【示例3】针对上面示例，可以这样来设计：使用DOM的方法获取所有li元素，然后使用jQuery()构造函数把它封装为jQuery对象，这样就可以方便调用jQuery对象的方法。

实际上，读者也可以把DOM元素数组传递给$()函数，jQuery对象会自动把所有DOM元素包装在一个jQuery对象中。

【示例4】针对上面示例，还可以这样设计。