后端程序员需要了解的前端知识(持续更新中)

一、FastJson

1.对于JSON格式字符串、JSON对象及JavaBean之间的相互转换

JSON：fastJson的解析器，用于JSON格式字符串与JSON对象及javaBean之间的转换。

JSONObject：fastJson提供的json对象。

JSONArray：fastJson提供json数组对象。

参照：https://www.cnblogs.com/cdf-opensource-007/p/7106018.html

JSON.parse：从数据库中查询出来的是字符串，我们必须将其转换为json对象才能实现信息的回显。

如：

JSON.parse($scope.entity.goodsDesc.itemImages)

2.JSON.parse( JSON.stringify( oldRow )  );  表示深克隆。

二、json对象和json字符串的区别：

json对象可以通过javascript存取属性！json对象装成json字符串经常用于前后台传输数据！

在数据传输过程中，json是以文本，即字符串的形式传递的，而JS操作的是JSON对象，所以，JSON对象和JSON字符串之间的相互转换是关键。例如：
JSON字符串:
var str1 = '{ "name": "cxh", "sex": "man" }'; 
JSON对象:
var str2 = { "name": "cxh", "sex": "man" };

ajax中，我们自己拼接的是一个JSON对象，因为它是无数据类型的，所以JS根据其格式默认其实对象，

你要是往后台发，要先把它装换成JSON字符。从ajax的服务器发过的，一定是字符串，你想要把它解析，得先把先变成JSON对象才行。

https://www.cnblogs.com/zkwarrior/p/4822470.html

3.数组相关知识

1. 数组的push方法：向数组中添加元素
2. 数组的splice方法：从数组的指定位置移除指定个数的元素 ，参数1为位置  ，参数2位移除的个数，如：selectIds.splice(idx, 1)

三、获取浏览器类型

		function getBrowserType(){
            var userAgent=window.navigator.userAgent;
            if(userAgent.indexOf('Edge')>-1){
                return 'Edge';
            }
            if(userAgent.indexOf('Firefox')>-1){
                return 'Firefox';
            }
            if(userAgent.indexOf('Chrome')>-1){
                return 'Chrome';
            }
            if(userAgent.indexOf('.NET')>-1){
                return 'IE';
            }
        }

四、js操作DOM

1、$("#cardType"+i).find('select[id^="cardIssuer"] > option').each(function () {...}) ： 遍历某个id下的某个下拉框的所有选项

2、获取某个元素：data.elem[data.elem.selectedIndex].text(layui)

3、遍历复选框中选中的多个值：

$("input[name='hobbies']:checked").each(function () {
		alert($(this).val());
    });

4、js把字符串(yyyymmdd)转换成日期格式（yyyy-mm-dd）

var r="20112233".replace(/^(\d{4})(\d{2})(\d{2})$/, "$1-$2-$3")

5、如果是直接操作layui渲染后的元素(如：dd标签等)，不用渲染，即不用再加上form.render();

6、thymeleaf整合springmvc中，如果是model向前端传值，要在引入js那里加上 th:inline="javascript" ，可以才可以在js中通过[[${xx}]]获取都model中存入的值，包括对象，否则获取到的对象将会是@com....

7、清空标签内容

