How to create selector like jQuery with additional functions?

Question

I am trying to understand how to work jQuery and other libraries. I would like to know how to create a selector with this format:

$("#selector").get(); 

By the moment, I am trying the next, but i don't know how to run internal functions (get(), set()):

var $ = (function() {

    var jQuery = {
        get: function() {
            console.log("get() function!!");
            return this;
        },
        set: function() {
            console.log("set() function!!");
            return this;
        }
    };

    return function(el) {
        return document.querySelector(el);
    }       
})();

I have read something about modular pattern design in JavaScript, but I don't understand all.

Answer 1

The way to make chainable functions, is to first and foremost create instances with the new keyword.

This can be done "automatically" by making sure the this value of the called function is an instance of itself, if not explicitly call it with new.

Then it's just a matter of returning the instance and using prototyped methods.

var $ = function(selector) {
  if (! (this instanceof $) ) {
    return new $(selector);
  }
  this.el = document.querySelectorAll(selector);
  return this;
}

$.prototype.css = function(prop, val) {
  this.el.forEach(function(element) {
    element.style[prop] = val;
  });

  return this;
}

$('#test').css('color', 'red').css('font-size', '30px')

<div id="test">test</div>