前端框架JavaScript - 常规操作

1. 浏览器宽度高度

 <script type="text/javascript">
        $(function () { 
            alert($(window).height()); //浏览器时下窗口可视区域高度 
            alert($(document).height()); //浏览器时下窗口文档的高度 
            alert($(document.body).height());//浏览器时下窗口文档body的高度 
            alert($(document.body).outerHeight(true));//浏览器时下窗口文档body的总高度 包括border padding margin 

            alert($(window).width()); //浏览器时下窗口可视区域宽度 
            alert($(document).width());//浏览器时下窗口文档对于象宽度 
            alert($(document.body).width());//浏览器时下窗口文档body的高度 
            alert($(document.body).outerWidth(true));//浏览器时下窗口文档body的总宽度 包括border padding mar
             
        });
    </script>

View Code

2-JQ-each循环.txt

 $.each(selectedArray, function (i, u)
            {
                selectedtexts += selectedArray[i].text + ',';
            });

View Code

3-JQ-grep选择其中符合条件的

var arr = $.grep(userOperationJsonArray, function (n, i)
        {
            return n.iselected == '0' && n.zuid == '0';
        });

arr[0]

View Code

4-JQ-数组

在前提不知道b在这个数组的下标，删除b这个元素 


var arrList = ['a','b','c','d']; 
       
arrList.splice(jQuery.inArray('b',arrList),1); 


alert(arrList); 


其中jQuery.inArray('b',arrList)是b这个元素在数组arrList 中的位置 
splice(index,1)函数中第一个参数index是要删除元素在数组中的位置，第二个参数是要删除的数量。 


Array对象的方法有： 
concat() 连接两个或更多的数组，并返回结果。 
join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。 
pop() 删除并返回数组的最后一个元素。 
push() 向数组的末尾添加一个或更多元素，并返回新的长度。 
reverse() 颠倒数组中元素的顺序。 
shift() 删除并返回数组的第一个元素 
slice() 从某个已有的数组返回选定的元素 
sort() 对数组的元素进行排序 
splice() 删除元素，并向数组添加新元素。 
toSource() 返回该对象的源代码。 
toString() 把数组转换为字符串，并返回结果。 
toLocaleString() 把数组转换为本地数组，并返回结果。 
unshift() 向数组的开头添加一个或更多元素，并返回新的长度。 
valueOf() 返回数组对象的原始值。 


var arrList = new Array();


arrList.push("abc");


var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"


document.write(arr.join())

View Code

5-JQ-字符串拆分

   var queryTexts = $.grep(_control_tbl_5_jbxx_detail.text('detail_txt_query_tbl_5_jbxx_detail').split(/[ ]/), function (u, i) { return u.length > 0; });

View Code

6-JQ-return用法

关于javascript中的 return false和return true 2008年12月22日 星期一 下午 09:31
return 是javascript里函数返回值的关键字，
一个函数内处理的结果可以使用return 返回，
这样在调用函数的地方就可以用变量接收返回
结果。return 关键字内任何类型的变量数据或表达式
都可以进行返回，甚至什么都不返回也可以比如
function NullReturn(IsNull)
{
if(IsNull==true)
{
return;
}
}
这样写也是可以的，这里的意思是返回空(null)
所以有的时候return 的作用就是用来终止函数执行。
比如
<html>
<head>
<title>return验证测试</title>
<script language="javascript">
function Login_Click()
{
if(document.form1.UsName.value=="")
{
alert('用户名为空');
}
if(document.form1.UsPwd.value=="")
{
alert('密码为空');
}
alert('登陆成功');
}
</script>
</head>
<body>
<form name="form1">
<input type="text" name="UsName" >用户名
<input type="password" name="UsPwd">密码
<input type="button" name="Login" onClick="Login_Click();" >登陆
</form>
</body>
</html>
不加return 的情况
加return
<html>
<head>
<title>return验证测试</title>
<script language="javascript">
function Login_Click()
{
if(document.form1.UsName.value=="")
{
alert('用户名为空');
return;
}
if(document.form1.UsPwd.value=="")
{
alert('密码为空');
return;
}
alert('登陆成功');
}
</script>
</head>
<body>
<form name="form1">
<input type="text" name="UsName" >用户名
<input type="password" name="UsPwd">密码
<input type="button" name="Login" onClick="Login_Click();" >登陆
</form>
</body>
</html>
 
