jquery插件安装教程 jquery 安装 收藏 0

12款超级有用的网页交互jQuery插件

在web前端人员，利用jQuery插件可以大大加快工作效率。不是自己写不好jQuery程序，而是我写一个jQuery可能纠结几天，即使写出来，也不是最简洁，这时候就浪费了代码的质量。一般来说前端工作人员都有自己雕刻jQuery库，是靠自己长时间的积累下，我在这里分享12款jQuery插件如下。

1. μslider网址：http://muslider.musings.it/

2.PageSlide网址：http://srobbin.com/jquery-plugins/pageslide/

3. Rcarousel网址：http://ryrych.github.io/rcarousel/

4. Evo Slider网址：http://evoslider.com/

5.jQuery HiddenPosition网址：http://www.garralab.com/hiddenposition.php

6. Stellar.js网址：http://www.garralab.com/hiddenposition.php

7. jQuery Scroll Path网址：http://joelb.me/scrollpath/

8. jQuery File Upload网址：http://blueimp.github.io/jQuery-File-Upload/

9. Mailcheck网址：https://github.com/mailcheck/mailcheck

10. Sequence.jsry网址：http://www.sequencejs.com/

11. ResponsiveSlides.js v1.32网址:http://responsive-slides.viljamis.com/

12. justgage网址：http://justgage.com/

文/丁向明

做一个有博客的web前端自媒体人，专注web前端开发，关注用户体验，加我qq/微信交流：6135833

http://dingxiangming.com

代码完成AI插件安装【VS Code & IntelliJ】

很难说人工智能是否会取代我们的工作或成为我们的老板。然而，在这种情况发生之前，值得了解它作为一种工具。

在本教程中，我们将学习如何使用AI模型生成代码。我们将安装 llama.cpp 和 Ollama，提供 CodeLlama 和 Deepseek Coder 模型，并通过扩展（Continue、Twinny、Cody Ai 和 CodeGPT）在 IDE（VS Code / VS Codium、IntelliJ）中使用它们。

注意：我使用的是 AMD 5600G APU，但你在此处看到的大部分内容也适用于独立 GPU。每当某些东西是 APU 特定的，我都会将其标记为特定。我使用带有 ROCm 的容器，但 Nvidia CUDA 用户也应该会发现本指南很有帮助。

NSDT工具推荐： Three.js AI纹理开发包 – YOLO合成数据生成器 – GLTF/GLB在线编辑 – 3D模型格式在线转换 – 可编程3D场景编辑器 – REVIT导出3D模型插件 – 3D模型语义搜索引擎 – Three.js虚拟轴心开发包 – 3D模型在线减面 – STL模型在线切割

广义上讲，选择模型时，我们必须考虑其类型、大小和量化 2：

• 指令类型模型旨在回答聊天窗口中提出的问题
• 基本类型模型用于自动完成代码，它们建议后续代码行
• 模型大小是 LLM 中的参数数量，例如 70 亿，尺寸越大意味着需要的内存越多，模型越慢
• 量化从 2、3、4、5、6 到 8 位，位数越大意味着需要的内存越多，模型越慢

代码完成模型在后台运行，因此我们希望它们非常快。我使用小型 deepseek-coder-1.3b-base-GGUF 4 来完成这项任务。聊天模型更具按需性，因此它们可以和 VRAM 一样大，例如CodeLlama-7B-Instruct-GGUF 2.

默认情况下，llama.cpp 和 Ollama 服务器监听本地主机 IP 127.0.0.1。由于我们想从外部连接到它们，因此在本教程的所有示例中，我们将该 IP 更改为 0.0.0.0。通过此设置，我们有两个选项可以连接到容器内的 llama.cpp 和 Ollama 服务器。

我们可以使用容器的 IP 访问服务器。这很简单，适用于主机和同一主机上的其他容器。我们可以使用 incus list 命令获取容器的 IP。

但是，如果我们想将这些服务器公开给我们网络上的其他计算机，我们可以使用代理网络设备。对于每个服务的模型，例如一个 instruct 和一个 base，需要一个具有不同端口的代理设备。监听地址可以是你的机器的 IP，你可以使用 hostname -I | awk \'{print $1}\’ 命令获取。相应地更改 X.X.X.X，端口取决于你使用的是 llama.cpp 还是 Ollama：

