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代码
Oct 09 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
Mar 10 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
Aug 11 Javascript
jQuery实现元素的插入
Feb 27 Javascript
Vue自定义指令详解
Jul 28 Javascript
vue在使用ECharts时的异步更新和数据加载详解
Nov 22 Javascript
vue两个组件间值的传递或修改方式
Jul 04 Javascript
Vue无限滑动周选择日期的组件的示例代码
Jul 18 Javascript
Vue-input框checkbox强制刷新问题
Apr 18 Javascript
微信小程序实现文件、图片上传功能
Aug 18 Javascript
JS检测浏览器开发者工具是否打开的方法详解
Oct 02 Javascript
cypress测试本地web应用
Jun 01 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
YII路径的用法总结
2014/07/09 PHP
CodeIgniter生成静态页的方法
2016/05/17 PHP
微信公众号开发客服接口实例代码
2016/10/21 PHP
var与Javascript变量隐式声明
2009/09/17 Javascript
EasyUI中的tree用法介绍
2011/11/01 Javascript
JS命名空间的另一种实现
2013/08/09 Javascript
jquery 按钮状态效果 正常、移上、按下
2013/08/12 Javascript
JavaScript禁止页面操作的示例代码
2013/12/17 Javascript
使用javascript实现Iframe自适应高度
2014/12/24 Javascript
Angularjs 基础入门
2014/12/26 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
2016/07/10 Javascript
详解nodejs 文本操作模块-fs模块(三)
2016/12/22 NodeJs
cocos creator Touch事件应用(触控选择多个子节点的实例)
2017/09/10 Javascript
详解http访问解析流程原理
2017/10/18 Javascript
vue底部加载更多的实例代码
2018/06/29 Javascript
react 组件传值的三种方法
2019/06/03 Javascript
element实现合并单元格通用方法
2019/11/13 Javascript
微信小程序button标签open-type属性原理解析
2020/01/21 Javascript
python中合并两个文本文件并按照姓名首字母排序的例子
2014/04/25 Python
python中redis的安装和使用
2016/12/04 Python
利用pyinstaller将py文件打包为exe的方法
2018/05/14 Python
PyCharm鼠标右键不显示Run unittest的解决方法
2018/11/30 Python
python中logging模块的一些简单用法的使用
2019/02/22 Python
numpy求平均值的维度设定的例子
2019/08/24 Python
python爬虫泛滥的解决方法详解
2020/11/25 Python
详解HTML5.2版本带来的修改
2020/05/06 HTML / CSS
前端H5 Video常见使用场景简介
2020/08/21 HTML / CSS
印度尼西亚在线时尚购物网站:ZALORA印尼
2016/08/02 全球购物
美国百年历史早餐食品供应商:Wolferman’s
2017/01/18 全球购物
法国发饰品牌:Alexandre De Paris
2018/12/04 全球购物
美国杰西潘尼官网:JCPenney
2019/06/12 全球购物
护理不良事件检讨书
2014/02/06 职场文书
领导干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
幼儿园大班教师个人工作总结
2015/02/05 职场文书
2016教师校本研修心得体会
2016/01/08 职场文书
JavaWeb Servlet开发注册页面实例
2022/04/11 Java/Android