js implements a simple method of encapsulating jQuery and a detailed explanation of chain operations

1. Implement the $(".box1").click() method
2. Implement the $("div").click() method
3. Consider three cases of parameters in $( )
4. Implement the on method in jq
5. Implement chain operations
6. Implement the eq method in jq
7. Implement the end method in jq
8. Implement CSS methods in jq
Summarize

I use this article to sort out how to use js to implement a simple method to encapsulate jQuery.

This article implements several jQuery methods below. I divide it into 8 small goals

Implementing the $(".box1").click() method
Implementing the $("div").click() method
Consider three cases of parameters in $( )
Implementing the on method in jq
Implementing chain operations
Implementing the eq method in jq
Implement the end method in jq
Implementing css methods in jq

If there are any inaccuracies, please point them out in the comment section, thank you.

1. Implement the $(".box1").click() method

First of all, we set the first small goal, which is how to implement the functions of the following jQuery code step by step.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 //If you operate in the same file, remember to delete the cdn introduced below
 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
 <style> .box1 {
  width: 100px;
  height: 100px;
  background: red;
 } </style>
</head>
<body>
 <div class="box1"></div>
</body>
<script> $(".box1").click(()=>{
 console.log(456);
 }) </script>
</html>
Copy code

 $(".box1").click(()=>{
 console.log(456);
 })

Okay, let's get back to the topic and analyze the jQuery code above.

$(".box1") implements the selector function.
$(".box1").click is the selector + calling the click method
Finally, pass the function into click.

The first small goal is to encapsulate js by yourself to implement the functions of the above code. We achieve this through a three-step strategy.

js implements $(".box1")
Implement $(".box1").click()
Implement $(".box1").click( ( ) => { console.log("123") } )

The first step is to implement $(".box1") with js, right?

 // Implement $(".box1")
 class jquery {
 constructor(arg) {
  console.log(document.querySelector(arg));
 }
 }

 function $(arg) {
 return new jquery(arg);
 }

 // Implement $(".box1")
 let res = $(".box1");
 console.log(res);

In this way, (".box1") is implemented by constructing the () method and returning the jQuery instance.

Well, the next step is to implement $(".box1").click(). I believe you can see that there is an additional click method in the jquery class.

 // Implement $(".box1").click()
 class jquery {
 constructor(arg) {
  console.log(document.querySelector(arg));
 }

 click() {
  console.log("click method executed");
 }
 }

 function $(arg) {
 return new jquery(arg);
 }

 // Implement $(".box1").click()
 let res = $(".box1").click();
 console.log(res);

Next, we proceed to the third step, which is to implement $(".box1").click( ( ) => { console.log("123") } ).

 // Implement $(".box1").click(() => {console.log("123")})
 class jquery {
 constructor(arg) {
  this.element = document.querySelector(arg);
  // console.log(element);
 }

 click(fn) {
  this.element.addEventListener("click", fn);
 }

 }

 function $(arg) {
 return new jquery(arg);
 }

 // Implement $(".box1").click(() => {console.log("123")})
 $(".box1").click(() => {
 console.log("123")
 });

So far, we have achieved the first small goal. Do you think it is simple? Ok, let’s move on to the second small goal.

2. Implement the $("div").click() method

The second small goal is not difficult either. Considering that there are multiple div elements that need to be bound to click events, if we use selectSelectorAll to obtain the elements, how to deal with it is actually quite simple. Just add one more loop in the click method to obtain the value in the NodeList. I'll post the code directly, you will know after trying it.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style> .box1 {
  width: 100px;
  height: 100px;
  background: red;
 }
 .box2 {
  width: 100px;
  height: 100px;
  background: blue;
 } </style>
</head>

<body>
 <div class="box1"></div>

 <div class="box2"></div>
</body>

<script> // Implement $(".box1").click(() => {console.log("123")})
 class jquery {
 constructor(arg) {
  //The following element stores a NodeList object, which is an array-like object with a length property this.element = document.querySelectorAll(arg);
 }

 click(fn) {
  for(let i = 0; i < this.element.length; i++) {
  this.element[i].addEventListener("click", fn);
  }  
 }

 }

 function $(arg) {
 return new jquery(arg);
 }

 // Implement $(".box1").click(() => {console.log("123")})
 $("div").click(() => {
 console.log("123")
 }); </script>

</html>

Okay, now that you have completed two small goals, I believe you already have a sense of accomplishment.

3. Consider three cases of parameters in $( )

Next, for the third small goal, let’s consider the cases with different parameters in $( ). I will first list three cases. (There may be other situations, which I will not mention here)

1. Case 1: The $() parameter is a string

$(".box1")

2. Case 2: The $() parameter is a function.

//Parameter is function $(function() {
 console.log("123");
 })

3. Case 3: The $() parameter is a NodeList object or a node obtained by selectSelect

// Case 3 $(document.querySelectorAll("div")).click(()=>{
 console.log("123");
 })
 $(document.querySelector("div")).click(()=>{
 console.log("456");
 })

The next small goal is to write functions by hand to implement three situations. First, we add the addEles method and modify the click method above

