0

0

什么是jquery plugins

青灯夜游

青灯夜游

发布时间:2022-09-27 16:55:11

|

2883人浏览过

|

来源于php中文网

原创

jquery plugins的意思为“jquery插件”,就是开发者用jquery编写的一些工具,可以把它理解成使用jQuery封装的一个功能或特效;在调用时只需要用很少的代码就能实现很好的效果。编写jquery插件的目的主要是给已经有的一系列方法或函数做一个封装,以便在其他地方重复使用,方便后期维护和提高开发效率。

什么是jquery plugins

本教程操作环境:windows7系统、jquery3.6.1版本、Dell G3电脑。

plugins的意思为“插件”。jquery plugins的意思为“jquery插件”。

1.png

什么是jquery插件?

jQuery插件,就是开发爱好者自己利用Jquery制作的特效,然后经过封包或包装处理成js文件,发布到网上供大家使用的脚本集合。

编写jquery插件的目的主要是给已经有的一系列方法或函数做一个封装,以便在其他地方重复使用,方便后期维护和提高开发效率。

通常这类插件除了调用jQuery库文件,还需要调用插件文件。都有使用说明,一看即会。  比如jQuery官网制作的插件jQuery,在使用它时不仅要链接库文件,还要链接UI文件以及UI的CSS文件,如:




经过这几部的操作,jQuery效果才能真正被引用到网页文件中起到作用。

插件编写

关于插件的编写,jquery官方给了一套对象级别开发插件的模板:

;(function ($) {
    $.fn.plugin=function (options) {
        var defaults={
            //各种参数、各种属性
        };
        //options合并到defaults上,defaults继承了options上的各种属性和方法,将所有的赋值给endOptions
        var endOptions=$.extend(defaults,options);
        
        this.each(function () {
            //实现功能的代码
        });
    };
})(jQuery);

模板要点:

1.函数全部放在闭包里,外面的函数就调用不到里面的参数了,比较安全

2.前面加分号,避免不必要的麻烦

jquery插件调用的方法:

1、通过$.extend()来拓展jquery

2、通过向$.fn来想jquery添加方法

3、通过$.widget()应用jQuery UI部件工场方法创建

其中的方法1没办法调用选择器,仅仅被jQuery理解成为添加静态方法,所以我们使用的时候不需要选中DOM对象

jquery常用的第三方插件

JQuery有着丰富的第三方的插件,例如:树形菜单、日期控件、图片切换插件、弹出窗口等等基本前台页面上的组件都有对应插件,并且用JQuery插件做出来的效果很炫,并且可以根据自己需要去改写和封装插件,简单实用。

下面介绍一下常用第三方插件。

1、jQuery表单验证插件:Validation

(1)Validation简介 

    最常使用JavScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件——Validation.Validation是历史最悠久的jQuery插件之一,经过了全球范围内不同项目的验证,并得到了许多Web开发者的好评。作为一个标准的验证方法库,Validation拥有如下优点:

  • 内置验证规则:拥有必填、数字、E-Mail、URL和信用卡号码等19类内置验证规则
  • 自定义验证规则:可以很方便地自定义验证规则
  • 简单强大的验证信息提示:默认了验证信息提示,并提供自定义覆盖默认提示信息的功能
  • 实时验证:可以通过keyup或blur事件触发验证,而不仅仅在表单提交的时候验证。

(2)插件下载地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation/

这里写图片描述


Validation插件的官方API地址为: http://docs.jquery.com/Plugins/Validation

2、jQuery表单插件:Form

(1)Form插件简介 

    jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地、无侵入地升级HTML表单以支持Ajax。jQuery有两个核心方法——ajaxForm()和ajaxSubmit(),它们集合了从控制表单元素到决定如何管理提交进程的功能。另外iain,插件还包括其他的一些方法:formToArray()、formSerialize()、fieldSerialize()、fieldValue()、clearForm()和resetForm()等 

(2)jQuery Form表单插件下载地址:http://jquery.malsup.com/form/。读者可以下载该插件,并在该网站上查看简单上手说明、API、实例代码等。

