一个非常小的jQuery替代品,适用于现代浏览器。

Posted

tags:

中文标题:一个非常小的jQuery替代品,适用于现代浏览器。 原文标题:An absurdly small jQuery alternative for modern browsers. 项目评级:Star:6100      Fork:274 下载地址:https://github.com/fabiospampinato/cash 详情介绍

现金

Cash是现代浏览器(IE11+)的一个非常小的jQuery替代品,它提供了jQuery风格的语法来操作DOM。利用现代浏览器功能最大限度地减少代码库,开发人员可以使用熟悉的可链接方法,只需文件大小的一小部分。与jQuery实现100%的功能对等并不是我们的目标,但Cash非常接近,涵盖了大多数日常用例。

比较

<表格>

尺寸

现金

Zepto 1.2.0

jQuery Slim 3.4.1

未最小化

36.5 KB

58.7 KB

227 KB

小型化

16 KB

26 KB

71 KB

小型化&;Gzipped公司

6 KB

9.8 KB

24.4 KB

与jQuery Slim相比,尺寸缩小了76.6%。如果您需要一个较小的捆绑包,我们也支持部分构建。

<表格>

功能

现金

Zepto 1.2.0

jQuery Slim 3.4.1

支持较旧的浏览器

支持现代浏览器

积极维护

命名的事件

键入的代码库

(TypeScript)

TypeScript类型

(由代码生成)

(通过明确类型)

(通过明确类型)

部分构建

(可以排除个别方法)

(可以排除整个模块)

(可以排除整个模块)

如果您正在从jQuery迁移,请务必阅读我们的迁移指南。

用法

从CloudFlare或jsDelivr获取现金并按如下方式使用:

现金也可通过npm作为cash-dom套餐使用:

然后您可以这样使用:

文档

Cash为您提供了一个查询选择器、收集方法和一些库方法。如果您需要有关我们的API的更多详细信息,请查看jQuery,虽然我们没有实现jQuery提供的所有功能,但我们实现的几乎所有功能都应该与jQuery兼容。现金可以通过自定义方法扩展,请阅读此处。

$()

这是Cash的主要选择器方法。它返回一个可操作的节点集合。

如果提供了一个函数,那么一旦DOM准备就绪,就会运行该函数。

收集方法

一旦创建了$()的集合,就可以使用集合原型($.fn)中的这些方法,它们的调用方式如下:

一些额外的方法是可用的,但默认情况下是禁用的。

<表格>

属性

集合

CSS

数据

尺寸

效果

fn.add类()

地址()

fn.css()

函数数据()

fn.重量()

fn.hide()

函数属性()

函数.each()

fn.inner高度()

fn.show()

fn.has类()

fn.eq()

fn.inner宽度()

fn.toggle()

fn.prop()

过滤器()

外部高度()

fn.remove收件人()

第一次()

外部宽度()

fn.removeClass()

fn.get()

fn.宽度()

fn.remove道具()

函数索引()

fn.toggleClass()

最后一次()

fn.map()

fn.slice()

<表格>

事件

表格

操纵

偏移

遍历

fn.off()

fn.序列化()

fn.之后()

函数偏移()

fn.儿童()

函数()

fn.val()

附件()

fn.offsetParent()

fn.关闭()

函数()

fn.附加到()

fn.位置()

函数内容()

fn.ready()

fn.之前()

fn.find()

fn.触发器()

fn.克隆()

fn.has()

转速()

函数.is()

fn.empty()

fn.next()

fn.html()

fn.nextAll()

fn.insertAfter()之后插入()

fn.next直到()

fn.insertBefore()之前插入()

如果

不()

fn.prepend()

fn.租金()

fn.prependTo()

fn.租金()

fn.删除()

fn.parents直到()

fn.replaceAll()

fn.prev()

fn.replaceWith()

fn.prevAll()

fn.text()

fn.prevUntil()之前

fn.unwrap()

fn.siblings()

fn.wrap()

fn.wrapAll()

fn.wrap内部()

$.fn美元

集合的主要原型,允许您通过向所有集合添加方法来使用插件扩展Cash。

