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 21 Javascript
js模拟点击事件实现代码
Nov 06 Javascript
js获取dom的高度和宽度(可见区域及部分等等)
Jun 13 Javascript
通过js获取div的background-image属性
Oct 15 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
Apr 28 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
Jul 19 Javascript
Angular2 (RC5) 路由与导航详解
Sep 21 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
微信小程序上线发布流程图文详解
May 06 Javascript
Vue数字输入框组件的使用方法
Oct 19 Javascript
vue实现div单选多选功能
Jul 16 Javascript
使用AutoJs实现微信抢红包的代码
Dec 31 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
thinkphp文件引用与分支结构用法实例
2014/11/26 PHP
Yii遍历行下每列数据的方法
2016/10/17 PHP
利用php-cli和任务计划实现刷新token功能的方法
2017/05/03 PHP
Laravel利用gulp如何构建前端资源详解
2018/06/03 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
Extjs学习过程中新手容易碰到的低级错误积累
2010/02/11 Javascript
jquery ajax方式直接提交整个表单核心代码
2013/08/15 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
2014/05/11 Javascript
纯JavaScript实现的分页插件实例
2015/07/14 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
2016/08/10 Javascript
模拟javascript中的sort排序(简单实例)
2016/08/17 Javascript
js获取Get值的方法
2016/09/29 Javascript
关于JavaScript的单双引号嵌套问题
2017/08/20 Javascript
Electron 如何调用本地模块的方法
2019/02/01 Javascript
Vue开发环境跨域访问问题
2020/01/22 Javascript
Nodejs环境实现socket通信过程解析
2020/07/03 NodeJs
原生js拖拽功能制作滑动条实例代码
2021/02/05 Javascript
[41:12]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
在GitHub Pages上使用Pelican搭建博客的教程
2015/04/25 Python
Python 绘图库 Matplotlib 入门教程
2018/04/19 Python
PyCharm鼠标右键不显示Run unittest的解决方法
2018/11/30 Python
selenium3+python3环境搭建教程图解
2018/12/07 Python
Python任意字符串转16, 32, 64进制的方法
2019/06/12 Python
python、Matlab求定积分的实现
2019/11/20 Python
tensorflow mnist 数据加载实现并画图效果
2020/02/05 Python
tensorflow2.0与tensorflow1.0的性能区别介绍
2020/02/07 Python
python中uuid模块实例浅析
2020/12/29 Python
巴黎卡诗加拿大官网:Kérastase加拿大
2018/11/12 全球购物
Fossil加拿大官网:化石手表、手袋、首饰及配饰
2019/04/23 全球购物
Linux Interview Questions For software testers
2013/05/17 面试题
大学生村官心得体会范文
2014/01/04 职场文书
yy结婚证婚词
2014/01/10 职场文书
会计电算化个人求职信范文
2014/01/24 职场文书
家长对小学生的评语
2014/01/28 职场文书
艺术学院毕业生求职信
2014/07/09 职场文书
mysql sock文件存储了什么信息
2022/07/15 MySQL