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 相关文章推荐
jQuery EasyUI API 中文文档 - Documentation 文档
Sep 29 Javascript
基于jquery的跟随屏幕滚动代码
Jul 24 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
Mar 26 Javascript
TypeScript具有的几个不同特质
Apr 07 Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
Oct 21 Javascript
jQuery控制div实现随滚动条滚动效果
Jun 07 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
Sep 23 Javascript
node.js中debug模块的简单介绍与使用
Apr 25 Javascript
node.js 中间件express-session使用详解
May 20 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
Dec 27 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
Aug 27 Javascript
JavaScript+HTML实现学生信息管理系统
Apr 20 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
php网页后退不再出现过期
2007/03/08 PHP
解析php dirname()与__FILE__常量的应用
2013/06/24 PHP
php+mysqli实现批量替换数据库表前缀的方法
2014/12/29 PHP
PHP答题类应用接口实例
2015/02/09 PHP
PHP中Session ID的实现原理实例分析
2019/08/17 PHP
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
2013/08/21 Javascript
js动态控制table的tr、td增加及删除的具体实现
2014/04/30 Javascript
网页右下角弹出窗体实现代码
2014/06/05 Javascript
JavaScript笔记之数据属性和存储器属性
2016/03/31 Javascript
详解新手使用vue-router传参时注意事项
2019/06/06 Javascript
JavaScript 预解析的4种实现方法解析
2019/09/03 Javascript
JavaScript如何判断对象有某属性
2020/07/03 Javascript
vue使用过滤器格式化日期
2021/01/20 Vue.js
[07:06]2018DOTA2国际邀请赛寻真——卫冕冠军Team Liquid
2018/08/10 DOTA
Python struct.unpack
2008/09/06 Python
TensorFlow 滑动平均的示例代码
2018/06/19 Python
python调用opencv实现猫脸检测功能
2019/01/15 Python
为什么从Python 3.6开始字典有序并效率更高
2019/07/15 Python
python实现简易学生信息管理系统
2020/04/05 Python
python随机数分布random均匀分布实例
2019/11/27 Python
python 星号(*)的多种用途
2020/09/21 Python
使用Python Tkinter实现剪刀石头布小游戏功能
2020/10/23 Python
一款基于css3和jquery实现的动画显示弹出层按钮教程
2015/01/04 HTML / CSS
Hotels.com日本:国外和海外住宿,酒店预订
2019/12/13 全球购物
YSL圣罗兰美妆俄罗斯官网:Yves Saint Lauret RU
2020/09/23 全球购物
Clos19英国:高档香槟、葡萄酒和烈酒在线购物平台
2020/07/10 全球购物
XML文档面试题
2015/08/05 面试题
简历自我评价模版
2014/01/31 职场文书
会计毕业自我鉴定
2014/02/05 职场文书
全国文明单位申报材料
2014/05/31 职场文书
教室布置标语
2014/06/26 职场文书
小学“向国旗敬礼”网上签名寄语活动总结
2014/09/27 职场文书
2014年店长工作总结
2014/11/17 职场文书
关于运动会的宣传稿
2015/07/23 职场文书
餐厅如何利用“营销策略”扭转亏本局面
2019/10/15 职场文书
python 判断字符串当中是否包含字符(str.contain)
2022/06/01 Python