地址()

返回一个新的集合,该集合的末尾添加了元素。

fn.add类()

className类添加到集合中的每个元素中。

接受空格分隔className,用于添加多个类。

fn.之后()

在集合之后插入内容或元素。

附件()

将内容或元素追加到集合中的每个元素。

fn.附加到()

将集合中的元素添加到目标元素中。

函数属性()

如果不attrValue,则返回集合中第一个元素的属性值。

attrValue时,设置集合中每个元素的属性值。

fn.之前()

在集合之前插入内容或元素。

fn.儿童()

在没有指定选择器的情况下,返回子元素的集合。

使用选择器,返回与选择器匹配的子元素。

fn.关闭()

返回DOM树上最接近的匹配选择器。

函数内容()

获取匹配元素集中每个元素的子元素,包括文本和注释节点。

用于选择友好iframe中的元素。

fn.克隆()

返回包含克隆元素的集合。

转速()

从DOM中移除集合元素,可以选择与选择器匹配的集合元素。

fn.css()

仅提供属性时返回CSS属性值。

在提供属性和值时设置CSS属性。

在提供对象时设置多个特性。

如果用户的浏览器需要,属性将被自动修改。

函数数据()

在没有参数的情况下,返回一个将所有data-*属性映射到其值的对象。

当akey时,返回对应的data-*属性的值。

当akeyvalue时,将相应的data-*属性的值设置为value

当提供一个对象时,可以设置多个数据。

函数.each()

callback ( index, element )的集合上迭代。回调函数可以通过返回false提前退出迭代。

fn.empty()

清空元素内部标记。

fn.eq()

返回一个具有索引处元素的集合。

fn.extend()

将属性添加到现金收集原型中。

过滤器()

返回应用筛选器选择器/方法所产生的集合。

fn.find()

返回集合中第一个元素的选择器匹配子体。

第一次()

返回仅包含第一个元素的集合。

fn.get()

返回索引处的元素,或返回所有元素。

fn.has()

将匹配的元素集减少为具有与选择器或DOM元素匹配的子体的元素集。

fn.has类()

返回检查集合中是否有任何元素具有className属性的布尔结果。

fn.重量()

返回或设置元素的高度。

fn.hide()

隐藏元素。

fn.html()

返回集合中第一个元素的HTML文本,并设置HTML(如果提供)。

函数索引()

如果未提供元素或选择器,则返回元素在其父级中的索引。返回元素或选择器中的索引(如果是)。

fn.inner高度()

返回元素的高度+填充。

fn.inner宽度()

返回元素的宽度+填充。

fn.insertAfter()之后插入()

在指定的元素后插入集合。

fn.insertBefore()之前插入()

在指定的元素之前插入集合。

函数.is()

返回提供的选择器、元素或集合是否与集合中的任何元素匹配。

最后一次()

返回一个仅包含最后一个元素的集合。

fn.map()

返回一个新集合,将每个元素映射为callback ( index, element )

fn.next()

返回下一个相邻元素。

fn.nextAll()

返回所有接下来的元素。

fn.next直到()

返回所有接下来的元素,直到提供的选择器匹配为止。

fn.not()

在集合/选择器上按假匹配筛选集合。

fn.off()

从集合元素中删除事件侦听器。

接受空格分隔eventName,用于删除多个事件侦听器。

如果在没有参数的情况下调用,则删除所有事件侦听器。

函数偏移()

获取集合中第一个元素相对于文档的坐标。

fn.offsetParent()

获取已定位的第一个元素的祖先。

函数()

将事件侦听器添加到集合元素中。

接受空格分隔eventName,用于监听多个事件。

如果提供了委托,则委托事件。

函数()

将事件侦听器添加到每个元素只触发一次的集合元素中。

接受空格分隔eventName,用于监听多个事件。

如果提供了委托,则委托事件。

外部高度()

返回元素的外部高度。如果includeMargings设置为true,则包括边距。

外部宽度()

返回元素的外部宽度。如果includeMargings设置为true,则包括边距。

fn.租金()

返回作为元素的父级的元素的集合。

fn.租金()