此选项有一个缺点。当我们断开主机与路由器的连接（拔掉以太网电缆、切换到飞行模式等）时，该主机上带有代理设备的容器将无法启动并会产生错误：

如果你只想在主机上使用 llama.cpp 和 Ollama，只需使用容器的 IP 地址访问它们并跳过代理设备即可。

对于 llama.cpp，我们需要一个安装了 ROCm 的容器（不需要 PyTorch）。相关教程在这里。它的大小约为 30 GB，所以不要感到惊讶。如果你打算在同一个容器中运行 IDE，请在创建它时使用 GUI 配置文件 。

让我们使用默认的 ubuntu 用户登录容器：

获取 llama.cpp 源代码很简单，我们可以使用带有最新版本标签的 git clone 命令：

llama.cpp 支持 UMA，有关更多信息，请参阅之前链接的 ROCm 教程，因此我将使用必要的标志对其进行编译（构建标志取决于您的系统，因此请访问官方网站了解更多信息）。对于我的 AMD 5600G APU，我使用：

• LLAMA_HIPBLAS=1，它在支持 HIP 的 AMD GPU 上提供 BLAS 加速
• LLAMA_HIP_UMA=1 是 APU 专用的，如果您有常规 GPU 或在 UEFI/BIOS 中为 APU 分配了固定数量的 VRAM，请跳过它
• AMDGPU_TARGETS=gfx900 取决于您的 GPU 架构，有关更多信息，请参阅之前链接的 ROCm 教程

有了所有这些，我的编译命令如下所示：

使用 llama.cpp 时，我们必须手动下载模型。找到它们的最佳地点是 huggingface.co。例如：

• 你可以从 TheBloke 帐户中搜索所有 GUFF 模型
• 或所有用户提交的 starcoder2 指令模型

让我们将 deepseek-coder-1.3b-base-GGUF 和 CodeLlama-7B-Instruct-GGUF 下载到 ~/llama.cpp/models/ 文件夹中：

你还可以使用 Ollama 下载模型并将其复制到 llama.cpp。请参阅 ollama库列表 。 我们将在 Ollama 部分讨论此选项。

现在我们可以提供这些模型了。我想同时为它们提供服务，因此在两个单独的终端窗口中我使用命令：

其中：

• -c N 是提示上下文的大小（默认值：512）
• -ngl N 是要存储在 VRAM 中的层数（增加直到您几乎使用了所有 VRAM，或者使用值 999 尝试将所有层移动到内存中）
• –host IP 是要监听的 IP 地址（默认值：127.0.0.1）
• –port PORT 是要监听的端口（默认值：8080）
• -m 是模型路径
• 运行 ~/llama.cpp/./server –help 获取更多选项

现在可以使用容器 IP 地址或代理设备的 IP 地址（如果您使用了代理设备）访问模型：

注意：在 APU 上运行的开箱即用的 Ollama 需要在 UEFI/BIOS 中为 GPU 分配固定数量的 VRAM（有关详细信息，请参阅之前链接的 ROCm 教程）。但我们可以通过仅更改两行代码来编译它，从而启用 UMA 支持。请参阅下面的编译 Ollama 部分。普通 GPU 的用户不必担心这一点。

我们需要一个安装了 ROCm 的容器（不需要 PyTorch），就像 llama.cpp 的情况一样。如果您打算在同一个容器中运行 IDE，请在创建它时使用 GUI 配置文件。

安装 Ollama 时，脚本将尝试下载其自己的 ROCm 版本，因此我们有 4 个选项：

• 容器内已经有 ROCm 6.0+，则脚本将跳过此步骤
• 容器内已经有 ROCm 5.7，则脚本将安装其自己的 ROCm，并且运行正常，Ollama 将使用版本 5.7
• 我们有一个没有 ROCm 的容器，则脚本将安装其自己的 ROCm，但这不起作用
• 不要使用脚本并手动安装 Ollama

对于我的 5600G APU，我使用最新的 ROCm 6.1。

让我们使用默认的 ubuntu 用户登录容器：

在下载并运行安装脚本之前，我们需要安装一些所需的软件包：

脚本完成后，默认的 ubuntu 用户将添加到 ollama 组，并启动新的 ollama 服务。此服务仅运行命令 ollama serve，但作为用户 ollama，因此我们需要设置一些环境变量。对于我的 APU，我需要：

