jquery获取某一class的元素，打印出的是jQuery.fn.init(0)，不是HTMLCollection()集合。

Question

使用jquery获取某一class的元素，控制台打印出的是jQuery.fn.init(0)，并没有获取到这一类选择器的元素，我该怎么获取？用jquery获取HTMLCollection()集合？

原生JavaScript打印出来的是HTMLCollection()。

jquery打印出来的是jQuery.fn.init(0)。

附上我的代码

var e = document.getElementsByClassName('star');
console.log(e);


$(document).ready(function(){
    console.log($('.star'));
    $('.star').click(function () {
        $(this).css = ('color', '#00F7DE');
        console.log($(this).tagName);
    });
});

Answer 1

jquery 对取得的元素进行了包装，变成了 jquery 对象，所以才具备了相应的 jquery 对象方法，如果要对jquery 使用原生的 js 方法，需要转成原生的 HTMLelement 对象，方法有：

$('body')//jq 对象
$('body').toArray()
$('body')[0]
Array.from($('body'))

Answer 2

1. 需要去了解 JQuery 源码；

   jQuery = function( selector, context ) {
       return new jQuery.fn.init( selector, context, rootjQuery );
   }

2. int 里会调用 find 函数；在 find 函数里面会发现调用了 contains 函数；

3. 最终是 JQuery 使用 Sizzle 选择器引擎； sizzle 里部分代码如下：

   // Speed-up: Sizzle(.CLASS)
   /*
    * 处理class类型选择器，如：.class
    * 下面条件判断分别是：
    * m = match[3]：有效的class类型选择器
    * support.getElementsByClassName 该选择器的p支持getElementsByClassName
    * context.getElementsByClassName 当前上下文节点有getElementsByClassName方法
    * */            
       else if ((m = match[3]) && support.getElementsByClassName
               && context.getElementsByClassName) {
           push.apply(results, context.getElementsByClassName(m));
           return results;