目录:

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 work
return a < b ? a : b;
},
max: function (a, b) {
return a > b ? a : b;
}
});

调用如下:

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

JQ插件写法 扩展JQ方法的更多相关文章

  1. jq插件写法

    如今做web开发,jQuery 几乎是必不可少的,同时jquery插件也是不断的被大家所熟知,以及运用.最近在搞这个jquery插件,发现它的牛逼之处,所以讲一讲jQuery插件的写法以及使用  (f ...

  2. jq 插件写法

    1.一次声明一个函数 $.fn.函数名 = function([options]){} $.fn.red=function(options){ var defaults = { 'color': 'r ...

  3. css/jq--弹窗写法介绍,jq插件介绍

    //html文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  4. 利用jQuery对插件进行扩展时,方法$.extend()、$.fn.extend()区别与联系

      利用JQ开发插件的方法: 1.jQuery.extend(); 2.jQuery.fn.extend(); 3.通过$.widget()应用jQuery UI的部件工厂方式创建. 由于第三种方式通 ...

  5. JQ插件之imgAreaSelect实现对图片的在线截图功能(java版)

    前言:在做网站的时候经常用的功能就是,用户上传图片对自己上传的图片进行截图,DIV自己的头像.或者上传幻灯片大图进行DIV设置小图. 解决方案:目前我知道的解决方案有两个如下:       一.fla ...

  6. 一个简单而实用的JQ插件——lazyload.js图片延迟加载插件

      前  言 Cherish 看多了炫酷的插件之后再来看这么一个小清新的东西,是不是突然感觉JQ插件感觉很友好了,简单强大最重要的是实用. 这篇文章将详细讲解一下lazyload.js的用法 lazy ...

  7. 创建jq插件步骤

    无意看了这篇<jQuery插件开发精品教程,让你的jQuery提升一个台阶>文章,现在做一下总结. 一.jQuery插件的创建可以有三种方法 1.通过$.extend()来扩展jQuery ...

  8. 怎么写jq插件?

    1.概述 先看看html代码 <ul id="catagory"> <li><a href="#">jQuery</a ...

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

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

随机推荐

  1. Linux mysql 添加远程连接

    方法/步骤 第一步 远程连接上Linux系统,确保Linux系统已经安装上了MySQL数据库.登陆数据库. mysql -u$user -p $pwd 第二步 创建用户用来远程连接 GRANT ALL ...

  2. 通过java代码对kylin进行cube build

    转:http://www.cnblogs.com/hark0623/p/5580632.html 通常是用于增量 代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 1 ...

  3. c++ 返回指定元素连续相等的位置索引(equal_range)

    #include <iostream> // cout #include <algorithm> // equal_range, sort #include <vecto ...

  4. 团队项目用户验收评审——《WAP团队》

    团队项目用户验收评审——<WAP团队> 1.验收准备的相关文档链接:https://github.com/LVowe999/xiangmubaogao.git                ...

  5. 对 Kotlin 与 Java 编程语言的思考

    从长远来看,排名前10的也基本上是Java.C.C++.Python.C#.VB.PHP.JavaScript.至于Kotlin的排名,11月份在编程语言仅排41名,Ratings仅有0.216%. ...

  6. a 样式重置 常见用法

    样式重置 a:link, a:visited, a:hover, a:active{   color: #fff;   text-decoration: none; }   常见用法  ( rel=& ...

  7. Android JNI学习(四)——JNI的常用方法的中文API

    本系列文章如下: Android JNI(一)——NDK与JNI基础 Android JNI学习(二)——实战JNI之“hello world” Android JNI学习(三)——Java与Nati ...

  8. Codeforces 847I - Noise Level

    847I - Noise Level 思路:bfs. 代码: #include<bits/stdc++.h> using namespace std; #define ll long lo ...

  9. Confluence 6 管理多目录

    这个页面描述了如果在 Confluence 中定义了多个目录服务器将会发生什么样的情况.例如你可能会有一个内部目录服务器同时你还可能有连接一个 LDAP 外部服务器或者使用多种类型的其他用户目录.当你 ...

  10. Java基础-封装(09)

    通过对象直接访问成员变量,会存在数据安全问题(比如年龄不能为负).这个时候,我们就不能让外界的对象直接访问成员变量. private关键字 是一个权限修饰符.可以修饰成员(成员变量和成员方法)被pri ...