位置: 编程技术 - 正文

jQuery插件编写步骤详解(jquery 插件写法)

编辑:rootadmin

推荐整理分享jQuery插件编写步骤详解(jquery 插件写法),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jquery 插件写法,jquery插件是干什么的,jquery插件开发方法,jquery 插件编写,jquery插件大全,jquery 插件写法,简单的jquery插件实例,jquery插件使用教程,内容如对您有帮助,希望把文章链接给更多的朋友!

本文实例讲述了jQuery插件编写步骤。分享给大家供大家参考,具体如下:

如今做web开发,jquery 几乎是必不可少的,就连vs神器在版本开始将Jquery 及ui 内置web项目里了。至于使用jquery好处这里就不再赘述了,用过的都知道。今天我们来讨论下jquery的插件机制,jquery有着成千上万的第 三方插件,有时我们写好了一个独立的功能,也想将其与jquery结合起来,可以用jquery链式调用,这就要扩展jquery,写成插件形式了,如下 面就是一个简单扩展Jquery对象的demo:

调用方式:

这是一个非常简单的扩展。接下来我们一步步来解析上面的代码。

一、jquery的插件机制

为了方便用户创建插件,jquery提供了jQuery.extend()和jQuery.fn.extend()方法。

1. jQuery.extend() 方法有一个重载。

jQuery.extend(object) ,一个参数的用于扩展jQuery类本身,也就是用来在jQuery类/命名空间上增加新函数,或者叫静态方法,例如jQuery内置的 ajax方法都是用jQuery.ajax()这样调用的,有点像 "类名.方法名" 静态方法的调用方式。下面我们也来写个jQuery.extend(object)的例子:

重载版本:

jQuery.extend([deep], target, object1, [objectN])

用一个或多个其他对象来扩展一个对象,返回被扩展的对象。如果不指定target,则给jQuery命名空间本身进行扩展。这有助于插件作者为jQuery增加新方法。如果第一个参数设置为true,则jQuery返回一个深层次的副本,递归地复制找到的任何对象。否则的话,副本会与原对象共享结构。未定义的属性将不会被复制,然而从对象的原型继承的属性将会被复制。

参数:

deep: 可选。如果设为true,则递归合并。 target: 待修改对象。 object1: 待合并到第一个对象的对象。 objectN: 可选。待合并到第一个对象的对象。

示例1:

合并 settings 和 options,修改并返回 settings。

结果:

示例2:

合并 defaults 和 options, 不修改 defaults。

结果:

这个重载的方法,我们一般用来在编写插件时用自定义插件参数去覆盖插件的默认参数。

jQuery.fn.extend(object)扩展 jQuery 元素集来提供新的方法(通常用来制作插件)。

首先我们来看fn 是什么东西呢。查看jQuery代码,就不难发现。

原来 jQuery.fn = jQuery.prototype,也就是jQuery对象的原型。那jQuery.fn.extend()方法就是扩展jQuery对象的原型方法。我 们知道扩展原型上的方法,就相当于为对象添加"成员方法",类的"成员方法"要类的对象才能调用,所以使用 jQuery.fn.extend(object)扩展的方法, jQuery类的实例可以使用这个"成员函数"。jQuery.fn.extend(object)和jQuery.extend(object)方法一 定要区分开来。

二、自执行的匿名函数/闭包

1. 什么是自执行的匿名函数&#;

它是指形如这样的函数:

