简单记录维护项目中前端相关知识
简单记录维护项目中前端相关知识：
- 1. bean:write
- 屏蔽HTML格式： `filter="false"`
- 时间格式化：format
- 格式化字符串：
- 获取对象属性：
- 2. 对值进行转换（如：code码转中文）
- logic:equal 标签
- c:if标签
- 3. jQuery本地存储
- cookie
- localStorage 存储在本地
- sessionStorage 存储在本地
- 4. layerlayer关闭按钮回调方法end
- 5. JS字符串转换为JSON的四种方法
- 1、jQuery插件支持的转换方式：
- 2、浏览器支持的转换方式(Firefox，chrome，opera，safari，ie)等浏览器：
- 3、Javascript支持的转换方式：
- 4、JSON官方的转换方式：
- 6. JQuery为Input输入框赋值
- 7. JQuery
- 7.1 页面加载完成后执行js
- 7.2 下拉框select
- 8. layer相关
- 8.1 弹出层 layer.prompt
- 8.2 `icon`对应的图标：
1. bean:write
bean:write相当于<%=request.getAttribute("something")%>
如果在后台代码中设置了request.setAttribute("hello","hello world");，则在某个jsp页面中，用struts的write标签取 获取hello的值：hello world。
bean:write常用的属性有如下几个：
-
name，用来指定属性的名字
-
filter，用来指定是否屏蔽到属性值的HTML格式
-
property，用来指定name所代表的对象的属性名字
-
format，用来指定显示的时间，数字，日期等的格式
屏蔽HTML格式： filter="false"
某处设置了request.setAttribute("bj","欢迎你。
时间格式化：format
某处设置了request.setAttribute("date",new Date());
则在某个jsp页面中，用struts的write标签取出并按指定方式显示日期的方法如下：
Fri Mar 28 15:04:21 CST 2008
2008-3-28 15：04：21
格式化字符串：
某处设置了request.setAttribute("n",“1223333.333”);
则在某个jsp页面中，用struts的write标签取出并按指定方式显示数字的方法如下：
1223333.333
1，223，333.333
如果希望小数点后的不足四位时，缺位补0，则应
1，223，333.3330
获取对象属性：
假如有User类和Groupe类，User类有属性名字userName，年龄age，性别sex和所属的Groupe，Groupe类有属性组名groupeName，并均具有相应的get和set方法。
某处设置了request.setAttribute("user",new User（"张三"，"20","男"，new Groupe("三组")）);
则在某个jsp页面中，用struts的write标签取出并按指定方式显示结构体的方法如下：
用户名：">
年龄：">
性别：">
组名：">
原文链接：
https://blog.csdn.net/gundumw100/article/details/83439817
2. 对值进行转换（如：code码转中文）
logic:equal 标签
<td style="width:7%">
<logic:equal name="xksqlist" property="cxd" value="0">境内</logic:equal>
<logic:equal name="xksqlist" property="cxd" value="1">出口</logic:equal>
<logic:equal name="xksqlist" property="cxd" value="2">进口</logic:equal>
</td>
c:if标签
如果表达式的值为 true 则执行其主体内容
<c:if test="${salary > 2000}">
<p>我的工资为: <c:out value="${salary}"/><p>
</c:if>
判断list是否为空：
<c:if test="${not empty list}">
</c:if>
<c:if test="${empty list}">
<tr><td colspan="10">暂时没有数据！</td></tr>
</c:if>
判断列表中某一个字段是否为null
<c:if test="${not empty list.qtotal}">
<c:out value="${list.qtotal}"/><p>
</c:if>
<c:if test="${empty list.qtotal}">
0
</c:if>
3. jQuery本地存储
cookie
cookie 存储在本地，容量最大4k，在同源的http请求时携带传递，损耗带宽，可设置访问路径，只有此路径及此路径的子路径才能访问此cookie，在设置的过期时间之前有效。
缺点：在浏览器禁用cookie时，会不能用。
//写cookie
$.cookie('mycookie','123',{expires:7,path:'/'});
//jquery 获取cookie
$.cookie('mycookie');
localStorage 存储在本地
localStorage 存储在本地，容量为5M或者更大，不会在请求时候携带传递，在所有同源窗口中共享，数据一直有效，除非人为删除，可作为长期数据。
//设置：
localStorage.setItem("dat", "456");
localStorage.dat = '456';
//获取：
localStorage.getItem("dat");
localStorage.dat
//删除
localStorage.removeItem("dat");
sessionStorage 存储在本地
sessionStorage 存储在本地，容量为5M或者更大，不会在请求时候携带传递，在同源的当前窗口关闭前有效。
//写入
sessionStorage.setItem('username','13134567890');
//读取
alert(sessionStorage.username);
4. layerlayer关闭按钮回调方法end
在页面中用layer弹出页面后，希望关闭layer的时候可以做一些事情，可以使用end函数实现；
layer.open({
title: ["xx管理列表", 'font-size:16px;'], // 标题
type: 2,
move: false, // 禁止拖拽
shadeClose: false, // 是否点击遮罩关闭
area: ['95%', '75%'],
content:"${pageContext.request.contextPath}/xxxx/xxxxlist.do",
scrollbar: false,
//关闭弹出框的回调函数，不管弹出框是手动关闭还是通过脚本进行关闭，都执行
end: function(){
callBack();//刷新列表页面
}
});
5. JS字符串转换为JSON的四种方法
转自：https://www.cnblogs.com/hgmyz/p/7451461.html
1、jQuery插件支持的转换方式：
$.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象
2、浏览器支持的转换方式(Firefox，chrome，opera，safari，ie)等浏览器：
JSON.parse(jsonstr); //可以将json字符串转换成json对象
JSON.stringify(jsonobj); //可以将json对象转换成json对符串
注：ie8(兼容模式),ie7和ie6没有JSON对象，推荐采用JSON官方的方式，引入json.js。
3、Javascript支持的转换方式：
eval('(' + jsonstr + ')'); //可以将json字符串转换成json对象,注意需要在json字符外包裹一对小括号
注：ie8(兼容模式),ie7和ie6也可以使用eval()将字符串转为JSON对象，但不推荐这些方式，这种方式不安全eval会执行json串中的表达式。
4、JSON官方的转换方式：
http://www.json.org/提供了一个json.js,这样ie8(兼容模式),ie7和ie6就可以支持JSON对象以及其stringify()和parse()方法；
可以在https://github.com/douglascrockford/JSON-js上获取到这个js，一般现在用json2.js。
6. JQuery为Input输入框赋值
$("#name").val("lee");
或者
$("#name").attr("value","lee");
$('#name1').val('值');
document.getElementById('name1').value='值';
document.getElementById('name1').html('值');
document.getElementById('name1').attr('值');
document.getElementById('name1').innerText = '值';
7. JQuery
7.1 页面加载完成后执行js
1、$(function(){
$("#a").click(function(){
//adding your code here
});
});
2、$(document).ready(function(){
$("#a").click(function(){
//adding your code here
});
});
3、window.onload = function(){
$("#a").click(function(){
//adding your code here
});
}
<script type="text/javascript">
$(function () {
alter("123qew");
})
script>
7.2 下拉框select
$("#dwlb").find("option:selected").val(); //获取下拉框select选中的值
$("#dwlb").find("option:selected").text();//获取select 选中的 text
$("#ddlRegType ").val();//获取select选中的 value:
$("#ddlRegType ").get(0).selectedIndex;//获取select选中的索引
$("#select_id").append(""); //添加一项option
$("#select_id").prepend(""); //在前面插入一项option
$("#select_id option:last").remove(); //删除索引值最大的Option
$("#select_id option[index='0']").remove();//删除索引值为0的Option
$("#select_id option[value='3']").remove(); //删除值为3的Option
$("#select_id option[text='4']").remove(); //删除TEXT值为4的Option
$("#ddlRegType ").empty();//清空 Select:
8. layer相关
8.1 弹出层 layer.prompt
官方demo：
//prompt层
layer.prompt({title: '输入任何口令，并确认', formType: 1}, function(pass, index){
layer.close(index);
layer.prompt({title: '随便写点啥，并确认', formType: 2}, function(text, index){
layer.close(index);
layer.msg('演示完毕！您的口令：'+ pass +'
您最后写下了：'+text);
});
});
需要注意formType的值表示的含义formType: 1, //输入框类型，支持0（文本）默认1（密码）2（多行文本）。
可选参数：
title: '请输入值',
formType: 1, //输入框类型，支持0（文本）默认1（密码）2（多行文本）
//当formType为2时，可加参数 area 指定输入区域
area: ['800px', '350px'] //自定义文本域宽高
value: '', //初始时的值，默认空字符
maxlength: 140, //可输入文本的最大长度，默认500
closeBtn:0,// 隐藏右上角的关闭按钮
shadeClose: true,// 表示点击阴影部分是否关闭
如果需要对确认按钮添加事件：
layer.prompt({
formType: 2,
title: '请填写排除原因（注：必填项）',
area: ['500px', '150px'],
btnAlign: 'c',
yes: function(index, layero){
// 获取文本框输入的值
var value = layero.find(".layui-layer-input").val();
if (value) {
//alert("输入值为：" + value);
layer.msg("输入值为：" + value, {icon: 5,time: 1000,shade:0.2});
layer.close(index);
} else {
//alert("输入值为空！");
layer.msg("输入值为空!", {icon: 5,time: 1000,shade:0.2});
return false;//点击后不关闭窗口，需返回false
}
},
btn2: function(index, layero){
//取消按钮事件
//console.log("111111");
layer.close(index);
}
});
用layer.open可以实现弹出文本框及按钮事件,layer.prompt也是在layer.open基础上的封装…
所以上面的按钮事件，其实是默认了两个按钮：btn: ['确认', '取消']，但是这里有个小坑：
如果取消按钮里面没有任何事件需要处理的，那么写不写btn2这个东西都是一样会关闭当前弹出层的。
因为没有指定btn2这个事件，则取消按钮走的就是layer.open里面的cancel函数
cancel: function(){
//右上角关闭回调
}
反过来就不太好使了，如果我想在取消按钮里面指定执行某事件，加上cancel函数，而不是btn2,然后在里面写上要处理的东西，这样里面的js是不会执行的。这就很神奇了。
我又测试了一遍，特意将两个函数都写上，并且cancel函数放在btn2的前面：
yes: function(index, layero){
console.log("yes");
},
cancel: function(){
console.log('cancel');
},
btn2: function(){
console.log('btn2');
}
控制台还是只打印了btn2
8.2 icon对应的图标：
icon图转自：https://blog.csdn.net/beauxie/article/details/60959971