//1.清空ul
$("#city").empty();
//2.移除天津 remove
$("#tj").remove();
document.getElementById("offlineSett").reset();  // 清空某个表单
// 清空表单
function clearForm(form){
	$(':input',form).each(function(){
    var type = this.type;
    var tag = this.tagName.toLowerCase();
    	if (type == 'text' || type == 'password' || tag == 'textarea') {
        	this.value = '';
        }
        if (type == 'checkbox' || type == 'radio') {
        	this.checked = false;
        }
        if (tag == 'select') {
        	this.selectedIndex = 0;
        }
    });
// 清除发卡方
function clearIssuer() {
	for(var i = 1;i<=divCount;i++ ){
    	var delDiv = "cardType" + i;
        var endDiv = document.getElementById(delDiv);
        if(endDiv!=null){
        	endDiv.parentNode.removeChild(endDiv);
        }
    }
}

8、删除div：

var divobj = creatElement("div");
function closeDiv(divobj){
	divobj.parentNode.removeChild(divobj);
}

9、 获取孩子节点：

console.log(data.othis.parent().parent().next().attr('class')); console.log($(this).parent().parent().next().children(":first").attr('style'));

10、多个name相同的元素的遍历

$("input[name='ssFeeRate']").each(function(j,item){
	var obj={};
	obj.ssFeeRate=item.value;
	objArr.push(obj);
});

11、同胞选择器

如下代码表示选择id为offLineBusi的元素中，与其同级且类名为layui-form-select的元素

$(document).on('click', "'#offLineBusi' +'.layui-form-select'", function () {
	console.log("clcik"+protocolType);
    if(protocolType==null){
    	alert("请先选择协议类型");
        return;
     }
});

12、常见的 jQuery 方法：

· text() - 设置或返回所选元素的文本内容

· html() - 设置或返回所选元素的内容（包括 HTML 标记）

· val() - 设置或返回表单字段的值

.attr()获取属性。当然这两也是可以自己设置值来修改的，

对html内容的添加。添加新的 HTML 内容 ，用于添加新内容的四个 jQuery 方法：

我们将学习用于添加新内容的四个 jQuery 方法：

· append() - 在被选元素的结尾插入内容

· prepend() - 在被选元素的开头插入内容

· after() - 在被选元素之后插入内容

· before() - 在被选元素之前插入内容

需删除元素和内容，一般可使用以下两个 jQuery 方法：

· remove() - 删除被选元素（及其子元素）

· empty() - 从被选元素中删除子元素

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：

· addClass() - 向被选元素添加一个或多个类

· removeClass()- 从被选元素删除一个或多个类

· toggleClass()- 对被选元素进行添加/删除类的切换操作

· css() - 设置或返回样式属性

例子 ：

$("h1,h2,p").addClass("blue");首先我们知道当对多种标签添加样式的时候我们用‘，'分开。Blue一定是一个设置好的.Blue{}类选择器 ，这里是添加类名为blue的相关样式

$("h1,h2,p").removeClass("blue");

$("h1,h2,p").toggleClass("blue");有样式就会移除，没样式就会添加

如需设置多个 CSS 属性，请使用如下语法：

css({"propertyname":"value","propertyname":"value",...});

jQuery 尺寸 方法

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

innerWidth() 方法返回元素的宽度（包括内边距）。

innerHeight() 方法返回元素的高度（包括内边距）。

outerWidth() 方法返回元素的宽度（包括内边距和边框）。

outerHeight() 方法返回元素的高度（包括内边距和边框）。

13、find方法：

$('#onlineFundSplit').find("input[type='checkbox']").prop('disabled',true);
$('#offlineSett').find('input').prop('readonly',true);

find方法的性能较差，使用时需要考虑一下！

14、禁用点击事件

$(document).off("click","#delAcqTrxFee");		
$(document).on('click', "#delAcqTrxFee", function () {})
$('#trxFeeType').css("pointer-events","none");

15、获取select标签当前选中的option值

    <select name="apartmentId" id="apartmentId" >
	   <option value="" selected >所有</option>
	   <option value="1">小区1</option>
	   <option value="2">小区2</option>                                       
	</select>

通过这个获取：var selectId = $('#apartmentId option:selected').val(); 或：

<select name="refundNetType" style="width:120px;" id="refundNetType">
        <option value="">请选择</option>
            <th:block th:with="recScopes=${#dic.list('REFUND_NETTYPE')}">
                <option th:if="${recScopes}" th:each="rec:${recScopes}"
                        th:value=${rec.value} 
                        th:selected="${refund?.refundNetType eq rec.value}">[[${rec.valueDescription}]]
                </option>
            </th:block>
    </select>

通过这个获取：var checkRefundNetType = $("[name='refundNetType']").val(); ----获取这个名字为refundNetType的标签的值 var refundNetType = $('#refundNetType option:selected').val(); ----获取选中的值

五、前端页面请求后端方式

1、通过提交表单的方式，可以在form标签中写好action属性，即action=xxx，但是如果是这样操作的话，如果表单中的每个按钮是提交表单的方式发起请求的话，就会是请求这个action； 另外一种提交表单的方式是，在请求的js方法中，定义form.action=xxx;这里的form是获取到的表单对象，如：

form.action="/bocGroup/addMerchant";
$("#form").submit();

这样每次就可以通过表单提交参数到不同的请求；注意：表单中是通过input标签提交变量的，所有js方法中不用拼接参数，name属性对应的是请求方法中的参数；

2、在请求的js方法中，定义url=xxx，然后以 document.location.href = url 提交，url中可以拼接对应的请求方法中的参数；如:

var url = "/merBusi/submitCommitTask?taskId=" + taskId + "&key="+key+"&opinion="+opinion+"&comment="+comment;
window.location.href = url;

3、异步请求的方式

1）、json格式 在前端通过拼接json对象，或者后端返回一个json对象给前端；后端请求方法中接收对象可以通过@RequestBody注解，注意前后端参数名要一致； PS:如果是后端返回的json值，那么接受json的方法中可以用自定义的变量类型，如：

function addAllRefund() {      // 前端请求后端  	
    var url= "/refund/addAllRefund";
    var successResults=$("#jsonRefund").val();		// 后端返回的json对象
    $.ajax({
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
    	url:url,
    	type:"POST",
    	dataType:"json",
    	data:successResults,
    	success : function(data) {
    	    var code = data.code;
    		if (!isNull(code) && (code == "SUCCESS")) {    						
    			window.opener.reloadfund();
    			window.open("about:blank","_self").close();
    		} else {
    			alert(data.msg);
    		}
    	},
    	error : function(e) {
    		alert("系统异常，请联系管理员")
    		}
	}); 
}

后端接收前端的请求参数： @RequestBody List<RefundAppl> jsonRefund，直接接收，不用Gson转换

2)、传递参数，前后端方法中参数名一致：

