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

2 篇文章 0 订阅

一、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

 

觉得有收获的,可以来一波赞赏!

  • 9
    点赞
  • 35
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值