运行就会发现加return 和不加return 的区别，
最简单的测试办法，上面的两个例子什么都不输入直接登陆，楼主就明白了。
 
不加return的现象是先提示用户名没输入，然后提示密码没输入；加了return之后遇到一个没输入之后就不再继续检测
 
return false表示返回一个false值，也就是说提交是不成功的，就是不会提交上去。
return true表法返回一个true值，也就是提交了，不管你输入没有输入值，都会提交到action指定页面。







 
return true相当于continue;

return false相当于break;

View Code

7-JQ-a标签中href不起做用

<a href="javascript:void(0);" onclick="openFile();" target="_blank">最简单在线打开保存Word文件（URL地址方式）</a>

View Code

8-JQ-获取页面传参

       function requestQuery(name)
        {
            var resultString = '';
            var source = window.location.href.trimEnd('#');

            if (source.indexOf('#') > -1)
            {
                source = source.split('#')[0];
            }

            var reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)", "i");

            if (reg.test(source))
            {
                resultString = decodeURIComponent(RegExp.$2);

                if (resultString.indexOf('#') > -1)
                {
                    resultString = resultString.substr('#')[0];
                }
            }
            else
            {
                resultString = "";
            }

            return resultString;
        }

View Code

9-JQ-取整

<script language="javascript"> 

var uu=Math.floor(5.36) //向下取整 
结果为5 

var uu=Math.floor(5.88) 
//结果为5 


Math.ceil(5.33) //向上取整，
结果为6 


Math.round(5.55) //四舍五入 
结果为6 

math.round(5.22) //结果为5 

</script>

View Code

10-JQ-AJAX调用Service

  
    var filepath = _upShpOutPutConfig + initUpShpOutPutPath(_buttonDisableStateJson.shpid) + _resultHtmlMap.get(key) + ".xml";
    $.ajax({
        type: 'post',
        contentType: 'application/json',
        url: _landusespServiceUrl + 'GetReport',
        data: '{"xmlpath":\'' + filepath + '\'}',
        dataType: 'json',
        success: function (result)
        {
            var ajaxResultJson = (new Function("", "return " + result.d))();
            if (ajaxResultJson.result == 'true')
            {
                window.open(ajaxResultJson.message, '_blank');
                hiddenBlock(_windowString);
            }
            else
            {
                hiddenBlock(_windowString);

                alert(ajaxResultJson.message);
            }

            result = null;
            GC();

        },
        error: function (error)
        {
            hiddenBlock(_windowString);
            alert(error.responseText);
        },
        complete: function (XMLHttpRequest, textStatus)
        {
            clearXmlHttpRequest(XMLHttpRequest);
        }

    });

View Code

11-JQ-默认加载

$(document).ready(function ()
{
    t_usergroup_detail_Obj.init();
});




        window.onload = function () {
            window.location = "http://qtfw.tjfdc.com.cn/sara.cc.tjgttw/web/index.html";
        }

View Code

12-JQ-ul增加li标签

var $li = document.createElement('li');
                $li.innerHTML = tempText;
                $($li).addClass('unchecked');
                $($li).attr("aidvalue", tempVal);
                $($li).attr("onclick", "tbl_jgtj_list_Obj.btn_queryList_li_checked_onclick(this);");

                $('#ol_query_list').append($li);

View Code

13-JQ-控件触发事件

///合计 征地总费用 的算法
var countzfy_click = function () {
 

};


$(function () {

    $('#detail_txt_f_qmbcf_tbl_110_zstdfa_v2_detail').bind('input propertychange', countzfy_click);//值改变时 自动重新计算 征地总费用 
    $('#detail_txt_f_fzwbcf_tbl_110_zstdfa_v2_detail').bind('input propertychange', countzfy_click);//值改变时 自动重新计算 征地总费用 

})

View Code

