`
eleven_huali
  • 浏览: 1420 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

$.extend()方法和(function($){...})(jQuery)详解

阅读更多
$.extend()方法和(function($){...})(jQuery)详解
前言:

  把年前遇到了一些关于JS和JQuery的一些问题给总结一下。主要是介绍JQuery的extend方法和(function($){})(jQuery),也会涉及一些相关的知识。

1.    JS中substring与substr的区别

之前在项目中用到substring方法,因为C#中也有字符串的截取方法Substring方法,当时也没有多想就误以为这两种方法的使用时一样的。这样就直接按照在C#中使用Substring的方式,直接在js中用了substring,在实际的项目中,有时候能得到正确的结果,但是有时候得到的结果却让人匪夷所思,后来仔细的调试跟踪之后才发现,原来是Js中substring的方法跟C#中的Substring方法不一样。关于C# 中的字符串截取方法已经很简单了,这里就不再叙述了。主要讲一个js中的substring方法,顺便再讲一下substr方法。

Substring:

该方法可以有一个参数也可以有两个参数。

l  一个参数:

示例: var str=“Olive”;

               str.substring(3);

        结果:“ve”

        说明:当substring只有一个参数时,参数表示从字符串的第几位开始截取,

直截取到字符串结尾。

l  两个参数:

        示例:var str=“Olive”;

1)       Str.substring(3,4);

2)       Str.substring(3,2);

           结果:1) “v”  2) 0

           说明:当substring有两个参数时,第一个参数表示从字符串的第几位开始截取,第二个参数表示截取到字符串的第几位。这点是个C#中字符截取不同的一点,所以才会导致不同的结果。

Substr:

该方法也可以有一个或两个参数。

l  一个参数:

    说明:substr一个参数时,作用跟substring方法一个参数时一样。

l  两个参数:

    示例:var str=“Olive”;

1)       Str.substr(3,2);

2)       Str.substr(3,4);

        结果:1) “ve” 2) “ve”

        说明:substr有两个参数时,第一个参数表示从字符串的第几位开始截取,第二个参数表示截取多少位字符串。这点跟C#中字符截取相同的,所以在以后的使用中,如果想要避免出现截取的问题最好还是使用substr。

2 $.extend()

因为项目中有些地方看到有用到这个方法,当时也不知道是什么意思,见的多了就想了

解一下。原来这个方法还是挺有用的,多用在编写插件,当然,它本身也有一些重载原型。

2.1 extend(result,item1,item2…..)

这里这个方法主要用来合并,将所有的参数项都合并result中,并返回result,但是这

样就会破坏result的结构。

2.2 extend({},item1,item2,……)

用这个方法,可以将所得的结果全部合并在{}中,并返回,而且还不会破坏原有的项的结构。

示例:

Var item={name:”olive”,age:23};

Var item1={name:”Momo”,sex:”gril”};

Var result=$.extend({},item,item1);

结果:

Result={name:”Momo”,age:23,sex:”gril”};

说明:

以上的结果表明extend方法将所有的项都合并到了{}中,但是,细心一点就会发现,其中item1中的name:“Momo” 将item中的name:“olive”给覆盖了,这是怎么回事?请接着往下看。

2.3 extend(bool,{},item1,item2….)

Extend方法还有带bool型参数的重载。

bool型参数为true表示深拷贝,为false时表示浅拷贝。具体可以通过一下示例来说明:

示例:

var item={name:“olive”,age:23,address{provice:”河南”,city:”郑州”}};

var item1={sex:”girl”,address{city:”北京”}};

var result=$.extend(true,item,item1);

var result1=$.extend(false,item,item1);

结果:

Result={name:“olive”,age:23,sex:”gril”,address:{provice:”河南”,city:”北京”}};

Result1={name:“olive”,age:23,sex:”gril”,address:{ city:”北京”}};

说明:

以上结果说明,当参数为ture时,即为深拷贝,当子项item1中的子项有与item中的子项相同属性的值不一样时,item1中子项的值会将item子项中的值给覆盖,当子项item1的属性跟item中的属性不同时,会与item进行合并。

当参数为false时,子项item1中的子项中与item中的子项属性相同时,item1中子项的属性值会将item中的值给完全覆盖。

2.4 $.extend(item)

该方法是将item合并到Jquery的全局对象中去,相当于为Jquery全局对象添加了一个

静态方法(对应这里的静态方法,当然还有实例方法,在后边有介绍)。

     示例:

           $.extend({SayHello:function(value){alert(“hello “+value);}});

           这样写过之后,就可以直接调用SayHello方法:

           $.SayHello(“Olive”);

     说明:该方法相当于为Jquery类添加了新的方法。

2.5 $.fn.extend(item)

上边提到的$.extend(item)说是为Jquery类添加了静态方法,那么这里的$.fn.extend(item

)就是为每一个实例添加一个实例方法了。

     示例:

         $.fn.extend({hello:function(value){alert(“hello “+value);}});

         这样写过之后,在获取每一个示例之后,都可以调用该方法:

         $(“#id”).hello(“Olive”);



3.(function($){….})(jQuery)

初次看到这种写法时,一头雾水,不知所云。在网上查找了一些资料之后才有点明白。

我们先看第一个括号里边的内容:function($){….},这不就是一个匿名的函数吗?但是它的形参比较奇怪,是$,这里主要是为了不与其它的库冲突。

这样我们就比较容易理解第一个括号内的内容就是定义了一个匿名函数,我们在调用函数的时候,都是函数名后边加上括号以及实参,但是由于操作符的优先级我们定义的匿名函数也需要用()括起来。

现在我想大家已经很清楚这句话是什么意思了吧。第一个括号表示定义了一个匿名函数,然后第二个函数表示为该函数传递的参数,整个结合起来意思就是,定义了一个匿名函数,然后又调用该函数,该函数的实参为jQuery。

相当于:function fun($){…};fun(jQuery);

这种方法多用于存放开发的插件,执行其中的代码时,Dom对象并不一定加载完毕。于此相反的是$(function(){}),这种方法在使用时页面的Dom对象已经加载完毕了。事实上该方法的全写是:$(document).ready(function(){});



好了,今天就总结到这里了,主要都是一些跟写插件相关的常用的方法,希望能给大家一些帮助。
分享到:
评论

相关推荐

    jQuery插件开发的两种方法及$.fn.extend的详解

    开发扩展其方法时使用$.extend方法,即jQuery.extend(object); 代码如下: $.extend({ add:function(a,b){return a+b;} , minus:function(a,b){return a-b;} }); 页面中调用: 代码如下: var i = $.add(3,2); var j ...

    jQuery.extend()、jQuery.fn.extend()扩展方法示例详解

    jQuery自定义了jQuery.extend()和jQuery.fn.extend()方法.其中jQuery.extend()方法能够创建全局函数或者选择器,而jQuery.fn.extend()方法能够创建jQuery对象方法. 例如: 代码如下: jQuery.extend({ showName : ...

    jQuery中extend函数详解

    做法是将一个新的空对象({})做为$.extend的第一个参数,defaults和用户传递的参数对象紧随其后,这样做的好处是所有值被合并到这个空对象上,保护了插件里面的默认值。 $.fn.myPlugin = function(options) { var...

    jQuery 自定义函数写法分享

    jQuery.extend 函数详解JQuery的extend扩展方法:Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解。一、Jquery的扩展方法原型是:   

    jQuery返回定位插件详解

    1.$.extend(); //这个方法是绑定在$上面的。可以通过$直接调用 2.$.fn.方法名 //这个方法是绑定在Dom对象上面的可以通过$(”).方法名();调用 3.$.widget //通过jQuery UI 部件工厂模式创建。 二、插件的开发过程 ...

    jquery插件开发模式实例详解

    通过$.fn 向jQuery添加新的方法 通过$.widget()应用jQuery UI的部件工厂方式创建 第一种$.extend()相对简单,一般很少能够独立开发复杂插件,第三种是一种高级的开发模式,本文也不做介绍。第二种则是一般插件开发...

    详解jQuery插件开发方式

    jQuery插件开发  一般来说,jQuery插件的开发分为两种:一种是挂在jQuery命名空间下的全局函数,也可称为... $.extend({ fun1: function () { alert("为jQuery扩展一个fun1函数!"); } }); $.fun1(); })  

    jQuery继承extend用法详解

    $.isBlank = function(obj){ return(typeof(obj)=='undefined'||obj==''||obj==null); } //直接基于jQuery的扩展,去除html标签,保留内容 $.htmlContent = function(tag){ var reTag = /<(?:.|\s)*?>/g; ...

    jquery平滑滚动到顶部插件使用详解

    $.fn.scrollTo = function(options) { var defaults = { toT: 0, //滚动目标位置 durTime: 500, //过渡动画时间 delay: 30, //定时器时间 callback: null //回调函数 }; var opts = $.extend(defaults, ...

    jQuery自定义插件详解及实例代码

    jQuery自定义插件 jQuery是一个功能强大的库,提供了开发JavaScript项目所需的所有核心函数。然而,有时候我们还是需要使用自定义代码... $.fn.extend({ 函数名:function(自定义参数){ //自定义插件代码部分 } });

    json实现前后台的相互传值详解

    前后台的相互传值如果值太多,写的...$.extend({  //将json对象转换成字符串 [貌似jquery没有自带的这种方法]  toJSONString: function (object) {  if (object == null)  return;  var type = typeof object;  

Global site tag (gtag.js) - Google Analytics