jQuery知识总结

jQuery知识：
 1.$.extend()
 1.1 extend(result,item1,item2…..)
这里这个方法主要用来合并，将所有的参数项都合并result中，并返回result，但是这


样就会破坏result的结构。


1.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”给覆盖了，这是怎么回事？请接着往下看。


1.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中的值给完全覆盖。


1.4 $.extend(item)
该方法是将item合并到Jquery的全局对象中去，相当于为Jquery全局对象添加了一个


静态方法（对应这里的静态方法，当然还有实例方法，在后边有介绍）。


     示例：


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


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


           $.SayHello(“Olive”);


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


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


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


     示例：


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


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

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

2.JS中substring与substr的区别

之前在项目中用到substring方法，因为C#中也有字符串的截取方法Substring方法，当时也没有多想就误以为这两种方法的使用时一样的。


这样就直接按照在C#中使用Substring的方式，直接在js中用了substring，在实际的项目中，有时候能得到正确的结果，但是有时候得到的


结果却让人匪夷所思，后来仔细的调试跟踪之后才发现，原来是Js中substring的方法跟C#中的Substring方法不一样。关于C# 中的字符串截


取方法已经很简单了，这里就不再叙述了。主要讲一个js中的substring方法，顺便再讲一下substr方法。


Substring：


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


l  一个参数：


示例： var str=“subName”；


               str.substring(3);


        结果：“Name”


        说明：当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。


3.jQuery - jQuery的$.extend和$.fn.extend作用及区别

jQuery为开发插件提拱了两个方法，分别是：

1. jQuery.fn.extend();


2. jQuery.extend();


虽然 javascript没有明确的类的概念，但是可以构建类似类的定义。


jQuery便是一个封装得非常好的类，比如，$("#btn1") 会生成一个 jQuery类的实例，理解这一点很重要。

(1). jQuery.extend(object);　


它是为jQuery类添加类方法，可以理解为添加静态方法。如：


a.jQuery.extend({


　　min: function(a, b) { return a < b ? a : b; },


　　max: function(a, b) { return a > b ? a : b; }


});


jQuery.min(2,3); //  2 
jQuery.max(4,5); //  5


b. jQuery.extend(target, object1, [objectN])用一个或多个其他对象来扩展一个对象，返回被扩展的对象。
var settings = { validate: false, limit: 5, name: "foo" }; 
var options = { validate: true, name: "bar" }; 
jQuery.extend(settings, options);

结果：settings == { validate: true, limit: 5, name: "bar" }

(2). jQuery.fn.extend(object);


$.fn是什么?


$.fn是指jQuery的命名空间，fn上的成员(方法function及属性property)，会对jQuery实例每一个有效。 


查看jQuery代码，就不难发现。


jQuery.fn = jQuery.prototype = {


　　　init: function( selector, context ) {//....　


};


原来 jQuery.fn = jQuery.prototype.


所以，它是对jQuery.prototype进得扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。


比如我们要开发一个插件，做一个特殊的编辑框，当它被点击时，便alert 当前编辑框里的内容。可以这么做：


$.fn.extend({          
     doAlertWhileClick:function() {            
           $(this).click(function(){                 
                  alert($(this).val());           
            });           
      }       
});       
$("#input1").doAlertWhileClick(); // 页面上为：    


$("#input1")　为一个jQuery实例，当它调用成员方法 doAlertWhileClick后，便实现了扩展，每次被点击时它会先弹出目前编辑里的内容


。