How to create selector like jQuery with additional functions?

user_3371937 0
Viewed 2193

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.

javascript
3 Answers
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);
    });
};
user_100873970

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>

user_107678100
Related