addEles(eles){
  for (let i = 0; i < eles.length; i++) {
  this[i] = eles[i];
  }
  this.length = eles.length;
 }

 // Implement $(".box1").click(() => {console.log("123")}) 
 click(fn) {
  for(let i = 0; i < this.length; i++) {
  this[i].addEventListener("click", fn);
  }  
 }

Next, we implement three different parameter processing methods

constructor(arg) {

  //Case 1 if (typeof arg === 'string') {
  this.addEles(document.querySelectorAll(arg));
  }else if(typeof arg === 'function') {
  //Case 2 document.addEventListener("DOMContentLoaded", arg);
  }else {
  //Case 3 if (typeof arg.length === 'undefined') {
   this[0] = arg;
   this.length = 1;
  }else {
   this.addEles(arg);
  }
  }

 }

4. Implement the on method in jq

Next, we will achieve the fourth goal and implement the on method of jq

// on method on(eventName, fn) {
  let eventArray = eventName.split(" ");
  //Consider multiple nodes for(let i = 0; i < this.length; i++) {
  //Consider multiple events for(let j = 0; j < eventArray.length; j++) {
   this[i].addEventListener(eventArray[j], fn);
  }
  }
 }

Test again and see if it is ok

// on method $("div").on("mouseover mousedown",function(){
 console.log("on method");
 })

5. Implement chain operations

Next, we will achieve the fifth goal and implement the chain operation of jq

The key point is to add return this in on and click to achieve chaining

//Chain operation//Key point, add return this in on and click to realize chain operation//click method click(fn) {
  for(let i = 0; i < this.length; i++) {
  this[i].addEventListener("click", fn);
  }
  return this; 
  // console.log(this); 
 }

 // on method on(eventName, fn) {
  let eventArray = eventName.split(" ");
  //Consider multiple nodes for(let i = 0; i < this.length; i++) {
  //Consider multiple events for(let j = 0; j < eventArray.length; j++) {
   this[i].addEventListener(eventArray[j], fn);
  }
  }
  return this;
 }

6. Implement the eq method in jq

Next, we will achieve the sixth goal and implement the eq method in jq

//eq method eq(index) {
  return new jquery(this[index]);
 }

The process of implementing new by creating a new jQuery should be clear to everyone. Let's review it:

Execute function
Automatically create an empty object
Set the prototype of the empty object to the prototype property of the constructor
Bind an empty object to this inside a function
If renturn is followed by an object, return that object. If not followed, it will automatically return to this object

7. Implement the end method in jq

Achieve the seventh small goal and implement the end method in jq. To implement this function, in addition to adding a new end() method, we also have to implement it in the constructor, add a new parameter root to the constructor, add a new property prevObject, and add a new parameter this to the eq method.

constructor(arg, root) {
  if(typeof root === "undefined") {
  this.prevObject = [document];
  }else {
  this.prevObject = root;
  }
 //eq method eq(index) {
  return new jquery(this[index], this);
 }
 //end method end() {
  return this.prevObject;
 }

8. Implement CSS methods in jq

In jq, css can get styles, set one style or multiple styles

// Case 1: Get the style (only get the first element)

 let res = $("div").css("background");
 console.log(res);

// Case 2 (setting style)

 $("div").css("background","yellow");

// // Case 3 (setting multiple styles)

 $("div").css({background:"black",width:200,opacity:0.3});

Next, implement the css method

//css method css(...args) {
  if(args.length === 1) {

  //Case 1: Get style if (typeof args[0] === 'string') {
   return this.getStyle(this[0], args[0]);
  }else {
   //Case 3: Setting multiple styles for(let i = 0; i < this.length; i++) {
   for(let j in args[0]) {
    this.setStyle(this[i], j, args[0][j]);
   }

   }
  }
  }else {
  //Case 3 for(let i = 0; i < this.length; i++) {
   this.setStyle(this[i], args[0], args[1]);
  }
  }
 } //css method css(...args) {
 if(args.length === 1) {
  //Case 1: Get style if (typeof args[0] === 'string') {
  return this.getStyle(this[0], args[0]);
  }else {
  //Case 3: Setting multiple styles for(let i = 0; i < this.length; i++) {
   for(let j in args[0]) {
    this.setStyle(this[i], j, args[0][j]);
   }

  }
  }
 }else {
  //Case 3 for(let i = 0; i < this.length; i++) {
  this.setStyle(this[i], args[0], args[1]);
  }
 }
 }

Added cssNumber method to determine attribute names without adding px

//css method uses $.cssNumber = {
 animationIterationCount: true,
 columnCount: true,
 fillOpacity: true,
 flexGrow: true,
 flexShrink: true,
 fontWeight: true,
 gridArea: true,
 gridColumn: true,
 gridColumnEnd: true,
 gridColumnStart: true,
 gridRow: true,
 gridRowEnd: true,
 gridRowStart: true,
 lineHeight: true,
 opacity: true,
 order: true,
 orphans: true,
 widows: true,
 zIndex: true,
 zoom: true
}