15-JQ-选择器

            var userSpans = $('#div_pyrxs_name>span').not('.hidden');
            $.each(userSpans, function (i, u) { f_tjyxdcrx += u.innerText + ','; f_tjyxdcrxid += $(u).attr('uid') + ','; });

            tbl_kh_bm_pyrx_detail.f_tjyxdcrx = f_tjyxdcrx.trimEnd(',');
            tbl_kh_bm_pyrx_detail.f_tjyxdcrxid = f_tjyxdcrxid.trimEnd(',');

            tbl_kh_bm_pyrx_detail.f_pyyj = controlObj.text('detail_txt_f_pyyj_tbl_kh_bm_pyrx_detail');

            callBackFunction.success(tbl_kh_bm_pyrx_detail);

View Code

16-JQ-金额小写转大写

    //金额小写转大写
    this.atoc = function (numberValue) {
        var numberValue = new String(Math.round(numberValue * 100)); // 数字金额
        var chineseValue = ""; // 转换后的汉字金额
        var String1 = "零壹贰叁肆伍陆柒捌玖"; // 汉字数字
        var String2 = "万仟佰拾亿仟佰拾万仟佰拾元角分"; // 对应单位
        var len = numberValue.length; // numberValue 的字符串长度
        var Ch1; // 数字的汉语读法
        var Ch2; // 数字位的汉字读法
        var nZero = 0; // 用来计算连续的零值的个数
        var String3; // 指定位置的数值
        if (len > 15) {
            alert("超出计算范围");
            return "";
        }
        if (numberValue == 0) {
            chineseValue = "零元整";
            return chineseValue;
        }
        String2 = String2.substr(String2.length - len, len); // 取出对应位数的STRING2的值
        for (var i = 0; i < len; i++) {
            String3 = parseInt(numberValue.substr(i, 1), 10); // 取出需转换的某一位的值
            if (i != (len - 3) && i != (len - 7) && i != (len - 11) && i != (len - 15)) {
                if (String3 == 0) {
                    Ch1 = "";
                    Ch2 = "";
                    nZero = nZero + 1;
                }
                else if (String3 != 0 && nZero != 0) {
                    Ch1 = "零" + String1.substr(String3, 1);
                    Ch2 = String2.substr(i, 1);
                    nZero = 0;
                }
                else {
                    Ch1 = String1.substr(String3, 1);
                    Ch2 = String2.substr(i, 1);
                    nZero = 0;
                }
            }
            else { // 该位是万亿，亿，万，元位等关键位
                if (String3 != 0 && nZero != 0) {
                    Ch1 = "零" + String1.substr(String3, 1);
                    Ch2 = String2.substr(i, 1);
                    nZero = 0;
                }
                else if (String3 != 0 && nZero == 0) {
                    Ch1 = String1.substr(String3, 1);
                    Ch2 = String2.substr(i, 1);
                    nZero = 0;
                }
                else if (String3 == 0 && nZero >= 3) {
                    Ch1 = "";
                    Ch2 = "";
                    nZero = nZero + 1;
                }
                else {
                    Ch1 = "";
                    Ch2 = String2.substr(i, 1);
                    nZero = nZero + 1;
                }
                if (i == (len - 11) || i == (len - 3)) { // 如果该位是亿位或元位，则必须写上
                    Ch2 = String2.substr(i, 1);
                }
            }
            chineseValue = chineseValue + Ch1 + Ch2;
        }
        if (String3 == 0) { // 最后一位（分）为0时，加上“整”
            chineseValue = chineseValue + "整";
        }
        return chineseValue;
    }

View Code

17-JQ-初始化日期控件到只到月份

