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 Event学习第五章 高级事件注册模型
Feb 07 Javascript
angular.foreach 循环方法使用指南
Jan 06 Javascript
JavaScript中setMonth()方法的使用详解
Jun 11 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
Sep 07 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
May 13 Javascript
bootstrap table分页模板和获取表中的ID方法
Jan 10 Javascript
js+css3实现旋转效果
Jan 20 Javascript
微信小程序实现单选功能
Oct 30 Javascript
vue生命周期与钩子函数简单示例
Mar 13 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
Apr 19 Javascript
Vue 组件复用多次自定义参数操作
Jul 27 Javascript
openlayers实现地图弹窗
Sep 25 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/08/27 PHP
ThinkPHP的I方法使用详解
2014/06/18 PHP
Laravel统计一段时间间隔的数据方法
2019/10/09 PHP
基于jquery+thickbox仿校内登录注册框
2010/06/07 Javascript
javascript 窗口加载蒙板 内嵌网页内容
2010/11/19 Javascript
iframe 异步加载技术及性能分析
2011/07/19 Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
2014/05/26 Javascript
jQuery中大家不太了解的几个方法
2015/03/04 Javascript
js模仿java的Map集合详解
2016/01/06 Javascript
JS+Canvas 实现下雨下雪效果
2016/05/18 Javascript
JavaScript事件学习小结(一)事件流
2016/06/09 Javascript
jQuery Raty 一款不错的星级评分插件
2016/08/24 Javascript
Vue结合原生js实现自定义组件自动生成示例
2017/01/21 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
2018/01/04 Javascript
vue2.0 实现导航守卫(路由守卫)
2018/05/21 Javascript
Vue.js实现可排序的表格组件功能示例
2019/02/19 Javascript
浅谈JavaScript面向对象--继承
2019/03/20 Javascript
详解vue 图片上传功能
2019/04/30 Javascript
webpack.DefinePlugin与cross-env区别详解
2020/02/23 Javascript
解决vue scoped scss 无效的问题
2020/09/04 Javascript
在Gnumeric下使用Python脚本操作表格的教程
2015/04/14 Python
利用python操作SQLite数据库及文件操作详解
2017/09/22 Python
使用Anaconda3建立虚拟独立的python2.7环境方法
2018/06/11 Python
Django使用消息提示简单的弹出个对话框实例
2019/11/15 Python
django 框架实现的用户注册、登录、退出功能示例
2019/11/28 Python
基于pycharm实现批量修改变量名
2020/06/02 Python
CSS3解决移动页面上点击链接触发色块的问题
2016/06/03 HTML / CSS
学生个人的自我评价分享
2013/11/05 职场文书
地质灾害防治方案
2014/05/14 职场文书
解除财产保全担保书
2014/05/20 职场文书
2014公安机关纪律作风整顿思想汇报
2014/09/13 职场文书
2014乡镇班子个人对照检查材料思想汇报
2014/09/26 职场文书
2014教师专业技术工作总结
2014/12/03 职场文书
刑事辩护词范文
2015/05/21 职场文书
2015年高三毕业班班主任工作总结
2015/10/22 职场文书
python_tkinter事件类型详情
2022/03/20 Python