js笔记

jQuery如何获取复选框选中项后的文字

https://blog.csdn.net/phil_jing/article/details/79756797?utm_medium=distribute.pc_relevant.none-task-blog-baidujs-1

for (var x in obj)

for (var x in obj)
if (obj.hasOwnProperty(x))
console.log(obj[x]);
x对应obj对象属性名，若obj为数组，则x对应键名。
hasOwnProperty(x)方法用于判断obj[x]是否已被定义，从而过滤undefined内容。

instanceof

instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。
instanceof 用于判断一个变量是否某个对象的实例，
复制代码
如 :var a=new Array();

alert(a instanceof Array); // true，

同时 alert(a instanceof Object) //也会返回 true;

这是因为 Array 是 object 的子类。

js 删除数组中第一个元素

<script>
    var arr = new Array(3);
    arr[0] = 'a';
    arr[1] = 'b';
    arr[2] = 'c';
    arr.shift();
    console.log(arr);
    // 打印结果：["b", "c"]
</script>

快捷键

• vscode
  ctrl+ k s 可以调出快捷键大全 更改设置
  ctrl+E 保存全部文件
  ctrl+shift+p 按文件名查找文件

• chrome
  ctrl+d 当前网页存入收藏夹
  ctrl+w 关闭网页

getFrameIndex一般用于在iframe页关闭自身时用到

//假设这是iframe页
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭

form.render()

layui.form(‘select’).render(); 这个是可以只刷新你动态更新的那部分select

layui.use('form',function){

var form=layui.form;//注:这是1.0升级到2.0以后的写法,2.0以前的依旧是layui.form()带括号。
form.render();//这一步加上基本上该出来的都能出来了
})

部分下拉框如果还不能出来的话，需要

<select id="city" lay-verify="" lay-filter="city">
    <option>请选择</option>//加上这一行，先占个坑
</select>

layui-table