var controlObj = new function () {

    //初始化日期格式的 控件 - 只到月份 例：2017-08 
    this.dateBoxInitMouth = function (id) {


        var db = $('#' + id);
        db.datebox({
            onShowPanel: function () {//显示日趋选择对象后再触发弹出月份层的事件，初始化时没有生成月份层
                span.trigger('click'); //触发click事件弹出月份层
                //fix 1.3.x不选择日期点击其他地方隐藏在弹出日期框显示日期面板
                if (p.find('div.calendar-menu').is(':hidden')) p.find('div.calendar-menu').show();
                if (!tds) setTimeout(function () {//延时触发获取月份对象，因为上面的事件触发和对象生成有时间间隔
                    tds = p.find('div.calendar-menu-month-inner td');
                    tds.click(function (e) {
                        e.stopPropagation(); //禁止冒泡执行easyui给月份绑定的事件
                        var year = /\d{4}/.exec(span.html())[0]//得到年份
                        , month = parseInt($(this).attr('abbr'), 10); //月份，这里不需要+1
                        db.datebox('hidePanel')//隐藏日期对象
                        .datebox('setValue', year + '-' + month); //设置日期的值
                    });
                }, 0);
                yearIpt.unbind();//解绑年份输入框中任何事件
            },
            parser: function (s) {
                if (!s) return new Date();
                var arr = s.split('-');
                return new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, 1);
            },
            formatter: function (d) { return d.getFullYear() + '-' + (d.getMonth() + 1);/*getMonth返回的是0开始的，忘记了。。已修正*/ }
        });
        var p = db.datebox('panel'), //日期选择对象
            tds = false, //日期选择对象中月份
            aToday = p.find('a.datebox-current'),
            yearIpt = p.find('input.calendar-menu-year'),//年份输入框
            //显示月份层的触发控件
            span = aToday.length ? p.find('div.calendar-title span') ://1.3.x版本
            p.find('span.calendar-text'); //1.4.x版本
        if (aToday.length) {//1.3.x版本，取消Today按钮的click事件，重新绑定新事件设置日期框为今天，防止弹出日期选择面板

            aToday.unbind('click').click(function () {
                var now = new Date();
                db.datebox('hidePanel').datebox('setValue', now.getFullYear() + '-' + (now.getMonth() + 1));
            });
        }
    };
};

View Code

18-JQ-ajax动态生成CheckBox 复选框

版权声明：本文为博主原创文章，未经博主允许不得转载。
 
json
[
{"ID":1,"value":"首页"},
{"ID":2,"value":"滚动"},
{"ID":3,"value":"公告"}
]

function CreateAjaxCheckBox(Obj,strParaList,url)
{
 $.post(url, function (data) {
 var response = eval("(" + data + ")"); //转换为json对象   
 var listHtml=''; 
$.each(response,function(i){ 
  
    if(response[i].value!="")
    {
  
    listHtml += " <input type='checkbox' "+(strParaList!=""?(strParaList.indexOf(","+response[i].Id+",") >= 0?"checked='checked'":""):"")+" name='"+Obj+"' id='"+Obj+response[i].Id+"' value='"+response[i].Id+"'>"+response[i].value; 
    } 
    
    }); 
    
    $("#"+Obj).html(listHtml); 
 
});
        


}

获取值
function GetCheckBoxList(Obj)
{


 var s="";
 var r=document.getElementsByName(Obj);  
 for(var i=0;i<r.length;i++){
         if(r[i].checked){
           s+=r[i].value+",";
       }
}   
return (s!=''?(','+s+',').replace(',,',','):'').replace(',,',',');


}

View Code

19-JQ-日期间隔

function GetDateDiff(startDate,endDate)  
{  
    var startTime = new Date(Date.parse(startDate.replace(/-/g,   "/"))).getTime();     
    var endTime = new Date(Date.parse(endDate.replace(/-/g,   "/"))).getTime();     
    var dates = Math.abs((startTime - endTime))/(1000*60*60*24);     
    return  dates;    
}

View Code

22-JQ-map数组操作

var controls=[{
id:12,
text:'数据12'
},{
id:13,
text:'数据13'
}]

var ctlID = $.map(controls, function (a, index) { return a.id; });  


ctlID=[12,13]

View Code

ES6 二维数组合并成一维数组

参考：https://blog.csdn.net/Syleapn/article/details/98772840

 Object.values( arrlist).flat(Infinity);

ES6 类、父子类继承、构造函数、静态类、异步方法

例：

父类：

class OpeBase {
  constructor(_myColl) {
    this.myColl = _myColl;
  }

  //批量增加
  bulkInsert = (arr) => this.myColl.bulkInsert(arr);

  //新增/修改
  atomicUpsert = (obj) => this.myColl.atomicUpsert(obj);

