jquery的组件已经有很多,但是有可能找不到符合我们需求的组件,所以我们可以动手自己封装一个jquery组件。

第一步要知道封装jquery组件的基本语法

(function ($) {
$.fn.ziDinYiZuJian = function () {
//ziDinYiZuJian 组件 要实现的功能代码
}
})(jQuery)

第二步调用自定义的组件

  调用组件必须要引入在组件中用到的js包,然后调用

<div id="dom"></div>
$('#dom').ziDinYiZuJian();

注意有可能会报错:$(...).ziDinYiZuJian is not a function.

原因可能是 引入必要的js包的顺序有问题,如果是在子页面调用组件 如果母版页引入了相同js包可能会因为重复引用js包报错,所以最好把母版页的js包 都在页面一开始全引入

在封装自定义jquery组件的时候需要注意的细节问题:

1、组件的数据源只需要是具有某个特征的数据集就可以了

2、组件自己根据传入的控制参数相应的格式化数据

3、暴露出的事件所需要的参数一般是 对象+触发事件的对象

4、组件要尽量封装成可重用的组件

5、组件写好之后要整理一个组件使用文档(包括:需要传入的参数说明、暴露出来的事件、使用事例等等)

  

jquery自定义组件开发的更多相关文章

  1. Flex自定义组件开发之日周月日期选择日历控件

    原文:Flex自定义组件开发之日周月日期选择日历控件         使用过DateField的我们都知道,DateField 控件是用于显示日期的文本字段,字段右侧带有日历图标.当用户在控件边框内的 ...

  2. 在Vue前端项目中,附件展示的自定义组件开发

    在Vue前端界面中,自定义组件很重要,也很方便,我们一般是把一些通用的界面模块进行拆分,创建自己的自定义组件,这样操作可以大大降低页面的代码量,以及提高功能模块的开发效率,本篇随笔继续介绍在Vue&a ...

  3. 自定义组件开发:使用v-model封装el-pagination组件

    1.前言 通过封装el-pagination组件开发自定义分页组件的类似文章网上已经有很多了,但看了一圈,总是不如意,于是决定还是自己动手搞一个. 2.背景 2.1.常规分页处理方法 利用el-pag ...

  4. jQuery自定义组件——输入框设置默认提示文字

    if (window.jQuery || window.Zepto) { /** * 设置输入框提示信息 * @param options * @author rubekid */ var setIn ...

  5. Flex自定义组件开发 - jackyWHJ

    一般情况下需要组件重写都是由于以下2个原因: 1.在FLEX已有组件无法满足业务需求,或是需要更改其可视化外观等特性时,直接进行继承扩展. 2.为了模块化设计或进一步重用,需要对FLEX组件进行组合. ...

  6. Flex自定义组件开发

    一般情况下需要组件重写都是由于以下2个原因:1.在FLEX已有组件无法满足业务需求,或是需要更改其可视化外观等特性时,直接进行继承扩展.2.为了模块化设计或进一步重用,需要对FLEX组件进行组合.而F ...

  7. React jQuery公用组件开发模式及实现

    目前较为流行的react确实有很多优点,例如虚拟dom,单向数据流状态机的思想.还有可复用组件化的思想等等.加上搭配jsx语法和es6,适应之后开发确实快捷很多,值得大家去一试.其实组件化的思想一直在 ...

  8. 使用vue的extend自定义组件开发

    index.js import Vue from 'vue' import tip from './tip.vue' const Constructor = Vue.extend(tip); cons ...

  9. 微信小程序自定义组件实现

    官方从 1.6.3 开始对于自定义组件这一块有了比较大的变动,首先比较明显的感觉就是文档比以前全多了,有木有!,现在小程序支持简洁的组件化编程,可以将页面内的功能模块抽象成自定义组件,以便在不同的页面 ...

随机推荐

  1. hdu-5862 Counting Intersections(线段树+扫描线)

    题目链接: Counting Intersections Time Limit: 12000/6000 MS (Java/Others)     Memory Limit: 65536/65536 K ...

  2. loj 6089 小 Y 的背包计数问题——分类进行的背包

    题目:https://loj.ac/problem/6089 直接多重背包,加上分剩余类的前缀和还是n^2的. 但可发现当体积>sqrt(n)时,个数的限制形同虚设,且最多有sqrt(n)个物品 ...

  3. selenium2获取input输入框中的值的三种方法。

  4. openStack vm备份

    由于VM是可能存在于不同节点上,所以当一个计算节点挂掉后,可以把挂掉的节点运行的VM在新的节点上继续运行. 虽然快照功能可以做恢复使用,但是毕竟快照只能恢复固定时间的VM,所以虚拟机备份很重要!对做好 ...

  5. day6 面向对象(3)

    继承 1.1   类和类之间的常见关系. 1:既然继承是描述类和类之间的关系,就需要先来了解类和类之间的常见关系 1.1.1   现实生活的整体与部分 举例说明 1:现实生活 1:学生   是人 2: ...

  6. SPFA算法——最短路径

    粗略讲讲SPFA算法的原理,SPFA算法是1994年西南交通大学段凡丁提出 是一种求单源最短路的算法 算法中需要用到的主要变量 int n;  //表示n个点,从1到n标号 int s,t;  //s ...

  7. UIButton和UINavigationItem设置图片和文字位置

    1.UIButton设置文字位置 有些时候我们想让UIButton的title居左对齐,我们设置 btn.textLabel.textAlignment = UITextAlignmentLeft 是 ...

  8. Debian系统下的ftp服务搭建

    安装vsftpd服务 $ sudo apt install vsftpd 配置参数 命令输入 $ vim /etc/vsftpd.conf 使用如下配置 # Example config file / ...

  9. MS SQL JSON类型type

    在MS SQL Server 2016,已经支持JSON处理. 执行下面代码,将获取ms sql server对象类型以及其说明: IF OBJECT_ID('tempdb.dbo.#json_typ ...

  10. 关于unity中BindChannels的理解

    http://blog.csdn.net/wpapa/article/details/51794277 官方文档:http://docs.unity3d.com/Manual/SL-BindChann ...