模拟jQuery，简单仿写API

2024-05-13 11:08:55

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; 然后我们再调用即可。

效果如下：

模拟jQuery，简单仿写API相关推荐

QT 简单仿写QQ界面
因为要写一个跨平台内网传输工具DKD,为了最大程度的代码复用,所以考虑使用QT,对QT不熟悉,10天的摸索,终于画出简易的仿QQ界面,开发环境为:qt creator+gcc,效果如下: 主窗口的区域 ...
使用html简单仿写一个静态的绝地求生官网首页
这是我以前写的一个静态网页,算一个html入门的简单的教程.刚刚开始学习前端可以用这个练手 1.首先在vscode新建一个文件夹,点击如图所示,点击蓝笔圈起的图标(左边的是新建文件) 起名为绝地求生. ...
jquery手写轮播图_用jQuery如何手写一个简单的轮播图？（附代码）
用jQuery如何手写一个简单的轮播图?下面本篇文章通过代码示例来给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 用 jQuery 手写轮播图先上个效果截图: 主要 ...
超级简单的jQuery纯手写五星评分效果
超级简单的评分功能,分为四个步骤轻松搞定: 第一步: 引入jquery文件:这里我用百度CDN的jquery: <script src="http://apps.bdimg.com/l ...
C++ shared_ptrweak_ptr的简单介绍和仿写
文章目录 shared_ptr 一.shared_ptr的简单介绍二.shared_ptr的使用 1.函数介绍 2.使用三.shared_ptr对象创建方法的讨论 1. 有两种常见的创建的方法: ...
仿写简单的vue虚拟dom
最近在学vue 所以仿写了一些render函数的虚拟dom,还是挺有意思的:) function createElement(tag, prop, children) {if (!(this inst ...
仿写小米官网简单的HTML+CSS练习
说明: 1.由于本人只学习了部分html和css,所以本文没有涉及到js部分. 2.本文并没有实现小米官网首页的全部功能,还存在很多问题.如果以后技能提升,会继续更新实现未完成的功能. 3.这个练习会 ...
从零开始仿写一个抖音App
点击上方"何俊林",马上关注,每天早上8:50准时推送真爱,请置顶或星标本文转载自公号开发者技术前线,原文:https://juejin.im/post/5b9e9bf1e51 ...
模拟jquery链式访问
一直写代码写代码,博客都快荒废了,眼看一月要过完,不能不留下点记忆,嘿嘿,刚研究了下jquery的链式访问,这么好用的技能我赶紧get了下,研究后略微修改,模拟一个简单的链式访问,下面这段代码支持修改 ...

最新文章

热门文章