Here are ten small goals

  • Implement the $(“.box1”).click() method
  • Implement the $(“div”).click() method
  • Consider three cases of the argument in $()
  • Implement the ON method in JQ
  • Realize chain operation
  • Implement eq method in JQ
  • Implement the end method in JQ
  • Implement CSS methods in JQ
  • Implement the animate method in JQ
  • Implement extension $.csshook {} method

$(“.box1”).click(

$(".box1").click(()=>{
    console.log(456);
})
Copy the code
  • $(“.box1”) implements the selector.
  • $(“.box1”).click is the selector + call the click method
  • Finally, pass the function inside click.

The first small goal is to encapsulate JS to achieve the functionality of the code above. We have a three-step strategy to achieve this.

$(“.box1”)

$(“.box1”).click()

3, implement $(” box1 “). Click (() = > {the console. The log (” 123 “)})

The first step is to implement $(“.box1”) with JS.

$(".box1") class constructor {constructor(arg) {console.log(document.querySelector(arg)); } } function $(arg) { return new Jq(arg); $(".box1") let res = $(".box1"); console.log(res);Copy the code

This implements the () method and returns a jquery instance by building the () method and returning a jquery instance, and implements the () method and returns a jquery instance and implements (“.box1”).

The next step is to implement $(“.box1”).click(). As you can see, there is a click method in the jquery class.

$(".box1").click() class Jq {constructor(arg) {console.log(document.querySelector(arg)); } click() {console.log(" execute the click method "); } } function $(arg) { return new Jq(arg); } / / $(" box1 "). Click () let res = $(" box1 "). Click (); console.log(res);Copy the code

Next, we in the third step is to implement the $(” box1 “). Click (() = > {the console. The log (” 123 “)}).

$(".box1").click(() => {console.log("123")}) class Jq {constructor(arg) {this.element = document.querySelector(arg); // console.log(element); } click(fn) { this.element.addEventListener("click", fn); } } function $(arg) { return new Jq(arg); } / / $(" box1 "). Click (() = > {the console. The log (" 123 ")}) $(" box1 "). Click (() = > {the console. The log (" 123 ")});Copy the code

2. Implement $(“div”).click()

The second small goal is to consider multiple div elements that need to be bound to a click event. If we use selectSelectorAll to get the element, it’s actually quite simple to create an extra loop in the click method to get the value in NodeList. I’m going to go straight to the code, so you can try it out.

$("div").click(() => {console.log("123")}) class Jq{constructor(arg) {// Element contains a NodeList object. Element has a length attribute this. = document. QuerySelectorAll (arg); } click(fn) { for(let i=0; i<this.ele.length; i++) { this.element[i].addEventListener('click', fn); } return this; } } function $(arg) { return new Jq(arg); }Copy the code

3. Consider three cases of the argument in $()

Next, let’s consider the case where the $() parameter is different. Let me list the three cases. (There may be other cases, but I won’t mention them here.)

1. Case 1: $() is a string

$(".box1")
Copy the code

$() is a function.

$(function() {console.log("123"); })Copy the code

Document. querySelector(“div”) returns the first div that matches the condition. Document. QuerySelectorAll (” div “) returns a NodeList list

/ / situation three $(document. QuerySelectorAll (" div ")). Click (() = > {the console. The log (" 123 "); }) $(document.querySelector("div")).click(()=>{ console.log("456"); })Copy the code

And then the third little goal is the handwriting function to implement three cases. 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; } / / $(" box1 "). Click (() = > {the console. The log (" 123 ")}) click (fn) {for (let I = 0; i < this.length; i++) { this[i].addEventListener("click", fn); }}Copy the code

Next, three different parameter processing methods are implemented

Constructor (arg) {/ / situation if (typeof arg = = = 'string') {enclosing addEles (document. QuerySelectorAll (arg)); } else if (typeof arg = = = 'function') {/ / situation 2 document. AddEventListener (" DOMContentLoaded ", arg); }else {if(typeof arg. Length === 'undefined') {// This [0] = arg; // this.length = 1; this.addEles([arg]); }else { this.addEles(arg); }}}Copy the code

4. Implement the ON method in JQ

The fourth small goal is to implement the ON method of JQ

On (eventName, fn) {let eventArray = eventName.split(" "); 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); }}}Copy the code

Test for correctness

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

5. Chain operation

Next, implement the fifth sub-goal to implement the chain operation of JQ

Add return this to on and click to create a chain

Click (fn) {for(let I = 0; i < this.length; i++) { this[i].addEventListener("click", fn); } return this; } // on method on(eventName, fn) {let eventArray = eventName.split(" "); 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; }Copy the code
  1. Implement eq method in JQ

The sixth sub-goal is to implement the EQ method in JQ

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

How to create a new jquery

1. Execute the function

2. Automatically create an empty object

Point the empty object’s prototype to the constructor’s Prototype property

4. Bind the empty object to this inside the function

5. If renturn is followed by an object, return that object. This object is returned automatically if not followed

7. Implement the end method in JQ

Implement the seventh small goal implements the end method in JQ. To do this, in addition to adding the end() method, we need to add the constructor parameter root, the prevObject property, and the eq method parameter this.

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; }Copy the code

8. Implement CSS methods in JQ

CSS can fetch styles in JQ and set one or more styles

// Get the style (just get the first element)

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

// Set the style

$("div").css("background","yellow");
Copy the code

// // Case three (Set multiple styles

$(" div "). The CSS ({background: "black", width: 200, opacity: 0.3});Copy the code

Next, implement the CSS methods

/ / CSS methodCopy the code
css(... If (typeof args[0] === 'string') {return this.getStyle(this[0], args[0]); }else {for(let I = 0; i < this.length; i++) { for(let j in args[0]) { this.setStyle(this[i], j, args[0][j]); }}}}else {// for(let I = 0; i < this.length; i++) { this.setStyle(this[i], args[0], args[1]); } } } setStyle(ele, styleName, styleValue) { if(typeof styleValue === "number" && ! (styleName in $.cssNumber)) { styleValue = styleValue + "px"; } ele.style[styleName] = styleValue; } getStyle(ele, styleName) { return window.getComputedStyle(ele, null)[styleName]; }Copy the code

Add the cssNumber method to determine the attribute name without adding PX

$. 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 }Copy the code

9. Implement the animate method in JQ

Add a button click button to start animation execution

<button class=" BTN "> click </button>Copy the code
$(".btn").click(() => {
        $(".box1").animate({
            width: "200px"
        });
    })
Copy the code
// animate(... Args) {// Multiple nodes set multiple transition styles; for(let i=0; i<this.length; i++) { this[i].style.transition = "all 1s"; for(let j in args[0]) { this.setStyle(this[i], j, args[0][j]); }}}Copy the code

10, extend $.csshooks

First, mount a cssHook method in JS

$.cssHooks = {}
Copy the code

The CSS method in js returns the value obtained by calling the GET method

css(... args) { if(args.length === 1) { if(typeof args[0] === "string") { if(args[0] in $.cssHooks) { return $.cssHooks[args[0]].get(this[0]); } return this.getStyle(this[0], args[0]); }else { for(let i=0; i<this.length; i++) { for(let j in args[0]) { // console.log(j, args[0][j]) this.setStyle(this[i], j, args[0][j]); } } } }else { for(let i=0; i<this.length; i++) { this.setStyle(this[i], args[0], args[1]); }}}Copy the code

In the setStyle method of js, call the cssHooks set function to determine if the style exists, and set the ele. Style [styleName] style if it does not

setStyle(ele, styleName, styleValue) {
        if(typeof styleValue === "number" && !(styleName in $.cssNumber)) {
            styleValue = styleValue + "px";
        }
        if(styleName in $.cssHooks) {
            $.cssHooks[styleName].set(ele,styleValue);
        }else {
            ele.style[styleName] = styleValue;
        }
    }
Copy the code

The specific extension is as follows

$.cssHooks['wh'] = { get(ele) { console.log(ele); return getComputedStyle(ele, null)['width'] + "-" + getComputedStyle(ele, null)['height']; }, set(ele, value) { ele.style['width'] = value; ele.style['height'] = value; }}Copy the code

Scenario 1: Use the GET method

let res = $(".box1").css("wh");
    console.log(res);
Copy the code

Scenario 2: Set method is used

$(".box1").css("wh", "200px");
Copy the code

Jquery tutorials