工作中总结的一些前端问题解决方案

84 阅读 0 评论 56 点赞

我是靠谱客的博主辛勤飞鸟，这篇文章主要介绍工作中总结的一些前端问题解决方案，现在分享给大家，希望可以做个参考。

工作中总结了很多在前端遇到的问题，但是都零零散散的记录在笔记上，今天整理了一下。

计算两个月份之间相差天数

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var beginYear = $("select[name='beginYear'] option:selected").val();//获取开始年
var beginMonth = $("select[name='beginMonth'] option:selected").val();//获取开始月
var beginDay = $("select[name='beginDay'] option:selected").val();//获取开始日
var endYear = $("select[name='endYear'] option:selected").val();//获取结束日
var endMonth = $("select[name='endMonth'] option:selected").val();//获取结束日
var endDay = $("select[name='endDay'] option:selected").val();//获取结束日
var beginDate = beginYear+"-"+beginMonth+"-"+beginDay;//开始日期
var endDate = endYear+"-"+endMonth+"-"+endDay;//结束日期
var bDate = beginDate.split("-");
bDate = new Date(bDate[1] + '-' + bDate[2] + '-' + bDate[0]);  //转换为yyyy-MM-dd格式
var eDate = endDate.split("-");
eDate = new Date(eDate[1] + '-' + eDate[2] + '-' + eDate[0]);
days = parseInt(Math.abs(bDate - eDate) / 1000 / 60 / 60 / 24); //把相差的毫秒数转换为天数
alert(days);

利用JS验证特殊字符

复制代码

