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 相关文章推荐
获取DOM对象的几种扩展及简写
Oct 09 Javascript
用脚本调用样式的几种方法
Dec 09 Javascript
简洁短小的 JavaScript IE 浏览器判定代码
Mar 21 Javascript
jQuery:节点(插入,复制,替换,删除)操作
Mar 04 Javascript
JQuery设置文本框和密码框得到焦点时的样式
Aug 30 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
Sep 05 Javascript
jQuery 常见小例汇总
Dec 14 Javascript
bootstrap的常用组件和栅格式布局详解
May 02 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
Dec 27 Javascript
vue中实现在外部调用methods的方法(推荐)
Feb 08 Javascript
JS实现方形抽奖效果
Aug 27 Javascript
在vue中使用回调函数,this调用无效的解决
Aug 11 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/03/28 PHP
探讨PHP中OO之静态关键字以及类常量的详解
2013/06/07 PHP
PHP缓存集成库phpFastCache用法
2014/12/15 PHP
Yii中srbac权限扩展模块工作原理与用法分析
2016/07/14 PHP
php断点续传之文件分割合并详解
2016/12/13 PHP
基于PHP实现用户登录注册功能的详细教程
2020/08/04 PHP
javascript中解析四则运算表达式的算法和示例
2014/08/11 Javascript
基于javascript实现的搜索时自动提示功能
2014/12/26 Javascript
Javascript基础教程之关键字和保留字汇总
2015/01/18 Javascript
Jquery中find与each方法用法实例
2015/02/04 Javascript
Bootstrap每天必学之下拉菜单
2015/11/25 Javascript
javascript实现秒表计时器的制作方法
2017/02/16 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
2017/05/10 Javascript
微信小程序封装http访问网络库实例代码
2017/05/24 Javascript
js实现鼠标跟随运动效果
2020/08/02 Javascript
node app 打包工具pkg的具体使用
2019/01/17 Javascript
使用11行Python代码盗取了室友的U盘内容
2018/10/23 Python
对python当中不在本路径的py文件的引用详解
2018/12/15 Python
Python 通过打码平台实现验证码的实现
2019/05/13 Python
Python OpenCV之图片缩放的实现(cv2.resize)
2019/06/28 Python
Python爬虫 批量爬取下载抖音视频代码实例
2019/08/16 Python
PyTorch的Optimizer训练工具的实现
2019/08/18 Python
win10安装tesserocr配置 Python使用tesserocr识别字母数字验证码
2020/01/16 Python
Pandas中两个dataframe的交集和差集的示例代码
2020/12/13 Python
全方位了解CSS3的Regions扩展
2015/08/07 HTML / CSS
美国孕妇装购物网站:Motherhood Maternity
2019/09/22 全球购物
德国受欢迎的旅游和休闲网站:lastminute.de
2019/09/23 全球购物
Crabtree & Evelyn欧盟:豪华洗浴、身体和护发
2021/03/09 全球购物
12岁生日感言
2014/01/21 职场文书
搞笑获奖感言
2014/01/30 职场文书
留学推荐信英文范文
2015/03/26 职场文书
2015年医院药剂科工作总结
2015/05/04 职场文书
因工资原因离职的辞职信范文
2015/05/12 职场文书
学风建设主题班会
2015/08/17 职场文书
vue首次渲染全过程
2021/04/21 Vue.js
JDBC连接的六步实例代码(与mysql连接)
2021/05/12 MySQL