什么是 pine.js
pine.js 是一个基于 jQuery 的插件，它可以让用户方便地操纵和控制 HTML 元素的显示和隐藏，使前端开发更加便利。
安装和引入 pine.js
你可以通过 npm 安装 pine.js：
npm install pine-js --save
然后在你的项目中引入它：
import "pine-js";
使用 pine.js
pine.js 的调用非常简单，只需要将 jQuery 对象传入，再调用它提供的方法即可。
.pine()
可以将 jQuery 对象转换成 pine.js 对象。
const $element = $("selector");
const pineObject = $element.pine();.pineShow()
让元素显示。
const $element = $("selector");
$element.pineShow();.pineHide()
让元素隐藏。
const $element = $("selector");
$element.pineHide();.pineToggle()
让元素显示或隐藏。
const $element = $("selector");
$element.pineToggle();.pineFadeIn()
让元素淡入。
const $element = $("selector");
$element.pineFadeIn(500); // 淡入时间为 500ms.pineFadeOut()
让元素淡出。
const $element = $("selector");
$element.pineFadeOut(500); // 淡出时间为 500ms.pineFadeToggle()
让元素淡入或淡出。
const $element = $("selector");
$element.pineFadeToggle(500); // 淡入或淡出时间为 500ms.pineSlideDown()
让元素向下滑动展开。
const $element = $("selector");
$element.pineSlideDown(500); // 展开时间为 500ms.pineSlideUp()
让元素向上滑动折叠。
const $element = $("selector");
$element.pineSlideUp(500); // 折叠时间为 500ms.pineSlideToggle()
让元素向上或向下滑动展开或折叠。
const $element = $("selector");
$element.pineSlideToggle(500); // 展开或折叠时间为 500ms示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
-------------- ------------
------- -----------------------------------------------------------
------- -------------------------------------------------------
-------
------
------- ---------------------
------- ---------------------
---- -------------------------
--------
---------- -- -
----- ----------- - -----------
----- ----------- - -----------
----- -------- - ---------------------
-------------------------- -- -
--------------------
---
-------------------------- -- -
--------------------
---
---
---------
-------
-------这段代码会创建两个按钮和一个 div 元素，点击“显示”按钮会使元素显示，点击“隐藏”按钮会使元素隐藏。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005596581e8991b448d6e37