function changeGroup() {
    if (confirm("即将切换集团，是否继续？")) {
	    var groupId= getId();
		var url="/bocCommon/changeGroup"
		$.ajax({
	        url: url,
			type: "POST",
			data: {
			    "groupId":groupId		// 拼接后端方法接收的参数，注意名称要一致
			},
			success: function (data) {
			         var code = data.code;
			         if (!isNull(code) && (code == "SUCCESS")) {
			            	window.parent.changeObj();
			            } else {
			                alert(data.msg);
			            }
			        },
			        error: function (e) {
			            alert("系统异常，请联系管理员")
			        }
			    });
			}			
		}

4、js中传递参数

可以通过th:onclick,然后拼接参数，如：

th:onclick="'resetPassword(' + ''' + ${user?.id} + '','' + ${group?.id} + '')'"

function resetPassword(userId,groupId) {
    if(confirm("即将通过手机短信接收重置密码，是否继续？")) {
	    var url = "/bocGroupUser/resetPassword?userId="+userId+"&groupId="+groupId;
					document.location.href = url;
				}
			}

六、获取前端DOM元素的方法：

1)、getElementById(idName) -- 获取具体某个元素 ​

2)、getElementsByName(name) -- 通过name属性获取一个元素集合，因为一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属性），所以 getElementsByName() 方法返回的是元素的数组，而不是一个元素。 ​

3)、getElementsByTagName() -- TagName就是标签名，如：<input>、<img>... getElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序。 ​ 如果把特殊字符串 "*" 传递给 getElementsByTagName() 方法，它将返回文档中所有元素的列表，元素排列的顺序就是它们在文档中的顺序。 ​

4)、getElementsByClass() -- 自己实现

            // 根据类名获取元素
			function getElementsByClass(oParent,sClass){
				var aResult = [];
				var aNode = oParent.getElementsByTagName("*");
				for(var i=0; i<aNode.length; i++){
					if(aNode[i].className == sClass){
						aResult.push(aNode[i]);
					}
				}
				return aResult;
			}

七、样式

1、通过visibility：hidden(visible)和display：none(block)可以控制某个标签的隐藏(显示)，区别是前者是占位置不显示，而后者是直接隐藏

2、不能直接用div包裹tr，要通过tbody标签包裹tr

3、cursor:pointer 可以实现像超链接那样的小手

4、text-decoration:underline 下划线

5、让两个div或者两个标签在同一行显示，可以通过设置float:left实现，要注意清除浮动：clear:both

6、传递参数，设置样式：$("input[resourceId=' " + rsrcId + " ']").attr("style", "display:none;");

7、$("<label>错误信息</label>").insertAfter("#textbox"); 将错误提示信息的label插入到id为textbox的元素之后

jQuery中attr()设置属性，css()设置style里的样式。属性如Html标签内部的title，src，style这些，style本身是标签的属性。

8、text-align:right，input中值的向右对齐

八、常用js

1、打开/关闭子窗口

window.open(url,name,style)或者 window.opener.reloadfund(); ----调用父窗口的reloadFund方法 ie可能存在打开子窗口后session丢失，可以通过模态窗口的方式打开：window.showModalDialog() 关闭子窗口：window.open("about:blank","_self").close(); 或 window.close()

2、iframe相关方法

获取父页面某个元素的值：window.parent.document.getElementById("protocolType").value;

调用父页面的setValue方法：window.parent.setValue()

3、判断是否包含某个元素：

        数组和字符串都可以可以直接使用indexOf方法来判断是否包含某个元素，如果元素存在于数组/字符串中，那么返回元素在数组/字符串中的下标值，如果不存在，那么返回-1，但是该方法在某些版本的IE中是不起作用，所以建议使用专jquery的inArray方法，该方法返回属元素在数组中的下标，如果不存在与数组中，那么返回－1，如下：

id.indexOf("{") == 0	// id包含{
busiIdList.indexOf(busiProVal)!=-1		// busiIdList包含busiProVal

 

觉得有收获的，可以来一波赞赏！