This is the third day of my participation in the November Gwen Challenge. Check out the details: the last Gwen Challenge 2021

In the learning process of the front end, wE often use jQuery, a wrapped JavaScript library.

Needless to say, the simplicity of the jQuery library greatly simplifies JavaScript operations. In jQuery, it is common to encounter a $, which is the core selector of jQuery. $gets the element that needs to be modified and then performs a series of methods on the element.

Try writing a simple $method that mimics jQuery’s $

First

You can write a JS file that uses export to export the defined $method

const$=function (val) {}export default $
Copy the code

Second

$is a selector method, so all you need to pass in is the class and ID or element identifier.

This can be done by taking the first character of what is passed in (only class, ID, element selector is considered here, and this is the simplest choice, not descendant elements and so on)

1. Check whether the string passed in is a class, ID, or simply an element
2. The element is obtained through the DOM’s get method element method

const$=function (val) {
    if(! val)return ;
    let type = val.slice(0.1)
    let name = val.slice(1, val.length)
    let doms
    if (type == '. ') {  // Check if it is class
        doms = document.getElementsByClassName(name);
    } else if (type == The '#') {  // Check whether it is an ID
        doms = document.getElementById(name);
    } else {   // Determine if it is an element
        doms = document.getElementsByTagName(val)
    }
  	return doms;
}
Copy the code

The DOMS obtained in this way is the element that needs to be selected. You can print the DOMS and write console.log(DOMS).

Prepare a page using import $from ‘js file location ‘to introduce the $method to the page.

<template>
    <div id="testEnCap">
        <div class="ullist"></div>
        <div class="ullist"></div>
        <div class="ullist"></div>
        <div id="open"></div>
    </div>
</template>

<script>
import $ from '.. /js/enCap$'

export default {
    name:"testEnCap".components: {},
    props: {},
    data() {
        return{}; },created() {},
    mounted(){$(".ullist")}};</script>
<style scoped>
    .ullist {
        width: 200px;
        height: 20px;
        margin: 10px;
        background-color: aqua;
    }
</style>
Copy the code

Effect: Get the element corresponding to class

Third

Now that the element is in hand, you can often still perform methods on an element after it has been selected in jQuery’s $method. At this point, you can add some methods to enter

For example, add methods to change the color and shape of elements, and bind on methods

These methods can be bound directly to the DOM element, which can then be passed by $(). Method to perform operations on elements.

const$=function (val) {... doms.changeColor =function(color) {  // Change the element color method
        if (type == '. ') {
            for (let i = 0; i < this.length; i++) {
                this[i].style.backgroundColor = color; }}else if (type == The '#') {
            this.style.backgroundColor = color;
        }
    }
    doms.setSize = function(width, height) {  // Change the shape of the element
        if (type == '. ') {
            for (let i = 0; i < this.length; i++) {
                this[i].style.width = width + 'px';
                this[i].style.height = height + 'px'; }}else if (type == The '#') {
            this.style.width = width + 'px';
            this.style.height = height + 'px';
        }
    }
    doms.on = function(fn, methods) {  .on('click', function(){... })
        this.addEventListener(fn, methods)
    }
    return doms;
}

export default $
Copy the code

This makes it easy to call these element manipulation methods in the page based on the $it wraps, hahaha

For example, change the background color with changeColor and set the element size with setSize

$(".ullist").changeColor('#ff0000'The $()"#open").setSize(400.200The $()"#open").changeColor('#00ff00')
Copy the code

At this point, a simple self-encapsulated $is done!