目录:

1.基本JQ扩展插件js的格式

2.对JQ选中元素的方法的扩展,调用类似于$("selector").myMethod(),这里的myMethod是自己扩展的方法,与.click()同理

3.对JQ自身的方法扩展,调用类似于$.ajax();

一、基本JQ扩展插件的格式

一个扩展插件的格式一般是:

(function($){.........})(jQuery);当然,为了防止压缩合并等操作时,它前面的js代码没有结束分号而引起错误,这里可以在前面加个;就是:;(function($){.........})(jQuery);传入参数可以有多个,比如:;(function($, window,document,undefined){.........})(jQuery,window, document);

引用这种写法的插件时,务必要在引入jquery本身之后,再引入插件。

二、对JQ选中元素的方法的扩展,调用类似于$("selector").myMethod()

类似于.click(),.show()这种调用方式的方法。。属于对jQuery.fn的扩展,所以,扩展自己的方法,这样写:

  $.fn.extend({myMethod: function () {//用this可以拿到调用该方法的jq dom元素//do your work
    }});

或者:

  $.fn.myMethod = function(){//用this可以拿到调用该方法的jq dom元素//do your work};

$("#dd").click();

 例如:

封装一个方法:alertWhileClick,点击input时控制台打印出当前input输入框的内容
      $.fn.alertWhileClick = function(){$(this).click(function () {console.log($(this).val());});

调用:

    $("#demo1Input").alertWhileClick();

试一下:

https://hamupp.github.io/gitblog/app/jquery/extendDemo.html

二、对JQ自身的扩展,调用如$.ajax()

  $.extend({myMethod: function (param1, param2....需要传入的参数) {//do your work
}});

例如扩展一个得到最大最小值的方法:

  $.extend({min: function (a, b) {//do your workreturn a < b ? a : b;},max: function (a, b) {return a > b ? a : b;}});

调用如下:

var result = $.max(10,20);//得到10和20中最大的树

转载于:https://www.cnblogs.com/hamsterPP/p/7149805.html

JQ插件写法 扩展JQ方法相关推荐

  1. jq插件的编写方法(自定义jq插件)

    jq插件用起来很方便,给客户端的编程带来很大的好处,节省大量的开发时间 我用Jq也有好长时间了,今天在一个项目中用一个插件的时候,忽然感觉这个插件有一个bug 这让我心生了自己写一个jq插件的想法 下 ...

  2. jq插件的基础知识,以及小demo

    什么是插件 ,jq插件,优点,缺点 ,未完待续- JQ插件就是用JQ代码编写的工具.就比如说我们用的模板,如EasyUi.我们只需要引入EasyUi的JS文件,然后调用它对应的方法,效果就出来了.实现 ...

  3. JS_自己写的JQ插件

    看了<<锋利的jQuery>>之后,受益匪浅,特别是有关代码风格方面的内容. 于是想把以前写的一些JQ插件整理一下,以留备用...(里面也有一些书中的例子,我也放进去了) 其它 ...

  4. 【传智播客郑州校区分享】JQ插件机制

    JQ插件概述 所谓的jquery插件,其实就是利用jquery语法,完成的一些工具或者模块.jquery插件是jQuery功能的扩展.可以让开发人员能更好更快速的完成某些特定的需求,只需要用很少的代码 ...

  5. jq插件处女座 图片轮播

    好久没写博客了,变得好懒呀,无地自容.最近一直在学sass和jq插件的写法,照猫画虎的谢了一个jq的插件,也算是第一次真正称得上插件的插件 ,废话不多说 上代码 (function($) { $.fn ...

  6. jq插件调用常见错误处理

    在调用jq插件时,有时会遇到莫名其妙的错误.特别是当使用jq老版本或者年代久远的插件时更为常见. 这时多半是由于jq的更新太快造成的. 在jq的发展中,特别是1.8.3之后的jq放弃了以前的很多写法, ...

  7. 移动端JQ插件hammer使用详解

    ** 移动端JQ插件hammer使用详解 ** 用法: 1,首先引入jq2.0以上版本和jquery.hammer.js. 2,获取元素,和jq一样,在后面加上hammer就可以了 var hamme ...

  8. html5 div拖拽插件,div拖拽插件——JQ.MoveBox.js(自制JQ插件)

    有一段时间没更新博客了,都不知道忙些什么,学习也没什么进展,惭愧. 这一周空闲的时间学着自己写一下JQ插件. 以前用原生的JS做过类似拖拽div的效果,现在按原思路改做成一个JQ的小插件,当作制作JQ ...

  9. 【vue】解决使用vue,导致jq插件失效的问题

    [vue]解决使用vue,导致jq插件失效的问题 参考文章: (1)[vue]解决使用vue,导致jq插件失效的问题 (2)https://www.cnblogs.com/cindy2035/p/10 ...

最新文章

  1. 深入理解java中的ArrayList和LinkedList
  2. 深入理解 sudo 与 su 之间的区别
  3. Github Star过万的阿里学长独家干货分享
  4. 【ES6(2015)】Proxy
  5. Python分布式爬虫打造搜索引擎(三)
  6. js中addEventListener第三个参数涉及到的事件捕获与冒泡
  7. R中读取Excel大文件
  8. 常用功能错误不是问题,对待行为让人绝望
  9. Oracle sql优化工具
  10. 随身WiFi刷OPENWRT作为旁路由
  11. matlab窄带高斯随机信号,06实验六:窄带随机信号仿真与分析
  12. java ajax 上传图片_用ajax上传图片及java后台接收问题
  13. 微信公众号 开发详解04【编辑器、图片收集、动图Gif、截图软件、去水印】
  14. 计算机主机三短一长,电脑主机出现三短一长响声怎么办
  15. Target host is not specified解决方案
  16. python携程怎么做数据同步_python协程中同步如何使用?
  17. 选择合适的 Go 字符串拼接方式
  18. 面试最后我一般会问面试官什么问题
  19. MySQL(三):InnoDB和MyISAM
  20. 卡巴斯基分析报告:宠物追踪器面临的潜在风险

热门文章

  1. winscp 同步_winscp传输文件,winscp传输文件时要先设置这三步
  2. 社会保险信息管理系统
  3. Tacacs+认证详细调研
  4. MATLAB-dxf文件的绘制
  5. 冲压模具行业解决方案
  6. 2021-2027全球与中国NFC嵌体市场现状及未来发展趋势
  7. 基金重止盈, 股票重止损, 两者下跌应该这样应对
  8. linux dd nand,Flash基础入门之采用dd 工具做Nand Flash磨损均衡
  9. winrar 免费压缩解压工具
  10. 解决el-table锁定列后锁定列对应位置的横向滚动条无法拖动问题