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 相关文章推荐
一个cssQuery对象 javascript脚本实现代码
Jul 21 Javascript
20个非常棒的 jQuery 幻灯片插件和教程分享
Aug 23 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
Nov 13 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
May 20 Javascript
简单理解js的prototype属性及使用
Dec 07 Javascript
浅谈vue,angular,react数据双向绑定原理分析
Nov 28 Javascript
实例教学如何写vue插件
Nov 30 Javascript
vue 下列表侧滑操作实例代码详解
Jul 24 Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
Apr 09 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
Jun 21 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
Jul 31 Javascript
JS+CSS实现炫酷光感效果
Sep 05 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实现域名whois查询的代码(数据源万网、新网)
2010/02/22 PHP
php解压文件代码实现php在线解压
2014/02/13 PHP
PH P5.2至5.5、5.6的新增功能详解
2014/07/14 PHP
PHP代码实现表单数据验证类
2015/07/28 PHP
一种JavaScript的设计模式
2006/11/22 Javascript
javascript入门基础之私有变量
2010/02/23 Javascript
jQueryUI的Dialog的简单封装
2010/06/07 Javascript
jquery validate使用攻略 第四步
2010/07/01 Javascript
js限制textarea每行输入字符串长度的代码
2012/10/31 Javascript
jQuery UI 实现email输入提示实例
2013/08/15 Javascript
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
2013/09/10 Javascript
jquery mobile changepage的三种传参方法介绍
2013/09/13 Javascript
用jquery中插件dialog实现弹框效果实例代码
2013/11/15 Javascript
一个简单的Node.js异步操作管理器分享
2014/04/29 Javascript
使用RequireJS优化JavaScript引用代码的方法
2015/07/01 Javascript
浅谈JavaScript超时调用和间歇调用
2015/08/30 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
2016/01/27 Javascript
jQuery实现的可编辑表格完整实例
2016/06/20 Javascript
jquery  实现轮播图详解及实例代码
2016/10/12 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
2016/11/30 Javascript
原生js封装自定义滚动条
2017/03/24 Javascript
javascript 中null和undefined区分和比较
2017/04/19 Javascript
详解vue 模版组件的三种用法
2017/07/21 Javascript
JavaScript基础之流程控制语句的用法
2017/08/31 Javascript
Javascript var变量删除原理及实现
2020/08/26 Javascript
python访问类中docstring注释的实现方法
2015/05/04 Python
python机器学习理论与实战(六)支持向量机
2018/01/19 Python
把csv文件转化为数组及数组的切片方法
2018/07/04 Python
python适合人工智能的理由和优势
2019/06/28 Python
pytorch masked_fill报错的解决
2020/02/18 Python
python实现一个猜拳游戏
2020/04/05 Python
Python中openpyxl实现vlookup函数的实例
2020/10/28 Python
德国购买健身器材:AsVIVA
2017/08/09 全球购物
人力资源行政经理自我评价
2013/10/23 职场文书
三好学生先进事迹材料
2014/08/28 职场文书
创业计划书详解
2019/07/19 职场文书