1

文字列「selector」を jQuery 関数に渡した後:

$('#onenode')

jQuery オブジェクトの配列が返されます。

これらのオブジェクトのメソッドの 1 つは「html」です。これが理由です。

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

動作します。

でも...

これ：

$('.somenodes')

jQuery オブジェクトの配列を返します。この配列内の各オブジェクトにはメソッド「html」があります。

では、次のようにします。

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

仕事？「html」メソッドは、返される配列オブジェクトのメソッドである必要があります。

したがって、配列オブジェクトの「html」メソッドは次のようになると思います。

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

これらはすべて仮定であり、私はほとんど推測しています。

「セレクター」を使用する独自の小さなライブラリを作成しようとしていますが、この部分に苦労しています。これはおそらく正しくないことはわかっています.jQueryが実際にどのように機能するかを誰かが説明できますか?

4

2 に答える 2

4

jQuery は、基本的に、作業している jQuery のインスタンスであるprototypeメソッドの束を備えた大きなものです。return thisthis

「セレクター」を使用する独自の小さなライブラリを作成しようとしています

以下は、最新のブラウザーで機能する 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オブジェクトのみを返しません..

私もしばらく前に同様の疑問を抱いていました。私の質問でこの回答を確認してください。

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 に答える