在前端的学习过程中，经常会使用到 jQuery 这个已经封装好的 JavaScript 库。
jQuery 库的简便性就不用多说了，能够极大的简化我们对 JavaScript 的操作。而在 jQuery 中，经常能够碰到一个 $，$是 jQuery 的核心选择器，由 $获取到需要修改的元素，然后对元素进行一系列方法操作。
那么就尝试写一个简单的 $方法来模拟 jQuery 的 $，来个狸猫换太子试试看吧
First
可以编写一个 js 文件，使用 export 来导出定义的 $方法
const $ = function (val) { }
export default $
复制代码
Second
$是一个选择器方法，所以需要传入的内容就是 class 和 id 或者元素等等 css 标识了。
这样可以根据传入的内容获取第一个字符进行判断（这里只考虑了 class、id、元素选择器，并且是最简单的选择，没有考虑到后代元素之类的）
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 方法
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 $
复制代码
这样在页面中就可以根据自己封装的 $轻松调用这些元素操纵方法了，哈哈哈
比如一下代码：
$(".ullist").changeColor('#ff0000')$("#open").setSize(400, 200)$("#open").changeColor('#00ff00')
复制代码
到此，一个简单的自己封装出来的 $就完成啦！
评论