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 相关文章推荐
JavaScript高级程序设计
Dec 29 Javascript
在多个页面使用同一个HTML片段的代码
Mar 04 Javascript
JQuery文本框高亮显示插件代码
Apr 02 Javascript
Js Jquery创建一个弹出层可加载一个页面
May 08 Javascript
jquery实现的Accordion折叠面板效果代码
Sep 02 Javascript
理解Javascript图片预加载
Feb 23 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
Apr 17 Javascript
js制作网站首页图片轮播特效代码
Aug 30 Javascript
Bootstrap 模态框(Modal)插件代码解析
Dec 21 Javascript
Bootstrap 3 按钮标签实例代码
Feb 21 Javascript
AngularJS中ng-class用法实例分析
Jul 06 Javascript
Nuxt使用Vuex的方法示例
Sep 06 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程序--记数器
2006/10/09 PHP
php中实现简单的ACL 完结篇
2011/09/07 PHP
php+memcache实现的网站在线人数统计代码
2014/07/04 PHP
php简单获取目录列表的方法
2015/03/24 PHP
yii2高级应用之自定义组件实现全局使用图片上传功能的方法
2016/10/08 PHP
Yii 访问 Gii(脚手架)时出现 403 错误
2018/06/06 PHP
laravel 修改.htaccess文件 重定向public的解决方法
2019/10/12 PHP
TopList标签和JavaScript结合两例
2007/08/12 Javascript
jQuery对象和DOM对象的相互转化实现代码
2010/03/02 Javascript
3Z版基于jquery的图片复选框(asp.net+jquery)
2010/04/12 Javascript
javascript跑马灯悬停放大效果实现代码
2012/12/12 Javascript
JavaScript对内存分配及管理机制详细解析
2013/11/11 Javascript
Jquery使用小技巧汇总
2015/12/29 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
2016/10/27 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
2016/12/08 Javascript
微信JSAPI支付操作需要注意的细节
2017/01/10 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
2020/11/24 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
2017/08/16 Javascript
JS中精巧的自动柯里化实现方法
2017/12/12 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
2019/09/24 Javascript
Python中exit、return、sys.exit()等使用实例和区别
2015/05/28 Python
OpenCV实现人脸识别
2017/04/07 Python
Python中with及contextlib的用法详解
2017/06/08 Python
pandas string转dataframe的方法
2018/04/11 Python
python如何构建mock接口服务
2021/01/28 Python
Raleigh兰令自行车美国官网:英国凤头牌自行车
2018/01/08 全球购物
构造方法和其他方法的区别
2016/04/26 面试题
小学开学典礼主持词
2014/03/19 职场文书
《桂花雨》教学反思
2014/04/12 职场文书
2014年向国旗敬礼活动总结
2014/09/27 职场文书
小学感恩节活动策划方案
2014/10/06 职场文书
会计师事务所实习证明
2014/11/16 职场文书
行政主管岗位职责
2015/02/03 职场文书
Java实现简易的分词器功能
2021/06/15 Java/Android
springBoot基于webSocket实现扫码登录
2021/06/22 Java/Android
sql注入报错之注入原理实例解析
2022/06/10 MySQL