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.

And if you want to add multiple functions, you can use $.fn.extend($.fn, {...}). — Ismael Miguel
– Ismael Miguel, Commented Jul 8, 2017 at 20:48
Sorry, I'm not writting a jQuery plugin, I'm trying to write a "library" and learn. — Fabián Rodríguez
– Fabián Rodríguez, Commented Jul 8, 2017 at 20:52

adeneo · Accepted Answer · 2017-07-08 21:06:10Z

6

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>

answered Jul 8, 2017 at 21:06

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

6 Comments

Ismael Miguel Over a year ago

Remember that jQuery does a lot more things than simply document.querySelectorAll(selector);. It activelly avoids it for ids (recurring to document.getElementById();) and, with some care, for tags too (using document.getElementsByTagName();). Not to mention all the pseudo-selectors.

adeneo Over a year ago

@IsmaelMiguel - of course it does, jQuery is 250 000 bytes (not minimized), so it does a whole lot of things (...all things). This answer is just to show how chainable methods work, not how the entire jQuery library works.

Ismael Miguel Over a year ago

Yes, but the comment is just to tell to curious readers that jQuery isn't just simply using document.querySelectorAll(selector); with a bunch gimmicks on top.

adeneo Over a year ago

@IsmaelMiguel - no, for the "curious reader", it does this, unfortunately copying the entire init code of jQuery doesn't make for a very good answer.

adeneo Over a year ago

@codeWithMe - no it does not! When you write it like I did above, there's no colon. You can either pass in two arguments, seperated by a comma, as in my answer, or you pass in an object, as in your comment, it's up to you.

|

codeWithMe · Accepted Answer · 2018-11-08 07:35:24Z

0

const $ = function(selector) {
    if (!(this instanceof $)) {
        return new $(selector);
    };
    this.el = document.querySelectorAll(selector);
};
$.prototype.css = function(obj) {
    this.el.forEach(function(element) {
        element.style[Object.keys(obj)[0]] = Object.values(obj);
    });
};
$.prototype.click = function(callback) {
    this.el.forEach(function(element) {
        element.addEventListener('click', callback, false);
    });
};

answered Nov 8, 2018 at 7:35

codeWithMe

8922 gold badges12 silver badges17 bronze badges

Comments

cieunteung · Accepted Answer · 2019-02-04 16:48:33Z

jQuery this or $(selector) is array like [div, div] not object {el: [div, div]}, so its not using this.el to modified the elements, here simplified version

if (window.$ === undefined) window.$ = (function () {
    var $, fun = {}, emptyArray = [];

    function Z(dom, selector) {
        var i, len = dom ? dom.length : 0;
        for (i = 0; i < len; i++) this[i] = dom[i];
        this.length = len;
        this.selector = selector || '';
    }
    fun.Z = function (dom, selector) {return new Z(dom, selector);};
    fun.init = function (selector, context) {
        if (!selector) return fun.Z();
        var dom = document.querySelectorAll(selector);
        return fun.Z(dom, selector);
    };
    Z.prototype = {
        splice: emptyArray.splice,
        forEach: emptyArray.forEach,
        html: function (str) {
            return this.forEach(function (el) {
                el.innerHTML = str;
            });
        },
        css: function(obj, value){
          if(typeof obj == 'object'){ // like: .css({background: 'red'})
             for(var k in obj){
              return this.forEach(function (el) {
                el.style[k] = obj[k];
              });
            }
          }
          else{ // called: .css('background', 'red')
            return this.forEach(function (el) {
                el.style[obj] = value;
              });
          }
        }
    };
    $ = function (sel, ctx) {return fun.init(sel, ctx); };

    return $;
})();

<div class="test"> AAAA </div>
<div class="test"> BBBB </div>

<button onclick="$('.test').css({background: 'red'})">red</button>
<button onclick="$('.test').css('background', 'blue')">blue</button>
<br />
<button onclick="console.log($('.test'))">log to console</button>

Collectives™ on Stack Overflow

How to create selector like jQuery with additional functions?

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related