  //删除
  removeOne = (id) => this.myColl.findOne(id).remove();

  //删除
  removeArr = (ids) => this.myColl.findByIds(ids).remove();

  //清理
  clear = () => this.myColl.find().remove();

  //查找
  findOne = async (id) => await this.myColl.findOne(id).exec();

  //查找 
  findArr = async (ids) => await this.myColl.findByIds(ids);

  //查找
  findAll = async () => await this.myColl.find().exec();
}
export default OpeBase;

子类：（错误）

class OpsSence extends OpeBase {
  async constructor(_myColl) {
    let mydb = await Database.get();
    let _myColl = mydb.sence;
    super(_myColl);
    this.myColl = _myColl;
  }

  getModelUrl = (senceInfo) => {}
}

export default OpsSence;

注意：

1. super 必须写在 this 前面。

2. 构造函数 constructor（），不可使用async/await 变成异步方法。

使用：

let opsSence = await new opsSence();

需求：在构造函数中想要调用异步方法。

子类修正：

class OpsSence extends OpeBase {
  constructor(_myColl) {
    super(_myColl);
    this.myColl = _myColl;
  }

  static async build() {
    let mydb = await Database.get();
    let _myColl = mydb.sence;
    return new OpsSence(_myColl);
  }
  getModelUrl = (senceInfo) => {}
}
export default OpsSence;

解决方案：

1. 增加静态方法 build()，在方法中生成类的实例返回。

调用

    let opsSence = await OpsSence.build();

JS 动态引用、删除（卸载）js文件的引用

    <script>
 
      // loadjscssfile('myscript.js', 'js');
      // loadjscssfile('javascript.PHP', 'js');
      // loadjscssfile('mystyle.css', 'css');
      function loadjscssfile(filename, filetype, callback) {
        if (filetype == 'js') {
          var fileref = document.createElement('script');
          fileref.setAttribute('type', 'text/javascript');
          fileref.setAttribute('src', filename);
        } else if (filetype == 'css') {
          var fileref = document.createElement('link');
          fileref.setAttribute('rel', 'stylesheet');
          fileref.setAttribute('type', 'text/css');
          fileref.setAttribute('href', filename);
        }
        if (typeof fileref != 'undefined') {
          document.getElementsByTagName('head')[0].appendChild(fileref);
          fileref.onload = fileref.onreadystatechange = function () {
            if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') {
              fileref.onload = fileref.onreadystatechange = null;
              if (callback && typeof callback == 'function') {
                callback(); //window[callback]();如果传递字符串过来  调用window['函数名']() 调用方法
              }
            }
          };
        }
      }

      // removejscssfile('somescript.js', 'js');
      // removejscssfile('somestyle.css', 'css');
      //移动已经加载过的js/css
      function removejscssfile(filename, filetype) {
        var targetelement = filetype == 'js' ? 'script' : filetype == 'css' ? 'link' : 'none';
        var targetattr = filetype == 'js' ? 'src' : filetype == 'css' ? 'href' : 'none';
        var allsuspects = document.getElementsByTagName(targetelement);
        for (var i = allsuspects.length; i >= 0; i--) {
          if (
            allsuspects[i] &&
            allsuspects[i].getAttribute(targetattr) != null &&
            allsuspects[i].getAttribute(targetattr).indexOf(filename) != -1
          )
            allsuspects[i].parentNode.removeChild(allsuspects[i]);
        }
      }
    </script>

文件上传

    <button onclick="chooseFile.click()">上传文件</button>
    <input type="file" id="chooseFile" style="display:none;" @change="handleFileSelect">

    handleFileSelect() {
      var fileInput = document.getElementById('chooseFile');
      var files = fileInput.files;
      let types = ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']

      if (files.length > 0) {
        var file = files[0];

        // 判断文件类型
        if (!types.includes(file.type)) {
          return
        }

        const formData = new FormData();
        formData.append('parentId', this.parentId)
        formData.append('excel', file)

        fetch('https://localhost:8443/bim/GenerateElementsFromFile', {
          method: 'POST',
          body: formData,
        })
      } else {
        //未选择文件
      }
    },