JavaScript 学习笔记(内容非常多,即使高手也未必全懂)

交流QQ群:26651479

Java Script 基础
一、 JS的简介
     JavaScript是一种网页编程技术，经常用于创建动态交互网页
     JavaScript是一种基于对象和事件驱动的解释性脚本语言，类似C语言和Java的语法
     事先不编译；逐行执行；无需进行严格的变量声明；内置大量现成对象，编写少量程序可以完成目标
     不同的浏览器甚至同一浏览器的不同版本对JavaScript的支持程度都不一样

二、 JS的基本语法
    0. 有两种JavaScript写法：
       a. 直接在 html 中嵌入，程序写法:
          
       b. 调用独立JavaScript文件：在html中写
          

   3.把数值变成 奇 \ 偶数(利用位运算)
      n = n | 1 ;            //一定得到奇数。如果原本是偶数则加一。
      n = (n >> 1) <<1;      //一定得到偶数。如果原本是奇数则减一。
      n = n ^ 1;             //奇偶互换。对偶数加一，对奇数减一。

   4.取出数值的整数部分(取整)。
      // 以下第一种方法不受浏览器和版本的影响，后两种受版本影响。
      n = ( n > 0 ) ? Math.floor(n) : Math.ceil(n);
      n = Number ( (String(n).split("."))[0]);
      n = parseInt(n,10);
      // 下面做法更简便高效,用位运算来做(右移0位,或者两次取反),且非数值型的值会转成0
      alert(5>>0);      alert(~~5);      // 值为 5
      alert(5.55>>0);   alert(~~5.55);   // 值为 5
      alert(-98.4>>0);  alert(~~-98.4);  // 值为 -98
      alert('absd'>>0); alert(~~'absd'); // 值为 0
      alert(null>>0);   alert(~~null);   // 值为 0
      alert('34.5'>>0); alert(~~'34.5'); // 值为 34

   5.取出数值的小数部分。
      须先检查小数点是否存在。但有时会发生运算误差。
      n = Math.abs(n);  if(n>0) n = n - Math.floor(n); else n = 0;
      n = parseInt(n,10) - parseFloat(n);
      if((""+n).indexOf(".") > -1) n = Number("0."+(String(n).split("."))[1]); else n = 0;

   6.在任意位置插入一行js(单行程序)：
    
    

   7.设置焦点：
     //document.all["DateID"].onfocus;
     document.all["DateID"].focus();
     formName.DataName.focus();

   8.默认参数：
     function show() {
        alert( arguments[0] );
     }
     这个函数会alert出第一个参数，如调用时： show("haha")，则alert("haha");

   9.禁止 confirm 與 alert
      window.confirm = function(str){return true;};
      window.alert = function(str){};

   10.获取下拉菜单的内容
     
         Text
     
      获取选中的下拉菜单的内容：
        var seleElement = document.formName.seleName;
        var optionText = seleElement.options[seleElement.selectedIndex].text;

   11.设置默认值:
      edittype = edittype || "text"; //edittype预设为 text
      上面一句: 如果 edittype 之前有值,则取之前的值; 之前没有值,则取默认值

   12.数值的截取:
      numObj.toFixed([fractionDigits])
      //numObj:必选项。一个 Number 对象。
      //fractionDigits:可选项。小数点后的数字位数。其值必须在 0 – 20 之间，包括 0 和 20。 预设为0
      toFixed 方法返回一个以定点表示法表示的数字的字符串形式。对数值进行四舍五入截取到指定位数的小数
      如: 55.3654.toFixed(2) //返回55.37

   13.IE上的关闭窗口时不提示
      window.opener = null; // 关闭IE6不提示
      window.open("","_self"); // 关闭IE7不提示
      //关闭窗口
      window.close();

   14.刷新页面的几种方法：
      history.go(0);
      window.navigate(location);
      document.URL = location.href;
      document.execCommand('Refresh'); //火狐不能用
      location.reload();
      location = location;
      location.assign(location);
      location.replace(location);

   15.页面跳转：
      location.href = "yourURL"
      window.location = 'url'
      window.location.href = "url"
      window.navigate("top.jsp");
      self.location = 'top.htm' //令所在框架页面跳转，大框架不变
      top.location = 'xx.jsp';  //在框架內令整個页面跳转

   16.页面跳转/刷新 的注意：
      需要先执行其他代码，然后再页面跳转或者刷新。因为页面跳转或者刷新后不再执行下面的代码。
      如：alert('请先登录'); window.location.href = 'index.jsp';

   17.改变标题(即改变
       
       
       
       

       
       

    3. 读取 Behavior 文档 (任意标签都可触发 onclick 事件) (IE5.0以上可用)
        //在 html 文件上写：
       
       
       
       
       
       
       

       

点击文字

        sample



       
       
       

       //在此 html 文件的同一目录下的 a.htc 文件里写：
       

    4.定时器，每隔一段时间进行处理(IE3.0以上，NN2.0以上可用)
       
       
       
       
       
       
          

               


          

          
          
       
       

     5.根据 javaScript 的开闭状态来显示网页(适用IE3.0和NN2.0以上版本)
         以 配合  location.href 来实现。
         下面的 里的content的5表示当javascript关闭时，5秒后跳转到closeJavaScript.html 页面。
         location.href="openJavaScript.html";  表示当javascript可用时，跳转到 openJavaScript.html 页面。
         在 html 里加入""则在本页面提示。

       
       

    7.淡入/淡出效果(背景色适用IE3.0和NN2.0以上版本，文字色适用IE4以上版本)
     
     
          
          


           点击淡入淡出的文字
     

    8.窗口的振动效果(适用IE4.0和NN4.0以上版本)
        
        

    9.检查电子邮件地址是否正确(适用IE4.0和NN3.0以上版本)
       
       

        电子邮件：
       
       

    10. cookie 的使用。显示访问次数。(适用IE3.0和NN2.0以上版本)
       

    11.简单的预防二次提交 (适用IE3.0和NN3.0以上版本)
       
       

       
       
       
       

    12.解决中文乱码问题。
          用以下三个方法进行转码就行了：
          escape('你好')                == %u4F60%u597D           //转成 Unicode 编码
          encodeURI('你好/p')           == %E4%BD%A0%E5%A5%BD/p   //转换为UTF-8；URL需要传递中文时使用
          encodeURIComponent('你好/p')  == %E4%BD%A0%E5%A5%BD%2Fp

          三种方法都能对字符进行过滤。后两者是将字符串转换为UTF-8的方式。
        escape() 不会编码的字符有69个: *  +  -  .  /  @  _  0-9  a-z  A-Z
             所有空格、标点符号以及任何其它非 ASCII 字符都用 %xx 编码替换
             其中 xx 表示该字符的16进制数。例如，空格返回为“%20”。
             (字符值大于 255 的字符以 %uxxxx 格式存储。)
             注意：escape 方法不能用来对“统一资源标识符”(URI) 进行编码。
        unescape() 从用 escape() 编码的 String 对象中返回已解码的字符串。同样不能用于 URI
        encodeURI()返回编码为有效的 URI 字符串。
            不会编码的字符有82个: ! # $ & ' ( ) * + , - . / : ; = ? @ _ ~ 0-9 a-z A-Z
            此方法返回一个已编码的 URI。将编码结果传递给 decodeURI()，则返回初始的字符串。
        decodeURI() 不对下列字符进行编码： : / ; ?
        encodeURIComponent() 返回编码为 URI 的有效组件的字符串。
            不会编码的字符有71个: ! ' ( ) * - . _ ~ 0-9 a-z A-Z
            注意，它会编译“/”，所以不能包含路径，否则无效。
        decodeURIComponent() 将编码结果解码回初始字符串。

        //把任意编码转成 java 的 ascii 编码(Unicode  native2ascii )
        //注意：html的ascii码是“%”开头的，但java的却是“\”开头，所以这里替换了
        function change1( str ) {
            var tem = "";
            for( var j = 0; j < str.length; j=j+1 ) {
                 if ( escape(str.charAt(j)).length >= 6) {
                       tem += escape(str.charAt(j)).replace("%", "\\");
                 } else { tem += str.charAt(j); }
            }
            return tem;
        }

        // ascii2nactive  解码
        function change2( str ) {
            for( var j = str.length/3; j > 0; j=j-1 ) {
                 str = str.replace("\\", "%");
            }
            return unescape(str);
        }

     12.1 (A标签) 传参时的中文乱码解决方案
         利用js的escape函数,转码即可
        

        //使用如下 (下面第二句会更好,测试火狐时第一句会延迟或者没反应)
        Links
        Links

        A标签的 href="#" 时，IE浏览器会跳转到页面顶部, 解决方法是把“”改写成“”或者“”
        A标签的 onclick 事件，如果返回 false, 可以阻止页面跳转,如: test

        注意：使用A标签的 href="javascript:xxx代码" 时，里面的js代码不能使用 this, event 对象, 因为这相当于浏览器地址栏, this 不代表 A 标签。
        如果需要使用 this 或者 event 来获取此A标签,建议改用 onclick 事件。
        另外 A 标签里面的 onclick 事件返回 false,则不会跳转(即 href 的内容不会触发, href 里面的js也不会执行)。

    13.正则表达式：
        产生正则表达式的方式
        1. var re = new RegExp("pattern",["flags"]); // 这种方式比较好
           pattern :正则表达式字符串 // 注意这是字符串,里面的反斜杠("\")需要连写两个来表示一个,因为会转义,如 new RegExp("\\d") 匹配一个数字
           flags: // flags 可以多个一起使用, 如 new RegExp("\\w", 'gm')
                g global (全文查找出现的所有 pattern)
                i ignoreCase (忽略大小写)
                m multiLine (多行查找)

        2. 使用 正斜杠("/") 括起来
           var re = /pattern/flags
           pattern 和 flags 的含义跟 new RegExp 的一样。
           只不过,这里的 pattern 不是字符串,不会转义,所以里面的反斜杠("\")不需要连写两个。如 /\d/ 表示匹配一个数字
           这两种方式产生的正则表达式都是一样的，如 new RegExp("(f+)d+(s+)") 也可以写成： /(f+)d+(s+)/

        正则表达式的常用函数：
           re.exec(字符串); // 返回匹配数组(下标0是整个匹配到的字符串,下标1是第1个捕获组,下标2是第2个捕获组...),没有匹配时返回 null
           re.test(字符串); // 返回 true, 或者 false,表示是否匹配
        另外,字符串也有可运用正则表达式的：
           字符串.replace(正则表达式, 要替换的字符串); // 要替换的字符串里面,也可以使用 $1, $2 作为捕获组
           字符串.match(正则表达式); // 同 re.exec,返回匹配数组,无法匹配则返回null,[0]是匹配的整个字符串,[1]是匹配的第一个捕获组,[2]是第二个捕获组...

        RegExp 的属性
            $1, ..., $9  捕获组,$1是匹配的第一个捕获组(即第一个用小括号括起来的内容),$2是第二个捕获组... 如：
                if ( new RegExp("(f+)d+(s+)").test("ddfffdddsss") ) {
                   alert(RegExp.$1 + ", " + RegExp.$2); // 提示出： fff, sss
                }
            $_, input  返回输入的内容
                如: /^1((3\d)|(5[036789])|(8[89]))\d{8}$/.exec("13595044124"); alert(RegExp.$_); alert(RegExp.input); // 提示出: 13595044124

 

      常用的正则表达式 元字符
        \          转义符
        .          匹配除换行符以外的任意字符
        |          或符号
        \w         匹配字母或数字或下划线 (大写的通常是小写的反义)
        \W         匹配任意不是字母,数字,下划线的字符
        \s         匹配任意的空白符
        \S         匹配任意不是空白符的字符
        \d         匹配数字
        \D         匹配任意非数字的字符
        \b         匹配单词的开始或结束
        \B         匹配不是单词开头或结束的位置
        ^          匹配字符串的开始
        $          匹配字符串的结束
        [^x]       匹配除了x以外的任意字符
        [^aeiou]   匹配除了aeiou这几个字母以外的任意字符
        \数字      表示捕获组,要求与第几个捕获组相同
      常用的限定符
        *          重复零次或多次
        +          重复一次或多次
        ?          重复零次或一次
        {n}        重复n次
        {n,}       重复n次或更多次
        {n,m}      重复n到m次

      常用正则表达式
        /^[-]?\d+([.]?\d*)$/                  //数字
        /^[-]?\d+$/                           //整数
        /^[0-9a-zA-Z]{5,16}$/                 //用户名(区分大小写，5-16位)
        /^[\u4e00-\u9fa5]+$/                  //中文
        /^(\w){6,20}$/;                       //校验密码：只能输入6-20个字母、数字、下划线
        //电话号码(手機號碼):像(010)88886666，022-22334455，029 1234-5678，010 3523922轉259，3523922。04-36018188/23051418 等
        /^([(（]?0\d{1,6}[）) -]?)?(\d{5,30}|((\d{4}[ -]){1,7}\d{1,4}))([ -#(（轉转]?\d{1,6}[）)]?)?$/;
        /^#?([a-f0-9]{6}|[a-f0-9]{3})$/       //十六进制值
        /^([a-zA-Z\d_\.-]+)@([a-zA-Z\d]+\.)+[a-zA-Z\d]{2,6}$/                     //电子邮箱
        /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/          //URL
        //下句是 IP 地址: 1.0.0.1 到 255.255.255.255,每段不能用“0”打头
        /^([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))\.(([\d]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))\.){2}([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))$/
        /^<([a-z]+)([^<]+)*(?:>(.*)<\/\1>|\s+\/>)$/           //HTML 标签

         "str".replace(/(^\s*)|(\s*$)/g, ""); // 去除前后空格

         //校验登录名：只能输入5-20个以字母开头、可带数字、“_”、“.”的字符串
         function isRegisterUserName(s) {
             var patrn = /^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/;
             return !!(patrn.exec(s));    //返回匹配数组,没有匹配时返回null;所以非两次以返回boolean值
         }
         //防止SQL注入，返回true表示通过验证，返回false表示验证不通过
         function IsValid( oField ) {
             re= /select|update|delete|exec|count|'|"|=|;|>|<|%/i;
             $sMsg = "请您不要在参数中输入特殊字符和SQL关键字！";
             if ( re.test(oField.value) ) {
                  alert( $sMsg );
                  return false;
             }
             return true;
         }
         // 日期检查
         function strDateTime(str)
         {
            var r = str.match(/^(\d{1,4})(-|\/)?(\d{1,2})\2(\d{1,2})$/); // 注意里面的“\2”，表示要求与第2个捕获组“(-|\/)?”的值相同
            if ( r == null ) return false;
            var d = new Date(r[1], r[3]-1, r[4]);
            return (d.getFullYear()==r[1] && (d.getMonth()+1)==r[3] && d.getDate()==r[4]);
         }

    14.修改表单内容
       
       
           
       

       
       

           
                
                    
                    
                
                
                
           

学号	姓名	性别
101	stu1	男
102	stu2	女

       

       
       

    15.可变长参数 的 动态函数：
       函数是一个对象，一个Function对象
       (函数参数列表及函数主体事实上只是Function对象的构造函数的参数而已)
       函数参数是可变的，比如定义函数时的参数列表有3个参数，调用时可以传2个参数，或者5个参数
       arguments.length 是实际参数的个数(被传递参数的个数)
       方法名.length    期望参数的个数(定义函数时的参数列表的参数个数)

      动态函数：
       var square = new Function("x", "y", "var sum;sum=x*x+y*y;return sum;");
       alert(square(2,3)); //值为13
       动态函数的作用：函数体是由一个字符串构成的，故函数体可动态生成。

    16.页面刷新的方法：
       history.go(0);
       location.reload();
       location=location;
       location.assign(location);
       document.execCommand('Refresh');
       window.navigate(location);
       location.replace(location);
       document.URL=location.href;

       自动刷新的方法：
       1) 里使用标签： //其中20指每隔20秒刷新一次页面
       2) 使用javascript：
         

       页面自动跳转：
       //20秒后跳转到url指定的页面

       刷新框架的js:
       //刷新包含该框架的页面用
       parent.location.reload();
       //子窗口刷新父窗口
       self.opener.location.reload();  ( 或 刷新 )
       //刷新另一个框架的页面用
       parent.otherFrameID.location.reload();

       关闭或者打开窗口时刷新，在中用 onload 或 onUnload 即可。
          //打开窗口时刷新
       //关闭窗口时刷新
       window.opener.document.location.reload(); // ?

    17.用 javascript 处理 JSON：
       JSON 是 javascript 的一个子集，所以，在javascript 中使用JSON是非常简单的。
       JSON的规则很简单： 对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。
       每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。
       1) 创建 JSON 对象，如下创建了只包含一个成员 "bindings" 的一个对象，bindings 则包含了一个由3个对象组成的数组。
          var myJSONObject = {"bindings": [
              {"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"},
              {"ircEvent": "PRIUUCG", "method": "deleteURI", "regex": "^delete.*"},
              {"ircEvent": "PRIIPKD", "method": "randomURI", "regex": "^random.*"}
            ]
          };
       2) 获取对象： 在javascript 中， 成员可以通过“点号”来获取。
          如： myJSONObject.bindings[0].method  // 结果： newURI
          alert(myJSONObject.bindings[1].method); //alert信息: deleteURI
       3) 通过eval() 函数可以将JSON字符串转化为对象。
          如： var myJSONtext = '{"ircEvent": "PRIUUCG", "method": "deleteURI", "regex": "^delete.*"}';
               var myObject = eval('(' + myJSONtext + ')');
               alert(myObject.ircEvent); //alert信息: PRIUUCG
          如： var myObject2 = eval('({ircEvent: "PRIUUCG", method: "delete"})'); //名称也可以不用引號括起來
               alert(myObject2.ircEvent); //alert信息: PRIUUCG
       4) 基于安全的考虑的 JSON 解析器。
          eval 函数非常快，但是它可以编译任何 javascirpt 代码，这样的话就可能产生安全的问题。
          eval 的使用是基于传入的代码参数是可靠的假设的，有一些情况下，可能客户端是不可信任的。
          一个 JSON 解析器将只接受 JSON 文本。所以是更安全的。
          如： var myObject = JSON.parse(myJSONtext, filter);
               可选的 filter 参数将遍历每一个 value key 值对， 并进行相关的处理。
          如： myData = JSON.parse(text, function (key, value) {
                  return key.indexOf('date') >= 0 ? new Date(value) : value;
               });

    18.匿名函数与 Module 模式
       JavaScript 的任何变量，函数或是对象，除非是在某个函数内部定义，否则，就是全局的。
       意味着同一网页的别的代码可以访问并改写这个变量(ECMA 的 JavaScript 5 已经改变了这一状况 - 译者)
       使用匿名函数，你可以绕过这一问题。
       比如，你有这样一段代码，很显然，变量 name, age, status 将成为全局变量:
       var name = 'Chris';
       var age = 18;
       function createMenber() {
            // ...
       }
       function getMenber() {
            // ...
       }
       为了避免这一问题，你可以使用匿名函数:
       var myApp = function() {
            var name = 'Chris';
            var age = 18;
            // 如果在函数里面再定义函数,建议如下写法,如果写“function createMenber(){...}”则IE7会报错
            var createMenber = function() {
                // ...
            }
            var getMenber = function() {
                // ...
            }
       }();
       如果这个函数不会被再次调用，可以连这个函数的名称也省了，更直接写为:
       (function() {
            var name = 'Chris';
            var age = 18;
            var createMenber = function() {
                // ...
            }
            var getMenber = function() {
                // ...
            }
       }) ();
       如果要访问其中的对象或函数，可以:
       var myApp = function() {
            var name = 'Chris';
            var age = 18;
            return {
                createMenber: function() {
                    // ...
                }
                getMenber: function () {
                    // ...
                }
            }
       } ();
      // myApp.createMenber() 和 myApp.getMenber() 可以使用
      所谓 Module 模式或单例模式(Singleton)，假如你想在别的地方调用里面的方法，可以在匿名函数中返回这些方法，甚至用简称返回：
      var myApp = function() {
          var name = 'Chris';
          var age = 18;
          var createMenber = function () {
              // ...
          }
          var getMenber = function () {
              // ...
          }
          return {
              create:createMenber,
              get:getMenber
          }
      } ();
      // myApp.create() 和 myApp.get() 可以使用

    19.事件委托
       事件是JavaScript非常重要的一部分。
       我们想给一个列表中的链接绑定点击事件，一般的做法是写一个循环，给每个链接对象绑定事件，HTML代码如下：

     

