js-精华

当前页面刷新
        document.location.reload();


checkbox选中
        function selectCheckbox( checkboxName ) {
            var bln_select = true;

            if( $('input[type=checkbox][name='+checkboxName+']:first').attr('checked')==true ) {
                bln_select = false;
            }
            $('input[type=checkbox][name='+checkboxName+']').each(function() {
                $(this).attr('checked',bln_select);
             }
            )
        }

        function getSelectedCheckboxVal( checkboxName ) {
            var checkboxVal = '';
            $('input[type=checkbox][name='+checkboxName+']').each(function() {
                if( $(this).attr('checked')==true ) {
                    checkboxVal += $(this).val()+',';
                }
             }
            )
            return checkboxVal;
        }


页面跳转
        // 时间设定
        setTimeout( function() {
          history.back(-1);
        },
        3000
        );

        // 直接跳转
        document.location.href = jumpUrl;


页面执行js函数, 遇到执行后页面莫名刷新问题, 在执行语句后加 return false;
       <div onclik='submitForm();return false;' />


变量使用必须先定义
       局部变量一定要加上 var
       var myVar
       myArray = new Array();


检查变量是否定义
       if (typeof(myVar) == 'undefined') {
           ...
       }


输出
       alert();
       document.write();


遍历数组
       for(key in myArray) {
           value = myArray[key];
           //document.write(key+':'+value+'<br/>');
       }

       //递归遍历数组
       function dumpArray(myArray)
       {
           for(key in myArray) {
               value = myArray[key];
               if (typeof value == 'object') {
                   dumpArray(value);
               } else {
                   document.write(key+':'+value+'<br/>');
               }
           }  
       }

       // jqurey支持 迭代数组和对象
       function each( data )
       {
           $.each(data, function(method, value) {
               var space = '';
               if ( typeof value != 'object' ) {
                   document.write('----'+method+':'+value+'      <br/>');          
               } else {
                   document.write('<br/>'+method+':'+value+'<br/>');
                   each(value);          
               }      
           });
       }


typeof      返回数据类型
instanceof 检查对象类型
void        返回未定义的值
in          检查一个属性是否存在 左边为字符串 右边为对象或数组

undefined   缺少值
null        无对象的值


数组直接量
       var a = [1.2, "JavaScript", true, { x:1, y:3 }];
       var matrix = [[1,2,3], [4,5,6], [7,8,9]];


函数直接量定义

       函数是数据类型 可以被存储在变量 数组 和对象中,而且函数还可以作为参数传递给其他函数
      
       var square = function(x) {return x*x;}


对象直接量

       对象是已命名的数据的集合 这些已命名的数据通常被作为对象的属性来引用
       用句号引用 .
       对象名.属性名
       属性可以是任何类型的数据 包括数组 函数以及其他的对象
       如果一个函数值是存储在某个对象的属性中的 那么那个函数通常被称为方法 属性名也就变成了方法名
       要调用一个对象的方法 就要使用 '.'语法将函数值从对象中提取出来 然后再使用 '()'语法调用那个函数
      
       var Prototype = {
          Version: '1.5.1.1',

          Browser: {
           IE:     !!(window.attachEvent && !window.opera),
           Opera: !!window.opera
          },

          BrowserFeatures: {
           XPath: !!document.evaluate,
           ElementExtensions: !!window.HTMLElement,
           SpecificElementExtensions:
              (document.createElement('div').__proto__ !==
               document.createElement('form').__proto__)
          },

          ScriptFragment: '<script[^>]*>([\\S\\s]*?)<\/script>',
          JSONFilter: /^\/\*-secure-([\s\S]*)\*\/\s*$/,

          emptyFunction: function() { },
          K: function(x) { return x }
       }


for/in

        遍历对象属性
        对象的一个属性名会被作为字符串赋给变量varibale
        可以使用这个变量和 '[]' 运算符查询该对象属性的值
        for(variable in object) {
           statement
        }


加载文件

       <script type='text/javascript' src='jquery.js'></script>
       <script type='text/javascript'>
       </script>


空链接

       <a href='javascript:void(0);'></a>


跳转
        document.location.href = jumpUrl;


表单提交

       document.formName.submit();


