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 Firefox3.5中操作select的问题
Jul 10 Javascript
JS 有趣的eval优化输入验证实例代码
Sep 22 Javascript
JavaScript简单实现网页回到顶部功能
Nov 12 Javascript
jQuery如何取id有.的值一般的方法是取不到的
Apr 18 Javascript
JSON格式化输出
Nov 10 Javascript
实现无刷新联动例子汇总
May 20 Javascript
作为老司机使用 React 总结的 11 个经验教训
Apr 08 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
Jun 26 Javascript
javascript+html5+css3自定义弹出窗口效果
Oct 26 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
Aug 08 Javascript
微信小程序的授权实现过程解析
Aug 02 Javascript
Vue-cli4 配置 element-ui 按需引入操作
Sep 11 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
正义联盟的终局之战《天启星战争》将成为DC动画宇宙的最后一部
2020/04/09 欧美动漫
文件上传类
2006/10/09 PHP
php db类库进行数据库操作
2009/03/19 PHP
PHP 输出缓存详解
2009/06/20 PHP
配置php网页显示各种语法错误
2013/09/23 PHP
destoon实现商铺管理主页设置增加新菜单的方法
2014/06/26 PHP
让JavaScript拥有类似Lambda表达式编程能力的方法
2010/09/12 Javascript
js 判断checkbox是否选中的实现代码
2010/11/23 Javascript
获取表单控件原始(初始)值的方法
2013/08/21 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
2014/09/10 Javascript
JQuery节点元素属性操作方法
2015/06/11 Javascript
jQuery qrcode生成二维码的方法
2016/04/03 Javascript
wap手机端解决返回上一页的js实例
2016/12/08 Javascript
javascript 秒表计时器实现代码
2017/03/09 Javascript
d3.js实现立体柱图的方法详解
2017/04/28 Javascript
JavaScript实现一个带AI的井字棋游戏源码
2018/05/21 Javascript
vue组件挂载到全局方法的示例代码
2018/08/02 Javascript
微信小程序自定义弹窗实现详解(可通用)
2019/07/04 Javascript
基于Python中capitalize()与title()的区别详解
2017/12/09 Python
python实战教程之自动扫雷
2018/07/13 Python
对python同一个文件夹里面不同.py文件的交叉引用方法详解
2018/12/15 Python
解决Pycharm界面的子窗口不见了的问题
2019/01/17 Python
python实现AES和RSA加解密的方法
2019/03/28 Python
python递归调用中的坑:打印有值, 返回却None
2020/03/16 Python
在pycharm中使用matplotlib.pyplot 绘图时报错的解决
2020/06/01 Python
HTML5 本地存储 LocalStorage详解
2016/06/24 HTML / CSS
创立科技Java面试题
2015/11/29 面试题
计算机维护专业推荐信
2014/02/27 职场文书
小学教师寄语大全
2014/04/03 职场文书
会计毕业生自荐书
2014/06/12 职场文书
电子商务专业毕业生自荐书
2014/06/22 职场文书
追悼会悼词大全
2015/06/23 职场文书
评奖评优个人先进事迹材料
2015/11/04 职场文书
大学生干部培训心得体会
2016/01/06 职场文书
2016年质量月活动总结报告
2016/04/05 职场文书
Python趣味实战之手把手教你实现举牌小人生成器
2021/06/07 Python