前端框架JavaScript - 常规操作
前端框架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>
2-JQ-each循环.txt
$.each(selectedArray, function (i, u) { selectedtexts += selectedArray[i].text + ','; });
3-JQ-grep选择其中符合条件的
var arr = $.grep(userOperationJsonArray, function (n, i) { return n.iselected == '0' && n.zuid == '0'; }); arr[0]
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())
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; });
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;
7-JQ-a标签中href不起做用
<a href="javascript:void(0);" onclick="openFile();" target="_blank">最简单在线打开保存Word文件（URL地址方式）</a>
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; }
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>
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);
}
});
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"; }
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);
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);//值改变时 自动重新计算 征地总费用 })
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);
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; }
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)); }); } }; };
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(',,',','); }
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; }
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]
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 { //未选择文件 } },
end
