主页 / 问题 / 1105618
Accepted
bully
Asked:2020-04-05 04:31:25 +0800 CST2020-04-05 04:31:25 +0800 CST

没有 jquery 的 jquery 选择器

  • 772

如何在没有 jquery 的纯 js 中做同样的事情？

$("div[some = 'yeah']").val();
$("button[mybutton = 'submit']").on('click', function(){});
javascript

2 个回答

  1. Best Answer

    我们必须有所保留：只要隐含一个这样的元素，代码是相同的。 

    document.querySelector("div[some = 'yeah']").value;
document.querySelector("button[mybutton = 'submit']").addEventListener('click', function(){});

    完全等效的规则：

    document.querySelectorAll("div[some = 'yeah']")[0].value;
document.querySelectorAll("button[mybutton = 'submit']")
    .forEach( button => {button.addEventListener('click', function(){}});
    • 2

  2. 写在膝盖上。当然，当已经有了现成的、经过深思熟虑的选择时，您不需要制造这样的自行车……但这很酷！）

    console.log( $("div[some='yeah']").val() );

$("div[some='yeah']").val("BUBU!");

console.log( $("div[some='yeah']").val() );

$("button[mybutton ='submit']").show().on('click', function() {
  console.log( $(this).val() );
});

/*****/

function $(selector) {
  return new PseudoJQeryObj(selector); // См. → "Функция - конструктор"
}

function PseudoJQeryObj(selector) {
  var isElem = selector instanceof HTMLElement;
  
  this.elem = isElem ? [selector] : document.querySelectorAll(selector);

  /***/
  this.val = function(str) {
    if (typeof str === "undefined") {
      var val = this.elem[0].value;
      return !val ? "" : (isNaN(val) ? val : Number(val));
      // См. → "Логическое НЕ", "Тернарный оператор"
    }

    for (var i = 0; i < this.elem.length; i++) {
      this.elem[i].value = str;
    }

    return this;
  }
  
  /***/
  this.on = function(type, func) {
    for (var i = 0; i < this.elem.length; i++) {
      this.elem[i].addEventListener(type, function(){
        func.call(this);
      });
    }

    return this;
  }
  
  /***/
  this.show = function() {
    for (var i = 0; i < this.elem.length; i++) {
      this.elem[i].style.display = "block";
    }

    return this;
  }
}
    button {
  display: none;
  margin: 5px;
}
    <div some="yeah">yeah...</div>

<button mybutton="submit" value="1">Клик-Тест-1...</button>
<button mybutton="submit" value="2">Клик-Тест-2...</button>

    • 1

相关问题