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 相关文章推荐
摘自启点的main.js
Apr 20 Javascript
js跨域问题之跨域iframe自适应大小实现代码
Jul 17 Javascript
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
Jul 26 Javascript
学习JavaScript设计模式(继承)
Nov 26 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
Feb 16 Javascript
BootStrap tooltip提示框使用小结
Oct 26 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
Jan 11 Javascript
AngularJS中filter的使用实例详解
Aug 25 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
Mar 24 Javascript
layui写后台表格思路和赋值用法详解
Nov 14 Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
Jul 11 Javascript
vue路由结构可设一层方便动态添加路由操作
Aug 31 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从数组中随机选择若干不重复元素的方法
2015/03/14 PHP
php实现简单的语法高亮函数实例分析
2015/04/27 PHP
33道php常见面试题及答案
2015/07/06 PHP
PHP创建文件,并向文件中写入数据,覆盖,追加的实现代码
2016/03/25 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
关于JavaScript定义类和对象的几种方式
2010/11/09 Javascript
extjs3 combobox取value和text案例详解
2013/02/06 Javascript
javascript实现类似百度分享功能的方法
2015/07/27 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
2015/08/22 Javascript
基于JavaScript实现智能右键菜单
2016/03/02 Javascript
javascript算法之二叉搜索树的示例代码
2017/09/12 Javascript
vue-router实现组件间的跳转(参数传递)
2017/11/07 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
2017/12/27 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
2018/07/24 jQuery
详解ESLint在Vue中的使用小结
2018/10/15 Javascript
详解一个基于react+webpack的多页面应用配置
2019/01/21 Javascript
微信小程序实现日历小功能
2020/11/18 Javascript
原生JavaScript实现随机点名表
2021/01/14 Javascript
用Python实现通过哈希算法检测图片重复的教程
2015/04/02 Python
Python的Django框架中的表单处理示例
2015/07/17 Python
利用Python进行数据可视化常见的9种方法!超实用!
2018/07/11 Python
python 列表递归求和、计数、求最大元素的实例
2018/11/28 Python
解决python字典对值(值为列表)赋值出现重复的问题
2019/01/20 Python
python3.x+pyqt5实现主窗口状态栏里(嵌入)显示进度条功能
2019/07/04 Python
Tensorflow模型实现预测或识别单张图片
2019/07/19 Python
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
2013/01/09 HTML / CSS
巧克力领导品牌瑞士莲美国官网:Lindt Chocolate美国
2016/08/25 全球购物
贝玲妃英国官网:Benefit英国
2018/02/03 全球购物
英国独特礼物想法和个性化礼物网站:notonthehighstreet.com
2018/04/16 全球购物
实习自我鉴定模板
2013/09/28 职场文书
绿色小区申报材料
2014/08/22 职场文书
节能环保演讲稿
2014/08/28 职场文书
2015年党员发展工作总结
2015/05/13 职场文书
工会经费申请报告
2015/05/15 职场文书
Redis分布式锁Redlock的实现
2021/08/07 Redis