javascript - javascript 中 $ 的工作原理以及如何添加函数

Question

这个问题已经有答案了:

$ Variable (Dollar Sign) in Chrome? (6 个回答)

已关闭 6 年前。

我注意到 window.$ 或 $ 可以在不使用 jQuery 的情况下使用。 这已经内置在浏览器中了吗？ 为什么我看不到有关它的文档？

我想添加/创建类似 jQuery 的东西，而不使用 jQuery。喜欢

$(selector).slide = function(){ //something};

如何在不使用 jQuery 的情况下完成此任务？有没有办法覆盖 window.$ 或创建一个实例？

我知道如何使用 jQuery 顺便说一句，只是想做一些非常简单和轻便的东西。

Answer 1

如果不使用 jQuery，则与 document.querySelector 相同:

$(SELECTOR);
// are same if jQuery is not used
document.querySelector(SELECTOR);

请注意，document.querySelector 返回第一个满足 SELECTOR 的 HTMLElement。

如果您想获取所有元素，请使用 document.querySelectorAll 代替 $$

$$(SELECTOR); // double dollar
// are same if jQuery is not used
document.querySelectorAll(SELECTOR);

火狐:

Chrome:

<小时/>

问题的第 2 部分:构建类似 jQuery 的东西:

下面的示例是一个概念验证，它仅处理第一个选定的元素。

function $(selector){
  return new MyQuery(selector);
}

class MyQuery {
    constructor(selector) {
      this.element = document.querySelector(selector);
    }
     
    html() {
      if (! arguments.length )
        return this.element.innerHTML;
      else {
         this.element.innerHTML = arguments[0];
         return this; // !! important for call chaining
      }
    }
}


//-then -- Use it : 
console.log(
  $('section').html()
);

setTimeout(() => {
   $('section').html(' I am changed by MyQuery');
   console.log(
     $('section').html()
   );
}, 2500);

<section>I want to be extracted by MyQuery</section>