jquery插件格式实例分析


Posted in Javascript onJune 16, 2016

本文实例讲述了jquery插件格式。分享给大家供大家参考,具体如下:

现在打算给公司写一个公共组件,常用的工具很多都是jquery,很多时候一些插件特效也是基于jquery写的,因此工作中难免会遇到要拓展别人写的插件。

下面我简单的描述一下插件的格式:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
//模拟一个小的插件,方便大家学习
(function($){
  $.fn.huangbiao=function(userSetting){
  //利用jquery的extend方法来拓展插件的配置参数,这个应该暴露给使用用户
    settings = jQuery.extend($.fn.huangbiao.defaultSetting,userSetting);
    function init(){
      alert("在我这里进行初始化");
      myFunction(this);
    }
    function myFunction(obj){
      alert("我是开发者自己封装的函数");
      showSetting();
      privateFunc();
    }
    function showSetting(){
      alert(this.settings.name);
    }
    this.unbind('click').click(init);
    return this;
  }
  //下面这个是闭包的私有函数
  function privateFunc(){
    alert("i am private function!");
  }
  //暴露给用户使用的函数
  $.fn.huangbiao.openFunc=function(obj){
    alert("test");
  }
  /*
    定义暴露给用户的默认值
    这个一定要放在$.fn.huangbiao对象后面,否则脚本会报错的
  */
  $.fn.huangbiao.defaultSetting={
    name:"huangbiao",
    sex:"boy",
    age:24
  };
})($);
function useUndefault(){
  //使用自己配置的参数
  $("#undefault").huangbiao({name:"liumei",sex:"girl",age:24});
}
function useUndefault2(){
alert($.fn.huangbiao.defaultSetting.name);
  $.fn.huangbiao.defaultSetting.name="hanmeimei";
  alert($.fn.huangbiao.defaultSetting.name);
  //使用自己配置的参数
  $("#undefault2").huangbiao();
}
function useDefault(){
  //使用默认的配置参数
  $("#default").huangbiao();
}
function openFunction(){
  $("#default").huangbiao.openFunc();
}
</script>
<title>无标题文档</title>
</head>
<body>
<input type="button" value="useUndefault" id="undefault" onclick="useUndefault();"><br>
<input type="button" value="useUndefault2" id="undefault2" onclick="useUndefault2();"><br>
<input type="button" value="useDefault" id="default" onclick="useDefault();"><br>
<input type="button" value="使用提供给用户的函数" id="openFuncId" onclick="openFunction();"><br>
</body>
</html>

另外,这里再提供一个关于jquery的文档,相信对于大家学习jQuery插件有一定帮助作用!

本站下载: jQuery插件开发.pdf 。

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

Javascript 相关文章推荐
jQuery 使用手册(一)
Sep 23 Javascript
javascript 面向对象全新理练之原型继承
Dec 03 Javascript
Web开发者必备的12款超赞jQuery插件
Dec 03 Javascript
为原生js Array增加each方法
Apr 07 Javascript
Node.js获取前端ajax提交的request信息
Feb 20 Javascript
Vue2.0结合webuploader实现文件分片上传功能
Mar 09 Javascript
ES6 系列之 Generator 的自动执行的方法示例
Oct 19 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
Apr 30 Javascript
Vue CL3 配置路径别名详解
May 30 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
Apr 08 Javascript
js+css3实现简单时钟特效
Sep 13 Javascript
js实现电灯开关效果
Jan 19 Javascript
详解JavaScript对象类型
Jun 16 #Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
Jun 16 #Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
Jun 16 #Javascript
JSON字符串和对象相互转换实例分析
Jun 16 #Javascript
jQuery的层级查找方式分析
Jun 16 #Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
Jun 16 #Javascript
JS中sort函数排序用法实例分析
Jun 16 #Javascript
You might like
一个用mysql_odbc和php写的serach数据库程序
2006/10/09 PHP
PHP数据库调用类调用实例(详细注释)
2012/07/12 PHP
php实现的RSS生成类实例
2015/04/23 PHP
php图像处理函数imagecopyresampled用法详解
2016/12/02 PHP
实现php删除链表中重复的结点
2018/09/27 PHP
jQuery 技巧小结
2010/04/02 Javascript
JQuery对checkbox操作 (循环获取)
2011/05/20 Javascript
jQuery中验证表单提交方式及序列化表单内容的实现
2014/01/06 Javascript
html dom节点操作(获取/修改/添加或删除)
2014/01/23 Javascript
基于NodeJS的前后端分离的思考与实践(五)多终端适配
2014/09/26 NodeJs
实例分析javascript中的call()和apply()方法
2014/11/28 Javascript
jQuery使用addClass()方法给元素添加多个class样式
2015/03/26 Javascript
讲解JavaScript中for...in语句的使用方法
2015/06/03 Javascript
JavaScript文本框脚本编写的注意事项
2016/01/25 Javascript
JavaScript几种数组去掉重复值的方法推荐
2016/04/12 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
2016/10/24 Javascript
Jquery根据浏览器窗口改变调整大小的方法
2017/02/07 Javascript
vue组件与复用详解
2018/04/08 Javascript
layui 给数据表格加序号的方法
2018/08/20 Javascript
spring+angular实现导出excel的实现代码
2019/02/27 Javascript
[42:06]2019国际邀请赛全明星赛 8.23
2019/09/05 DOTA
Python实现多线程下载文件的代码实例
2014/06/01 Python
python继承和抽象类的实现方法
2015/01/14 Python
Python简单获取二维数组行列数的方法示例
2018/12/21 Python
详解Python下载图片并保存本地的两种方式
2019/05/15 Python
python 调试冷知识(小结)
2019/11/11 Python
Python如何使用内置库matplotlib绘制折线图
2020/02/24 Python
python轮询机制控制led实例
2020/05/03 Python
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
2016/11/16 HTML / CSS
海蓝之谜英国官网:La Mer英国
2020/01/15 全球购物
初级Java程序员面试题
2016/03/03 面试题
中文系师范生自荐信
2013/10/01 职场文书
遗嘱继承公证书
2014/04/09 职场文书
办理护照工作证明
2014/10/10 职场文书
Python opencv缺陷检测的实现及问题解决
2021/04/24 Python
Win10 最新稳定版本 21H2开始推送
2022/04/19 数码科技