<script>
var this_table = table.render({
	elem : '#table-list',
	url : API_URL+'newDataSupplierInfoController.do?findPage',
	method : 'POST',
	cols : [
		[
			{
				title:'序号',
				type:'numbers',
			},{
				title:'全选',
				type:'checkbox',
			},
			{
				width:'160',
				title:'操作',
				align:'center',
				toolbar:'#barMenu',
			},
			{
				field:'supplierCode',
				title:'供应商编码',
				align:'center',
				width :'230'
			},{
				field:'storage',
				title:'所属仓库',
				align:'center',
				templet: function(d){
					return getDictTtlte(unitType,d.unitType)
				},
				width :'230'
			}
		]
	],
	page:true,//开启分页
	limits:[30,50,100,500,1000],//每页条数的选择项
	size: 'sm',//控制表格外观的尺寸，sm （小尺寸），lg （大尺寸）
	even : true,//开启隔行背景
	height: 'full-165', //设定容器高度，高度为最大化减去差值
	
	//数据渲染完的回调。可以借此做一些其它的操作：
	done: function(res, curr, count) {
	//如果是异步请求数据方式，res即为你接口返回的信息。
    //如果是直接赋值的方式，res即为：{data: [], count: 99} ，
    //data为当前页数据、count为数据总长度
    //curr为当前页码
});

//表格中的按钮:
table.on('tool(table-list)',function(obj){
	if(obj.event == 'edit'){
		layer.open({
			type : 2, // 如果是iframe层,2; 如果是页面层,1
			title : '档案修改',
			maxmin : true,
			area : ['600px','600px'],
			content : 'model.html?id='+obj.data.id+'&type='+'modify'
		});
	}else if(obj.event == 'view'){
		layer.open({
			type : 2,
			title : '档案查看',
			maxmin : true,
			area : ['600px','600px'],
			content : 'model.html?id='+obj.data.id+'&type='+'view'
		});
	}
})
//表格中的操作按钮
</script>
<script type="text/html" id="barMenu">
	<a class="layui-btn layui-btn-xs" lay-event = 'edit'>修改</a>
	<a class="layui-btn layui-btn-xs" lay-event = 'view'>查看</a>
</script>

查询所有数据字典

document.write('<script type="text/javascript" src="'+ API_URL +'newTypeGroup.do?getAll&_t=' + new Date().getTime() + '"><\/script>');

ES5, ES6

js由三部分组成：

• ECMAScript：核心，规定了语言的组成部分：语法、类型、语句、关键字、保留字、操作符、对象
• DOM：文档对象模型，DOM把整个页面映射为一个多层节点结果，开发人员可借助DOM提供的API，轻松地删除、添加、替换或修改任何节点。
• BOM：浏览器对象模型，支持可以访问和操作浏览器窗口的浏览器对象模型，开发人员可以控制浏览器显示的页面以外的部分。

框架和库

库 是解决某个问题而拼凑出来的一大堆函数与类的合集。例如盖房子，需要有测量、安装门窗等方法。每个方法之间都没有什么关联。至于怎么盖房子都由自己决定。
框架 是一个半成品的应用，直接给出一个骨架，还例如盖房子，照着图纸安装门窗、铺地板就行了。

从上述描述可以看出，框架带来的便利性比库要好很多，但js存在一个远程加载的问题，对js文件的体积限制很大。因此，框架在前几年用的并不普遍。现在由于网速的提升，集成度较高的MVC、MVVM框架也相继面世。

Postman post 请求错误

• 415错误：

1. 没有在请求的Headers里面增加Content-Type，只需要配置 Content-Type value： application/json; charset=utf-8 就可以了。
2. 415就是Unsupported Media Type，对于当前请求的方法和所请求的资源，请求中提交的实体并不是服务器中所支持的格式，因此请求被拒绝。可能的原因如日期格式等。

• 400错误：

3. 请求无效 (Bad request);出现这个请求无效报错说明请求没有进入到后台服务里；原因：1）前端提交数据的字段名称或者是字段类型和后台的实体类不一致 或 前端提交的参数跟后台需要的参数个数不一致，导致无法封装；
   解决方案：
   1）对照字段名称，类型保证一致性
   2）使用stringify将前端传递的对象转化为字符串 data: JSON.stringify(param)

4. postman 传参为中文时会报错400,参数传不过去
   1）解决： 在postman 的地址栏处右击，可以看到菜单最后两栏是EncodeURIComponent( 编码)、DecodeURIComponent(解码)； 想要传参调用后台接口的时候选中中文参数，再选择EncodeURIComponent，中文就被编码，调用成功； 当想调整参数时，选择DecodeURIComponent 进行解码修改就可以了。
   2）当在浏览器地址栏直接输入接口地址时，参数中有中文为啥就可以请求成功呢？
   因为一个http请求发送到Servlet服务器，有以下步骤：

   • 请求经过编码到达了服务器；
   • 服务器解码，处理请求，将结果编码返回给浏览器；
   • 浏览器 按照编码格式解码显示网页

jQuery的ajax报错Illegal invocation，

可能是傳出去的 data 格式有問題，或者某个值没有定义
试试 processData: false 設定為 false,

渲染下拉框

callAPI('newDataStockSortController.do?findPage&limit=10000', '', function(data) {
if (data != null && data != undefined) {
		var selectHtml = '<option value="">请选择</option>';
		var data = getParentVal(data);
		var key1 = null;
		data.forEach(function(value, key, arr) {
			selectHtml += '<option value="' + value.id + '">' + value.sortName + '</option>';
		});
		$("select[name='inventoryType']").html(selectHtml);
		layui.form.render();
	}
	layui.form.render();
});

input输入框在ie下光标不显示，有可能是限制输入框长度的css未起作用，光标被其他元素覆盖着。给输入框加个padding试试。

获取表单的值

https://www.jb51.net/article/174144.htm

监听select事件，获取当前日期

//监听select事件，获取当前日期
	var laydate = layui.laydate;
	form.on('select(college)', function (data) {
		debugger
		if(data.value == "1") {
			laydate.render({
			elem: '#disableDate'
			,value: new Date()
			});
		}
	});

	<div class="layui-form-item">
		<label class="layui-form-label">是否停用</label>
		<div class="layui-input-inline" style="width: 340px;" lay-filter="isStop">
			<select name="isDisable" id="isDisable" lay-filter="college" >
                       <option disabled='disabled'>请选择</option>
			</select>
		</div>
    </div>
    <div class="layui-form-item">
		<div class="layui-inline">
			<label class="layui-form-label">停用日期</label>
			<div class="layui-input-inline dateInput">
				<input type="text" readonly name="disableDate" id="disableDate" placeholder="请输入" autocomplete="off" class="layui-input">
				<i class="layui-icon layui-date"><img class="layui-date-end" src="../../basicArchives/static/img/date.png"/></i>
			</div>
		</div>
    </div>

layui在表格某一单元格显示图标

{
  field: 'DevID', title: '设备ID', templet: function (d) {
  
    return d.iso == "1" ? "<i class='layui-icon' style='color:green;margin-right:5px'></i>" + d.DevID : "<i class='layui-icon' style='color:red;margin-right:5px'></i>" + d.DevID;
      }
  }

done: function (data, curr, count) {
     //设置了表格的边框，宽度和位置 
     supplierList = $("[lay-id='RelevanceSupplierList']").css({ 'margin-left': '114px', 'border': '1px solid #CCC', 'width': '700px' });
     //设置了表头行的字体加粗和大小，右边框的样式
     $('th').css({ 'font-weight': 'bold', 'font-size': '13px', 'border-right': '1px solid #CCC' });
     //添加图片到表格中所有的第二个单元格里面
     $('td:nth-child(2)').css({ 'font-size': '12px', 'border-right': '1px solid #CCC', 'background': 'url("../../../../images/123.png") no-repeat', 'background-position': '113px 12px', 'background-size': '30px 14px' });
    //设置了单元格的字体大小，边框的样式
     $('td').css({ 'font-size': '12px', 'border-right': '1px solid #CCC', 'border-top': '1px solid #CCC' });
}

request headers和response headers

链接

ie浏览器上传文件出现下载框

link

Layui监听select下拉框选中事件

link1

js控制iframe局部刷新

link2

更改表格某个单元格样式

p:nth-child(2)
{
background:#ff0000;
}

引入css

https://www.cnblogs.com/janey/archive/2010/06/04/1751430.html

VS code “Tab” 键 无法缩进的问题

建议尝试的解决办法： Ctrl+M

layer.open引入content文件路径错误原因：

可能在本地多了相对路径的…/，但是本地测不出来，发到线上会出问题

layui的select动态赋值一直不成功，因为没用form.render();

法一：
// var optionstring="";  			
// $.each(data,function(key,value){  //循环遍历后台传过来的json数据  
// 	optionstring += "<dd lay-value=\"" + value.parentid + "\" >" + value.projectname + "</dd>";  
// });  

// $("#classtree1").html(optionstring); //获得要赋值的select的id，进行赋值  
// $("#parentid").append("<option value=''>请选择上级支出</option>"); //获得要赋值的select的id，进行赋值 
法二：
var sel = document.getElementById("parentid"); 
for(var i = 0;i < data.length; i++) {
	var opt = new Option();  
	opt.value= data[i].parentid;  
	opt.text = data[i].projectname;  
	sel.append(opt);
}
form.render(); 

attr

dataType是自定义的一个属性，dom本身是没有的
$(this).attr(‘dataType’)可以取得dataType属性的值

$(this).attr(key); 获取节点属性名的值，相当于getAttribute(key)方法
$(this).attr(key, value); 设置节点属性的值，相当于setAttribute(key,value)方法

$(this).val();获取某个元素节点的value值，相当于$(this).attr(“value”);
$(this).val(value);设置某个元素节点的value值，相当于$(this).attr(“value”,value);

图片上传下载查看删除

<div class="layui-inline">
						<label class="layui-form-label">
							资产图片
						</label>
						<div class="layui-input-inline">
							<input id="uploadPicture" name="uploadPicture" disabled="true" class="layui-input uploadPicture" lay-verify="uploadPicture">
						</div>
						<a class="layui-btn layui-btn-xs" lay-event="upload" id="upload">上传</a>
						<a class="layui-btn layui-btn-xs" lay-event="show" onclick="fileView()">查看</a>
						<a class="layui-btn layui-btn-xs" lay-event="download" download onclick="fileDown()">下载</a>
						<a class="layui-btn layui-btn-xs" lay-event="delete" onclick="fileDel()">删除</a>
					</div>	

//图片上传
	var picId = '';
	var uploadInst = upload.render({
		elem: '#upload' //绑定元素
		,url: API_URL + 'newAssetCard.do?uploadPicture' //上传接口
		,accept: 'file'
		,done: function(res, index, upload){
			//上传完毕回调
			if(res.code==0){
				layer.msg(res.msg);
				picId = res.data;
				$('#uploadPicture').val(picId)
			}else{
				alert(res)
			}
		}
		,error: function(res, index, upload){
		//请求异常回调
		}
	});

//图片查看
			function fileView() {
				debugger
				var picId = $("#uploadPicture").val();
				callAPI("/newAssetCard.do?getPictureData", 'ids='+picId, function(data) {
					debugger
					if(data.length > 0) {
						var path = data[0].realpath		
					}
					layer.open({
						type: 2,
						title: '查看',
						content: API_URL + path,
						maxmin: false,
						area: ['95%', '95%']
					});
				});
			}

// 图片下载
			function fileDown() {
				var picId = $("#uploadPicture").val();
				callAPI("/newAssetCard.do?getPictureData", 'ids='+picId, function(data) {
					debugger
					if(data.length > 0) {
						var path = data[0].realpath;		
						var title = data[0].attachmenttitle;
					}
					// location.href = API_URL + path;
					var url = API_URL + path; // 获取图片地址
					var a = document.createElement('a');// 创建一个a节点插入的document
					var event = new MouseEvent('click') // 模拟鼠标click点击事件
					a.download = title  // 设置a节点的download属性值
					a.href = url;  // 将图片的src赋值给a节点的href
					a.dispatchEvent(event)  // 触发鼠标点击事件
				});
			}

//图片删除
			function fileDel() {
				if($("#uploadPicture").val()) {
					layer.confirm('是否确认删除', function (index0) {
						$("#uploadPicture").val('');
						layer.close(index0);
						layer.msg("已删除")
					});
				} else {
					return qtAlate('未上传图片');
				}
			}

点击任意处选中一行 不好使

去掉 {type:‘checkbox’,
fixed: ‘left’} 中的 fixed: ‘left’ 就可以了。。

jq的click事件莫名其妙被调用两次

<button type="button" class="layui-btn layui-btn-sm" id="addRow" title="添加一行" style="width: 74px;">
<img style="width: 14.2px;" class="icontg" src="../../../basicArchives/static/img/icon_add.png" alt="">新增行
</button>

$('#addRow').unbind("click").click(function () {
	debugger
}

layui的表格只能渲染十条数据

一定要加limit，默认是10条

兼容IE8的前端下载方法

https://www.cnblogs.com/justnotwo/p/10613951.html

访问本地接口一直【pending

清一下浏览器缓存

ajax请求之后的click事件不触发

用户有行为触发才可以。
把
$('#testId').click;改为 $('#testId').trigger("click");可成功执行。

虚拟机浏览器不能上网

https://blog.csdn.net/bigbigvegetable/article/details/90746589

IE的开发者工具找不到了

打开后在任务栏开发者工具上右键，选择最大化，就能出现

谷歌发送请求正常IE报错parseerror

经检查下拉框多了个不属于select的type=text属性，去掉就好了

IE在ajax请求后报错parent.parent.layer为空或不是对象

将关闭弹窗的顺序改为：
parent.layer.msg(msg); //提示消息弹框
parent.parent.layer.close(pindex); //关闭父级弹框
parent.layer.close(index); //关闭当前弹框

layui table reload后给选中的表格行增加样式

//获取选中行的checkbox td
$('div.laytable-cell-checkbox').find('div.layui-form-checked')
//获得当前td的tr
.parents('tr') 
//循环当前tr下的td
.children('td').each(function(m, n) {
//添加样式
	$(n).addClass('laychecked');
});

IE8使用(for x in arr)循环会多一个undefined，换成

（var x=0; x<arr.length; x++）

防抖和节流

<button id="debounce">防抖事件</button>
    
    <!-- <button id="throttle">截流事件</button> -->
   
    <script>
        /**
         * 防抖事件
         * @param { Function } fn 执行的回调函数
         * @param { Number } wait 间隔时常
        */
        function debounce(fn,wait) {
            let timer = null;
            return function () {
                clearTimeout(timer); // 每当用户输入的时候把前一个 setTimeout clear 掉
                timer = setTimeout(() => { // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话，就不会执行 fn 函数
                    fn.apply(this, arguments);
                }, wait || 500);
            };
        }

        /**
         * fn.apply(this，arguments)
         * 这个步骤的作用就是  防止this指向window以及，点击事件丢失e参数
        */
        document.querySelector('#debounce').onclick = debounce(function(e) {
            console.log(e, '++++')
            console.log(123)
        })
    </script>

控制表格中的日历控件不可输入

{field: 'purchaseDate', width: 120,title: '计划使用时间'},

case "date" :
//控制日历input为readonly
$(this).find('input').attr('readonly', 'readonly'); 
//解决IE中readonly属性出现光标问题
$('input[readonly]').on('focus', function() {
	$(this).trigger('blur');
});	
var field = $(this).data('field');
laydate.render({
	elem: this.firstChild
	, show: true //直接显示
	, closeStop: this
	, min : nowDate()
	, done: function (value, date) {
		obj.update({purchaseDate: value});
	}
});
break;

select监听事件不起作用

可能是因为放在了ajax请求之后

form.on('select(isAudit)', function(data) {
	window.isAuditVal = $("#isAudit").val();
})

将代码移动到ajax请求之前

layui监听计算

	//自动计算净值
$("#assetOriginalPrice").blur(function(e){
	var a = $('#assetOriginalPrice').val().replace(/[^\d\.]/g,'');//资产原值
	var b = $('#depreciationTotal').val().replace(/[^\d\.]/g,'');//累计折旧
	var jz = Number(a)-Number(b);

	if(jz || jz == 0) {
		if(jz > 0) {
			$('#netWorth').val(jz)
		} else if(jz == 0) {
			$('#netWorth').val(0)
			$('#depreciationStatus').val('2');	
		} else {
			$('#depreciationTotal').val(a);
			$('#netWorth').val(0)
			$('#depreciationStatus').val('2');
			msgForAssets('资产原值不能小于累计折旧');
		}
		form.render('select');
	}
});