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 相关文章推荐
Packer 3.0 JS压缩及混淆工具 下载
May 03 Javascript
JS比较两个时间大小的简单示例代码
Dec 20 Javascript
jquery使用$(element).is()来判断获取的tagName
Aug 24 Javascript
jQuery实现渐变下拉菜单的简单方法
Mar 11 Javascript
JavaScript中Math.SQRT2属性的使用详解
Jun 14 Javascript
在AngularJS中使用AJAX的方法
Jun 17 Javascript
ng2学习笔记之bootstrap中的component使用教程
Mar 09 Javascript
JS正则替换去空格的方法
Mar 24 Javascript
js用类封装pop弹窗组件
Oct 08 Javascript
浅谈Angularjs中不同类型的双向数据绑定
Jul 16 Javascript
js实现课堂随机点名系统
Nov 21 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
Apr 26 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/11/28 PHP
phpadmin如何导入导出大数据文件及php.ini参数修改
2013/02/18 PHP
phpmailer发送gmail邮件实例详解
2013/06/24 PHP
简单解决新浪SAE无法上传文件的问题
2015/05/13 PHP
PHP模拟QQ登录的方法
2015/07/29 PHP
优化WordPress的Google字体以加速国内服务器上的运行
2015/11/24 PHP
Aster vs KG BO3 第二场2.18
2021/03/10 DOTA
jQuery DIV弹出效果实现代码
2009/07/03 Javascript
JavaScript中的prototype使用说明
2010/04/13 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
2011/12/26 Javascript
JavaScript Uploadify文件上传实例
2017/02/28 Javascript
angular 组件通信的几种实现方式
2018/07/13 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
2019/02/11 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
2019/05/22 Javascript
vue移动端的左右滑动事件详解
2020/06/17 Javascript
[01:03:56]Mineski vs TNC 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Django 添加静态文件的两种实现方法(必看篇)
2017/07/14 Python
特征脸(Eigenface)理论基础之PCA主成分分析法
2018/03/13 Python
Python3标准库总结
2019/02/19 Python
python+pyqt5实现图片批量缩放工具
2019/03/18 Python
简单了解python反射机制的一些知识
2019/07/13 Python
jupyter notebook oepncv 显示一张图像的实现
2020/04/24 Python
Python如何利用Har文件进行遍历指定字典替换提交的数据详解
2020/11/05 Python
让你相见恨晚的十个Python骚操作
2020/11/18 Python
ReVive利维肤美国官网:RéVive Skincare
2018/04/18 全球购物
英国厨房与餐具用品为主的设计品牌:Joseph Joseph
2018/04/26 全球购物
Jack Rogers官网:美国经典的女性鞋靴品牌
2019/09/04 全球购物
《蒲公英》教学反思
2014/02/28 职场文书
《美丽的南沙群岛》教学反思
2014/04/27 职场文书
社会实践评语
2014/04/28 职场文书
反邪教宣传工作方案
2014/05/07 职场文书
第二批党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2014年法院工作总结
2014/11/24 职场文书
SQL Server2019数据库之简单子查询的具有方法
2021/04/27 SQL Server
TV动画《间谍过家家》公开PV
2022/03/20 日漫
解决IDEA翻译插件Translation报错更新TTK失败不能使用
2022/04/24 Python