返回作为元素的父级的元素的集合。可选择通过选择器进行筛选。

fn.parents直到()

返回作为元素父级的元素的集合,直到提供的选择器匹配为止。可选择通过选择器进行筛选。

fn.位置()

获取集合中第一个元素相对于其offsetParent的坐标。

fn.prepend()

将内容或元素前置到集合中的每个元素。

fn.prependTo()

将集合中的元素前置到目标元素。

fn.prev()

返回前面的相邻元素。

fn.prevAll()

返回以前的所有元素。

fn.prevUntil()之前

返回之前的所有元素,直到提供的选择器匹配为止。

fn.prop()

仅提供属性时返回属性值。

在提供特性和值时设置特性,在提供对象时设置多个特性。

fn.ready()

调用DOMContentLoaded上的回调方法。

fn.删除()

从DOM中移除集合元素(可选地,与选择器匹配),并移除它们的所有事件侦听器。

fn.replaceAll()

这类似于fn.replaceWith(),但源和目标颠倒了。

fn.replaceWith()

用提供的新内容替换集合元素。

fn.remove收件人()

从集合元素中删除属性。

接受空格分隔的attrName以删除多个属性。

fn.removeClass()

从集合元素中删除className。

接受用空格分隔的className以添加多个类。

不提供参数将删除所有类。

fn.remove道具()

从集合元素中删除属性。

fn.序列化()

在表单上调用时,序列化并返回表单数据。

fn.show()

显示元素。

fn.siblings()

返回同级元素的集合。

fn.slice()

返回一个新集合,该集合包含从开始到结束的元素。

fn.text()

返回集合中第一个元素的内部文本,如果提供了textContent,则设置文本。

fn.toggle()

隐藏或显示元素。

fn.toggleClass()

根据集合元素是否已经具有className,从集合元素中添加或删除className。

接受用空格分隔的classNames来切换多个类,并接受可选的force布尔值以确保添加(true)或删除(false)类。

fn.触发器()

触发器为集合中的元素提供事件。数据可以作为第二个参数传递。

fn.unwrap()

从所有元素中删除包装。

fn.val()

返回一个输入值。如果提供了value,则将集合值中的所有输入都设置为value参数。

fn.宽度()

返回或设置元素的宽度。

fn.wrap()

围绕每个元素包裹一个结构。

fn.wrapAll()

将结构包裹在所有元素周围。

fn.wrap内部()

将一个结构包裹在所有儿童周围。

现金支付方式

这些方法是从全局$对象导出的,调用方式如下:

一些额外的方法是可用的,但默认情况下是禁用的。

<表格>

类型检查

实用程序

$.isArray()

$.guid(美元)

$.isFunction()

每个$.()

$.isNumeric()

$.extend()

$.isPlainObject()

$.parseHTML()

$.isWindow()

$.unique()

$.guid(美元)

一个唯一的数字。

每个$.()

遍历一个数组,并在每个元素上调用callback ( index, element )方法。

遍历一个对象,并在每个属性上调用callback ( key, value )方法。

回调函数可以通过返回false提前退出迭代。

$.extend()

用源对象的属性扩展目标对象,可能也会扩展得很深。

$.isArray()

检查参数是否为数组。

$.isFunction()

检查参数是否为函数。

$.isNumeric()

检查参数是否为数字。

$.isPlai美元

对象()

检查参数是否为普通对象。

$.isWindow()

检查参数是否为Window对象。

$.parseHTML()

从HTML字符串中返回集合。

$.unique()

返回已删除重复项的新数组。

贡献

如果您发现问题,或者有功能请求,请打开一个问题。

如果您想提出提取请求,您应该:

谢谢

许可证

麻省理工学院©Fabio Spampinato

Select2 适用于宽度较小的@Html.DropDownList Jquery UI 对话框?

jQuery animate 是不是在现代浏览器上使用 css3 过渡?

适用于非常小的集群的聚类算法

css 适用于现代浏览器的Clearfix

parent.navigate 仅适用于 IE。我必须有啥替代方法才能使其与其他浏览器一起使用?

33前端 | 原生JS替代jQuery API实现