Great Web resources

     

         
• Opera Web Standards Curriculum

         
• Sitepoint

         
• A List Apart

         
• YUI Blog

         
• Blame it on the voices

         
• Oddly specific

     

      脚本如下：
      // Classic event handling example
      (function(){
          //回调函数
          var handler = function (e){
            e = e || window.event;
            //获取事件源
            var x = e.target || e.srcElement; // Get the link that was clicked
            alert('Event delegation:' + x);
            //屏蔽Form提交事件
            if ( e.returnValue ) e.returnValue = false; //for IE
            if ( e.preventDefault ) e.preventDefault(); //for Firefox
          };
          var resources = document.getElementById('resources');
          var links = resources.getElementsByTagName('a'); // Dom 对象下获取子对象
          var all = links.length;
          // Attach a listener to each link
          for(var i=0;i               if ( resources.attachEvent ) {
                  resources.attachEvent('onclick',handler);
              }
              else if ( resources.addEventListener ) {
                  resources.addEventListener('click',handler,false);
              }
          };
      })();

      更合理的写法是只给列表的父对象绑定事件，代码如下：
      (function(){
          var handler = function (e) {
            e = e || window.event;
            var x = e.target || e.srcElement;
            // get the link tha
            if ( x.nodeName.toLowerCase() === 'a' ) {
                alert('Event delegation:' + x);
                //屏蔽Form提交事件
                ( e.preventDefault ) ? (e.preventDefault()) : (e.returnValue = false);
            }
          };
          var resources = document.getElementById('resources');
          resources.onclick = handler; //也可以像上面用 addEventListener 和 attachEvent 添加 onclick 事件
      })();

    20.window.open() 子窗口控制
       // 窗口参数,控制位置和大小、显示等
       var param = 'top='+(screen.height-pHeight)/2+',left='+(screen.width-pWidth)/2+',width='+ pWidth +',height=' + pHeight + ',resizable=yes,scrollbars=yes,location=no, status=no';
       // 参数解释:
       height=100 窗口高度； // 这里 pHeight 需要先设定参数值
       width=400 窗口宽度；  // 这里 pWidth  需要先设定参数值
       top=0 窗口距离屏幕上方的象素值； //top=(screen.height-pHeight)/2 和 left=(screen.width-pWidth)/2 让窗口居中显示
       left=0 窗口距离屏幕左侧的象素值；
       toolbar=no 是否显示工具栏，yes为显示；
       menubar，scrollbars 表示菜单栏和滚动栏。
       resizable=no 是否允许改变窗口大小，yes为允许；
       location=no 是否显示地址栏，yes为允许；
       status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；
       // 子窗口网址
       var url = "test.html";
       var pName = "windowsName" // 子窗口的名称: 如果子窗口名称相同,会覆盖旧的窗口
       // 打开窗口,返回子窗口对象
       var win = window.open(url,pName,param);
       // 父窗口控制子窗口的对象
       win.window.document.getElementById("productName").innerHTML = "<%=prod.Name%>";
       // 父窗口调用子窗口的函数
       win.testFun();

       // 子窗口控制父窗口
       window.opener.window.document.getElementById("bnt").value = "重新查看";
       // 子窗口调用父窗口的函数
       window.opener.testfun();

       注意:父窗口刚打开子窗口时马上对它进行赋值或者调用其函数等操作可能会失败,因为子窗口未完全加载
            需要这样做时,最好在子窗口写加载的js,再调用父窗口; 以免操作失败。

    21.URL编程
       javascript允许直接在URL地址栏写程序，这令js做的验证全部都是不安全，必须后台在验证一次。
       如，在一个页面的地址栏输入：“javascript:alert(55);”，那页面即可执行 alert 函数，同理也可执行任意的js函数。
       利用这点，标签的地址也可以编程，如：“”

    22.页面的script结束符问题
       如下写法，html页面不会alert,反而会在页面上显示“');”的内容
        ');
       

       因为浏览器把alert的字符串中的“”解析成结束符了，需要“\”转换一下，如下写成能正常：
       

    23.z-index(zIndex)涂层使用
       在css里面用 z-index, 而javascript里面用 zIndex, 如：
       

