1

将字符串“选择器”传递给 jQuery 函数后：

$('#onenode')

返回一个 jQuery 对象的数组。

这些对象的方法之一是“html”，这就是为什么：

$('#onenode').html('hello!');

作品。

然而...

这：

$('.somenodes')

返回一个jQuery对象数组，这个数组中的每个对象都有方法“html”。

那么如何：

$('.somenodes').html('hello');

工作？“html”方法必须是返回的 Array Object 的方法。

因此，我假设 Array 对象的“html”方法与此类似：

html: function(value) {
   for(var i=0; i<this.length; i+=1) {
      this[i].html(value);
   }
}

这些都是假设，我几乎是在猜测。

我正在尝试创建自己的使用“选择器”的小型库，但我正在努力解决这部分问题。我知道这可能是不正确的——有人可以解释一下 jQuery 是如何做到的吗？

4

2 回答 2

4

jQuery 基本上是prototype一大堆方法，你正在使用的 jQuery 实例在return this哪里。this

我正在尝试创建自己的使用“选择器”的小型库

这是在现代浏览器中工作的类 jQuery 模式的一个非常简化的示例：

(function(win, doc) {

  var __slice = [].slice;

  function jQuery(selector) {
    this.el = this._init(selector);
    this.length = this.el.length;
  }

  function $(selector) {
    return new jQuery(selector);
  }

  jQuery.prototype = {

    _init: function(selector) {
      return __slice.call(doc.querySelectorAll(selector));
    },

    each: function(fn) {
      return this.el.some(fn), this;
    },

    map: function(fn) {
      return this.el.map(fn), this;
    }

  };

  win.$ = $;

}(window, document));

您可以使用它来构建类似 jQuery 的库。它的工作方式与 jQuery 完全一样：

$('p').each(function() {
  console.log(this);
});

一个柯里化函数，each是map你开始所需要的一切。这些是 jQuery 几乎在任何地方都使用的方法来操作 DOM 元素。this.el是元素数组，而this是 jQuery 实例。只是不要忘记，您需要return this在每个将被链接的方法中。

于 2013-03-17T06:06:58.390 回答
1

$('.somenodes')不返回数组，它只是一个 jquery 对象，它具有本机数组的一些功能..

前段时间我也有类似的疑问，请检查我的问题的答案.. https://stackoverflow.com/a/11158649/1114536

jQuery 对象目前支持 3 种数组方法：

var methods = 'pop push reverse shift sort splice unshift concat join slice toString indexOf lastIndexOf filter forEach every map some reduce reduceRight'.split(' ')
var implemented = $.grep(methods, function(m) {
    return $.prototype[m] == Array.prototype[m];
});
console.log(implemented); // => ["push", "sort", "splice"]

它们也有切片，但它与数组的切片不同：

$.prototype.slice === Array.prototype.slice // => false
于 2013-03-17T05:49:37.977 回答