2019.03-04 工作中遇到的前端问题与解决方法

1.Style设置
  设置宽度和对齐 style="width: 150px;margin-left: 10px;"

2.元素移除 
    $("#booth_wash_num th:gt(0)").remove()
    remove()移除元素 empty()清空元素内的东西
3.下标大于某值的选择器
  #booth_wash_num th:gt(0) 

4.增加元素
  (1):$("#robo_num").append("<th>"+res[i].robo_num+"号機</th>")
      append() 在选择器选中的标签内部进行增加
	  注意事项:只能在$("#id")上使用,否则会被解析为字符串,而不是元素
      after()  在选择器选中的标签外部的后面
  (2) 在增加元素时,每次都要var新建,否则都会append同一个元素
  

5.CSS引入
  (1)<input style="margin-top:20px;">
  (2)<style>.p{margin-top:20px;}</style>
  (3)<link href="/css/global.css" th:href="@{/css/global.css}" rel="stylesheet"></link>

6.Onchange事件
  $("#before_endDate").change(function(){console.log($("#before_endDate").val())})
  onchange触发时,得到的值是改变后的值,不是改变前的值

7.页面加载时触发的onload事件
  $(function()){}

8.取得标签内部值
  (1)$(this) 
  (2)$(#ab).function(e){e.target.id //输出ab}

9.取得label对应值
  replace_interval = $("label[For='xxx']").text()[0]

10.aria与data属性
  (1)aria为残障人士准备,其实可以当做特殊的标签存放值[aria-label='xxx']
	 aria-tabindex=使用tab键获取焦点,一般只有超链接a和表单才能被访问,设置这个可以获取焦点
	 aria-label->将元素赋予标签,例如=Close,相当于告诉辅助软件这个是"close"的作用,对元素进行注释!
	 aria-role/role 相当于告诉程序这个角色和功能
  (2)data属性是自定义属性,可以使用 $("#xx").data("flag")获取data-flag="xx"

11.ajax发送到java后台接收的url不需要加/
   $.ajax({
	 type: 'GET',
	  url: 'getGroupNameById',
不是'/getGroupNameById',

12.ajax传递的方法
  (1) type="post" 后台用 PostMapping ,没有回显
  (2) type="get"  后台用 GetMapping  ,有回显 出现在/xxx/getXXX?a=yy&b=zz
  (3) 传递的时候在ajax中指定data: 而且需要包装好一个json,例如 data={"a":yy,"b":zz}
  (4) ResponseBody 不能漏

13.回调函数的使用方法
  在ajax请求之后需要等待success返回res,如果后续函数需要等待res才能下一步的话就需要回调,因为ajax是异步传输,
如果后续函数是普通函数,可能得到的res为空,所以需要等待res成功返回后再继续执行函数
		function getXXX(id,callback){
			$.ajax({
				success:function(res){
					callback(res)  //在其他函数调用此函数时就可以使用res
				}
			})	
		}

		function XXX(){
			id = 1
			getXXX(1,function(res){
				//res的操作,这里就可以使用ajax成功执行后返回后的res
			})
		}


14.事件的触发
	(1): $.trigger("change")
	(2): $("#id")[0].click() //触发点击事件
		 注意click的触发要到了某个元素下才能触发
		 $("#id").click()x      $("#id")[0].click() √
	(3): $("#id")

15.checked 单选框相关
	(1):判断是否选中: $("#xx").is(":checked")

	
16.select 复选框相关/is
	<select id="hinban" class="form-control filter-field">
		<option value="1">1</option>
		<option value="2">2</option>
	</select>
	(1)取出选项
		用value选择某个选项:$("#hinban [value=1]")
		用下标选择某个选项:$("#hinban option:eq(0)")
		选择selected的选项:$("#hinban option:selected")
						   $("#hinban").find("option:selected")
		选出所有option:$("#hinban option")
	(2)判断是否被选中
		$("#hinban [value=1]").is("selected")
	(3)获取value 和 text
		$("#hinban-filter option:eq(5)").attr("value")
		$("#hinban-filter option:eq(5)").text()
	(4)触发选项点击事件 attr / prop
		$("#hinban-filter option:eq(7)").attr("selected","true")
		$("#hinban-filter option:eq(3)").prop("selected","true")


17.点击表格项触发事件
	会出现点击表行没反应的情况,是因为表行是外层元素<tr></tr>,真正能触发点击事件的是里面
	的<td></td> 所以需要对td设置绑定click事件才行
	$("#2ka td").click(function(e){
		console.log(456)
		getStepCheckPerformance("2");
	})

18.class相关
	(1).判断是否有某个class:$("#1ka i").hasClass("fa-minus-square-o")
	(2).增加class属性:$("#id").addClass("warning-input")
	
19.nextUntil(condition)
	根据给定的condition一直寻找元素,直到condition成立
	例如:$("#second_seikei").nextUntil('tr[data-flag="3"]')
	会从当前元素开始一直找到有data-flag="3"的tr为止,返回元素的list

20.each
	(1): res-> $(res).each(function(){})
	(2): 数组的each: arr.forEach() 不建议用

21.合并单元格
	在th表头中设置 rowspan=2,就是将该表头"包含"两行的数据
	colspan=2 表头"包含"两列的数据
	
22.attr 与 prop
	(1):可以作为取属性使用:
		$("#xxx").attr("href")
		可以取除了val,text以外的属性,因为有val(),text()
	(2):作为设置值使用
	(3):	prop()函数的结果:
				  1.如果有相应的属性，返回指定属性值。
				  2.如果没有相应的属性，返回值是空字符串。
			attr()函数的结果:
				  1.如果有相应的属性，返回指定属性值。
				  2.如果没有相应的属性，返回值是 undefined。
			对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
			对于HTML元素我们自己自定义的DOM属性，在处理时，使用 attr 方法。
			具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()
			
23.在地址栏接收参数
var reqParams = getUrlParams(location.href);
	var hinban = decodeURI(reqParams["hinban"]);
	var bui = decodeURI(reqParams["bui"]);
	var ketten = decodeURI(reqParams["ketten"]);
	var start_date = decodeURI(reqParams["ketten"]);
	$("#hinban-filter option[value='{0}']".fmt(hinban)).attr("selected", "selected");
	$("#bui-filter option[value='{0}']".fmt(bui)).attr("selected", "selected");
	$("#ketten-filter option[value='{0}']".fmt(ketten)).attr("selected", "selected");

24.radio相关
	(1).取值:$("input:radio[name='unit']:checked").val() //注意中间不能有空格,否则取不到

25.padding,边框,边距太大的调整 
	#targetValueForm td,
	#targetValueForm td input{
		padding: 0.15rem;
	}
26.bootstrap相关
	(1)inline: 设置行内元素,将元素在一行中填充
	(2).block: 设置块状元素

27. 判断为空,判断长度
	(1)a.length > 0: 判断是数组的情况下使用
	(2)Object.keys()> 0 :判断Json数组

28.disabled,可视化visibility
	(1)disabled='disabled' //元素不可用
	(2)style="display:none;" //元素不可视,不占用
	(3)style="visibility:hidden; //元素不可视,位置占用
	
29.日期 时间 相关
	(1).当前日期
		<span style="margin-top:15px;" id="now_time"></span>
		var date = new Date();
		var date_str = "{0}年{1}月{2}日".fmt(date.getFullYear(),date.getMonth()+1,date.getDate());
		var date_val = "{0}/{1}/{2}".fmt(date.getFullYear(),date.getMonth()+1,date.getDate());
		$("#now_time").text(date_str);
		$("#now_time").text(date_str);
		$("#now_time").val(date_val);
		
30. ajax相关
	(1).需要传的数据
		$.ajax({
		type: "GET", "POST"
		url: "getGroupCheckPerformance",
		data: interval, {xx:1,yy:2},
		success: function(res){},
		error : function(jqXHR){
			switch (jqXHR.status){
				default:
				bootbox.alert('处理失败');
				break;
			}
		}
	(2).json包装: JSON.stringify(form)
		contentType : "application/json;charset=utf-8",
		
		
onchange="update_QR_code(this)"
function　update_QR_code(e){
	console.log($(e).val());
}


31数字 保留小数
var max_str = parseFloat(max).toFixed(1);