3、动态绑定事件插件:livequery

(1)livequery插件简介 

    jQuery的事件绑定功能使得jQuery代码与HTML代码能够完全分离,这样代码的层次关系更加清晰,维护起来也更加简单。然而对于动态加载到页面的HTML元素,每次都需要重新绑定事件到这些元素上,十分不便。一款新的插件由此产生,即livequery,可以利用它给相应的DOM元素注册时间或者触发回调函数函数。不仅当前选择器匹配的元素会被绑定事件,而且后来通过JavaScript添加的元素都会被绑定事件。当元素不再和选择器匹配时,livequery会自动取消事件注册,使得开发者不再需要关注HTML元素的来源,只需要关注如何编写其绑定的事件即可。 

阿里云-虚拟数字人
阿里云-虚拟数字人

阿里云-虚拟数字人是什么? ...

下载

    通过jQuery选择器选择一个DOM元素,livequery插件会实时地在整个DOM范围将其持久化。这意味着无论元素是先前存在的还是后来动态加载的,事件都会被绑定,就像是CSS给元素添加样式一样。同时,这款插件几乎在没占用什么资源的情况下就做到了这些功能。
(2)jQuery livequery插件的下载地址:http://plugins.jquery.com/livequery/

4、jQuery UI插件

(1)jQuery UI简介: 

    jQuery UI源自于一个jQuery插件——Interface。Interface插件最早版本我1.2,只支持jQuery1.1.2的版本,后来有人对Interface的大部分代表基于jQuery1.2的API进行重构,并统一了API。由于改进重大,因此版本号不是1.3而是直接跳到1.5,并且改名为jQuery UI。 

    jQuery UI主要分为3个部分,交互、微件和效果库

  • 交互。这里都是一些 与鼠标 交互相关的内容。包括拖动,置放,缩放,选择 和排序 等待。微件(Widget)中有部分是基于这些交互组建来制作的。此库需要 一个jQuery UI 核心库——ui.core.js支持
  • 微件。这里主要是一些界面的扩展。里边包括 了手风琴导航,自动完成,取色器,对话框,滑块,标签 ,日历,放大镜,进度条和微调控制器等待。此库需要 一个jQuery UI 核心库——ui.core.js支持
  • 效果库。此库用于提供丰富的动画效果,让动画不再局限于animate()方法。效果库有自己的一套核心即effects.core.js,无需jQuery的核心库ui.core.js支持

(2)jQuery UI插件的下载地址为:http://jqueryui.com/download/all/。选择“jQuery UI 1.6rc2”链接可以直接下载完整套件,包括源码,发行版和测试驱动等。

5、管理Cookie的插件:Cookie

(1)Cookie插件简介 

    Cookie是网站设计者放置在客户端的小文本文件。Cookie能为用户提供很多的便利,例如购物网站存储用户曾经浏览过的产品列表,或者门户网站记住用户喜欢选择浏览哪类新闻。在用户运行的情况下,还可以存储用户的登陆情况,使得用户在访问网站时不必每次都键入这些信息。 

    jQuery提供了一个十分简单的插件来管理网站的Cookie,该插件的名称也是Cookie. 

(2)jQuery Cookie插件的下载地址:http://plugins.jquery.com/cookie/

6、模态窗口插件:SimpleModal

(1)SimpleModal插件简介 

    SimpleModal是一个轻量级的jQuery插件,它为模态窗口的开发提供了一个强有力的接口,可以把它当作模态窗口的框架。SimpleModal非常的灵活,可以创建你能够想象到的任何东西i,并且 你还不需要考虑UI开发中的跨浏览器相关问题。 

(2)SimpleModal插件的下载地址:http://www.ericmmartin.com/projects/simplemodal/

7、延迟加载图片插件:lazyload

延迟加载图片或符合某些条件才开始加载图片

下载网址:https://cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js

8、fly插件

添加购物车效果、实现抛物线运动

下载地址:https://github.com/amibug/fly

9、qrcode

能够在客户端生成矩阵二维码QRCode 的jquery插件

