JavaScript学习笔记整理

小咪咪 2021-09-17 08:42 431阅读 0赞

### 文章目录 ###

*   *   *   *  (1) 获取Url绝对路径
             *  (2) 获取Url请求参数
             *  (3) 获取特定请求参数
             *  (4) stringify函数
             *  (5) setTimeOut函数
             *  (6) js 获取当前年月日时分秒星期
             *  (7) Ajax请求显示加载中提示
             *  (8) 大量if...else...的替换方法
             *  (9) 字符串长度获取(支持中文)
             *  (10) window.open打开之后关闭刷新实现
             *  (11) 校验按钮是否显示还是隐藏
             *  (12) Easyui实现单行选择和取消选择
             *  (13) JavaScript数据类型
             *  (14) 获取变量类型
             *  (15) 获取本地host
             *  (16) 校验radio是否选择
             *  (17) meta标签实现重定向
             *  (18) 小时转天数显示

整理一篇工作中的JavaScript脚本笔记，不定时更新，笔记来自网上资料或者自己经验归纳。ps：都是一些小技巧，只能作为学习参考，要系统性学习还是要多看书

#### (1) 获取Url绝对路径 ####

function getUrlRelativePath()
    　　	{
    	　　　　var url = document.location.toString();
    		
    	　　　　var arrUrl = url.split("//");
    
    	　　　　var start = arrUrl[1].indexOf("/");
    	　　　　var relUrl = arrUrl[1].substring(start);//stop省略，截取从start开始到结尾的所有字符
    
    	　　　　if(relUrl.indexOf("?") != -1){
    	　　　　　　relUrl = relUrl.split("?")[0];
    	　　　　}
    	　　　　return relUrl;
    　　	}

#### (2) 获取Url请求参数 ####

#### (3) 获取特定请求参数 ####

function getQueryString(name) {
      var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
      var r = window.location.search.substr(1).match(reg);
      if (r != null) {
        return unescape(r[2]);
      }
      return null;
    }
    // 这样调用：
    alert(GetQueryString("参数名1"));

#### (4) stringify函数 ####

将现有的对象转换为JSON字符串, 则可以使用 JSON.stringify(obj)函数

#### (5) setTimeOut函数 ####

javascript延时3秒执行method函数  
setTimeout(function()\{ method()\},3000);

#### (6) js 获取当前年月日时分秒星期 ####

