jquery选择器返回值不能调用css方法

Question

<ul>
        <li>元素01</li>
        <li>元素02</li>
        <li>元素03</li>
        <li>元素04</li>
        <li>元素05</li>
    </ul>

$("li").eq(1).css("background", "orange");    
$("li")[1].css("background", "orange");                //报错

jquery选择器返回值不是可以用[]选取元素的吗，为什么第二种形式报错？

Answer 1

第一种方式，返回的是jQuery包装过后的对象，当然就可以用jQuery的方法来实现设置CSS。
第二种方式，返回的是原生的DOM对象，此时，jQuery的API是Undefined，无法调用的。
这是jQuery封装的原因，jQuery返回一个经过处理的封装对象。
如果console.log($('li'))，你会发现一个有数组，和其他属性的对象。点击数组元素，浏览器会直接跳转到相应的DOM节点处。

Answer 2

这是jquery最基础的知识，$("li")[1]获得的是原生DOM元素，而原生dom元素是没有css这个方法的

Answer 3

$("li")[1].style.background = "orange"

Answer 4

jq选择子元素用eq方法，原生是因为当你通过getElementsByTagName或者getElementsByClassName时，获取到的是数组，所以用[1]这种方式去获取元素