zoukankan      html  css  js  c++  java
  • $.extent()的理解

    $.extend()主要是用来扩展插件的,所谓的插件就是封装好的函数或者方法,可以直接调用。

    $.extend()与$.fn.extend()(或者写成$.prototype.extend()或者jquery.prototype.extend())这两个好像,但又不一样,主要区别在哪里呢,区别在于前者是对jQuery类的一个封装,可以把jQuery看成一个类;而后者是经过实例化进行调用实例化的函数。

    举个例子:

    写个简单的求最大值或者最小值的插件:

    首先看$.extend(),

    $.extend({

    max:function(a,b){

    return a>b?a:b;

    },{

    min:function(a,b){

    return a<b?b:a;

    })

    这里就可以直接调用:$.max(2,3)//3

    再看$.fn.extend():

    $.fn.extend({
    alertWhileClick: function() {
    $(this).click(function() {
    alert($(this).val());
    });
    }
    });
    //$("#input1")是jQuery的实例,调用这个扩展方法
    $("#input1").alertWhileClick();

    另外,$.extend(obj1,obj2)这种写法是将obj2中与obj1中相一样的属性进行覆盖,并且添加obj1中没有的属性,如果obj1中有某个属性而obj2中没有,那么最后在替换后的obj1中也会保持存在,extend这个单词就是扩展的意思,也就是obj2里的是用来更新obj1的内容的。

    举个综合例子:

    <div value='100' id="content" style=" 100px;height: 100px;border: 1px solid green;" ></div>

    <script type="text/javascript">
    (function($){

    $.fn.extend({//这里加个大括号说明这里是个对象,那用jq实例化之后直接像调用object一样去调用函数就可以了。
    'setColor':function(option){

    var defult={
    background:'green'
    }
    $.extend(true, defult, option);

    $(this).css('background',defult.background);
    }
    })
    $('#content').setColor()//默认绿色
    $('#content').setColor({background:'red'})//红色

    })

    </script>

    参考:http://www.cnblogs.com/yuqingfamily/p/5775950.html

  • 相关阅读:
    学习Py——自己模拟写的一个Range功能
    心情随笔20180529
    记一次排查局网内的ARP包 “不存在的” MAC 地址及 “不存在的”IP 所发的ARP包
    最长反链
    浅谈矩阵树定理
    毒瘤dp 学校食堂
    P3565 由简单的树形dp 引入 长链刨分
    noi 2017 整数
    记人生的抉择
    2019 HL SC day10
  • 原文地址:https://www.cnblogs.com/sweeeper/p/8024267.html
Copyright © 2011-2022 走看看