“This is the 21st day of my participation in the First Challenge 2022. For details: First Challenge 2022.”

Writing in the front

  • Jquery is an efficient, compact, and feature-rich library of javascript tools
  • Jquery has played an important role in the evolution of Web applications
  • Although jquery may not be as useful in today’s framework era, there are some coding tricks in jquery source code that are still worth learning
  • The best way to learn the source code of a library is to implement a minimal version of the library, so this article will implement a minimal jquery step by step

The smallest jquery

  • The following is my – jquery. Js
class Jq {
  // ...
}

function $(arg) {
  return new Jq(arg);
}
Copy the code
  • The following is an example
<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
    <script src="./my-jq.js"></script>
  </head>
  <body>
    <h1>my Jq demo</h1>
    <button>🔘</button>
    <hr />
    <div class="btn">Div simulation BTN</div>
    <div class="btn">Div simulation btn2</div>
  </body>

  <script>
    $(".btn").click(() = > {
      console.log(123);
    });
  </script>
</html>
Copy the code
  • After importing my-jquery, run$Function, input the corresponding parameters, you can complete the corresponding functional requirements

Input selector

  • A selector can select one or more elements
$("button").click(() = > {
  console.log(123);
});
Copy the code
  • The implementation of my-jquery.js is as follows
class Jq {
  constructor(arg, preObj) {
    let argType = typeof arg;
    
    if (argType === "string") {
      let eleList = document.querySelectorAll(arg);
      this.#addEleList(eleList); }} #addEleList(eleList) {
    eleList.forEach((ele, index) = > {
      this[index] = ele;
    });
    this.length = eleList.length;
  }

  click(fn) {
    for (let i = 0; i < this.length; i++) {
      this[i].addEventListener("click", fn); }}}Copy the code
  • The typeof operator is used to get the typeof the input argument, or, if the type is a string, a selector
  • Retrieve the collection of all selected DOM elements via the querySelecterAll API
  • Then forEach through the NodeList from the previous step and mount it to the JQ object in turn for later use
  • Then we implement our click function
    • This function takes a callback callback function
    • The DOM element is then registered with a click event via addEventListener, and the callback received calls back the click event associated with the DOM element
    • This way, when a DOM element is clicked, a prepassed callback function is called to achieve the effect of event binding

summary

  • Today’s article simply implements a minimalist version of jquery that takes a selector parameter and then binds the click event
  • The implementation will continue in the next article, with events bound to native DOM elements, functions as arguments, and events bound to multiple elements.

The last

  • That’s all for today’s sharing, and you’re welcome to discuss it in the comments section 👏.
  • If you feel that the article is written well, I hope you do not begrudge praise, everyone’s encouragement is the biggest power I share 🥰