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打造的百分比动态色彩条插件
Sep 19 Javascript
JS常见问题整理(持续更新)
Aug 06 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
Nov 04 Javascript
Javascript之面向对象--方法
Dec 02 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
Dec 06 Javascript
JavaScript模板引擎Template.js使用详解
Dec 15 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
Jan 04 Javascript
vue cli 3.0 使用全过程解析
Jun 14 Javascript
微信小程序动态添加view组件的实例代码
May 23 Javascript
js实现树形数据转成扁平数据的方法示例
Feb 27 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
Apr 25 Javascript
js实现弹窗效果
Aug 09 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下载远程文件类(支持断点续传)
2008/11/14 PHP
php入门学习知识点一 PHP与MYSql连接与查询
2011/07/14 PHP
关于UEditor编辑器远程图片上传失败的解决办法
2012/08/31 PHP
PHP cURL初始化和执行方法入门级代码
2015/05/28 PHP
老生常谈PHP中的数据结构:DS扩展
2017/07/17 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
BOOM vs RR BO5 第三场 2.14
2021/03/10 DOTA
基于jquery实现的省市区级联无ajax
2013/09/24 Javascript
jquery实现树形二级菜单实例代码
2013/11/20 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
2015/03/31 Javascript
Bootstrap教程JS插件弹出框学习笔记分享
2016/05/17 Javascript
js操作数据库实现注册和登陆的简单实例
2016/05/26 Javascript
浅谈AngularJS中使用$resource(已更新)
2017/09/14 Javascript
把vue-router和express项目部署到服务器的方法
2018/02/21 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
2018/07/02 Javascript
详解vue组件中使用路由方法
2019/02/12 Javascript
原生js实现trigger方法示例代码
2019/05/22 Javascript
Vue实现导航栏点击当前标签变色功能
2020/08/19 Javascript
记录vue做微信自定义分享的一些问题
2019/09/12 Javascript
JS实现简易留言板特效
2019/12/23 Javascript
netbeans7安装python插件的方法图解
2013/12/24 Python
Python调用微信公众平台接口操作示例
2017/07/08 Python
python+matplotlib绘制3D条形图实例代码
2018/01/17 Python
python 去除二维数组/二维列表中的重复行方法
2019/01/23 Python
Python使用graphviz画流程图过程解析
2020/03/31 Python
Python调用百度OCR实现图片文字识别的示例代码
2020/07/17 Python
用gpu训练好的神经网络,用tensorflow-cpu跑出错的原因及解决方案
2021/03/03 Python
美国知名的家庭连锁百货商店:Boscov’s
2017/07/27 全球购物
学习决心书范文
2014/03/11 职场文书
房屋产权证明书
2014/10/15 职场文书
公务员考察材料范文
2014/12/23 职场文书
质量负责人岗位职责
2015/02/15 职场文书
行政诉讼答辩状
2015/05/21 职场文书
《桂花雨》教学反思
2016/02/19 职场文书
倡议书怎么写?
2019/04/11 职场文书
vue 自定义组件添加原生事件
2022/04/21 Vue.js