2. 疑问 为什么(function {// code})();可以被执行, 而function {// code}();却会报错&#;

3. 分析

jQuery插件编写步骤详解(jquery 插件写法)

(1). 首先, 要清楚两者的区别:

(function {// code})是表达式, function {// code}是函数声明.

(2). 其次, js"预编译"的特点:

js在"预编译"阶段, 会解释函数声明, 但却会忽略表式.

(3). 当js执行到function() {//code}();时, 由于function() {//code}在"预编译"阶段已经被解释过, js会跳过function(){//code}, 试图去执行();, 故会报错;当js执行到(function {// code})();时, 由于(function {// code})是表达式, js会去对它求解得到返回值, 由于返回值是一 个函数, 故而遇到();时, 便会被执行.另外, 函数转换为表达式的方法并不一定要靠分组操作符(),我们还可以用void操作符,~操作符,!操作符……

例如:

bootstrap 框架中的插件写法:

是一回事。

匿名函数最大的用途是创建闭包(这是JavaScript语言的特性之一),并且还可以构建命名空间,以减少全局变量的使用。

例如:

三、一步一步封装JQuery插件

接下来我们一起来写个高亮的jqury插件

1.定一个闭包区域,防止插件"污染"

2.jQuery.fn.extend(object)扩展jquery 方法,制作插件

3.给插件默认参数,实现 插件的功能

到这一步,高亮插件基本功能已经具备了。调用代码如下:

这里只能 直接调用,不能链式调用。我们知道jQuey是可以链式调用的,就是可以在一个jQuery对象上调用多个方法,如:

但是我们上面的插件,就不能这样链式调用了。比如:

将会报找不到css方法,原因在与我的自定义插件在完成功能后,没有将 jQuery对象给返回出来。接下来,return jQuery对象,让我们的插件也支持链式调用。(其实很简单,就是执行完我们插件代码的时候将jQuery对像return 出来,和上面的代码没啥区别)

4.暴露公共方法 给别人来扩展你的插件(如果有需求的话)

比如的高亮插件有一个format方法来格式话高亮文本,则我们可将它写成公共的,暴露给插件使用者,不同的使用着根据自己的需求来重写该format方法,从而是高亮文本可以呈现不同的格式。

5.插件私有方法

有些时候,我们的插件需要一些私有方法,不能被外界访问。例如 我们插件里面需要有个方法 来检测用户调用插件时传入的参数是否符合规范。

6.其他的一些设置,如:为你的插件加入元数据插件的支持将使其变得更强大。

完整的高亮插件代码如下:

调用:

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQuery+ajax简单实现文件上传的方法 本文实例讲述了jQuery+ajax简单实现文件上传的方法。分享给大家供大家参考,具体如下:可以通过ajax来提交表单,而不会刷新页面。主要使用的方法是$(

自己动手制作基于jQuery的Web页面加载进度条插件 静态效果的实现网页顶部加载进度条,近年来很流行,很多网站都采用了这种加载方式。网上也有这样类似的插件,今天我们总结一下网页顶部线性页

设置jQueryUI DatePicker默认语言为中文 datepicker控件默认是英文的,可以在构造datepicker时通过monthNames、dayNames属性来指定月、日的中文显示值,但是每次使用是都配置这些属性不免太麻烦了,

标签: jquery 插件写法

本文链接地址:https://www.jiuchutong.com/biancheng/387299.html 转载请保留说明!

上一篇:jQuery ajax全局函数处理session过期后的ajax跳转问题

下一篇:jQuery+ajax简单实现文件上传的方法

  • 补缴的社保可以报销吗
  • 应交增值税已交税金是什么意思
  • 污水处理税收优惠政策
  • 一般纳税人可以开1%的发票吗
  • 代扣代缴个税返点怎么申请
  • 房地产计税毛利率什么意思
  • 抵押贷款评估费用标准
  • 不续约赔偿金要交税吗
  • 建设厂房需要几个证
  • 企业汇算清缴逾期去补交要带什么资料
  • 自产农产品销售怎么做账
  • 净资产收益率公式怎么算出来的
  • 所得税申报表中的营业成本包括费用吗
  • 刚毕业的学生可以买学生票吗
  • 公司成立之初
  • 房地产企业应该如何与其他产业合作
  • 垫资计入什么会计科目
  • 增值税跟企业所得税的关系
  • PHP:jdtojewish()的用法_日历函数
  • 存货非正常损失进项税额转出
  • 核心概念英文翻译
  • php curl cookie
  • 收据不可以入账吗
  • php转换器
  • import vue from vue报错
  • 法人从公账上取款会计分录
  • 自然语言处理算法
  • web前端基础是什么
  • GPT-4:关于下一代人工智能模型的事实、谣言和期望
  • php file函数
  • php 引用
  • website
  • 什么叫预缴款
  • 怎样从对公账号查询账单
  • uniapp开发总结
  • js方案
  • 自建厂房折旧算制造费用吗
  • 认缴制注册资金不交可以吗
  • 长期债权投资业务处理
  • 一般开发票都需要什么开票信息包括了什么?
  • 什么是电子承诺
  • 存货跌价准备的账务处理
  • 现金及现金等价物包括哪些科目
  • 收到上年度所得税退税款会计分录怎么写
  • 什么税能计入税额
  • 职工福利费如何计提
  • 出口退税备案完事了,为什么还没有退税勾选那个模块
  • 行政单位收到银行存款利息的会计分录
  • 专用发票不抵扣要认证吗
  • 一般纳税人弱电包工包料怎么开票
  • 金税盘里显示有报税资料怎么处理
  • 缴纳工会经费如何记账
  • 久期缺口计算公式解析
  • 在mysql中,创建数据库的基本语法格式是
  • macbook air一键恢复出厂设置
  • csrss.exe是什么进程 2个
  • win7更新不了80072efe
  • 没有推送windows11
  • ubuntu无法安装增强功能
  • linux fflush
  • win10系统忘记电脑密码
  • windows7禁止开机启动
  • Win10用户狂喷微软:更新日志功能还没加上去
  • linux时区问题
  • 误删了一些文件电脑不能正常启动了
  • 如何解决win10系统重置卡在62
  • js倒计时结束操作
  • dos删除文件夹下所有文件 不删除父目录
  • css div高度填满父容器剩余空间
  • 原生js制作日历软件
  • android使用so
  • shell脚本 ftp
  • js原生dialog
  • 浙江公务员冬令时上班时间
  • 单位没有缴纳个人医保
  • 百旺税控盘怎么备份数据
  • 小规模纳税人个税税率
  • 如何理解新时代新征程党的使命任务
  • 河北耕地占用税最新规定
  • 一般纳税人申请流程
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设