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 相关文章推荐
自适应高度框架 ----属个人收藏内容
Jan 22 Javascript
js中confirm实现执行操作前弹出确认框的方法
Nov 01 Javascript
jquery控制表单输入框显示默认值的方法
May 22 Javascript
初步使用Node连接Mysql数据库
Mar 03 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
Jul 27 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
Apr 12 Javascript
mongoose中利用populate处理嵌套的方法
May 26 Javascript
js实现文件上传功能 后台使用MultipartFile
Sep 08 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
Apr 22 Javascript
React传值 组件传值 之间的关系详解
Aug 26 Javascript
在JavaScript中实现链式调用的实现
Dec 24 Javascript
vuex的使用步骤
Jan 06 Vue.js
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函数file_get_contents超时处理的方法详解
2013/06/03 PHP
yii实现model添加默认值的方法(2种方法)
2016/01/06 PHP
ThinkPHP表单令牌错误的相关解决方法分析
2016/05/20 PHP
php伪静态验证码不显示的解决方案
2019/09/26 PHP
HTML,CSS,JavaScript速查表推荐
2014/12/02 Javascript
javascript实现ecshop搜索框键盘上下键切换控制
2015/03/18 Javascript
javascript实现检验的各种规则
2015/07/31 Javascript
详解JavaScript中双等号引起的隐性类型转换
2016/05/30 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
2016/12/08 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
2017/06/08 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
2017/11/20 Javascript
浅谈Vue.js路由管理器 Vue Router
2018/08/16 Javascript
小程序实现自定义导航栏适配完美版
2019/04/02 Javascript
JQuery使用数组遍历跳出each循环
2020/09/01 jQuery
在Django的模型和公用函数中使用惰性翻译对象
2015/07/27 Python
python 删除大文件中的某一行(最有效率的方法)
2017/08/19 Python
python实现媒体播放器功能
2018/02/11 Python
python多进程并行代码实例
2019/09/30 Python
python脚本监控logstash进程并邮件告警实例
2020/04/28 Python
关于 HTML5 的七个传说小结
2012/04/12 HTML / CSS
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
2013/01/31 HTML / CSS
html5手机端页面可以向右滑动导致样式受影响的问题
2018/06/20 HTML / CSS
Whittard官方海外旗舰店:英国百年茶叶品牌
2018/02/22 全球购物
时尚、社区、科技:SEVENSTORE
2019/04/26 全球购物
Watchshop德国:欧洲在线手表No.1
2019/06/20 全球购物
复核员上岗演讲稿
2014/01/05 职场文书
接待员岗位责任制
2014/02/10 职场文书
环境工程专业自荐信
2014/03/03 职场文书
停电调休通知
2015/04/16 职场文书
勇敢的心观后感
2015/06/09 职场文书
教师节联欢会主持词
2015/07/04 职场文书
一年级语文教学随笔
2015/08/14 职场文书
再谈python_tkinter弹出对话框创建
2022/03/20 Python
教你使用Python获取QQ音乐某个歌手的歌单
2022/04/03 Python
Linux下使用C语言代码搭建一个简单的HTTP服务器
2022/04/13 Servers
HTML5之高度塌陷问题的解决
2022/06/01 HTML / CSS