`
yesbi
  • 浏览: 17620 次
  • 性别: Icon_minigender_1
  • 来自: 福建
社区版块
存档分类
最新评论

js笔记

阅读更多

  1.
  匹配中文字符的正则表达式:   [\u4e00-\u9fa5]    
  匹配双字节字符(包括汉字在内):[^\x00-\xff] 
2. 在function中arguments表示实际参数,有多个时就以数组的形式存在
  如function test(a,b){
      var numargs = arguments.length;  alert(numargs); // 获取实际传递参数长度
      //使用 arguments.callee.length 可以获得同样的效果
       var expargs = ArgTest.length;    alert(expargs);  // 获取应该传递参数长度
   }

3.if(a)//a 为null,"",0都表示false,反之就为true(注:js中的空为null,是小写的)

4.在js中document.getElementById("test").readOnly="false"("true");其中readOnly,O为大写注意;而document.getElementById("test").disabled="true"或document.getElementById("test").removeAttribute('disabled');
  注在IE6.0当中,不认得document.getElementById("test").removeAttribute('readonly')

5.在导入js文件时加入<script defer="true"></script>加上defer等于在页面完全载入后再执行,相当于 window.onload ,但应用上比 window.onload 更灵活!,它的作用是加载和解析所有的文档后才加载 js文件,如:没有加defer会报错(因为js和html文件是按顺序执行的,还没有加载文档之前,执行document.getElementById("test").value会报找不到test这个组件的错误),加了这一句后,会先等所有的文档加载完了,再执行就不会错了

<BODY>
<script defer="true">
   alert("11");
   alert(document.getElementById("test").value);
</script>
<input id="test" type="text" value="hello" />
</BODY>
</HTML>

注:不管怎么样,<script src="a.js"></script>导入在js都需要下载到客户端,与导入的文件的数量影响不大,只与导入的js的大小有关,一般的浏览器当中,都有对导入的js进行缓存,一般都是只下载一次即可


6.(functio(){

      var a="a",表示私有对象,后面不是用分号表示,只是在逗号,那么jQ也表示是var对象(局部对象,只在function这个函数中有效),
      jQ=window.jQ=window.$=function(){        //此jQ虽然是局部对象,但定义在window.jQ也相当于是全局对象了
        //alert("test");
    };
   
   
    jQ.prototype.test=function(){
        alert("helloprototype");//要调用这个test()方法,必须是var jq1=new jQ(),然后jq1.test()才有效,或者直接jQ.prototype.test()也可以,prototype这个属性是function 这个对象也特 有的.反正jQ.prototype.test表示的是实例的方法而不是类的方法,直接jQ.test就是错的.
    };
    jQ.test=function(){
        alert("hellotest2!");//要调用这个方法,只要jQ.test();即可
        //return  "hellotest2!";
    };
    jQ.fn=jQ.prototype={
        test2:function(){
            alert("hellofn");//要调用这个方法,只要jQ.fn.test2();或var jq=new jQ(),然后jq.test2()即可
        }
    };
    
  })()//如果没有加括号,它不会执行加载这个函数的内容,这样写的用处应该是为了表示此function中的所有内容表示在同一个域中,即var的一个对象在此function中都是有效的,在这个function外就不能调用var的对象,function相当于一个函数
注:反正只要有prototype,即用a.prototype.test(),要直接用成a.test()就一定要到var a1=new a();a1.test();当然要用成a.prototype.test(),就可以不要用到new了.

7.
a.(function(a){
    alert(a);
    alert(b);
   })(b)//其中b为全局变量,a为b的别名;

b.(a=function(){
     this.test(){alert("test");}
     this.a="a";
    b="b";
var c="c";
   
   })//相当于一个java类(面向对象的编程思想),要调用可以用new的方式(var atest=new a();atest.test();可以调用atest.a,但不可以调用atest.只能直接调用如alert(b);也不能调用alert(c)因为它是a类的私有变量)
当然如果后面有加个(),也表示是实例化的意思,就可以直接调用如alert(a),alert(b));

c.
function(){}//表示一个函数,相当于java中的一个类了,函数中也可以有函数
(function(){})()//表示执行这个函数,实例化
8.有关this
    jQ.fn=jQ.prototype={
        init:function(){
          return this;//this就是表示jQ.fn或者jQ.portotype
        }
    };

    function test(){
      alert(this);//this不是属于一个function方法的,它是属于一个命名空间,在这,this应该是表示window
    }

总结:
this总是表示离它最近的对象,与其它无关
如a={
  alert(this)//此this表示a
}

a={
    c:"c",
  b:{
    d:function(){alert(this);}//此this表示b
  }
}

a={
  b:function(){alert(this)}//此this也是a
}

a=function(){
  alert(this);//表示widow,最近没有对象,所有的this就是表示window
}

大总结:1.{}和function都是表示对象,其中的区别是function可以用new来实例化,而{}是键值对象,不能用new实例化可以直接调用.
       2.this代表的总是表示它所属的那个对象,如例1中的this中代表的是a.b是因为c还只是一个函数,它还不是对象,所以它所属的为a.b,而例2当中c 这个function已经实例化了,代表的是对象而不是函数,所以它所属的是a.b.c,而例3当中,a.b.c={}这本来就是一个对象(靠得最近的对象就是c ),不用实例化已经是一个对象了,所以this它所代表的是a.b.c
例1.
var a={b:{}};
a.b.c=function{
  this.d=function(){}
  alert(this);//this表示a.b
}
例2.
var test=new a.b.c();
test.d()//说明在实例化时,上面的this表示的是a.b.c
例3.
var a={b:{}};
a.b.c={
  this.d=function(){}
  alert(this);//this表示a.b.c
}

9.有关jquery.js扩展类的模式
(function($){//表示全局变量的jQuery的别名
    $.fn.test(){//"$"可用jQuery代替,"fn"可以用prototype来代替
      alert("hello,yesbi,this is the first plugn!")
    }
      
   })(jQuery)//表示全局变量
在调用test这个方法时,只要$().test(),$("XX").test(),jQuery().test(),jQuery("XX").test()即可调用得到这个方法,这是因为
在jquery.js基础类库当中定义了jQuery=window.jQuery=window.$=function(selector){ return jQuery.fn.init(selector)}而在
jQuery.fn.init(selector)当中返回了一个this对象即为"jQuery.fn"或者为"jQuery.prototype",所以说jQuery().test()就相当于jQuery.fn.test()或者jQuery.prototype.test()的效果了,如果不是这样的话,就要通过var a=new jQuery(),然后a.test()(这是js中的prototype方法的效果,在通过new创建一个类的实例对象的时候,prototype对象的成员才能成为实例化对象的成员。)或者jQuery.fn.test(),jQuery.prototype.test()当然也是可以的.

10.$("#div1")把div1这个ID存放在$.fn[0],$("div")把div这个html标签有几个分别存放在$.fn[0]..$.fn[n]中

11.js方法的调用
a.  function a(){
     b("test",function(result){
       alert(result);//result类似于形参,真正的参数是由b传递过来的temp值.
     })
  }
也可以写成
  function a(){
     b("test",fun1)
  }
function fun1(result){
  alert(result);
}


b. 
  function b(temp,callback){
    var bb="yesib";
     callback(temp+bb);
  }
调用方法a(),会弹出"test",cakkback(temp)相当于执行function(temp){alert(temp);}
在这里,fun1就相当于回调函数,它实际执行的地方在b函数当中,相当于在b函数当中执行了fun1,这样的好处在于,可以把b函数中信息传到fun1函数当中,dwr当中的TestAction.test(function(data){ alert(data)});这就是回调函数,data的数据其实是在TestAction.test()方法当中产生的

12.function test(){
  
};//其实也是一个变量相当于

var test=function (){
  alert("test");
}//注意相当的只是一个局部变量



function finalize_test(){
    test=null;    //相当于把test()这个方法清空,
}

13.用js加载dom时,如果用innerHTML类似的功能加载一个html如divObject.innerHTML="<div id='div1'>yesbi<script src='test.js'></script></div>",执行这个操作以后,就多了一个div1的对象,但是,没有请求服务器关于test.js的信息,它只是在页面添加了单纯的html标签而已,而divObject.appendChid("<div id='div1'>yesbi<script src='test.js'></script></div>"),document.write("<div id='div1'>yesbi<script src='test.js'></script></div>"),不仅在页面添加了对应的标签,并且在需要请求服务器的地方请求了服务器,如script src='test.js'></script>,执行到这句时,它就请求服务器进行了加载test.js

14.平常的页面加载时,不管IE还是FF,都是同步加载(假如没有特别的设置,如果在<script src="test.js" defer="true">yesib</script>,就表示还没有加载完就会往下执行,这是异步加载),
先碰到什么就先加载什么,如:
<html>
<script>
  documnet.getElementById("input");//此对象为空,不存在
</script>
 <input id="input1"></input>
<script>
  documnet.getElementById("input");//此对象就不为空
</script>
<html>

而如果是动态加载,比如加载一个<script src="test.js"></script>在ie上还是默认为同步加载,在ff上就会是异步加载了,如:
<html>
<script>
    documnet.write('<script src="test.js"></script>');//此test.js中有个方法test();
    test();//ie上调用没有错,ff上调用就会发生错误.
</script>
<html>

注:还有一个上有点特殊的是如在script当中
<script>
//虽然还没有存在这个函数,但在后面有存在这个方法,也可以正常调用得到,同一个        //<script></script>标签下,或者在同 一个js文件下,它是不仅按顺序执行,对于调用的方法会       //等到同一个script或js下所有的方法加载完成后才调用

  a();
function a(){
  alert('ad');
 };

</script>

相反的,如果是如下的例子,这就照样的是认不到这个方法a
script>
  a();
 };

</script>script>
function a(){
  alert('ad');
 };

</script>




15.js方法的继承
paris={
}


paris.ad=function(){
   this.adfn=function(){
     alert("adfn");
   }
};


paris.network=function(){
   this.networkfn=function(){
     alert("networkfn");
   }
};


var adfntest =new paris.ad();
paris.network.prototype=adfntest;//继承paris.ad的方法

var networkfntest =new paris.network();
networkfntest.networkfn();
networkfntest.adfn();//用paris.network调用paris.ad中的方法











  1.
  匹配中文字符的正则表达式:   [\u4e00-\u9fa5]    
  匹配双字节字符(包括汉字在内):[^\x00-\xff] 
2. 在function中arguments表示实际参数,有多个时就以数组的形式存在
  如function test(a,b){
      var numargs = arguments.length;  alert(numargs); // 获取实际传递参数长度
      //使用 arguments.callee.length 可以获得同样的效果
       var expargs = ArgTest.length;    alert(expargs);  // 获取应该传递参数长度
   }

3.if(a)//a 为null,"",0都表示false,反之就为true(注:js中的空为null,是小写的)

4.在js中document.getElementById("test").readOnly="false"("true");其中readOnly,O为大写注意;而document.getElementById("test").disabled="true"或document.getElementById("test").removeAttribute('disabled');
  注在IE6.0当中,不认得document.getElementById("test").removeAttribute('readonly')

5.在导入js文件时加入<script defer="true"></script>加上defer等于在页面完全载入后再执行,相当于 window.onload ,但应用上比 window.onload 更灵活!,它的作用是加载和解析所有的文档后才加载 js文件,如:没有加defer会报错(因为js和html文件是按顺序执行的,还没有加载文档之前,执行document.getElementById("test").value会报找不到test这个组件的错误),加了这一句后,会先等所有的文档加载完了,再执行就不会错了

<BODY>
<script defer="true">
   alert("11");
   alert(document.getElementById("test").value);
</script>
<input id="test" type="text" value="hello" />
</BODY>
</HTML>

注:不管怎么样,<script src="a.js"></script>导入在js都需要下载到客户端,与导入的文件的数量影响不大,只与导入的js的大小有关,一般的浏览器当中,都有对导入的js进行缓存,一般都是只下载一次即可


6.(functio(){

      var a="a",表示私有对象,后面不是用分号表示,只是在逗号,那么jQ也表示是var对象(局部对象,只在function这个函数中有效),
      jQ=window.jQ=window.$=function(){        //此jQ虽然是局部对象,但定义在window.jQ也相当于是全局对象了
        //alert("test");
    };
   
   
    jQ.prototype.test=function(){
        alert("helloprototype");//要调用这个test()方法,必须是var jq1=new jQ(),然后jq1.test()才有效,或者直接jQ.prototype.test()也可以,prototype这个属性是function 这个对象也特 有的.反正jQ.prototype.test表示的是实例的方法而不是类的方法,直接jQ.test就是错的.
    };
    jQ.test=function(){
        alert("hellotest2!");//要调用这个方法,只要jQ.test();即可
        //return  "hellotest2!";
    };
    jQ.fn=jQ.prototype={
        test2:function(){
            alert("hellofn");//要调用这个方法,只要jQ.fn.test2();或var jq=new jQ(),然后jq.test2()即可
        }
    };
    
  })()//如果没有加括号,它不会执行加载这个函数的内容,这样写的用处应该是为了表示此function中的所有内容表示在同一个域中,即var的一个对象在此function中都是有效的,在这个function外就不能调用var的对象,function相当于一个函数
注:反正只要有prototype,即用a.prototype.test(),要直接用成a.test()就一定要到var a1=new a();a1.test();当然要用成a.prototype.test(),就可以不要用到new了.

7.
a.(function(a){
    alert(a);
    alert(b);
   })(b)//其中b为全局变量,a为b的别名;

b.(a=function(){
     this.test(){alert("test");}
     this.a="a";
    b="b";
var c="c";
   
   })//相当于一个java类(面向对象的编程思想),要调用可以用new的方式(var atest=new a();atest.test();可以调用atest.a,但不可以调用atest.只能直接调用如alert(b);也不能调用alert(c)因为它是a类的私有变量)
当然如果后面有加个(),也表示是实例化的意思,就可以直接调用如alert(a),alert(b));

c.
function(){}//表示一个函数,相当于java中的一个类了,函数中也可以有函数
(function(){})()//表示执行这个函数,实例化
8.有关this
    jQ.fn=jQ.prototype={
        init:function(){
          return this;//this就是表示jQ.fn或者jQ.portotype
        }
    };

    function test(){
      alert(this);//this不是属于一个function方法的,它是属于一个命名空间,在这,this应该是表示window
    }

总结:
this总是表示离它最近的对象,与其它无关
如a={
  alert(this)//此this表示a
}

a={
    c:"c",
  b:{
    d:function(){alert(this);}//此this表示b
  }
}

a={
  b:function(){alert(this)}//此this也是a
}

a=function(){
  alert(this);//表示widow,最近没有对象,所有的this就是表示window
}

大总结:1.{}和function都是表示对象,其中的区别是function可以用new来实例化,而{}是键值对象,不能用new实例化可以直接调用.
       2.this代表的总是表示它所属的那个对象,如例1中的this中代表的是a.b是因为c还只是一个函数,它还不是对象,所以它所属的为a.b,而例2当中c 这个function已经实例化了,代表的是对象而不是函数,所以它所属的是a.b.c,而例3当中,a.b.c={}这本来就是一个对象(靠得最近的对象就是c ),不用实例化已经是一个对象了,所以this它所代表的是a.b.c
例1.
var a={b:{}};
a.b.c=function{
  this.d=function(){}
  alert(this);//this表示a.b
}
例2.
var test=new a.b.c();
test.d()//说明在实例化时,上面的this表示的是a.b.c
例3.
var a={b:{}};
a.b.c={
  this.d=function(){}
  alert(this);//this表示a.b.c
}

9.有关jquery.js扩展类的模式
(function($){//表示全局变量的jQuery的别名
    $.fn.test(){//"$"可用jQuery代替,"fn"可以用prototype来代替
      alert("hello,yesbi,this is the first plugn!")
    }
      
   })(jQuery)//表示全局变量
在调用test这个方法时,只要$().test(),$("XX").test(),jQuery().test(),jQuery("XX").test()即可调用得到这个方法,这是因为
在jquery.js基础类库当中定义了jQuery=window.jQuery=window.$=function(selector){ return jQuery.fn.init(selector)}而在
jQuery.fn.init(selector)当中返回了一个this对象即为"jQuery.fn"或者为"jQuery.prototype",所以说jQuery().test()就相当于jQuery.fn.test()或者jQuery.prototype.test()的效果了,如果不是这样的话,就要通过var a=new jQuery(),然后a.test()(这是js中的prototype方法的效果,在通过new创建一个类的实例对象的时候,prototype对象的成员才能成为实例化对象的成员。)或者jQuery.fn.test(),jQuery.prototype.test()当然也是可以的.

10.$("#div1")把div1这个ID存放在$.fn[0],$("div")把div这个html标签有几个分别存放在$.fn[0]..$.fn[n]中

11.js方法的调用
a.  function a(){
     b("test",function(result){
       alert(result);//result类似于形参,真正的参数是由b传递过来的temp值.
     })
  }
也可以写成
  function a(){
     b("test",fun1)
  }
function fun1(result){
  alert(result);
}


b. 
  function b(temp,callback){
    var bb="yesib";
     callback(temp+bb);
  }
调用方法a(),会弹出"test",cakkback(temp)相当于执行function(temp){alert(temp);}
在这里,fun1就相当于回调函数,它实际执行的地方在b函数当中,相当于在b函数当中执行了fun1,这样的好处在于,可以把b函数中信息传到fun1函数当中,dwr当中的TestAction.test(function(data){ alert(data)});这就是回调函数,data的数据其实是在TestAction.test()方法当中产生的

12.function test(){
  
};//其实也是一个变量相当于

var test=function (){
  alert("test");
}//注意相当的只是一个局部变量



function finalize_test(){
    test=null;    //相当于把test()这个方法清空,
}

13.用js加载dom时,如果用innerHTML类似的功能加载一个html如divObject.innerHTML="<div id='div1'>yesbi<script src='test.js'></script></div>",执行这个操作以后,就多了一个div1的对象,但是,没有请求服务器关于test.js的信息,它只是在页面添加了单纯的html标签而已,而divObject.appendChid("<div id='div1'>yesbi<script src='test.js'></script></div>"),document.write("<div id='div1'>yesbi<script src='test.js'></script></div>"),不仅在页面添加了对应的标签,并且在需要请求服务器的地方请求了服务器,如script src='test.js'></script>,执行到这句时,它就请求服务器进行了加载test.js

14.平常的页面加载时,不管IE还是FF,都是同步加载(假如没有特别的设置,如果在<script src="test.js" defer="true">yesib</script>,就表示还没有加载完就会往下执行,这是异步加载),
先碰到什么就先加载什么,如:
<html>
<script>
  documnet.getElementById("input");//此对象为空,不存在
</script>
 <input id="input1"></input>
<script>
  documnet.getElementById("input");//此对象就不为空
</script>
<html>

而如果是动态加载,比如加载一个<script src="test.js"></script>在ie上还是默认为同步加载,在ff上就会是异步加载了,如:
<html>
<script>
    documnet.write('<script src="test.js"></script>');//此test.js中有个方法test();
    test();//ie上调用没有错,ff上调用就会发生错误.
</script>
<html>

注:还有一个上有点特殊的是如在script当中
<script>
//虽然还没有存在这个函数,但在后面有存在这个方法,也可以正常调用得到,同一个        //<script></script>标签下,或者在同 一个js文件下,它是不仅按顺序执行,对于调用的方法会       //等到同一个script或js下所有的方法加载完成后才调用

  a();
function a(){
  alert('ad');
 };

</script>

相反的,如果是如下的例子,这就照样的是认不到这个方法a
script>
  a();
 };

</script>script>
function a(){
  alert('ad');
 };

</script>




15.js方法的继承
paris={
}


paris.ad=function(){
   this.adfn=function(){
     alert("adfn");
   }
};


paris.network=function(){
   this.networkfn=function(){
     alert("networkfn");
   }
};


var adfntest =new paris.ad();
paris.network.prototype=adfntest;//继承paris.ad的方法

var networkfntest =new paris.network();
networkfntest.networkfn();
networkfntest.adfn();//用paris.network调用paris.ad中的方法










分享到:
评论

相关推荐

    狂神说系列 JavaScript笔记

    【狂神说系列 JavaScript笔记】是一份全面且深入的JavaScript学习资源,旨在帮助开发者和初学者深入理解这门广泛应用于Web开发的脚本语言。这份笔记涵盖了JavaScript的基础语法、核心概念以及高级特性,旨在构建一个...

    javascript笔记 javascript笔记

    - **解释:** 这段代码会引入名为`java.js`的外部JavaScript文件。例如,在`java.js`文件中可以写入: ```javascript document.write("Hello World!"); ``` ### 组合使用JavaScript和HTML 通过组合使用...

    李立超JavaScript基础篇笔记

    JavaScript,简称JS,是由Brendan Eich在1995年创造的一种高级编程语言,最初目的是为了增强网页的交互性,特别是在前端进行表单验证。JavaScript不是Java的子集,两者之间没有直接关联。JS起初名为LiveScript,但在...

    传智播客JS笔记

    "传智播客JS笔记"提供了一套全面且易于理解的学习资源,特别适合初学者掌握JavaScript的基础和核心概念。以下是对笔记中可能包含的重要知识点的详细解释: 1. **变量与数据类型**:JavaScript 支持动态数据类型,这...

    韩顺平html+css+js之javascript笔记

    ### 韩顺平html+css+js之javascript笔记 #### Javascript基础知识概览 ##### JavaScript在Web开发中的角色 JavaScript是一种被广泛应用于Web开发的脚本语言,它不能单独运行,而是与HTML、JSP、PHP、ASP.NET等...

    html+css+javascript笔记完整版

    "html+css+javascript笔记完整版"是一份全面的前端学习资源,涵盖了从基础到进阶的HTML、CSS和JavaScript知识。通过深入学习,你可以掌握创建交互式、响应式网页所需的所有技能,并为进一步探索前端开发的广阔领域...

    黑马JavaScript笔记二.md

    黑马JavaScript笔记二.md

    css+html+js笔记

    在提供的压缩包文件中,"JavaScript笔记完整版.doc"可能涵盖了JavaScript的基本语法、DOM操作、事件处理、Ajax请求等内容;"html笔记.docx"可能讲解了HTML标签的使用、HTML5新特性、语义化标签等;"div+css笔记.docx...

    js笔记.md

    js笔记.md

    JavaScript_Demo,文章《JavaScript笔记》配套代码

    这篇文章《JavaScript笔记》的配套代码提供了丰富的实例,旨在帮助读者深入理解和掌握JavaScript的基本概念、语法以及应用技巧。 首先,我们来看看“JS笔记”部分。在学习JavaScript时,理解变量的声明、数据类型...

    韩顺平javascript笔记(最全整理 dom编程 oop 基础语法)

    韩顺平老师的JavaScript笔记全面涵盖了基础语法、面向对象编程以及DOM编程,这些都是学习JavaScript时至关重要的知识点。 首先,基础语法是JavaScript学习的基石。包括变量声明(var、let、const)、数据类型(如...

    javascript笔记

    javascript入门笔记包括javascript简介、javascript语法、javascript流程控制、函数、数组等

    html-css-js笔记

    这是关于html-css-js 笔记,希望可以对初学者有一些帮助!

    韩顺平Javascript笔记完整版.pdf

    韩顺平Javascript笔记完整版.pdf ,配合视频看效果比较好

    js 笔记 javascript 学习笔记

    本学习笔记将深入探讨JavaScript的核心概念,包括变量、数据类型、操作符、控制流程、函数、对象、数组、原型链、闭包等,并结合实际示例,如my.js、order.js、login.js等文件,来讲解其在实际项目中的应用。...

    javascript 笔记 适合初学者 jquery chm 资料

    这份"javascript笔记"可能是作者根据自己的学习和实践整理而成,对初学者来说是非常宝贵的资源。笔记中可能涵盖了变量声明、数据类型(如字符串、数字、布尔值、对象、数组等)、运算符、流程控制(如条件语句和循环...

    creator nodejs js笔记

    这篇笔记主要聚焦在CocosCreator游戏开发环境中,如何结合Node.js和JavaScript进行高效能的应用程序开发。Node.js是一个开放源代码、跨平台的JavaScript运行环境,它允许开发者在服务器端运行JavaScript代码,极大地...

    韩顺平 javascript 笔记 js面向对象 笔记 韩顺平 完整版

    在韩顺平的JavaScript笔记中,他深入讲解了JS面向对象编程的各个方面,包括变量的作用域、对象引用、this关键字的使用以及对象的方法。 首先,变量的作用域在JavaScript中是一个关键概念。带var和不带var声明的变量...

    js笔记js笔记js笔记js笔记

    js笔记js笔记js笔记js笔记

Global site tag (gtag.js) - Google Analytics