npm 包 oe-like-jquery 使用教程

在前端开发中，jQuery 是非常常用的一个库。但是随着 ECMAScript 的发展，越来越多的浏览器原生支持了许多 jQuery 常用的功能。而 oe-like-jquery 是一个通过原生 JavaScript 实现类似 jQuery 的 API 的 npm 包，可以方便地在现代浏览器中进行开发。

安装 oe-like-jquery

你可以通过 npm 来安装 oe-like-jquery npm 包:

npm install oe-like-jquery --save

使用 oe-like-jquery

安装完 oe-like-jquery 之后，你需要在项目里引入相关的 js 文件或者使用打包工具进行打包。在你的 js 文件中，你可以这样来使用 oe-like-jquery:

import { $ } from 'oe-like-jquery';
const $element = $('body');
$element.addClass('some-class');

我们来看一个例子，在页面上添加一个新的条目：

-- -------------------- ---- -------
------ - - - ---- -----------------

----- ----- - --------------------
----- ------ - ---------------------------------
----- ----- - ----------------
----- ------- - ---------------------

------------------- -- -- -
  ----- ----- - -------------
  -- -------- -
    ------------- ----- - --------
    -------
  -
  ----- ----- - ----------------------
  --------------------
  ---------------
---

这段代码创建了一个表单，向列表添加新条目。在这个例子里，我们使用了 $、find、on、text、append 方法，它们与 jQuery 中的方法具有相同的用法和功能。

oe-like-jquery API

oe-like-jquery 的 API 与 jQuery 很相似，所有方法以 $ 作为前缀。我们来看看这个库的主要方法。

选择器

$(selector)

传入选择器，并返回一个 oe-like-jquery 对象，其中包含匹配到的所有元素。

const $elementById = $('#some-id');
const $elementByClass = $('.some-class');
const $elementByTagName = $('p');
const $elementByAttribute = $('[data-foo="bar"]');

数据

data(key, value)

获取或设置元素上的 data 属性。

$('.some-element').data('foo', 'bar');
const value = $('.some-element').data('foo') // 获取 "bar"

样式

addClass(className)

添加 CSS 类名。

$('.some-element').addClass('foo');

removeClass(className)

从元素的 class 列表中删除指定的 class。

$('.some-element').removeClass('foo');

toggleClass(className)

将 class 添加到元素中，如果已存在则删除它。

$('.some-element').toggleClass('foo');

属性

attr(name, value)

获取或设置属性值。

$('.some-element').attr('name', 'value');
const value = $('.some-element').attr('name');

事件

on(eventName, callback)

添加事件监听器。

$('#some-button').on('click', () => {
  alert('Button was clicked');
});

off(eventName, callback)

移除事件监听器。

$('#some-button').off('click', someFunction);

Ajax

$.ajax(options)

发送 Ajax 请求。

$.ajax({
  method: 'POST',
  url: '/some/endpoint',
  data: { name: 'john', age: 23 },
}).then(response => {
  console.log(response);
});

结论

oe-like-jquery 是一个非常方便的工具，可以在现代浏览器中进行前端开发，并省去了对 jQuery 的依赖。你可以在你的项目里使用 oe-like-jquery，享受与 jQuery 相同的 API 和功能。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f7b238a385564ab6a26