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循环遍历JSON数据的方法
Jul 08 Javascript
在浏览器中打开或关闭JavaScript的方法
Jun 03 Javascript
jQuery Easyui datagrid连续发送两次请求问题
Dec 13 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
Jul 10 Javascript
js 索引下标之li集合绑定点击事件
Jan 12 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
Feb 08 Javascript
JavaScript反射与依赖注入实例详解
May 29 Javascript
详解vue-router数据加载与缓存使用总结
Oct 29 Javascript
Vue实现一个无限加载列表功能
Nov 13 Javascript
一文快速了解JQuery中的AJAX
May 31 jQuery
JavaScript动态添加数据到表单并提交的几种方式
Jun 26 Javascript
JavaScript正则表达式验证登录实例
Mar 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
php中函数的形参与实参的问题说明
2010/09/01 PHP
PHP取得一个类的属性和方法的实现代码
2011/05/22 PHP
windows服务器中检测PHP SSL是否开启以及开启SSL的方法
2014/04/25 PHP
PHP处理数组和XML之间的互相转换
2016/06/02 PHP
静态html文件执行php语句的方法(推荐)
2016/11/21 PHP
php实现的二分查找算法示例
2017/06/20 PHP
PHP操作redis实现的分页列表,新增,删除功能封装类与用法示例
2018/08/04 PHP
Yii2框架控制器、路由、Url生成操作示例
2019/05/27 PHP
Ajax::prototype 源码解读
2007/01/22 Javascript
jQuery textarea的长度进行验证
2009/05/06 Javascript
写出更好的JavaScript程序之undefined篇(中)
2009/11/23 Javascript
js创建对象的几种常用方式小结(推荐)
2010/10/24 Javascript
谈谈JavaScript中的函数与闭包
2013/04/14 Javascript
JavaScript代码复用模式详解
2014/11/07 Javascript
jQuery中:lt选择器用法实例
2014/12/29 Javascript
jquery获取css的color值返回RGB的方法
2015/12/18 Javascript
使用递归遍历对象获得value值的实现方法
2016/06/14 Javascript
jQuery 3.0十大新特性最终版发布
2016/07/14 Javascript
详解Angular 4 表单快速入门
2017/06/05 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
2018/02/24 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
2018/03/01 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
2018/03/05 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
2020/12/07 Vue.js
[01:35]2018完美盛典章节片——共竞
2018/12/17 DOTA
Python使用pickle模块实现序列化功能示例
2018/07/13 Python
python 实现list或string按指定分段
2019/12/25 Python
基于pytorch中的Sequential用法说明
2020/06/24 Python
python实现学生信息管理系统源码
2021/02/22 Python
介绍一下linux的文件系统
2012/03/20 面试题
配件采购员岗位职责
2013/12/03 职场文书
竞选村长演讲稿
2014/04/28 职场文书
世界遗产导游词
2015/02/13 职场文书
安全员岗位职责范本
2015/04/11 职场文书
在Django中使用MQTT的方法
2021/05/10 Python
Python开发之QT解决无边框界面拖动卡屏问题(附带源码)
2021/05/27 Python
python常见的占位符总结及用法
2021/07/02 Python