获取页面元素

        以ID名获取:
        document.getElementById("objId");

        以NAME名获取:
        document.getElementByName("objName");

        以Class名获取:
        document.getElementsByClassName("objClass");

        以表单名获取:
        document.getElementsByTagName("objHtml");


联动菜单

       选中值
               this.options[this.selectedIndex].value
               <select name="province" id="province" onchange="if(this.value != '') setCity(this.options[this.selectedIndex].value);">

               $(this).val() //jquery方法
               <select name="province" id="province" onchange="if(this.value != '') setCity($(this).val());">              

      
       创建 Option 的语法

               var newOption = new Option(optionText, optionvalue);

               optionText 即下拉框中我们看到的选项，而 optionvalue 则是提交的实际值


       确定选项的格式

               为了保持一致, 确定选项的格式为

                       {txt:"选项名", val:"选项值"}

                       var childArr = [];

                       childArr['父选项值1'] = [
                           {txt:"选项名1", val:"选项值1"},
                           {txt:"选项名2", val:"选项值2"},
                           {txt:"选项名3", val:"选项值3"},
                           ...
                           {txt:"选项名n", val:"选项值n"}
                       ]

                       childArr['父选项值2'] = [
                           {txt:"选项名1", val:"选项值1"},
                           {txt:"选项名2", val:"选项值2"},
                           {txt:"选项名3", val:"选项值3"},
                           ...
                           {txt:"选项名n", val:"选项值n"}
                       ]


       根据传入的数组创建选项列表

               for (var i=0; i < len; i++)
               {
                   selectObj.options[i] = new Option(optionList[i].txt, optionList[i].val);
               }


       在设置选项之前，需要先将原有选项清空

               function removeOptions(selectObj)
               {
                   if (typeof selectObj != 'object')
                   {
                       selectObj = document.getElementById(selectObj);
                   }

                   // 原有选项计数
                   var len = selectObj.options.length;

                   for (var i=0; i < len; i++)
                   {
                       // 移除当前选项
                       selectObj.options[0] = null;
                   }
               }

               注意，这里不是用 selectObj.options[i] 而是用的 selectObj.options[0] ，
               由于在 options[0] 删除后，后面的选项就会补上，因此，只需要 selectObj.options[0] = null


       设置一个提示选择项和默认选择项

               /**
               * 说明：将指定下拉列表的选项值清空
               * 作者：CodeBit.cn ( http://www.CodeBit.cn )
               *
               * @param {String || Object]} selectObj 目标下拉选框的名称或对象，必须
               */
               function removeOptions(selectObj)
               {
                   if (typeof selectObj != 'object') {
                       selectObj = document.getElementById(selectObj);
                   }
                   // 原有选项计数
                   var len = selectObj.options.length;
                   for (var i=0; i < len; i++)
                   {
                   // 移除当前选项
                       selectObj.options[0] = null;
                   }

               }

               /**
               * 说明：设置传入的选项值到指定的下拉列表中
               * 作者：CodeBit.cn ( http://www.CodeBit.cn )
               *
               * @param {String || Object]} selectObj 目标下拉选框的名称或对象，必须
               * @param {Array} optionList 选项值设置 格式：[{txt:'北京', val:'010'}, {txt:'上海', val:'020'}] ，必须
               * @param {String} firstOption 第一个选项值，如：“请选择”，可选，值为空
               * @param {String} selected 默认选中值，可选
               */
               function setSelectOption(selectObj, optionList, firstOption, selected)
               {
                   if (typeof selectObj != 'object') {
                       selectObj = document.getElementById(selectObj);
                   }
                   // 清空选项
                   removeOptions(selectObj);  

                   // 选项计数
                   var start = 0;

                   // 如果需要添加第一个选项
                   if (firstOption) {
                       selectObj.options[0] = new Option(firstOption, '');  

                       // 选项计数从 1 开始
                       start ++;
                   }

                   var len = optionList.length;  

                   for (var i=0; i < len; i++)   {

                       // 设置 option
                       selectObj.options[start] = new Option(optionList[i].txt, optionList[i].val);      

                       // 选中项
                       if (selected == optionList[i].val) {
                           selectObj.options[start].selected = true;
                       }  

                       // 计数加 1
                       start ++;

                   }

               }

               function setCity(province)
               {
                   setSelectOption('city', cityArr[province], '-请选择-');

               }