如下的JavaScript代码如何理解
(function($){})(jQuery);
其实比较简单,要理解几个概念:
1、(),在JavaScript里()表示执行一个方法,如:
function x(){
alert("xxx");
}
var a = x; // 没有调用,a 是一个function
var a = x(); //调用了函数,a 的值是调用的结果:undefined
2、jQuery是一个jQuery对象,表示调用函数时,传入一个参数是jQuery对象。
这个没什么好说的
3、(function($){})这是一个匿名函数,形参是$,括号是一定需要的。这样一看就懂了,上式相当于
var f = function($){};
f(jQuery);
所以,(function($){})(jQuery)这句的意思就是定义一个函数并立马执行它。
javascript使用大括号({})语法创建无类型对象
JavaScript 中的对象其实就是属性(方法)的一个集合,并没有严格意义的类的概念。所以
它提供了另外一种简单的方式来创建对象,即大括号({})语法:
{
property1:statement,
property2:statement2,
…,
propertyN:statmentN
}
通过大括号括住多个属性或方法及其定义(这些属性或方法用逗号隔开),来实现对象的定义,这段代码就直接定义个了具有n个属性或方法的对象,其中属性名和其定义之间用冒号(:)隔开。例如:
Javascript代码
1.<script language="JavaScript" type="text/javascript">
2.var obj={}; //定义了一个空对象
3.var user={
4.name:"jack", //定义了name属性,初始化为jack
5.favoriteColor:["red","green","black","white"],//定义了颜色喜好数组
6.hello:function(){ //定义了方法hello
7.alert("hello,"+this.name);
8.},
9.sex:"male" //定义了性别属性sex,初始化为sex
10.}
11.//调用user 对象的方法hello
12.user.hello();
13.</script>
第一行定义了一个无类型对象obj,它等价于:
var obj=new Object();
接着定义了一个对象user 及其属性和方法。注意,除了最后一个属性(方法)定义,其他的必须以逗号(,)结尾。其实,使用动态增减属性的方法也可以定义一个完全相同的user象。
jQuery.fn.extend(object)方法
jQuery.fn.extend(object):给jQuery对象添加方法。
fn 是什么东西呢。查看jQuery代码,就不难发现。
jQuery.fn = jQuery.prototype = {
init: function( selector, context ) {//....
//......
};
原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。例子
Javascript代码
1.<html>
2.<body>
3.<div id = "div_1">欢迎</div>
4.</body>
5.</html>
6.<script type="text/javascript" src="jquery.js"></script>
7.<script type="text/javascript">
8.(function($){
9. //一次性给jquery对象扩充多个方法或属性
10. $.fn.extend({
11. test : {
12. name : "张三",
13. sex : "男",
14. show : function(){
15. return "姓名:" + this.name + " 性别:" + this.sex;
16. }
17. },
18. money : 10000,
19. args : ["1","22","333",{args : ["4444","55555"],xiao : function(){alert("haahaaaa")}}]
20. });
21. //一次只给jquery对象扩充一个属性或方法
22. $.fn["abcd_aa"] = function(){
23. alert("abcd_aa");
24. };
25. $.fn["ccccc"] = "你好";
26. $.fn.xxx = function(){
27. alert("xxx");
28. };
29. $.fn.jjj = "你好jjj";
30.
31. //一次性给jquery本身扩充多个方法或属性
32. $.extend({
33. abc : function(){alert("abc")},
34. efg : function(){alert("efg")}
35. });
36. //一次只给jquery本身扩充一个属性或方法
37. $.qq = function(){alert("hahahhahahahha")};
38. $["aqaq"] = function(){alert("aqaq")};
39.
40. $["basePackage"] = $["basePackage"] || {};
41. $["basePackage"]["fun"] = function(name){
42. //alert("basePackage.fun()方法")
43. this.name = name;
44. };
45. $["basePackage"]["fun"].prototype = {
46. _init : function(){alert("初始化方法,"+this.name)},
47. a : "a属性"
48. };
49. //var newObj = new $["basePackage"]["fun"]();
50. //newObj._init();
51. //alert(newObj.a);
52. new $["basePackage"]["fun"]("小sss")._init();
53.
54. $.base = $.base || {};
55. $.base.fun = function(){alert("base.fun()方法")};
56.})(jQuery);
57.
58./*alert($("#div_1").test.show());
59.alert($("#div_1").money);
60.alert($("#div_1").args[0]);
61.alert($("#div_1").args[1]);
62.alert($("#div_1").args[2]);
63.alert($("#div_1").args[3].args[0]);
64.alert($("#div_1").args[3].args[1]);
65.alert($("#div_1").args[3].xiao());
66.alert($("#div_1").ccccc);
67.alert($.abc());
68.alert($.efg());
69.alert($("#div_1").xxx());
70.alert($("#div_1").jjj);
71.alert($.qq());
72.alert($.aqaq());
73.alert($.basePackage.fun());
74.alert($.base.fun());*/
75.</script>
jQuery.extend(object)
当参数只有一个时,表示扩展jQuery类本身,为类添加新的方法。
Javascript代码
1.<script type="text/javascript" src="jquery.js"></script>
2.<script type="text/javascript">
3.$.extend({
4. adda : function(){
5. return 5;
6. },
7. test_a : {
8. name : "lisi",
9. show : function(){
10. alert(this.name);
11. },
12. test_b : {
13. sex : "男",
14. getSex : function(){
15. return this.sex;
16. }
17. }
18. }
19.});
20.alert($.adda());
21.$.test_a.show();
22.alert($.test_a.test_b.getSex());
23.</script>
当参数有多个时(jQuery.extend(dest,src1,src2,src3...srcN)),表示将src1、src2...对象的属性和方法逐一复制给dest对象,需要注意的是,在复制的过程中,排在后面的参数(对象)将会覆盖排在前面的参数的属性和方法;
Javascript代码
1.<script type="text/javascript" src="jquery.js"></script>
2.<script type="text/javascript">
3.var objA = { speed:"slow" };
4.
5.var objB = { speed:"fast", power:"hard" };
6.
7.var objD = { speed:"test", name:"zhangsan"};
8.
9.var objC = jQuery.extend(objA, objB, objD);
10.
11.document.write("<dt>objA");
12.
13.for (var p in objA) { document.write("<dd>" + p + "->" + objA[p]); }
14.
15.document.write("<dt>objC");
16.
17.for (var p in objC) { document.write("<dd>" + p + "->" + objC[p]); }
18.</script>
当参数有多个(jQuery.extend(boolean, dest,src1,src2,src3...srcN))并且第一个参数为Boolean类型时,当boolean=true时,表示深层拷贝。当boolean=false时,结果和上面一样。那么什么是深层拷贝了,运行上面的例子,发现objA和objC包含的属性完全相同。当改成var objC = jQuery.extend(true, objA, objB, objD)后,objA和objC也是一样。改成var objC = jQuery.extend(false, objA, objB, objD)后,objA和objC不同了。objA的属性没有增加,和以前一样。深层拷贝会将目标对象objA和新对象objC中没有的属性(方法)都拷贝到其中。
(function($){})(jQuery);
其实比较简单,要理解几个概念:
1、(),在JavaScript里()表示执行一个方法,如:
function x(){
alert("xxx");
}
var a = x; // 没有调用,a 是一个function
var a = x(); //调用了函数,a 的值是调用的结果:undefined
2、jQuery是一个jQuery对象,表示调用函数时,传入一个参数是jQuery对象。
这个没什么好说的
3、(function($){})这是一个匿名函数,形参是$,括号是一定需要的。这样一看就懂了,上式相当于
var f = function($){};
f(jQuery);
所以,(function($){})(jQuery)这句的意思就是定义一个函数并立马执行它。
javascript使用大括号({})语法创建无类型对象
JavaScript 中的对象其实就是属性(方法)的一个集合,并没有严格意义的类的概念。所以
它提供了另外一种简单的方式来创建对象,即大括号({})语法:
{
property1:statement,
property2:statement2,
…,
propertyN:statmentN
}
通过大括号括住多个属性或方法及其定义(这些属性或方法用逗号隔开),来实现对象的定义,这段代码就直接定义个了具有n个属性或方法的对象,其中属性名和其定义之间用冒号(:)隔开。例如:
Javascript代码
1.<script language="JavaScript" type="text/javascript">
2.var obj={}; //定义了一个空对象
3.var user={
4.name:"jack", //定义了name属性,初始化为jack
5.favoriteColor:["red","green","black","white"],//定义了颜色喜好数组
6.hello:function(){ //定义了方法hello
7.alert("hello,"+this.name);
8.},
9.sex:"male" //定义了性别属性sex,初始化为sex
10.}
11.//调用user 对象的方法hello
12.user.hello();
13.</script>
第一行定义了一个无类型对象obj,它等价于:
var obj=new Object();
接着定义了一个对象user 及其属性和方法。注意,除了最后一个属性(方法)定义,其他的必须以逗号(,)结尾。其实,使用动态增减属性的方法也可以定义一个完全相同的user象。
jQuery.fn.extend(object)方法
jQuery.fn.extend(object):给jQuery对象添加方法。
fn 是什么东西呢。查看jQuery代码,就不难发现。
jQuery.fn = jQuery.prototype = {
init: function( selector, context ) {//....
//......
};
原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。例子
Javascript代码
1.<html>
2.<body>
3.<div id = "div_1">欢迎</div>
4.</body>
5.</html>
6.<script type="text/javascript" src="jquery.js"></script>
7.<script type="text/javascript">
8.(function($){
9. //一次性给jquery对象扩充多个方法或属性
10. $.fn.extend({
11. test : {
12. name : "张三",
13. sex : "男",
14. show : function(){
15. return "姓名:" + this.name + " 性别:" + this.sex;
16. }
17. },
18. money : 10000,
19. args : ["1","22","333",{args : ["4444","55555"],xiao : function(){alert("haahaaaa")}}]
20. });
21. //一次只给jquery对象扩充一个属性或方法
22. $.fn["abcd_aa"] = function(){
23. alert("abcd_aa");
24. };
25. $.fn["ccccc"] = "你好";
26. $.fn.xxx = function(){
27. alert("xxx");
28. };
29. $.fn.jjj = "你好jjj";
30.
31. //一次性给jquery本身扩充多个方法或属性
32. $.extend({
33. abc : function(){alert("abc")},
34. efg : function(){alert("efg")}
35. });
36. //一次只给jquery本身扩充一个属性或方法
37. $.qq = function(){alert("hahahhahahahha")};
38. $["aqaq"] = function(){alert("aqaq")};
39.
40. $["basePackage"] = $["basePackage"] || {};
41. $["basePackage"]["fun"] = function(name){
42. //alert("basePackage.fun()方法")
43. this.name = name;
44. };
45. $["basePackage"]["fun"].prototype = {
46. _init : function(){alert("初始化方法,"+this.name)},
47. a : "a属性"
48. };
49. //var newObj = new $["basePackage"]["fun"]();
50. //newObj._init();
51. //alert(newObj.a);
52. new $["basePackage"]["fun"]("小sss")._init();
53.
54. $.base = $.base || {};
55. $.base.fun = function(){alert("base.fun()方法")};
56.})(jQuery);
57.
58./*alert($("#div_1").test.show());
59.alert($("#div_1").money);
60.alert($("#div_1").args[0]);
61.alert($("#div_1").args[1]);
62.alert($("#div_1").args[2]);
63.alert($("#div_1").args[3].args[0]);
64.alert($("#div_1").args[3].args[1]);
65.alert($("#div_1").args[3].xiao());
66.alert($("#div_1").ccccc);
67.alert($.abc());
68.alert($.efg());
69.alert($("#div_1").xxx());
70.alert($("#div_1").jjj);
71.alert($.qq());
72.alert($.aqaq());
73.alert($.basePackage.fun());
74.alert($.base.fun());*/
75.</script>
jQuery.extend(object)
当参数只有一个时,表示扩展jQuery类本身,为类添加新的方法。
Javascript代码
1.<script type="text/javascript" src="jquery.js"></script>
2.<script type="text/javascript">
3.$.extend({
4. adda : function(){
5. return 5;
6. },
7. test_a : {
8. name : "lisi",
9. show : function(){
10. alert(this.name);
11. },
12. test_b : {
13. sex : "男",
14. getSex : function(){
15. return this.sex;
16. }
17. }
18. }
19.});
20.alert($.adda());
21.$.test_a.show();
22.alert($.test_a.test_b.getSex());
23.</script>
当参数有多个时(jQuery.extend(dest,src1,src2,src3...srcN)),表示将src1、src2...对象的属性和方法逐一复制给dest对象,需要注意的是,在复制的过程中,排在后面的参数(对象)将会覆盖排在前面的参数的属性和方法;
Javascript代码
1.<script type="text/javascript" src="jquery.js"></script>
2.<script type="text/javascript">
3.var objA = { speed:"slow" };
4.
5.var objB = { speed:"fast", power:"hard" };
6.
7.var objD = { speed:"test", name:"zhangsan"};
8.
9.var objC = jQuery.extend(objA, objB, objD);
10.
11.document.write("<dt>objA");
12.
13.for (var p in objA) { document.write("<dd>" + p + "->" + objA[p]); }
14.
15.document.write("<dt>objC");
16.
17.for (var p in objC) { document.write("<dd>" + p + "->" + objC[p]); }
18.</script>
当参数有多个(jQuery.extend(boolean, dest,src1,src2,src3...srcN))并且第一个参数为Boolean类型时,当boolean=true时,表示深层拷贝。当boolean=false时,结果和上面一样。那么什么是深层拷贝了,运行上面的例子,发现objA和objC包含的属性完全相同。当改成var objC = jQuery.extend(true, objA, objB, objD)后,objA和objC也是一样。改成var objC = jQuery.extend(false, objA, objB, objD)后,objA和objC不同了。objA的属性没有增加,和以前一样。深层拷贝会将目标对象objA和新对象objC中没有的属性(方法)都拷贝到其中。