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. logistic function 和 sigmoid function

     简单说, 只要曲线是 “S”形的函数都是sigmoid function: 满足公式<1>的形式的函数都是logistic function. 两者的相同点是: 函数曲线都是“S”形. ...

  2. 学习 Shell —— 括号、引号

    shell中各种括号的作用().(()).[].[[]].{} shell中的括号(小括号,大括号/花括号) ${},大括号用于确定变量的范围: $(( 数学运算 )) 0. 引号 单引号.双引号.飘 ...

  3. oracle 11g 常用命令

    sqlplus system/123@ORCL; 查看oracle字符集: select * from nls_database_parameters where parameter ='NLS_CH ...

  4. 1076 Forwards on Weibo (30)(30 分)

    Weibo is known as the Chinese version of Twitter. One user on Weibo may have many followers, and may ...

  5. BZOJ_3529_[Sdoi2014]数表_莫比乌斯反演+树状数组

    Description 有一张 n×m 的数表,其第 i 行第 j 列(1 <= i <= n, 1 <= j <= m)的数值为 能同时整除 i 和 j 的所有自然数之和.给 ...

  6. Thrift之TProcess类体系原理及源码详细解析

    我的新浪微博:http://weibo.com/freshairbrucewoo. 欢迎大家相互交流,共同提高技术. 之前对Thrift自动生成代码的实现细节做了详细的分析,下面进行处理层的实现做详细 ...

  7. 微信小程序 加载 HTML 标签

    肯定有小伙伴遇到过这个问题:加载的数据是一堆HTML 标签这就尴尬了,因为小程序没有提供 webview 来加载这些 HTML.但是不用慌,小程序不提供我们可以自己造个新轮子,自己造不出新轮子咱们找到 ...

  8. 【转】Pro Android学习笔记(九):了解Content Provider(下下)

    Content provider作为信息的读出,比较常见的还有文件的读写,最基础的就是二进制文件的的读写,例如img文件,音频文件的读写.在数据库中存放了该文件的路径,我们可以通过ContentPro ...

  9. css3 实现loading效果

    1 圆点渐入渐出 要点: 缩放和透明度的变化,循环变化 <div class="demo1"></div> .demo1{ width: 40px; hei ...

  10. Oracle数据去重

    一.完全重复数据去重方法    具体思路是,首先创建一个临时表,然后将DISTINCT之后的表数据插入到这个临时表中;然后清空原表数据;再讲临时表中的数据插入到原表中;最后删除临时表. 对于表中完全重 ...