npm 包 jquery-tweaks-pmb 使用教程

介绍

jquery-tweaks-pmb 是一款 jQuery 扩展库，提供了许多常用的 DOM 操作方法，以及一些实用的工具函数。该扩展库适用于 jQuery 1.7+ 版本，支持主流浏览器。jquery-tweaks-pmb 提供了非常实用、易用的方法，能够大大提高前端开发效率，减少冗余代码量，是前端开发人员不可错过的工具。

安装

jquery-tweaks-pmb 可以通过 npm 包管理器进行安装，也可以手动下载使用。

使用 npm 安装：

npm install jquery-tweaks-pmb --save

手动下载：

从官方网站 https://github.com/petersendidit/jquery-tweaks-pmb 下载最新版的 jquery-tweaks-pmb。

使用

引入 jquery-tweaks-pmb：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="path/to/jquery-tweaks-pmb.js"></script>

或者：

import $ from 'jquery';
import 'jquery-tweaks-pmb';

API

jquery-tweaks-pmb 提供了许多实用的方法，以下是一些常用的 API：

$.getUrlParams(url)

获取 URL 中的参数，返回一个对象。

const url = 'http://example.com/path?key=value&foo=bar';
const params = $.getUrlParams(url);

console.log(params);
// {key: "value", foo: "bar"}

$.getCookie(name)

获取指定 name 的 cookie 值。

const cookieName = 'myCookieName';
const cookieValue = 'myCookieValue';
document.cookie = `${cookieName}=${cookieValue}`;

console.log($.getCookie(cookieName));
// myCookieValue

$.setCookie(name, value, days)

设置指定 name 的 cookie 值，可设置过期时间（天数）。

const cookieName = 'myCookieName';
const cookieValue = 'myCookieValue';
const expireDays = 1;
$.setCookie(cookieName, cookieValue, expireDays);

$.removeCookie(name)

删除指定 name 的 cookie。

const cookieName = 'myCookieName';
const cookieValue = 'myCookieValue';
document.cookie = `${cookieName}=${cookieValue}`;
$.removeCookie(cookieName);

$.scrollToTop(element, duration)

滚动到指定元素或顶部。

// 滚动到顶部
$.scrollToTop();

// 滚动到指定元素
$.scrollToTop($("#my-element"));

$.getOffsetTop(element)

获取元素距离顶部的距离。

const elementTop = $.getOffsetTop($("#my-element"));

$.isInView(element, threshold)

检测元素是否在视口内，支持设置阈值。

// 不传递阈值时，默认为 0
const isInView = $.isInView($("#my-element"));
console.log(isInView);

// 设置阈值
const isInView2 = $.isInView($("#my-element"), 100);
console.log(isInView2);

更多 API 请查看官方文档：https://github.com/petersendidit/jquery-tweaks-pmb#api

示例

以下示例演示了如何使用 jquery-tweaks-pmb 快速实现一些常用功能。

1. 获取 URL 参数，并根据参数值执行不同的操作。

const params = $.getUrlParams(window.location.href);

if (params.action === 'showModal') {
  $('#myModal').modal('show');
}

1. 检测滚动位置，实现页面回到顶部按钮的显示和隐藏。

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

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

1. 检测元素是否在视口内，实现图片懒加载。

$(window).on('scroll', function() {
    $('img[data-src]').each(function() {
        const img = $(this);
        if ($.isInView(img, 100)) {
            img.attr('src', img.data('src')).removeAttr('data-src');
        }
    });
});

结语

jquery-tweaks-pmb 是一款非常实用的 jQuery 扩展库，提供了许多常用的 DOM 操作方法和工具函数，使前端开发变得更加高效快捷。希望本篇文章能够帮助读者更好地学习和使用 jquery-tweaks-pmb，提升前端开发能力。

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