来自[https://www.cnblogs.com/wdw31210/archive/2012/06/27/2565865.html][https_www.cnblogs.com_wdw31210_archive_2012_06_27_2565865.html]

$("#aa").click(function () {
    var date = new Date();
    this.year = date.getFullYear();
    this.month = date.getMonth() + 1;
    this.date = date.getDate();
    this.day = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六")[date.getDay()];
    this.hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
    this.minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
    this.second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
    var currentTime = "现在是:" + this.year + "年" + this.month + "月" + this.date + "日 " + this.hour + ":" + this.minute + ":" + this.second + " " + this.day;
    alert(currentTime);
    });

#### (7) Ajax请求显示加载中提示 ####

$.ajax({
    	type: "post",
    	url: loadurl,
    	async: true,
    	i:Math.random(),
    	success:function(data){
    		$("#tra_"+id).html(data);
    	}
    	beforeSend:function(){
    		$("#tra_"+id).html('加载中...');
    	}
    });

#### (8) 大量if…else…的替换方法 ####

遇到需要写很多if…else…的情况，或许可以考虑如下的哈希字典匹配的方法，或者用状态模式实现

例子：

/* 不用if...else，改成哈希字典匹配的方法 */
    						//if...else...方法
    						/* var itemTypeStr = '';
    						if(rowdata.itemType == '1'){
    							itemTypeStr = '行政许可';
    						}else if(rowdata.itemType == '2'){
    							itemTypeStr = '非行政许可';
    						} */
    						var itemTypeReg = {
    								'0':'',
    							    '1':'行政许可',
    								'2':'非行政许可'
    						}
    						var itemType = rowdata.itemType;
    						//itemType为1~15的数，哈希匹配的方法，例子仅供参考
    						itemType = itemTypeReg[itemType];
    						return itemType;

#### (9) 字符串长度获取(支持中文) ####

获取字符串的长度，有时候经常就是str.length直接获取，其实在字符串没有中文的情况是可以的，**但是一旦有中文，就会发现这样获取其实是不正确的。因为中文占两个字节**

function getStrRealLen(str) {
        ///<summary>获得字符串实际长度，中文2，英文1</summary>
        ///<param name="str">要获得长度的字符串</param>
        var realLength = 0, len = str.length, charCode = -1;
        for (var i = 0; i < len; i++) {
          charCode = str.charCodeAt(i);
          if (charCode >= 0 && charCode <= 128) realLength += 1;
          else realLength += 2;
        }
        return realLength;
      };

#### (10) window.open打开之后关闭刷新实现 ####

有些时候，要打开一个弹窗是用window.open实现，然后我尝试在弹窗页面做关闭窗口的上级页面刷新，发现并没有效果，网上找资料，找到一篇很好的博客 https://blog.csdn.net/wangshanny/article/details/46325537

/**
      * 监听打开的弹窗，关闭后刷新页面
      */
     function openWin(url,text,winInfo){
     	var winObj = window.open(url,text,winInfo);
     	var loop = setInterval(function() {     
     	    if(winObj.closed) {    
     	        clearInterval(loop);    
     	        //alert('closed');    
     	        parent.location.reload(); 
     	    }    
     	}, 1);   
     }

#### (11) 校验按钮是否显示还是隐藏 ####

下面是jquery的用法  
$("\#id").is(’:visible’); true 为显示 false 为隐藏  
$("\#id").is(":hidden"); true 为隐藏 false 为显示

#### (12) Easyui实现单行选择和取消选择 ####

var isCheckFlag = true;

$('#flowList').datagrid({
    				....
    				onClickCell:function(rowIndex,field,value){
    					    isCheckFlag = false;
    					},
    					onSelect:function(rowIndex,rowData){
    					    if(!isCheckFlag){
    					        $(this).datagrid('unselectAll');
    					        isCheckFlag = true;
    					        $(this).datagrid('selectRow', rowIndex);
    					        }
    					},
    					onUnselect:function(rowIndex,rowData){
    					    if(!isCheckFlag) {
    					    	isCheckFlag = true;
    					    	$(this).datagrid('unselectRow', rowIndex);
    					    }
    					}
    });

#### (13) JavaScript数据类型 ####

介绍一下JavaScript的数据类型

*  引用数据类型：Object
 *  原始数据类型：undefined、string、number、boolean

#### (14) 获取变量类型 ####

获取变量类型可以使用typeOf()获取

#### (15) 获取本地host ####

var host = “http://”+window.location.host;

#### (16) 校验radio是否选择 ####

var isRadioChecked=$('input:radio[name="surveyResult"]:checked').val();
    if(!isRadioChecked){ 
        $.messager.alert("操作提示","请先选择Radio","info",function(){ 
        });
        // todo
        return;
    }

#### (17) meta标签实现重定向 ####

HTML http-equiv 属性：[https://www.runoob.com/tags/att-meta-http-equiv.html][https_www.runoob.com_tags_att-meta-http-equiv.html]

ps：content值：0; url=https://blog.csdn.net/ ， 0：表示时间间隔，url=https://blog.csdn.net/表示跳转到csdn主页

#### (18) 小时转天数显示 ####

[https_www.cnblogs.com_wdw31210_archive_2012_06_27_2565865.html]: https://www.cnblogs.com/wdw31210/archive/2012/06/27/2565865.html
[https_www.runoob.com_tags_att-meta-http-equiv.html]: https://www.runoob.com/tags/att-meta-http-equiv.html