下载地址:https://github.com/lrsjng/jquery-qrcode

10、spinner

可以很方便的实现购物车数量的加减,也支持使用键盘上的上下键来改变购物车的数量。

下载地址:https://github.com/vsn4ik/jquery.spinner

等等。。。

【推荐学习:jQuery视频教程web前端视频

相关文章

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
俄罗斯Yandex引擎入口
俄罗斯Yandex引擎入口

2026年俄罗斯Yandex搜索引擎最新入口汇总,涵盖免登录、多语言支持、无广告视频播放及本地化服务等核心功能。阅读专题下面的文章了解更多详细内容。

31

2026.01.28

包子漫画在线官方入口大全
包子漫画在线官方入口大全

本合集汇总了包子漫画2026最新官方在线观看入口,涵盖备用域名、正版无广告链接及多端适配地址,助你畅享12700+高清漫画资源。阅读专题下面的文章了解更多详细内容。

9

2026.01.28

ao3中文版官网地址大全
ao3中文版官网地址大全

AO3最新中文版官网入口合集,汇总2026年主站及国内优化镜像链接,支持简体中文界面、无广告阅读与多设备同步。阅读专题下面的文章了解更多详细内容。

32

2026.01.28

php怎么写接口教程
php怎么写接口教程

本合集涵盖PHP接口开发基础、RESTful API设计、数据交互与安全处理等实用教程,助你快速掌握PHP接口编写技巧。阅读专题下面的文章了解更多详细内容。

1

2026.01.28

php中文乱码如何解决
php中文乱码如何解决

本文整理了php中文乱码如何解决及解决方法,阅读节专题下面的文章了解更多详细内容。

3

2026.01.28

Java 消息队列与异步架构实战
Java 消息队列与异步架构实战

本专题系统讲解 Java 在消息队列与异步系统架构中的核心应用,涵盖消息队列基本原理、Kafka 与 RabbitMQ 的使用场景对比、生产者与消费者模型、消息可靠性与顺序性保障、重复消费与幂等处理,以及在高并发系统中的异步解耦设计。通过实战案例,帮助学习者掌握 使用 Java 构建高吞吐、高可靠异步消息系统的完整思路。

8

2026.01.28

Python 自然语言处理(NLP)基础与实战
Python 自然语言处理(NLP)基础与实战

本专题系统讲解 Python 在自然语言处理(NLP)领域的基础方法与实战应用,涵盖文本预处理(分词、去停用词)、词性标注、命名实体识别、关键词提取、情感分析,以及常用 NLP 库(NLTK、spaCy)的核心用法。通过真实文本案例,帮助学习者掌握 使用 Python 进行文本分析与语言数据处理的完整流程,适用于内容分析、舆情监测与智能文本应用场景。

23

2026.01.27

拼多多赚钱的5种方法 拼多多赚钱的5种方法
拼多多赚钱的5种方法 拼多多赚钱的5种方法

在拼多多上赚钱主要可以通过无货源模式一件代发、精细化运营特色店铺、参与官方高流量活动、利用拼团机制社交裂变,以及成为多多进宝推广员这5种方法实现。核心策略在于通过低成本、高效率的供应链管理与营销,利用平台社交电商红利实现盈利。

122

2026.01.26

edge浏览器怎样设置主页 edge浏览器自定义设置教程
edge浏览器怎样设置主页 edge浏览器自定义设置教程

在Edge浏览器中设置主页,请依次点击右上角“...”图标 > 设置 > 开始、主页和新建标签页。在“Microsoft Edge 启动时”选择“打开以下页面”,点击“添加新页面”并输入网址。若要使用主页按钮,需在“外观”设置中开启“显示主页按钮”并设定网址。

51

2026.01.26

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
jQuery 教程
jQuery 教程

共42课时 | 4.9万人学习

HTML+CSS基础与实战
HTML+CSS基础与实战

共132课时 | 9.7万人学习

tp6+adminlte搭建通用后台
tp6+adminlte搭建通用后台

共39课时 | 5.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号