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 相关文章推荐
js 中 document.createEvent的用法
Aug 29 Javascript
潜说js对象和数组
May 25 Javascript
JS实现当前页居中分页效果的方法
Jun 18 Javascript
JavaScript节点及列表操作实例小结
Aug 05 Javascript
js倒计时抢购实例
Dec 20 Javascript
原生JS实现首页进度加载动画
Sep 14 Javascript
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
基于js 本地存储(详解)
Aug 16 Javascript
JS实现将链接生成二维码并转为图片的方法
Mar 17 Javascript
vue实现与安卓、IOS交互的方法
Nov 02 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
Aug 08 Javascript
绘制微信小程序验证码功能的实例代码
Jan 05 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
很温暖很温暖的Lester Young
2021/03/03 冲泡冲煮
PHP 时间转换Unix时间戳代码
2010/01/22 PHP
一个PHP分页类的代码
2011/05/18 PHP
解析php安全性问题中的:Null 字符问题
2013/06/21 PHP
详解php中空字符串和0之间的关系
2016/10/23 PHP
phpcms的分类名称和类别名称的调用
2017/01/05 PHP
用javascript实现读取txt文档的脚本
2007/07/20 Javascript
prototype 中文参数乱码解决方案
2009/11/09 Javascript
JS图片切换的具体方法(带缩略图版)
2013/11/12 Javascript
当某个文本框成为焦点时即清除文本框内容
2014/04/28 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
2015/03/17 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
2015/08/26 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
2015/10/12 Javascript
JS求解三元一次方程组值的方法
2017/01/03 Javascript
详解数组Array.sort()排序的方法
2020/05/09 Javascript
jQuery EasyUI之验证框validatebox实例详解
2017/04/10 jQuery
浅谈mint-ui loadmore组件注意的问题
2017/11/08 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
2017/12/27 Javascript
vue监听滚动事件的方法
2020/12/21 Vue.js
[36:17]DOTA2上海特级锦标赛 - VGL音乐会全集
2016/03/06 DOTA
Python中关于Sequence切片的下标问题详解
2017/06/15 Python
解决nohup重定向python输出到文件不成功的问题
2018/05/11 Python
Django自带日志 settings.py文件配置方法
2019/08/30 Python
在keras里实现自定义上采样层
2020/06/28 Python
简单了解如何封装自己的Python包
2020/07/08 Python
python的launcher用法知识点总结
2020/08/07 Python
详解Python3.8+PyQt5+pyqt5-tools+Pycharm配置详细教程
2020/11/02 Python
CSS3属性background-size使用指南
2014/12/09 HTML / CSS
函授本科个人自我鉴定
2014/03/25 职场文书
企业标语口号
2014/06/10 职场文书
个人先进事迹材料
2014/12/29 职场文书
2015大学生自我评价范文
2015/03/03 职场文书
大学生逃课检讨书
2015/05/04 职场文书
开学典礼校长致辞
2015/07/29 职场文书
Django使用echarts进行可视化展示的实践
2021/06/10 Python
go web 预防跨站脚本的实现方式
2021/06/11 Golang