How does jQuery invoke methods of objects when an Array of jQuery objects is returned?

Question

After passing a string "selector" into the jQuery function:

$('#onenode')

An array of jQuery object's is returned.

One of the methods of these object's is "html", which is why:

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

Works.

However...

This:

$('.somenodes')

Returns an array of jQuery objects, each of the objects in this array has the method "html".

So how does:

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

Work? The "html" method must be a method of the Array Object that is returned.

I assume therefore that the "html" method of the Array Object looks similar to this:

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

These are all assumptions, I'm pretty much guessing.

I am attempting to create my own small library that uses "selectors", but I am struggling with this part. I know that this is probably incorrect -- could someone explain how jQuery really does it?

You can look at the development source code of jQuery. It is very well commented and easy to read: code.jquery.com/jquery-1.9.1.js — Paul
– Paul, Commented Mar 17, 2013 at 5:48
or use this jQuery source viewer! james.padolsey.com/jquery/#v=1.7.2&fn=jQuery.fn.html — MattDiamant
– MattDiamant, Commented Mar 17, 2013 at 5:48
Actually, just have a look at it on github: github.com/jquery/jquery/blob/master/src/manipulation.js#L196 — ahren
– ahren, Commented Mar 17, 2013 at 5:48

elclanrs · Accepted Answer · 2014-02-21 14:12:57Z

4

jQuery is basically a big prototype with a bunch of methods that return this, where this is the instance of jQuery you're working with.

I am attempting to create my own small library that uses "selectors"

Here's a very reduced example of a jQuery-like pattern that works in modern browsers:

(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));

You can use that to build your jQuery like library. It works exactly like jQuery:

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

A currying function, each and map is all you need to get started. Those are the methods the jQuery uses pretty much everywhere to manipulate DOM elements. this.el is the array of elements while this is the jQuery instance. Just don't forget that you need to return this in every method that will be chained.

edited Feb 21, 2014 at 14:12

answered Mar 17, 2013 at 6:06

elclanrs

94.2k21 gold badges137 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

TaylorMac Over a year ago

This is great. This makes sense to me, thank you for writing it to help me understand

Community · Accepted Answer · 2017-05-23 12:06:56Z

1

$('.somenodes') does not return an array, its a jquery object only, which have some functions of native array..

I also had similar doubt some time back, check this answer on my question..https://stackoverflow.com/a/11158649/1114536

jQuery objects currently support 3 array methods:

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"]

They also have slice, but it's not the same slice as arrays have:

$.prototype.slice === Array.prototype.slice // => false

edited May 23, 2017 at 12:06

CommunityBot

11 silver badge

answered Mar 17, 2013 at 5:49

Rajat Singhal

11.3k5 gold badges40 silver badges57 bronze badges

Collectives™ on Stack Overflow

How does jQuery invoke methods of objects when an Array of jQuery objects is returned?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related