• HSA_OVERRIDE_GFX_VERSION=9.0.0 和 HSA_ENABLE_SDMA=0（用于 ROCm），如之前链接的教程中所述
• OLLAMA_HOST=0.0.0.0:11434 将 Ollama 使用的 IP 地址更改为 0.0.0.0
• OLLAMA_MAX_LOADED_MODELS=2 同时为两个模型提供服务，根据需要调整此值

我们需要使用命令将它们添加到服务中：

在空白处添加以下几行：

重新加载守护进程，然后重新启动容器并再次登录：

现在我们可以使用命令访问 Ollama：

使用默认 ollama 服务下载的模型将存储在 /usr/share/ollama/.ollama/models/.

所有可用模型均列在ollama库列表。 选择所需模型后，单击它，然后在其页面上，从标有“最新”的下拉菜单中选择最后一个选项“查看所有标签”以查看所有变体。事实上，最新意味着最受欢迎，因此请查找具有相同哈希值的模型以解密其背后的内容。下拉菜单右侧有一个框，其中包含运行所选模型变体的命令，但我们不会使用它。

让我们下载与 llama.cpp 相同的模型，但更方便：

现在可以使用容器 IP 地址或代理设备的 IP 地址（如果使用过）访问这两种模型：

请注意，在使用命令 ollama serve 启动 Ollama 时，我们没有指定模型名称，就像使用 llama.cpp 时必须指定的那样。客户端将向服务器询问他们需要的特定模型。

编译 Ollama 需要比 Ubuntu 22.04 中可用的版本更新的 cmake 和 go 版本：

• cmake 版本 3.24 或更高版本
• go 版本 1.22 或更高版本
• gcc 版本 11.4.0 或更高版本
• 适用于 AMD ROCm 的 libclblast

让我们在我们的 ROCm 容器中安装来自官方来源的最新软件包：

我们需要将解压的目录添加到 PATH。使用 nano .profile 打开 .profile 文件并在末尾添加以下行：

使用 source ~/.profile命令确保环境变量已设置。

获取 Ollama 源代码很简单，我们可以使用带有最新版本标签的 git clone 命令：

Ollama 在底层使用 llama.cpp，因此我们需要传递一些编译时所需的环境变量。有一个未记录的 OLLAMA_CUSTOM_ROCM_DEFS 环境变量，我们可以在其中设置 CMAKE_DEFS（请注意，这些参数与我在编译 llama.cpp 时使用的参数相同，但在你的情况下可能会有所不同，因此请查看前面的 llama.cpp 部分以获取更多信息）：

