这是我参与11月更文挑战的第3天，活动详情查看：2021最后一次更文挑战

在前端的学习过程中，经常会使用到jQuery这个已经封装好的JavaScript库。

jQuery库的简便性就不用多说了，能够极大的简化我们对JavaScript的操作。而在jQuery中，经常能够碰到一个 $， $是jQuery的核心选择器，由$获取到需要修改的元素，然后对元素进行一系列方法操作。

那么就尝试写一个简单的 $方法来模拟jQuery的 $，来个狸猫换太子试试看吧

First

可以编写一个js文件，使用export来导出定义的$方法

const $ = function (val) {
    
}

export default $

Second

$是一个选择器方法，所以需要传入的内容就是class和id或者元素等等css标识了。

这样可以根据传入的内容获取第一个字符进行判断（这里只考虑了class、id、元素选择器，并且是最简单的选择，没有考虑到后代元素之类的）

通过传入的字符串中有无.、#来判断是否是class、ID、或者单纯的元素
通过dom的get方法元素方法获取元素

const $ = function (val) {
    if (!val) return ;
    let type = val.slice(0, 1)
    let name = val.slice(1, val.length)
    let doms
    if (type == '.') {  //判断是否是class
        doms = document.getElementsByClassName(name);
    } else if (type == '#') {  //判断是否是id
        doms = document.getElementById(name);
    } else {   //判断是否是元素
        doms = document.getElementsByTagName(val)
    }
  	return doms;
}

这样获取到的doms就是需要选择的元素了，可以打印一下doms看看，写一句console.log(doms)。

准备一个页面，使用import $ from 'js文件位置'来将$方法引入页面当中.

<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>

效果：获取到了class相对应的元素

在这里插入图片描述

Third

现在元素已经拿到了，但是在jQuery的$方法选中元素后往往还能对元素进行方法操作。此时就可以添加一些方法进入了

比如说添加改变元素颜色和形状的方法，以及绑定on方法

这些方法可以直接绑定在dom元素上面，这样之后就可以通过$().方法的形式去调用这些方法从而对元素进行操作啦。

const $ = function (val) {
    ......
    doms.changeColor = function(color) {  //改变元素颜色方法
        if (type == '.') {
            for (let i = 0; i < this.length; i++) {
                this[i].style.backgroundColor = color;
            }
        } else if (type == '#') {
            this.style.backgroundColor = color;
        }
    }
    doms.setSize = function(width, height) {  //改变元素形状方法
        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 == '#') {
            this.style.width = width + 'px';
            this.style.height = height + 'px';
        }
    }
    doms.on = function(fn, methods) {  // on绑定方法，.on('click', function(){...})
        this.addEventListener(fn, methods)
    }
    return doms;
}

export default $

这样在页面中就可以根据自己封装的$轻松调用这些元素操纵方法了，哈哈哈

比如一下代码：通过changeColor改变背景颜色，通过setSize设置元素大小

$(".ullist").changeColor('#ff0000')
$("#open").setSize(400, 200)
$("#open").changeColor('#00ff00')

在这里插入图片描述

到此，一个简单的自己封装出来的$就完成啦！

模拟jQuery封装一个$方法

First

Second

Third