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的函数
Jan 31 Javascript
很可爱的输入框
Aug 03 Javascript
YUI的Tab切换实现代码
Apr 11 Javascript
理解Javascript_05_原型继承原理
Oct 13 Javascript
node.js中的fs.createWriteStream方法使用说明
Dec 17 Javascript
jQuery中prepend()方法使用详解
Aug 11 Javascript
禁用backspace网页回退功能的实现代码
Nov 15 Javascript
jQuery时间验证和转换为标准格式的时间格式
Mar 06 Javascript
JS实现课堂随机点名和顺序点名
Mar 09 Javascript
vue.js实现价格格式化的方法
May 23 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
vue 组件内获取actions的response方式
Nov 08 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中邮箱地址正则表达式实现与详解
2012/04/24 PHP
推荐25款php中非常有用的类库
2014/09/29 PHP
php递归json类实例
2014/12/02 PHP
thinkphp3.2中Lite文件替换框架入口文件或应用入口文件的方法
2015/05/21 PHP
PHP实现图片不变型裁剪及图片按比例裁剪的方法
2016/01/14 PHP
PHP实现的进度条效果详解
2016/05/03 PHP
PHP分页显示的方法分析【附PHP通用分页类】
2018/05/10 PHP
PHP simplexml_import_dom()函数讲解
2019/02/03 PHP
PHP中的异常处理机制深入讲解
2020/11/10 PHP
Firefox outerHTML实现代码
2009/06/04 Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
2012/05/23 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
2014/05/07 Javascript
jQuery源码分析之jQuery中的循环技巧详解
2014/09/06 Javascript
浅析javascript的间隔调用和延时调用
2014/11/12 Javascript
jQuery中ajax的load()与post()方法实例详解
2016/01/05 Javascript
使用jQuery实现Web页面换肤功能的要点解析
2016/05/12 Javascript
详解vue-router基本使用
2017/04/18 Javascript
详解Vue使用 vue-cli 搭建项目
2017/04/20 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
2018/09/05 jQuery
微信小程序实现form表单本地储存数据
2019/06/27 Javascript
[01:15:56]2018DOTA2亚洲邀请赛3月30日 小组赛A组 TNC VS Newbee
2018/03/31 DOTA
Python实现图片转字符画的示例
2017/08/22 Python
Python功能点实现:函数级/代码块级计时器
2019/01/02 Python
Python操作redis实例小结【String、Hash、List、Set等】
2019/05/16 Python
Python+Selenium+phantomjs实现网页模拟登录和截图功能(windows环境)
2019/12/11 Python
Python selenium 自动化脚本打包成一个exe文件(推荐)
2020/01/14 Python
Python类的继承super相关原理解析
2020/10/22 Python
捐款倡议书范文
2014/02/02 职场文书
幼儿园新年寄语
2014/04/03 职场文书
整改落实情况汇报材料
2014/10/29 职场文书
售后前台接待岗位职责
2015/04/03 职场文书
青年教师听课心得体会
2016/01/15 职场文书
《索溪峪的野》教学反思
2016/02/19 职场文书
MySQL中存储时间的最佳实践指南
2021/07/01 MySQL
Python机器学习之决策树和随机森林
2021/07/15 Javascript
Python使用PyYAML库读写yaml文件的方法
2022/04/06 Python