如何创建带有附加功能的jQuery选择器？

Question

我试图了解如何使用jQuery和其他库。 我想知道如何使用以下格式创建选择器：

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

到目前为止，我正在尝试下一个，但我不知道如何运行内部函数（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);
    }       
})();

我已经阅读了一些关于JavaScript中模块化模式设计的内容，但我并不了解所有内容。

Answer 1

制作可链接函数的方法首先是使用new关键字创建实例。

这可以通过确保被调用函数的this值是其自身的实例来“自动”完成，如果没有用new显式调用它。

然后，这只是返回实例和使用原型方法的问题。

 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> 

Answer 2

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

Answer 3

jQuery this或$(selector)是像[div, div]这样的数组而不是对象{el: [div, div]} ，所以它不使用this.el来修改元素，这里简化版本

 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>