一、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.数组相关知识
- 数组的push方法:向数组中添加元素
- 数组的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
觉得有收获的,可以来一波赞赏!