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

最新推荐文章于 2024-08-05 22:41:52 发布

蝎子莱布莱

最新推荐文章于 2024-08-05 22:41:52 发布

阅读量688

点赞数

本文链接：https://blog.csdn.net/LiJiVV/article/details/95198408

版权

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

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

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验证特殊字符

function containSpecial(s){      

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

    return (containSpecial.test(s));      

}

js修改下拉框值

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刷新当前页面

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

js数组sort()排序

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)

浏览器兼容性处理

var userAgent = navigator.userAgent;//取得浏览器的userAgent字符串

if(userAgent.toLowerCase().indexOf("firefox")>0||userAgent.toLowerCase().indexOf("chrome")>0){//如果是火狐或者谷歌

}else{//否则是IE浏览器

}

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


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集合窗口，刷新父页面的多种方法

<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异步

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;

    }

});

数组的使用

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中的使用）

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值

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种方法

//方法一：
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方法

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

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

$("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属性获取值

$("input[name='name']").val()

$("select[name='name']").val()

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

jQuery 控制全局同步

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

jQuery验证字符串长度

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传递参数中带有"+"的解决

/**
一般情况下，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对数字校验处理

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

jQuery中post\get同步问题

//解决方法1：全局设置为同步，然后再使用post/get方法
$.ajaxSetup({
    async : false
}); 



//解决方法2：直接使用$.ajax，如下：
$.ajax({
    type : "post/get",
    url : url,
    data : {param:value,...},
    async : false,//false同步
    success : function(data){
        
    }
});

递归获取最顶级的窗口

var topWin= (function (p,c){
    while(p!=c){
        c = p        
        p = p.parent
    }
    return c
})(window.parent,window);

jQuery为元素添加/移除属性

<!-- 标准样式表 -->
<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某一属性

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

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

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

蝎子莱布莱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