Jquery插件编写简明教程


Posted in Javascript onMarch 25, 2014
 /*
 1.jQuery插件文件名推荐命名为 jquery.[插件名].js 以免和其他javascript库插件混淆。例如命名为jquery.color.js
 2.所有的对象方法名都应当附加到jQuery.fn对象上而所有的全局函数都应当附加到jQuery对象本身上。
 3.在插件内部,this指向的是当前通过选择器获取的jquery对象,而不像一般方法哪样,例如chick()方法,内部的this指向的dom元素
 4.可以通过this.each来遍历所有元素
 5.所有的方法或函数插件,都应当以分号结尾,否者压缩的时候可能出现问题,为了更稳妥一些,甚至可以在插件头部先加上一个分号,
 以免他人不规范的代码给查询带来影响。
 6.插件应该返回一个jquery对象,以保证插件可链式操作。除非插件需要返回的是一些需要回去的量,例如字符串或者数组
 7.避免在插件内部使用$作为jquery对象的别名,而应使完整的jquery来表示,这样可以避免冲突。当然,也可以利用闭包这种技巧来回避
 这儿问题,使插件内部继续使用$作为jquery的别名。
 */ //;为了更好的兼容性,开始有个分号
 ;(function($){//此处将$作为匿名函数的形参
  //$.fn.extend 扩展插件
  $.fn.extend({
      "color":function(value){//color 自己写的插件方法名
       //jQuery提供了css方法可以直接写成this.css("属性","值"); 
       return this.css("color",value);
      }
  });
 })(jQuery);//这里将jquery作为实参传递给匿名函数
 
 function red(){
  alert($("#div").color()+"证明插件可用");
  alert($("#div").color("red")+"证明插件返回了一个Jquery对象");
  $("#div").color("red");
 }

在HTML使用插件示例:

<body>
      <div id="div" onclick="red()">dddddddddddddddd</div>
  </body>
Javascript 相关文章推荐
JS字符串函数扩展代码
Sep 13 Javascript
jQuery Validation PlugIn的使用方法详解
Dec 18 Javascript
将List对象列表转换成JSON格式的类实现方法
Jul 04 Javascript
IE下JS保存图片的简单实例
Jul 15 Javascript
谈谈因Vue.js引发关于getter和setter的思考
Dec 02 Javascript
Mongoose学习全面理解(推荐)
Jan 21 Javascript
Vue.js弹出模态框组件开发的示例代码
Jul 26 Javascript
element-ui 关于获取select 的label值方法
Aug 24 Javascript
回顾Javascript React基础
Jun 15 Javascript
vue中使用[provide/inject]实现页面reload的方法
Sep 30 Javascript
js实现淘宝首页的banner栏效果
Nov 26 Javascript
基于JavaScript实现大文件上传后端代码实例
Aug 18 Javascript
jquery自动填充勾选框即把勾选框打上true
Mar 24 #Javascript
jquery默认校验规则整理
Mar 24 #Javascript
Javascript连接多个数组不用concat来解决
Mar 24 #Javascript
jqeury-easyui-layout问题解决方法
Mar 24 #Javascript
让table变成exls的示例代码
Mar 24 #Javascript
JQuery 图片滚动轮播示例代码
Mar 24 #Javascript
JS中判断null、undefined与NaN的方法
Mar 24 #Javascript
You might like
Windows下IIS6/Apache2.2.4+MySQL5.2+PHP5.2.1安装配置方法
2007/05/03 PHP
PHP写UltraEdit插件脚本实现方法
2011/12/26 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十三)
2014/06/26 PHP
PHP 反射(Reflection)使用实例
2015/05/12 PHP
smarty学习笔记之常见代码段用法总结
2016/03/19 PHP
Javascript基础教程之数组 array
2015/01/18 Javascript
JavaScript中用toString()方法返回时间为字符串
2015/06/12 Javascript
JavaScript学习小结(7)之JS RegExp
2015/11/29 Javascript
完美的js图片轮换效果
2017/02/05 Javascript
纯js实现html转pdf的简单实例(推荐)
2017/02/16 Javascript
深入掌握 react的 setState的工作机制
2017/09/27 Javascript
jQuery实现的简单无刷新评论功能示例
2017/11/08 jQuery
node.js中对Event Loop事件循环的理解与应用实例分析
2020/02/14 Javascript
[27:02]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第三场
2014/05/24 DOTA
[01:36:17]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第一场 1月31日
2021/03/11 DOTA
50行代码实现贪吃蛇(具体思路及代码)
2013/04/27 Python
Python实例之wxpython中Frame使用方法
2014/06/09 Python
python根据文件大小打log日志
2014/10/09 Python
Python3 能振兴 Python的原因分析
2014/11/28 Python
Python编程中装饰器的使用示例解析
2016/06/20 Python
django小技巧之html模板中调用对象属性或对象的方法
2018/11/30 Python
Python request post上传文件常见要点
2020/11/20 Python
python 简单的调用有道翻译
2020/11/25 Python
Boutique 1美国:阿联酋奢侈时尚零售商
2017/10/16 全球购物
台湾三立电视电商平台:电电购
2019/09/09 全球购物
大学生创业计划书的格式要求
2013/12/29 职场文书
组织关系转移介绍信
2014/01/16 职场文书
煤矿机修工岗位职责
2014/02/07 职场文书
高中生的自我评价
2014/03/04 职场文书
交通事故调解协议书
2014/04/16 职场文书
导游个人求职信
2014/04/25 职场文书
机械设备与数控技术专业求职信
2014/08/10 职场文书
2016大学生诚信考试承诺书
2016/03/25 职场文书
奶茶店的创业计划书该怎么写?
2019/07/15 职场文书
使用logback实现按自己的需求打印日志到自定义的文件里
2021/08/30 Java/Android
mongoDB数据库索引快速入门指南
2022/03/23 MongoDB