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 相关文章推荐
tangram框架响应式加载图片方法
Nov 21 Javascript
JS匿名函数实例分析
Nov 26 Javascript
jquery 手势密码插件
Mar 17 Javascript
详解Angular2 关于*ngFor 嵌套循环
May 22 Javascript
vue解决跨域路由冲突问题思路解析
Nov 03 Javascript
vue中实现图片和文件上传的示例代码
Mar 16 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
Jun 27 Javascript
Vue 开发必须知道的36个技巧(小结)
Oct 09 Javascript
微信小程序吸底区域适配iPhoneX的实现
Apr 09 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
Oct 30 Javascript
Vue CLI中模式与环境变量的深入详解
May 30 Vue.js
JavaScript异步操作中串行和并行
Nov 20 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
做一个有下拉功能的留言版
2006/10/09 PHP
php 在线打包_支持子目录
2008/06/28 PHP
php读取excel文件的简单实例
2013/08/26 PHP
php读取3389的脚本
2014/05/06 PHP
PHP读取大文件的多种方法介绍
2016/04/04 PHP
php生成网页桌面快捷方式
2017/05/05 PHP
jQuery Migrate 1.1.0 Released 注意事项
2014/06/14 Javascript
javascript实现模拟时钟的方法
2015/05/13 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
2015/07/27 Javascript
理解javascript定时器中的单线程
2016/02/23 Javascript
Extjs实现下拉菜单效果
2016/04/01 Javascript
Node.js中防止错误导致的进程阻塞的方法
2016/08/11 Javascript
vue增删改查的简单操作
2017/07/15 Javascript
js实现各浏览器全屏代码实例
2018/07/03 Javascript
JavaScript设计模式之观察者模式实例详解
2019/01/16 Javascript
详解小程序开发经验:多页面数据同步
2019/05/18 Javascript
vue实现跨域的方法分析
2019/05/21 Javascript
JS控制只能输入数字并且最多允许小数点两位
2019/11/24 Javascript
Vue数字输入框组件使用方法详解
2020/02/10 Javascript
ES11新增的这9个新特性,你都掌握了吗
2020/10/15 Javascript
让python同时兼容python2和python3的8个技巧分享
2014/07/11 Python
python退出命令是什么?详解python退出方法
2018/12/10 Python
Python pickle模块实现对象序列化
2019/11/22 Python
html+css3实现的登录界面
2020/12/09 HTML / CSS
canvas实现圆形进度条动画的示例代码
2017/12/26 HTML / CSS
香港现代设计家具品牌:Ziinlife Furniture
2018/11/13 全球购物
迟到检讨书800字
2014/01/13 职场文书
卫校中专生的自我评价
2014/01/15 职场文书
幼儿园教师自我鉴定
2014/03/20 职场文书
语文教师个人工作总结
2015/02/06 职场文书
任命书怎么写
2015/03/02 职场文书
2016应届毕业生自荐信范文
2016/01/28 职场文书
javaScript Array api梳理
2021/03/31 Javascript
修改MySQL的默认密码的四种小方法
2021/05/26 MySQL
springboot 启动如何排除某些bean的注入
2021/08/02 Java/Android
vue ref如何获取子组件属性值
2022/03/31 Vue.js