Question

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

processDistances

目前，我正在尝试下一个，但我不知道如何运行内部函数（get（），set（））：

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

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

Answer 1

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

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

然后，只需返回实例并使用原型方法。

＆＃13;

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')

＆＃13;

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

＆＃13;

Answer 2

{
"ag-grid": "18.1.1",
"ag-grid-community": "^19.1.1",
"ag-grid-enterprise": "^19.1.1",
"ag-grid-react": "18.1.0",
}

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>

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

3 个答案: