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模拟黑客帝国矩阵效果实例
Jun 28 Javascript
Node.js巧妙实现Web应用代码热更新
Oct 22 Javascript
jQuery中text() val()和html()的区别实例详解
Jun 28 Javascript
Bootstrap表单布局样式源代码
Jul 04 Javascript
D3.js实现散点图和气泡图的方法详解
Sep 21 Javascript
微信小程序 WebSocket详解及应用
Jan 21 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
Jan 29 Javascript
关于axios返回空对象的问题解决
Apr 04 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
May 17 Javascript
详解React 服务端渲染方案完美的解决方案
Dec 14 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
Nov 26 Javascript
小程序实现列表倒计时功能
Jan 29 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 session机制
2011/07/17 PHP
浅谈PHP中的
2016/04/23 PHP
PHP中call_user_func_array回调函数的用法示例
2016/11/26 PHP
php redis实现对200w用户的即时推送
2017/03/04 PHP
PHP+ajax实现获取新闻数据简单示例
2018/05/08 PHP
tp5(thinkPHP5框架)captcha验证码配置及验证操作示例
2019/05/28 PHP
通过JAVAScript实现页面自适应
2007/01/19 Javascript
css图片自适应大小
2007/11/28 Javascript
js文件缓存之版本管理详解
2013/07/05 Javascript
Js中的onblur和onfocus事件应用介绍
2013/08/27 Javascript
28个常用JavaScript方法集锦
2015/01/14 Javascript
Jquery数字上下滚动动态切换插件
2015/08/08 Javascript
javascript中字体浮动效果的简单实例演示
2015/11/18 Javascript
即将发布的jQuery 3 有哪些新特性
2016/04/14 Javascript
jQuery 获取多选框的值及多选框中文的函数
2016/05/16 Javascript
D3.js实现折线图的方法详解
2016/09/21 Javascript
原生javascript实现分页效果
2017/04/21 Javascript
AngularJS读取JSON及XML文件的方法示例
2017/05/25 Javascript
基于vue 动态加载图片src的解决方法
2018/02/05 Javascript
跨域请求两种方法 jsonp和cors的实现
2018/11/11 Javascript
Vue 实现输入框新增搜索历史记录功能
2019/10/15 Javascript
老生常谈进程线程协程那些事儿
2017/07/24 Python
python网络爬虫之如何伪装逃过反爬虫程序的方法
2017/11/23 Python
Python3之不使用第三方变量,实现交换两个变量的值
2019/06/26 Python
详解PyTorch手写数字识别(MNIST数据集)
2019/08/16 Python
Python猫眼电影最近上映的电影票房信息
2020/09/18 Python
MyHeritage美国:家族史研究和DNA测试的领先服务
2019/05/27 全球购物
机械专业个人求职自荐信格式
2013/09/21 职场文书
车祸赔偿收入证明
2014/01/09 职场文书
汽车维修工岗位职责
2014/02/12 职场文书
坚定理想信念心得体会
2014/03/11 职场文书
倡议书格式
2014/04/14 职场文书
演讲稿的写法
2014/05/19 职场文书
2016学习医德医风心得体会
2016/01/25 职场文书
OpenCV-Python实现轮廓的特征值
2021/06/09 Python
浅谈MySql update会锁定哪些范围的数据
2022/06/25 MySQL