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判断一个URL链接是否有效的实现方法
Oct 08 Javascript
Javascript无阻塞加载具体方式
Jun 28 Javascript
获取select元素被选中的文本内容的js代码
Jan 29 Javascript
JavaScript Promise 用法
Jun 14 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
Jul 18 Javascript
jQuery密码强度验证控件使用详解
Jan 05 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
Jun 13 Javascript
JavaScript中document.referrer的用法详解
Jul 04 Javascript
实现div内部滚动条滚动到底部和顶部的代码
Nov 15 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
Mar 13 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
Jul 28 Javascript
前端JavaScript大管家 package.json
Nov 02 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数据类型转换
2014/01/09 PHP
thinkphp中AJAX返回ajaxReturn()方法分析
2016/12/06 PHP
php菜单/评论数据递归分级算法的实现方法
2019/08/01 PHP
js实现ASP分页函数 HTML分页函数
2006/09/22 Javascript
避免回车键导致的页面无意义刷新的解决方法
2011/04/12 Javascript
jquery remove方法应用详解
2012/11/22 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
2013/01/23 Javascript
详解JavaScript语法对{}处理的坑爹之处
2014/06/05 Javascript
Window.Open如何在同一个标签页打开
2014/06/20 Javascript
jQuery截取指定长度字符串的实现原理及代码
2014/07/01 Javascript
JavaScript整除运算函数ceil和floor的区别分析
2015/04/14 Javascript
JavaScript 性能优化小结
2015/10/12 Javascript
Bootstrap标签页(Tab)插件使用方法
2017/03/21 Javascript
React Native使用百度Echarts显示图表的示例代码
2017/11/07 Javascript
vue组件父子间通信详解(三)
2017/11/07 Javascript
element ui里dialog关闭后清除验证条件方法
2018/02/26 Javascript
Node.js实现简单的爬取的示例代码
2019/06/25 Javascript
Vue.js watch监视属性知识点总结
2019/11/11 Javascript
python字符串连接方式汇总
2014/08/21 Python
跟老齐学Python之传说中的函数编写条规
2014/10/11 Python
Python3里的super()和__class__使用介绍
2015/04/23 Python
Python实现k-means算法
2018/02/23 Python
python3实现逐字输出的方法
2019/01/23 Python
python构建指数平滑预测模型示例
2019/11/21 Python
浅谈pytorch torch.backends.cudnn设置作用
2020/02/20 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
Python Tkinter图形工具使用方法及实例解析
2020/06/15 Python
scrapy头部修改的方法详解
2020/12/06 Python
Python爬虫教程之利用正则表达式匹配网页内容
2020/12/08 Python
html5读取本地文件示例代码
2014/04/22 HTML / CSS
Lancome兰蔻官方旗舰店:来自法国的世界知名美妆品牌
2018/06/14 全球购物
电气工程自动化求职信
2014/03/14 职场文书
幼儿园见习报告
2014/10/30 职场文书
MySQL Innodb索引机制详细介绍
2021/11/23 MySQL
Mysql存储过程、触发器、事件调度器使用入门指南
2022/01/22 MySQL
Win10加载疑难解答时出错发生意外错误的解决方法
2022/07/07 数码科技