1
2
3
4
function containSpecial(s){      
    var containSpecial = RegExp(/[(》)(《)(“)(”)(】)(【)(？)(！)(，)(。)(；)(：)(‘)(’)(￥)( )( )(~)(!)(@)(#)($)(%)(^)(&)(*)(()())(-)(_)(+)(=)([)(])({)(})(|)(\)(;)(:)(')(")(,)(.)(/)(<)(>)(?)()]+/);      
    return (containSpecial.test(s));      
}

js修改下拉框值

复制代码

1
2
3
4
5
6
function changeHour(){//onchange事件
    var hour = document.getElementById("hour").value;
    var obj=document.getElementById("minute");
    obj.options.length = 0;//将下拉框清空
    obj.options.add(new Option("text","value"));//重新写入
}

js刷新当前页面

复制代码

1
window.location.reload(true);//保存成功后重新刷新页面

js数组sort()排序

复制代码

1
2
3
4
5
6
7
8
9
10
11
var arrDemo = new Array();
arrDemo[0] = 10;
arrDemo[1] = 50;
arrDemo[2] = 51;
arrDemo[3] = 100;
arrDemo.sort(); //调用sort方法后，数组本身会被改变，即影响原数组
alert(arrDemo);//10,100,50,51 默认情况下sort方法是按ascii字母顺序排序的，而非我们认为是按数字大小排序
arrDemo.sort(function(a,b){return a - b});//从小到大排序
alert(arrDemo);//10,50,51,100
arrDemo.sort(function(a,b){return b - a});//从大到小排序
alert(arrDemo);//100,51,50,10

结论：

1、数组调用sort方法后，会影响本身(而非生成新数组)

2、sort()方法默认是按字符来排序的，所以在对数字型数组排序时，不可想当然的以为会按数字大小排序！

3、要改变默认的sort行为(即按字符排序)，可以自行指定排序规则函数(如本例所示)

JS取整算法

1】丢弃小数部分,保留整数部分 parseInt(7/2)

2】向上取整,有小数就整数部分加1 Math.ceil(7/2)

3】四舍五入 Math.round(7/2)

4】向下取整 Math.floor(7/2)

浏览器兼容性处理

复制代码

1
2
3
4
var userAgent = navigator.userAgent;//取得浏览器的userAgent字符串
if(userAgent.toLowerCase().indexOf("firefox")>0||userAgent.toLowerCase().indexOf("chrome")>0){//如果是火狐或者谷歌
}else{//否则是IE浏览器
}

浏览器子窗体给父窗体赋值

复制代码

1
2
3
4
5
6
7

Window.open()方法
parent.opener.表单name/id属性值.所要赋值的id属性值.value = returnStr;
Window.showModalDialog()方法
var temp = window.showModalDialog(url,window,””);//父页面
window.returnValue = returnStr;//子页面
window.opener.location.href=window.opener.location.href;//刷新open打开的父窗体

浮层内嵌iframe及frame集合窗口，刷新父页面的多种方法

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script language=JavaScript>
    parent.location.reload();   
</script>
//弹出子页面
<script language=JavaScript>
    window.opener.location.reload();   
</script>
//子窗口刷新父窗口
<script language=JavaScript>
    self.opener.location.reload();   
</script>
//刷新以open()方法打开的窗口
<script language=JavaScript>
    window.opener.location.href=window.opener.location.href;   
</script>
//刷新以winodw.showModelDialog()方法打开的窗口
<script language="javascript">
    window.parent.dialogArguments.document.execCommand('Refresh');   
</script>

jQuery Ajax异步

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var checkUrl  =  ;    
var checkData  = ;
$.ajax({//校验是否已经存在预测项名称
async: false,//是否同步
type : "POST",
url : checkUrl,
data : JSON.parse(checkData),
    dataType : 'json',
    success : function(data) {
    
if(data.message == 1){//证明已经存在名称，不可重复添加
checkFlag = true;
}
return;
}
});

数组的使用

复制代码

1
2
3
4
5
6
7
var arr = new Array(); //定义一个数组
arr[0] = "1";//添加值
arr[1] = "2";
arr[2] = "3";
for(var i=0;i<arr.length;i++){//遍历数组
    arr[i] = arr[i];
}

Map的使用（//后面是对应Java中的使用）

复制代码

1
2
3
4
5
var map = {}; // Map map = new HashMap();
map[key] = value; // map.put(key, value);
var value = map[key]; // Object value = map.get(key);
var has = key in map; // boolean has = map.containsKey(key);
delete map[key]; // map.remove(key);

jQuery全选和全不选及获取选中checkbox的id值

复制代码

1
2
3
4
5
6
7
8
9
10
if($('#mi_0').is(':checked')){//如果全选按钮被勾上，则全选
    $("[name = miCheckBox]:checkbox").attr("checked", true);
    $('input[name="miCheckBox"]:checked').each(function(){  
        miId_array.push($(this).attr('id'));//向数组中添加元素
    });  
    var idstr=miId_array.join(',');//将数组元素连接起来以构建一个字符串  
    alert(idstr);
}else{//全不选
    $("[name = miCheckBox]:checkbox").attr("checked", false);
}

jQuery判断checkbox是否选中的3种方法

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
//方法一：
if ($("#checkbox-id")get(0).checked) {
    // do something
}
//方法二：
if($('#checkbox-id').is(':checked')) {
    // do something
}
//方法三：
if ($('#checkbox-id').attr('checked')) {
    // do something
}

JS实现Java的replaceAll方法

复制代码

1
2
3
4
5
function c3(){
var str = "1,2,3,4,5,6";
    var replaceStr = ",";
    alert(str.replace(new RegExp(replaceStr,'gm'),'-'));//利用正则表达式
}

jQuery控制checkbox是否选中和获取值

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$("input[type=checkbox][name='"+id+"']").attr('checked', 'true');
$(":checkbox[id='id']").attr("checked",false);
$(":checkbox[id='id']").prop("checked",false);
//输出选择的值
$('input[name="name "]:checked').each(function(){
    alert($(this).val());
});
//判断是否被选中
if($("input[id='ID']").is(':checked')){
    alert("选中");
}else{
    alert("未选中");
}
//全选控制
if($("input[id='ID']").is(':checked')){
    $("input[name='NAME']:checkbox").each(function(){
        $(this).prop("checked", true);    
    });
}else{
    $("input[name='NAME']:checkbox").each(function(){
        $(this).prop("checked", false);    
    });
}

jQuery通过name属性获取值

复制代码

1
2
3
$("input[name='name']").val()
$("select[name='name']").val()
$("input[name='planRadio']:checked").val();//获取radio按钮的值

jQuery 控制全局同步

复制代码

1
$.ajaxSetup ({ async: false });//控制全局为同步

jQuery验证字符串长度

复制代码

1
2
3
4
5
6
7
8
9
function checkLenth(){
    var name = $("#name").val();
//先把中文替换成两个字节的英文，在计算长度
    var len = name.replace(/[u0391-uFFE5]/g,"aa").length;
    if(len > 20){
        name = name.substring(0,10);
        $("#name").val(name);
    }
}

JS传递参数中带有"+"的解决

复制代码

1
2
3
4
/**
一般情况下，URL 中的参数应使用 url 编码规则，即把参数字符串中除了 -_. 之外的所有非字母数字字符都将被替换成百分号（%）后跟两位十六进制数，空格则编码为加号（+）。但是对于带有中文的参数来说，这种编码会使编码后的字符串变得很长。如果希望有短一点的方式对参数编码，可以采用 base64 编码方式对字符串进行编码，但是 base64 编码方式不能处理 JavaScript 中的中文，因为 JavaScript 中的中文都是以 UTF-16 方式保存的。而 base64 只能处理单字节字符，所以不能直接用 base64 对带有中文的 JavaScript 字符串进行编码。但是可以通过 utf.js 这个程序中提供的 utf16to8 来将 UTF-16 编码的中文先转化为 UTF-8 方式，然后再进行 base64 编码。这样编码后的字符串，在传递到服务器端后可以直接通过 base64_decode 解码成 UTF-8 的中文字符串。但是还有个问题需要注意。base64 编码中使用了加号（+），而 + 在 URL 传递时会被当成空格，因此必须要将 base64 编码后的字符串中的加号替换成 %2B 才能当作 URL 参数进行传递。否则在服务器端解码后就会出错。
*/
tradeField = tradeField.replace(/+/g,'%2B');

JS对数字校验处理

复制代码

1
2
3
4
5
6
7
8
9
10
11
function clearNoNum(val){
    val = val.replace(/[^d.]/g,"");  //清除“数字”和“.”以外的字符  
    val = val.replace(/.{2,}/g,"."); //只保留第一个. 清除多余的  
    val = val.replace(".","$#$").replace(/./g,"").replace("$#$",".");
    val = val.replace(/^(-)*(d+).(dd).*$/,'$1$2.$3');//只能输入两个小数
//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
    if(val.indexOf(".")< 0 && val !=""){
        val = parseFloat(val);
    }
    return val;
}

jQuery中postget同步问题

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//解决方法1：全局设置为同步，然后再使用post/get方法
$.ajaxSetup({
    async : false
}); 
//解决方法2：直接使用$.ajax，如下：
$.ajax({
    type : "post/get",
    url : url,
    data : {param:value,...},
    async : false,//false同步
    success : function(data){
        
    }
});

递归获取最顶级的窗口

复制代码

1
2
3
4
5
6
7
var topWin= (function (p,c){
    while(p!=c){
        c = p        
        p = p.parent
    }
    return c
})(window.parent,window);

jQuery为元素添加/移除属性

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 标准样式表 -->
<style type="text/css">
.current {
background: #488cf2;
border-radius: 50px;
font-size: 18px;
font-weight: bold;
}
</style>
//先移除所有current样式
$(".layui-tree-set").removeClass("current");
//为当前添加current样式
$(obj.elem).addClass("current");

jQuery为获取自定义属性元素并修改CSS某一属性

复制代码

1
2
3
4
5
$("div[myAtrr='val']")
//支持选择器
$("div[data-id='"+obj.data.id+"'] .layui-tree-txt")
//修改CSS宽度值
$(obj.elem).css("width",widthVal)

jQuery加载完成后模拟点击事件

复制代码

1
2
$('#ID').trigger('click');
$('#ID').click();

最后

以上就是辛勤飞鸟最近收集整理的关于工作中总结的一些前端问题解决方案的全部内容，更多相关工作中总结内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：Other
浏览次数：84 次浏览
发布日期：2023-12-14 23:05:18
本文链接：https://www.kaopuke.com/article/k-p-k_13_u_23_o_2_fw_13__7__18_z.html

工作中总结的一些前端问题解决方案

最后

评论列表共有 0 条评论

发表评论取消回复

工作中总结的一些前端问题解决方案

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

微信扫一扫：分享

发表评论取消回复