我们必须更改的第二件事是在 ollama/gpu/amd_linux.go 文件中。找到以 if totalMemory < IGPUMemLimit {开头的行。在它之前添加 totalMemory = 24 * format.GibiByte，其中值 24 是 Ollama 可以为模型使用多少 VRAM。我不会超出 your_RAM_in_GB – 8。此代码应如下所示：

现在 Ollama 认为我的 iGPU 已分配 24 GB 的 VRAM，并且不会抱怨。Ollama 运行并加载模型时将使用最多 24 GB，但当我们停止容器时，我们的 RAM 将再次释放。

编译很简单，大约需要 10 分钟：

现在可以使用以下命令运行 Ollama：

设置 systemd 服务很简单（粘贴此多行命令，根据需要更改环境变量）：

重新加载守护进程并启用服务，然后重新启动容器：

检查一切是否正常：

使用 Ollama 下载的模型采用通常的 GUFF 格式，可以在其他地方使用。但它们的文件名由 sha256 哈希组成。为了获得人性化的名称，我们可以使用基于 Matt Williams 作品的脚本。只需运行此脚本，你将看到真实的模型名称，然后可以复制文件并相应地重命名它们。脚本需要 jq 包，你可以使用 sudo apt install jq 命令安装它。

为了让 VS Code / VS Codium 在容器中运行，我们需要使用 GUI 配置文件创建容器后，使用默认的 ubuntu 用户登录：

对于 VS Code / VS Codium，我们需要安装一些必需的软件包：

• 如果我们想使用 IDE 的 snap 版本，则需要安装 snapd
• 对于缺少的字体，则需要安装 fonts-noto
• 在IDE 窗口中获取与桌面相同的鼠标光标主题，则需要安装 yaru-theme-icon

Incus 容器中的 Snap 需要一种解决方法，否则重启后我们会看到错误：

解决方案来自@stgraber的 帖子：

最后，运行此多行代码片段，创建 override.conf 文件并向其中添加两行：

VS Code/VS Codium 的 Continue 和 Twinny 扩展使用右侧边栏。单击“视图”→“外观”→“辅助侧边栏”以将其打开，或按 Alt+Ctrl+B。如果侧边栏无法正确呈现（如果您使用其他扩展，则可能会发生这种情况），只需将其关闭并重新打开即可。

可以通过单击扩展名称旁边的齿轮图标并选择启用/禁用来启用/禁用扩展。

第一个可以与 llama.cpp 和 Ollama 服务器交互的 VS Code / VS Codium 扩展是 Continue（VS Code 市场 ，VS Codium 市场）。它有一个聊天窗口和代码自动完成功能。

我们可以在 IDE 左侧的扩展选项卡中搜索 Continue（Ctrl+Shift+X）来安装它。安装后，你 将看到 Continue 徽标出现在左侧栏中。强烈建议将此徽标移至 VS Code 的右侧栏。

单击扩展选项卡中 Continue 旁边的齿轮图标并选择扩展设置时，有更多选项可用。这些都是完全可选的，我没有在那里更改任何内容。如果你决定使用代码自动完成，你可以在那里或在侧栏底部切换该功能。

我们可以通过两种方式添加模型提供程序。一种是使用侧边栏底部活动提供程序名称旁边的加号图标。这值得探索，因为您可以在那里设置一些高级（可选）选项。

我使用另一种方法，即单击加号图标旁边的齿轮图标。这将打开 config.json 文件。这些是我对 llama.cpp 和 Ollama 聊天模型的设置（我删除了默认提供程序，X.X.X.X 是容器的 IP 地址，还要注意逗号，在一些行和括号之后，模型名称仅对 Ollama 很重要，完成后按 Ctrl+S 保存）：

添加提供商后，在侧边栏底部，我们应该可以看到活动的提供商，我们可以通过单击其名称在它们之间切换。

代码自动完成模型（一次只能一个）可以在同一个 config.json 文件中的底部，就在“allowAnonymousTelemetry”行之前设置：true。对于 llama.cpp：

或者对于 Ollama：

要了解有关 Continue 及其众多功能的更多信息，请查看其主页和 YouTube。

第二个可以与 llama.cpp 和 Ollama 服务器交互的 VS Code / VS Codium 扩展是 Twinny （VS Code 市场、VS Codium 市场）。它有一个聊天窗口和代码自动完成功能。

我们可以在 IDE 左侧的扩展选项卡中搜索 Twinny 来安装它（Ctrl+Shift+X）。现在按 Alt+Ctrl+B 打开侧边栏并单击其顶部的插件图标，以便我们可以添加模型提供程序。我正在为 llama.cpp 聊天模型使用这些设置：

• 标签：CodeLlama 7B（可以是任何内容）
• 类型：聊天
• 提供商：llamacpp
• 协议：http
• 模型名称：codellama:7b-instruct-q6_K（仅对 Ollama 重要）
• 主机名：X.X.X.X（容器的 IP）
• 端口：8080
• API 路径：/completion
• API 密钥：空

和基本模型：

• 标签：Deepseek Coder 1.3B（可以是任何内容）
• 类型：FIM
• Fim 模板：deepseek
• 提供商：llamacpp
• 协议：http
• 模型名称：deepseek-coder:1.3b-base-q6_K（仅对 Ollama 重要）
• 主机名：X.X.X.X（容器的 IP）
• 端口：8081
• API 路径：/completion
• API 密钥：空

用于 Ollama 聊天模型：

• 标签：ollama CodeLlama 7B（可以是任何内容）
• 类型：聊天
• 提供商：ollama
• 协议：http
• 模型名称：codellama:7b-instruct-q6_K（仅对 Ollama 重要）
• 主机名：X.X.X.X（容器的 IP）
• 端口：11434
• API 路径：/v1/chat/completions
• API 密钥：空

和基本模型：

• 标签：ollama Deepseek Coder 1.3B（可以是任何内容）
• 类型：FIM
• Fim 模板：deepseek
• 提供商：ollama
• 协议：http
• 模型名称：deepseek-coder:1.3b-base-q6_K（仅对 Ollama 重要）
• 主机名：X.X.X.X（容器的 IP）
• 端口：11434
• API 路径：/api/generate
• API 密钥：空

现在单击侧边栏顶部插头图标旁边的箭头图标。聊天输入字段上方有一个机器人头的图标。单击它时，您将看到两个下拉菜单，用于选择刚刚配置的聊天和中间填充提供商。

单击扩展选项卡中 Twinny 旁边的齿轮图标并选择扩展设置时，有更多选项可用，但这些选项完全是可选的，我没有在那里更改任何内容。

要了解有关 Twinny 及其众多功能的更多信息，请查看其主页和 YouTube。

可以与 Ollama 服务器交互（但不是 llama.cpp）的第三个 VS Code / VS Codium 扩展是 Cody Ai （VS Code 市场，VS Codium 市场）。它有一个聊天窗口和代码自动完成功能，但将 Ollama 设置为聊天提供商对我来说不起作用。

Cody Ai 不寻常的事情：

• 这是最先进的代码生成扩展。
• 尽管扩展是开源的，但它需要使用 GitHub、GitLab 或 Google 帐户登录。
• 因此，每次启动 IDE 时都需要互联网访问
• 对于代码自动完成，Cody Ai 可以使用两种类型的模型，即指导和基础。

我们需要安装一些必要的软件包以使 Cody Ai 正常工作：

• chromium 或任何其他浏览器
• gnome-keyring 用于存储登录凭据
• XDG_CURRENT_DESKTOP=ubuntu:GNOME 需要设置一个环境变量，表示容器具有桌面环境（不必是 ubuntu:GNOME，否则您会看到错误“因为无法识别 OS 密钥环来存储当前桌面环境中的加密相关数据。

重新启动容器并首次运行 VS Code / VS Codium 后，系统将要求我们输入密钥环的新密码。从现在开始，每次启动 IDE 时，系统都会要求您输入此密码。

现在我们可以通过在 IDE 左侧的扩展选项卡中搜索 Cody Ai 来安装它（Ctrl+Shift+X）。安装后，您将看到 Cody Ai 徽标出现在左侧栏上。强烈建议将此徽标移至 VS Code 的右侧栏。

单击 Cody Ai 图标时，您将看到三个登录选项：使用您的 GitHub、GitLab 或 Google 帐户。单击您喜欢的方法，将出现一个带有链接的弹出窗口。使用弹出窗口下方的复制按钮，打开容器中安装的 Chromium，粘贴链接并登录。单击授权并关闭浏览器。您的凭据现在应该存储在您的密钥环中。要检查这一点，您可以重新启动 VS Code/VS Codium。

要添加提供程序，我们需要打开设置。单击扩展选项卡中 Cody Ai 旁边的齿轮图标，然后选择扩展设置。在底部附近，您会找到 Cody Autocoplete 高级提供程序（注意它用于代码自动完成，而不是聊天）。将其设置为experimental-ollama。接下来在 IDE 中或使用任何其他编辑器打开 ~/.config/Code/User/settings.json 文件。添加这些行并保存（X.X.X.X 是容器的 IP 地址）：

为了实现更慢但更准确的推理，请将模型更改为 codellama:7b-instruct-q6_K，并将 url 更改为 http://X.X.X.X:11434。编辑后，我的 settings.json 文件如下所示（某些行后面的逗号 , 很重要）：

将 Ollama 设置为聊天提供商对我来说不起作用。你可以在官方 Cody Ai 博客上阅读更多相关信息，或在 YouTube 频道上观看说明。

为了让 IntelliJ 在容器中运行，我们需要使用 GUI 配置文件 创建容器后，使用默认 ubuntu 用户登录：

对于 IntelliJ，我们需要安装一些必需的软件包：

• snapd 如果我们想使用 IDE 的 snap 版本
• default-jdk 某个版本的 java，例如默认版本
• yaru-theme-icon 和 libxcursor1 以便在 IDE 窗口中获得与桌面相同的鼠标光标主题

incus 容器中的 Snap 需要 VS Code / VS Codium 部分中提到的解决方法。

我们可以通过在内置插件市场中搜索插件来安装插件，您可以通过单击主窗口中的插件来访问它。或者，如果您打开了一个项目，请单击左上角的汉堡菜单，然后单击文件 → 设置（或按 Ctrl+Alt+S）并从左侧列表中选择插件。

可以在汉堡菜单 → 文件 → 设置 → 工具（或按 Ctrl+Alt+S）中找到已安装插件的其他设置。

第一个可以与 llama.cpp 和 Ollama 服务器交互的 IntelliJ 扩展是 Continue。是的，这个扩展是为两个 IDE（IntelliJ 市场 ）开发的。它有一个聊天窗口和代码自动完成功能。

我们可以通过在插件部分提到的内置插件市场中搜索 Continue 来安装它。安装后，只有当您打开项目时才能访问它，图标将显示在窗口的右侧。但您会注意到它的选项卡没有任何按钮。这是因为 JCEF 嵌入式浏览器缺少一些依赖项。我们可以在容器的终端中使用此命令查看缺少哪些库：

对我来说输出是：

安装缺少的库：

如果你仍然没有在“继续”侧栏中看到聊天提示，请尝试更改 IDE 的启动 Java 运行时：

• 打开汉堡菜单 → 帮助 → 查找操作（或按 Ctrl+Shift+A）
• 输入选择 IDE 的启动 Java 运行时并从建议列表中选择它
• 选择新建：并选择最新的 21 版本，例如 21.0.2b375.1 JerBrains Runtime JBR 和 JCEF（默认捆绑）
• 单击确定并重新启动 IDE

重新启动 IntelliJ 后，一切都应该正常。将提供程序添加到 Continue 看起来与在 VS Code/VS Codium 中完全相同，因此请返回该部分以获取更多信息。可以在汉堡菜单 → 文件 → 设置 → 工具（或按 Ctrl+Alt+S）中找到其他设置，您可以在其中启用代码自动完成。

要了解有关 Continue 及其众多功能的更多信息，请查看其主页和 YouTube。

可以与 llama.cpp 服务器（但不是 Ollama）交互的第二个 IntelliJ 扩展是 CodeGPT （IntelliJ 市场）。它有一个聊天窗口和代码自动完成功能，但不能单独配置它们。这意味着你应该使用其中一个。不过，CodeGPT 可以与 Continue 同时使用。

我们可以通过在插件部分中提到的内置插件市场中搜索来安装 CodeGPT，但首先我们需要安装一个必需的库：

仅当你打开项目时才可以访问 CodeGPT，图标将显示在窗口右侧。可以在汉堡菜单 → 文件 → 设置 → 工具 → CodeGPT（按 Ctrl+Alt+S）中找到设置，也可以通过单击窗口右下角的插件图标来访问它们。

我们可以在那里添加提供程序（参见插件部分中的屏幕截图）：

• 服务：LLaMA C/C++
• 启用代码完成：否，除非您想要此功能而不是聊天
• 使用远程服务器：是
• 基本主机：http://X.X.X.X:8080，或 http://X.X.X.X:8081（如果您启用了代码完成），X.X.X.X 是容器的 IP 地址
• 提示模板：Llama
• 填充模板：DeepSeek Coder（如果您启用了代码完成）

必须在 CodeGPT 侧栏中聊天提示上方的切换菜单中选择此新提供程序。

要了解有关 CodeGPT 及其众多功能的更多信息，请查看其主页和 YouTube。

遗憾的是，IntelliJ 的 Cody Ai （IntelliJ 市场）不支持本地 Ollama 和 llama.cpp 服务器。目前此功能仅适用于 VS Code/VS Codium 版本。

原文链接：

Jquery插件（常用的插件库）

作者：一生的风景

转发链接：https://www.cnblogs.com/2979100039-qq-con/p/12775777.html

随着Jquery知识点的结束，我也开始接触到框架来了。

开始的时候，总是听到插件和框架等词，我疑惑框架和插件是啥有啥区别？？

插件可以说有无数种，在网页中任何一种功能都可以被叫做插件，单独提取出来，可以供别人使用，而框架是一个超大好的的插件，它将各种方法融合成一体，使用者可以使用它来构造不同的功能。插件则专注于一种，往往只有一种功能 。

打个比方比如前面学习的jquery，jquery就是一个框架，在jquery插件库里http://www.jq22.com/有数不胜数的插件，这些插件绝大部分基于jq框架来编写。

理解完插件和框架的区别，下面来写一写这几天初步学习的插件库

1.jquery 对于我而言肯定是一个熟悉的框架了

官网网址：https://jquery.com/

插件库：http://www.jq22.com/

这里简单的介绍一下jquery ：jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。

2.Select2 官网网址：https://select2.org/

3.Fullpage 官网网址：https://alvarotrigo.com/fullPage/#page1

4.lazyload 官网网址：https://appelsiini.net/projects/lazyload/

5.Swiper 官网网址：https://www.swiper.com.cn/

6.nice-validator 官网网址 ：https://validator.niceue.com/docs/getting-started.html

以上提及的都是插件库，每一个有着不同的功能，jquery在这里我就不在赘述了。我就从Select2开始写

select2是一款基于jquery的功能丰富的下拉列表插件。这就说明了使用select2必须要有jquery依赖，就是要先导入jquery库，然后在导入select2插件库，然后这是一款关于下拉列表的插件。

使用方法：首先去下载压缩包文件 下载地址：https://codeload.github.com/select2/select2/zip/develop下载完成解压后在文件中我们需要找到相关的js文件和css文件，我们所需要的的就是这两个文件：在dist文件夹下有css和js，js有.js文件和min.js文件，css也是一样的。如下图所示

min.js是压缩版，没有逗号空格等等，体积小传输效率快，但可读性较差可以自行想象一下js代码就一行的场景 .js是没压缩的俗称开发版，可读性较好，易于debug调试和更改；但是体积相比较而言大一些，效率低。我采用压缩版的我不改bugQAQ 这段话或许就解决了心中的疑问

我们将css和js文件复制到我们的项目中就可以开始使用这个插件了。

这个是一个案例效果图接下来就根据这个案例来编写。

首先一点也是重中之重，导入css和js文件，jquery插件库优先导入，js cs就是我们上面复制到项目的文件，如下

在body里面写上一个普通的下拉列表：

我把js注释一下看看效果如何：

这个与和我们的效果图有着很大的区别，如何使用这个插件呢，我们不妨看看文档（虽然全是英文）

在基本语法上有着这样的语句（我们把他定义到我们的案例中去）：.js-example-basic-multiple是一个选择器

在案例中我们如下编写 （效果如右）：

这就是select2的威力，我们就使用了一行js代码就将一个普通的下拉列表变成了这样的的一个视觉效果不错的下拉列表（宽度可以修改，select2内置了很多的属性可以查看文档）。

例如给下拉列表设置宽度只需要如下写（使用大括号编写属性，用逗号分隔每个属性）

在select2文档的第三项中的Options里面有一张配置表里面涵盖了select2所有的属性（英文差的我看的有点吃力）

案例中简单的写了两个属性

插件的出现就是为了简单化代码，让我们少些了很多代码。使用起来方便简洁，就是这样select2的简单案列完成了，select2专注于选框，很多属性，可以去文档一一查阅我这里的介绍就结束了。

翻译过来就是 全屏的意思，我想已经猜出来了，这是一款全屏的插件，整个页面简洁大方，整个屏幕就是一张页面，它的官网就是一个很好的实 例 https://alvarotrigo.com/fullPage/#page1。这样的页面展示很受人喜欢，我相信大部分人都曾见过。

使用方法 同样下载压缩提取js 、css文件 下载地址 https://codeload.github.com/alvarotrigo/fullPage.js/zip/master

这个官网有一点优势emmmmmm他有中文模式 左上角可以选择

将css js复制进自己的项目里面引入js css 同样注意的依赖jquery优先导入jquery库如下：

我们可以查看文档编写（文档中有这样的一句话也就是在html文件中必须有着个声明，所以复制代码是要仔细不要复制掉了）

将这段代码复制到body里开始编写页面 在div的class值，section 以及后面的slide是不能更改的，我们必须按照fillpage的规则来 但最外层div的id可以直接设置，用于js代码中的选择

在js中如下编写（首先我们就用上了sectionsColor属性 定义背景颜色，一一对应）

当想定义横向切换时，这时候slide就登场了 ，将下面代码嵌套到<div class = \”section\”></div>中

它将会产生一个横向轮播图 注意 slide section 不可以更改 如下图所写:

效果如下：

当然插件也并不是万能的，fullpage无法设置字体大小所以需要自己定义大小 下面是自定义样式

在fullpage文档上有着很多属性（往下翻的话有对这些属性一 一的解释）

在我的案列中写了几个案例js代码如下：

文档的属性还算写的清晰，所以可以一点点编写 这一节的效果图不好截我把代码结构写上

这样子fullpage的案列就完结了，跟官网页面相似可以试着运行一下子。

lazyload 译为延迟加载， 又叫懒加载 在这个流量的时代，懒加载的出现是非常nice的，它为用户节省流量的消耗，提高性能，当一个高清图片网站一张页面几十张甚至上百张图片时，没有懒加载，它将会将所有的图片都加载出来，这就导致流量的浪费，降低性能，影响了用户的体验，而懒加载的作用是当用户看到这张图片时，它才开始加载出来，这样子就节省了大量的流量，而且优化了性能，提高了用户体验。

使用方法和上面一样下载lazyload插件包：https://codeload.github.com/tuupola/lazyload/zip/2.x

使用方法很简单，因为它只有一个功能就是延迟加载，所以我就直接上代码了 (注意在下载文件中找到对应的css，js文件复制到自己的项目中) lazyload没有css文件

我使用了12张图片然后js就一句，就可以实现懒加载功能

要为每一张图片添加class = “lazyload” ，且不能使用src 必须使用data-src 下面就来写一写怎么看两者的区别

普通加载：

懒加载：

懒加载的用法简单，但它存在的意义不凡，有些框架也会内置懒加载功能 列如上面介绍的fullpage插件

所以，懒加载的使用结束，或许现在感觉不它的作用，但是以后的编程日子里我想我百分百会和它再次的碰面。

Swiper 译为猛击者，确实在视觉上它的确很吸引我，首先它是一款触摸滑动插件 它与fullpage相似又有着各自的特点。

用swiper来做轮播 ，导航我想是很好的选择 swiper不依赖jq所以当项目中不需要jq时可以不用到jquery库

同样先下载swiper的包：https://www.swiper.com.cn/download/swiper-5.3.7.zip 在文件中找到对应的js css文件，复制到自己的项目然后导入如下：

先上一张效果图：

如图所示一款很炫酷的轮播图可以说swiper的中文文档非常的nice，思路清晰。就是emmmm属性有点多一时半会看完我现在想着，根据以上的插件库案列

这个插件的使用就应该不用我来再做赘述了，我就直接粘贴代码代码如下：

不管是什么插件或者框架，它的使用方法都万变不离其宗。相似是 他们的共同点，更何况swiper的文档看着这么的舒服

nice-validator 插件是一款比关于验证表单的插件，当用户注册时，来判断注册手机号码是否合法，是否为空，密码与确认密码是否相等，邮箱是否合法等等等等。

同样先下载:https://codeload.github.com/niceue/nice-validator/zip/master 复制对应的css js文件 到项目并导入，如下：

以案列为准，由于没有css我直接手写了有个简单的css样式。

当然html的表单也是手写对于样式，id class的名称这些，这款插件与其他的不同，可以自己定义：

js写法：无论那样的写法他实现的功能是一样的

这些属性可以看看文档里面的介绍（我简单的截取两张，更多属性一步官网 https://validator.niceue.com/docs/getting-started.html）

自定义规则

内置规则

这款插件的属性还是蛮多的 在常用规则整理中有着常用的规则。

对了这里有一个绕的地方（我单独截出来反正我看着的时候看半天）

就这样，这款插件有没有过多的介绍了。有很多坑和细节还得自己去真正用的时候去看

以上的五款插件全部介绍完成，案列源码下载：https://files.cnblogs.com/files/2979100039-qq-con/jqy_example_10.zip

我想各位小伙伴们看完这篇文章，也或多或少的对插件或者框架的使用有些了解了，但要明白一件事纸上得来终觉浅的道理，

有心人想要去学习一样东西，他就不止是想还要做。所以勤加练习是学好编程的不灭准则。

学习中，有地方错误还请指正。

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

作者：一生的风景

转发链接：https://www.cnblogs.com/2979100039-qq-con/p/12775777.html

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com