模拟jQuery,简单仿写API

378 阅读1分钟

jQuery是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器,这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。最近在学习中,也遇到一些问题,看了看源码,看的一脸懵逼,修为不够很多看不懂的,还是先来仿写简单的API,试着理解理解。

1、首先来看看jQuery的addClass() 方法

(1)定义:addClass() 方法向被选元素添加一个或多个类。该方法不会移除已存在的 class 属性,仅仅添加一个或多个 class 属性。如需添加多个类,可以使用空格分隔类名。

(2)语法:

1>.代码:

    $(selector).addClass(class)

2>.参数:class,必需值。规定一个或多个 class 名称。

(3)示例:

1>.代码:

2>.效果:

2、其次是分析需求

从jQuery对应的API可以看出,功能就是增加对应标签的class类名,来到达操作对应标签的目的。

3、最后就是根据需求进行仿写

(1)首先构造一个函数,用于接收并判断传进来的参数是字符串还是节点。同时声明一个伪数组,用于存储接受的字符串或者节点。

(2)分别通过forEach和for接收参数,并进行遍历,编写出两个方法:addClass()和text()。

(3)最后对代码进行封装。

(4)为了和 jQuery 更像。让 window.$ = jQuery; 然后我们再调用即可。

效果如下: