zoukankan      html  css  js  c++  java
  • JQ插件写法 扩展JQ方法

    目录:

    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中最大的树
  • 相关阅读:
    K&R C C90,C99的改进
    Windows 用来定位 DLL 的搜索路径
    常量字符串的问题
    C++0x中一些有用的新特性
    mainfest机制
    mainfest机制
    C++0x中一些有用的新特性
    c语言目标程序中的段
    c语言目标程序中的段
    数据模型(LP32 ILP32 LP64 LLP64 ILP64 )
  • 原文地址:https://www.cnblogs.com/hamsterPP/p/7149805.html
Copyright © 2011-2022 走看看