...

       

       z-index(zIndex) 默认为0,(其实打印的时候为空),涂层的数值越大越往上，也就是显示时覆盖涂层低的。
       注意：IE6上，层级会影响涂层，按先后出现的顺序来绝定层的堆叠顺序，不同层级的元素需要设置祖先元素(上溯到同层级为止)的z-index才生效。

    24. iframe 的操作
        1) 获得 iframe 的 window 对象。存在跨域访问限制。
            chrome:  iframeElement. contentWindow
            firefox: iframeElement.contentWindow
            ie6: iframeElement.contentWindow

            function getIframeWindow(element){
                return  element.contentWindow;
                //return  element.contentWindow || element.contentDocument.parentWindow;
            }

        2) 获得 iframe 的 document 对象。存在跨域访问限制。
            chrome:  iframeElement.contentDocument
            firefox: iframeElement.contentDocument
            ie:  iframeElement.contentWindow.document // ie没有 iframeElement.contentDocument 属性。

            var getIframeDocument = function(element) {
                return  element.contentDocument || element.contentWindow.document;
            };

        3) iframe 中获得父页面的 window 对象。存在跨域访问限制。
            父页面：window.parent
            顶层页面：window.top
            适用于所有浏览器

        4) iframe的 onload 事件
            非ie浏览器都提供了 onload 事件。例如下面代码在ie中是不会有弹出框的。
            var ifr = document.createElement('iframe');
            ifr.src = 'http://www.b.com/index.html';
            ifr.onload = function() {
                alert('loaded');
            };
            document.body.appendChild(ifr);

            但是ie却又似乎提供了onload事件，下面两种方法都会触发onload
            //方法一：
           

            //只有ie才支持为createElement传递这样的参数
            var ifr = document.createElement('');
            document.body.appendChild(ifr);由于iframe元素包含于父级页面中，因此以上方法均不存在跨域问题。

            实际上IE提供了 onload 事件，但必须使用attachEvent进行绑定。所以最好的 onload事件写法如下：

            var ifr = document.createElement('iframe');
            ifr.src = 'http://b.a.com/b.html';
            var loaded_fun = function(){ alert('loaded'); }; // 要执行的 onload 事件
            if (ifr.attachEvent) {
                ifr.attachEvent('onload', loaded_fun );
            } else {
                ifr.onload = loaded_fun;
            }
            document.body.appendChild(ifr);

        5) frames
            window.frames 可以取到页面中的帧( iframe, frame 等)，需要注意的是取到的是 window 对象，而不是 HTMLElement 。
            var ifr1 = document.getElementById('ifr1');
            var ifr1win = window.frames[0];
            ifr1win.frameElement === ifr1;   // true
            ifr1win === ifr1;    // false

    25. 反射
        在JavaScript中能利用 for in 语句实现反射,如：
        // 下面这段语句遍历obj对象的所有属性和方法
        for (var p in obj) {
            if (typeof(obj[p]=="function") {
                obj[p](); // 执行函数,也还可以传参数
            } else {
                alert(obj[p]);
            }
        }

        obj.函数名(参数列表); // 这样执行函数，可以使用下面的反射形式来代替
        obj["函数名"](参数列表);

    26. 过滤数组的重复值
        /**
         * 返回没有重复值的新数组,原数组不改变
         * @return 返回过滤重复值后的新数组
         *
         * @example
         *  var arr = ['a', 'b', 'c', 'd', 'c', null];
         *  var arr2 = arr.unique(); // arr2 为: ['a', 'b', 'd', 'c', null]
         */
        Array.prototype.unique = function() {
            var result = [];
            // 注意学习此算法
            for (var i=0,l=this.length; i                 for (var j=i+1; j                     if (this[i] === this[j]) j = ++i;
                }
                result.push(this[i]);
            }
            return result;
        };