Finally, I offer the complete code. If you think it's good, please give me a thumbs up.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style> .box1 {
  width: 100px;
  height: 100px;
  background: red;
 }
 .box2 {
  width: 100px;
  height: 100px;
  background: blue;
  transform-origin: 0 100% 0;
  transition: 0.3s;

 }
 .box2:hover {
  transform: scaleX(2);
  width: 200px;
  height: 100px;
 } </style>
</head>

<body>
 <div class="box1"></div>

 <div class="box2"></div>
 <button>Click</button>
</body>

<script> class jquery {

 constructor(arg, root) {
  if(typeof root === "undefined") {
  this.prevObject = [document];
  }else {
  this.prevObject = root;
  }
  //Case 1 if (typeof arg === 'string') {
  this.addEles(document.querySelectorAll(arg));
  }else if(typeof arg === 'function') {
  //Case 2 document.addEventListener("DOMContentLoaded", arg);
  }else {
  //Case 3 if (typeof arg.length === 'undefined') {
   this[0] = arg;
   this.length = 1;
  }else {
   this.addEles(arg);
  }
  }

 }

 //Add method addEles(eles){
  for (let i = 0; i < eles.length; i++) {
  this[i] = eles[i];
  }
  this.length = eles.length;
 }

 //Chain operation//Key point, add return in on and click to realize chain operation//click method click(fn) {
  for(let i = 0; i < this.length; i++) {
  this[i].addEventListener("click", fn);
  }
  return this; 
  // console.log(this); 
 }

 // on method on(eventName, fn) {
  let eventArray = eventName.split(" ");
  //Consider multiple nodes for(let i = 0; i < this.length; i++) {
  //Consider multiple events for(let j = 0; j < eventArray.length; j++) {
   this[i].addEventListener(eventArray[j], fn);
  }
  }
  return this;
 }

 //eq method eq(index) {
  return new jquery(this[index], this);
 }

 //end method end() {
  return this.prevObject;
 }

 //css method css(...args) {
  if(args.length === 1) {

  //Case 1: Get style if (typeof args[0] === 'string') {
   return this.getStyle(this[0], args[0]);
  }else {
   //Case 3: Setting multiple styles for(let i = 0; i < this.length; i++) {
   for(let j in args[0]) {
    this.setStyle(this[i], j, args[0][j]);
   }

   }
  }
  }else {
  //Case 3 for(let i = 0; i < this.length; i++) {
   this.setStyle(this[i], args[0], args[1]);
  }
  }
 }

 getStyle(ele, styleName) {
  return window.getComputedStyle(ele, null)[styleName];
 }
 setStyle(ele, styleName, styleValue) {
  if(typeof styleValue === "number" && !(styleName in $.cssNumber)) {
  styleValue = styleValue + "px"; 
  }
  ele.style[styleName] = styleValue;
 }

 }

 function $(arg) {
 return new jquery(arg);
 }

 //css method uses $.cssNumber = {
 animationIterationCount: true,
 columnCount: true,
 fillOpacity: true,
 flexGrow: true,
 flexShrink: true,
 fontWeight: true,
 gridArea: true,
 gridColumn: true,
 gridColumnEnd: true,
 gridColumnStart: true,
 gridRow: true,
 gridRowEnd: true,
 gridRowStart: true,
 lineHeight: true,
 opacity: true,
 order: true,
 orphans: true,
 widows: true,
 zIndex: true,
 zoom: true
}
 // //Implementation 1: $(".box1")
 // $("div").click(() => {
 // console.log("123")
 // });

 // //Implementation case 2: Parameter is function // $(function() {
 // console.log('Situation 2');
 // })

 // // Case 3// $(document.querySelectorAll("div")).click(()=>{
 // console.log("123");
 // })
 // $(document.querySelector("div")).click(()=>{
 // console.log("456");
 // })

 // // on method // $("div").on("mouseover mousedown",function(){
 // console.log("on method");
 // })

 //Chain operation// $("div").click(() => {
 // console.log("click method")
 // }).on("mouseover", function() {
 // console.log('chain on method');
 // })

 // $("div").on("mouseover", function() {
 // console.log('chain on method');
 // }).click(() => {
 // console.log("click method")
 // })

 // //eq method // $("div").eq(0).click(() => {
 // console.log("eq method")
 // })

 //endf method// let res = $("div").eq(0).eq(0).eq(0).end();
 // console.log(res);

 //css method// Case 1: Get the style (only get the first element)
 // let res = $("div").css("background");
 // console.log(res);

 // Case 2 (setting style)
 // $("div").css("background","yellow");

 // // Case 3 (setting multiple styles)
 // $("div").css({background:"black",width:200,opacity:0.3}); </script>
</html>

Summarize

This concludes the article on the simple method and chain operation of jQuery encapsulation in js. For more relevant jQuery encapsulation content in js, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:

Steps to encapsulate js into a plug-in
Example of ajax method encapsulated in native js
JavaScript common tool method encapsulation
Native js implements example methods such as file upload, download, and packaging
Encapsulation method of JavaScript slow motion animation function
Common front-end JavaScript method encapsulation
JavaScript common methods and encapsulation details

<<: SQL method for calculating timestamp difference

>>: Tomcat obtains the client domain name of Nginx reverse proxy