简单记录维护项目中前端相关知识

1. bean:write

bean:write相当于<%=request.getAttribute("something")%>

如果在后台代码中设置了request.setAttribute("hello","hello world");，则在某个jsp页面中，用struts的write标签取 获取hello的值：<bean:write name="hello"/>，则页面上显示出hello world。

bean:write常用的属性有如下几个：

• name，用来指定属性的名字

• filter，用来指定是否屏蔽到属性值的HTML格式

• property，用来指定name所代表的对象的属性名字

• format，用来指定显示的时间，数字，日期等的格式

屏蔽HTML格式： filter="false"

某处设置了request.setAttribute("bj","<font color='red>欢迎你</font>");

则在某个jsp页面中，用struts的write标签取出并按红色的方式显示的方式如下：

<bean:write name="bj" filter="false"/>，则页面上显示出红色的欢迎你。如果filter属性不设置为false，则默认为true，那么显示出的内容就为<font color='red>欢迎你</font>。

时间格式化：format

某处设置了request.setAttribute("date",new Date());

则在某个jsp页面中，用struts的write标签取出并按指定方式显示日期的方法如下：

<bean:write name=“date”/>,此为默认的显示方法，显示出的时间为：Fri Mar 28 15:04:21 CST 2008

<bean:write name=“date” format="yyyy-MM-dd HH：mm：ss"/>,此为自己指定日期的显示格式，显示出的时间为2008-3-28 15：04：21

格式化字符串：

某处设置了request.setAttribute("n",“1223333.333”);

则在某个jsp页面中，用struts的write标签取出并按指定方式显示数字的方法如下：

<bean:write name=“n”/>,此为默认的显示方法，显示出的数字位1223333.333

<bean:write name=“n” format="###，###.####"/>,此为自己指定数字的显示格式，显示出的时间为1，223，333.333

如果希望小数点后的不足四位时，缺位补0，则应

<bean:write name=“n” format="###，###.0000"/>,此为自己指定数字的显示格式，显示出的时间为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标签取出并按指定方式显示结构体的方法如下：

用户名：<input type="text" value="<bean:write name=“user” property="userName"/>">

年龄：<input type="text" value="<bean:write name=“user” property="age"/>">

性别：<input type="text" value="<bean:write name=“user” property="sex"/>">

组名：<input type="text" value="<bean:write name=“user” property="groupe.groupeName"/>">

原文链接：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插件支持的转换方式：

强烈建议首选这种原生jQuery方式，因为下面两种不兼容IE8

当你信心满满提测之后，看到测试提的bug，就很郁闷，结果用IE8一试，就更郁闷了，这玩意不兼容。。。。。。

另外如果考虑周全一些，后端就别直接返回json了。。。。

因为说不定哪个接口返回的json，用户使用的浏览器就识别不出来了，又或者直接把json内容当成文件下载了，保险起见还是返回字符串，前端转一下，转不过来的直接提示异常就好了。

 $.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象

另外IE提示：SCRIPT1014: 无效字符，就很有可能是字符串转json时，使用的关键字，IE不识别了。

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 value='Value'>Text</option>"); //添加一项option

 $("#select_id").prepend("<option value='0'>请选择</option>"); //在前面插入一项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:

7.3 自动删除Input框中的非法输入

1. 只能输入数字

<input type="text" id="qzdysl" maxlength="6" class="m_input" style="width:60%;" onkeyup="this.value=this.value.replace(/\D/g,'')"/>

onkeyup 事件为当用户释放键盘按钮时执行Javascript代码，这里使用正则检测输入的值，然后进行过滤赋值

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 +'<br>您最后写下了：'+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