笔记 jsp/ajax/js/jquery/html5/css+div->table
1. jsp
1）.jsp(39,33) equal symbol expected:
1 var arr = new Array(); 2 arr[0] = "aaa"; 3 arr[1] = "bbb"; 4 arr[2] = "ccc"; 5 //alert(arr.length);//3 6 arr.pop(); 7 //alert(arr.length);//2 8 //alert(arr[arr.length-1]);//bbb 9 arr.pop(); 10 //alert(arr[arr.length-1]);//aaa 11 //alert(arr.length);//1 12 13 var arr2 = new Array(); 14 //alert(arr2.length);//0 15 arr2[0] = "aaa"; 16 arr2[1] = "bbb"; 17 //alert(arr2.length);//2 18 arr2.pop(); 19 //alert(arr2.length);//1 20 arr2 = arr2.slice(0,arr2.length-1); 21 //alert(arr2.length);//0 22 arr2[0] = "aaa"; 23 arr2[1] = "bbb"; 24 arr2[2] = "ccc"; 25 arr2 = arr2.slice(0,1); 26 alert(arr2.length);//1 27 alert(arr2[0]);//aaa 28 alert(arr2[1]);//undefined 29 30 shift：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined 31 var a = [1,2,3,4,5]; 32 var b = a.shift(); //a：[2,3,4,5] b：1 33 34 unshift：将参数添加到原数组开头，并返回数组的长度 35 var a = [1,2,3,4,5]; 36 var b = a.unshift(-2,-1); //a：[-2,-1,1,2,3,4,5] b：7 37 注：在IE6.0下测试返回值总为undefined，FF2.0下测试返回值为7，所以这个方法的返回值不可靠，需要用返回值时可用splice代替本方法来使用。 38 39 pop：删除原数组最后一项，并返回删除元素的值；如果数组为空则返回undefined 40 var a = [1,2,3,4,5]; 41 var b = a.pop(); //a：[1,2,3,4] b：5 //不用返回的话直接调用就可以了 42 43 push：将参数添加到原数组末尾，并返回数组的长度 44 var a = [1,2,3,4,5]; 45 var b = a.push(6,7); //a：[1,2,3,4,5,6,7] b：7 46 47 concat：返回一个新数组，是将参数添加到原数组中构成的 48 var a = [1,2,3,4,5]; 49 var b = a.concat(6,7); //a：[1,2,3,4,5] b：[1,2,3,4,5,6,7] 50 51 splice(start,deleteCount,val1,val2,...)：从start位置开始删除deleteCount项，并从该位置起插入val1,val2,... 52 var a = [1,2,3,4,5]; 53 var b = a.splice(2,2,7,8,9); //a：[1,2,7,8,9,5] b：[3,4] 54 var b = a.splice(0,1); //同shift 55 a.splice(0,0,-2,-1); var b = a.length; //同unshift 56 var b = a.splice(a.length-1,1); //同pop 57 a.splice(a.length,0,6,7); var b = a.length; //同push 58 59 reverse：将数组反序 60 var a = [1,2,3,4,5]; 61 var b = a.reverse(); //a：[5,4,3,2,1] b：[5,4,3,2,1] 62 63 sort(orderfunction)：按指定的参数对数组进行排序 64 var a = [1,2,3,4,5]; 65 var b = a.sort(); //a：[1,2,3,4,5] b：[1,2,3,4,5] 66 67 slice(start,end)：返回从原数组中指定开始下标到结束下标之间的项组成的新数组 68 var a = [1,2,3,4,5]; 69 var b = a.slice(2,5); //a：[1,2,3,4,5] b：[3,4,5] 70 71 join(separator)：将数组的元素组起一个字符串，以separator为分隔符，省略的话则用默认用逗号为分隔符 72 var a = [1,2,3,4,5]; 73 var b = a.join("|"); //a：[1,2,3,4,5] b："1|2|3|4|5" 74 75 再给个利用数组模拟javaStringBuffer处理字符串的方法： 76 77 /** 78 * 字符串处理函数 79 */ 80 function StringBuffer() 81 { 82 var arr = new Array; 83 this.append = function(str) 84 { 85 arr[arr.length] = str; 86 }; 87 88 this.toString = function() 89 { 90 return arr.join(""); //把append进来的数组ping成一个字符串 91 }; 92 } 93 94 今天在应用中突然发现join是一种把数组转换成字符串的好方法，故封装成对象使用了： 95 96 /** 97 * 把数组转换成特定符号分割的字符串 98 */ 99 function arrayToString(arr,separator) 100 { 101 if(!separator) separator = "";//separator为null则默认为空 102 return arr.join(separator); 103 } 104 105 /** 106 * 查找数组包含的字符串 107 */ 108 function arrayFindString(arr,string) 109 { 110 var str = arr.join(""); 111 return str.indexOf(string); 112 }
4）被include的jsp页面中的标签取后台传的值
<s:textarea name="modelDetail.rules" value="%{modelDetail.rules}"></s:textarea>
或<s:test name="%{status==1}">
5) s标签格式化long类型的时间
<%@page import="java.util.Date" %>
<s:if test="modifyTime!=null">
<s:bean name="java.util.Date" id="mt">
<s:param name="time">${modifyTime}</s:param>
</s:bean>
<s:date name="#mt" format="yyyy-MM-dd hh:mm:ss"/>
</s:if>
6）s:date format HH 和 hh 区别 hh：13点不显示13，只显示1
7）HTML中 < 转义 <
8）文件异步上传下载 ajax+servlet
1 <SCRIPT type="text/javascript"> 2 function agree(){ 3 4 $j.ajax({ 5 url: url, 6 type: 'post', 7 data:{optNote:$j("#optNote").val(), 8 modelDetailCode:$j("#modelDetailCode").val(), 9 resourcesId:$j("#res").val() 10 }, 11 success: function(result){alert(result);} 12 13 }); 14 }
3.js
1) js中调用另一个js: 参考：http://blog.163.com/shanqing_shuixiu@yeah/blog/static/16531922920110120719208/
document.write("<script type=\"text\/javascript\" src=\"/cip/js/map/mapAbc.js\"><\/script>");
2) 引用js时指定编码格式：<scriptlanguage='javascript'src='....'charset='utf-8'></script>
另：为了防止编码在不同浏览器下的乱码问题 ， 在Apache下设置DefaultCharset
参考：http://www.laruence.com/2008/10/16/559.html
3) js解析json：参考：http://www.cnblogs.com/lucas/archive/2009/04/13/1434566.html
1 var objs = eval("[{ id: 1, name: 'n_1' }, { id: 2, name: 'n_2'}]"); 2 3 <script type="text/javascript"> 4 function getJson() { 5 // 在IE7下测试通过，IE6下必须创建 new ActiveXObject("MSXML2.XMLHTTP.6.0") 6 var request = new XMLHttpRequest(); 7 8 request.open('GET', 'GetJson.ashx'); 9 request.onreadystatechange = function() { 10 if (request.readyState == 4 && request.status == 200) { 11 var objs = eval(request.responseText); 12 alert(objs.length); // 2 13 alert(objs[0].id); // 1 14 alert(objs[1].name);// 'n_2' 15 } 16 } 17 request.send(null); 18 } 19 </script>
4) js的map实现：参考：http://www.cnblogs.com/fengys-moving/archive/2012/08/26/2657417.html
5) 自己起的方法名不能为submit方法
6）js RegExp replace() 参考：http://www.cnblogs.com/leesa/archive/2010/01/29/1659070.html
正则表达式 参考：http://www.cnblogs.com/yansheng/archive/2010/05/07/1730188.html
4. jquey
1）指定form的action并提交
$j('#modelForm')[0].action = url;
$j('#modelForm')[0].submit();
2）动态多选框，选中与否触发指定单选框的option增加或减少
3）flexgrid ，动态显示列表，并选择指定行，把内容赋值到指定标签
4）单选框jquery组件Chosen 参考：http://www.aqee.net/docs/Chosen/Chosen.htm
40个jquery组件 参考：http://developer.51cto.com/art/201308/408542.htm
5. html5跟踪/历史流程图：
1）version1.0 简单版完整代码：传入json字符串，顺序递进显示流程图
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 4 <title></title> 5 <meta name="keywords" content="HTML5,Canvas,Image,flow" /> 6 <meta name="description" content="" /> 7 </head> 8 <body onload="drawFlow('myCanvas','opts');"> 9 10 <canvas id="myCanvas" width="800" height="600"></canvas> 11 12 </body> 13 <script type="text/javascript"> 14 function drawFlow(id,opts) { 15 var canvas = document.getElementById(id); 16 if (canvas == null) 17 return false; 18 var context = canvas.getContext("2d"); 19 20 21 //json数组 22 var opts = [{ id: 1, optName: 'n_1', optTime: '2013', optType: '新建' }, { id: 2, optName: 'n_2', optTime: '2013', optType: '新建' }]; 23 24 var canvas = document.getElementById(id); 25 if (canvas == null) 26 return false; 27 var context = canvas.getContext("2d"); 28 29 30 31 //矩形左上角点坐标X、Y 32 var recFirstX = 0; 33 var recFirstY = 0; 34 //矩形长宽 35 var recLength = 150; 36 var recWidth = 150; 37 //矩形颜色 38 var recColor = "#CCFFFF"; 39 //矩形增量 下一个矩形左上角点坐标相对于上一个的增加值 40 var recAddX = 250; 41 var recAddY = 100; 42 //文本坐标X、Y 43 var txtFirst1X = 20; 44 var txtFirst1Y = 30; 45 var txtFirst2X = 20; 46 var txtFirst2Y = 60; 47 var txtFirst3X = 20; 48 var txtFirst3Y = 90; 49 //文本坐标增量 50 var txtAddX = 250; 51 var txtAddY = 100; 52 //文本字体 53 var txtFont = "15px Times New Roman"; 54 //文本变量 55 var optName="操作人:"; 56 var optTime="操作时间:"; 57 var optType="状态:"; 58 //连线坐标 59 var lineFirst1X = 150; 60 var lineFirst1Y = 75; 61 var lineFirst2X = 200; 62 var lineFirst2Y = 75; 63 var lineFirst3X = 200; 64 var lineFirst3Y = 175; 65 var lineFirst4X = 250; 66 var lineFirst4Y = 175; 67 //连线增量 68 var lineAddX = 250; 69 var lineAddY = 150; 70 71 var len = opts.length; 72 for( var i = 0; i < len; i++ ){ 73 74 75 76 //矩形填充颜色 77 context.fillStyle = recColor; 78 context.fillRect(recFirstX + recAddX * i, recFirstY + recAddY * i, recLength, recWidth); 79 //矩形边框颜色透明度 80 context.strokeStyle = "rgba(25,54,34,0.6)"; 81 context.strokeRect(recFirstX + recAddX * i, recFirstY + recAddY * i, recLength, recWidth); 82 //文本 83 context.fillStyle = "black"; 84 context.font = txtFont; 85 context.textAlign="left"; 86 context.textBaseline = 'top'; 87 context.fillText(optName + opts[i].optName, txtFirst1X + txtAddX * i, txtFirst1Y + txtAddY * i); 88 context.fillText(optTime + opts[i].optTime, txtFirst2X + txtAddX * i, txtFirst2Y + txtAddY * i); 89 context.fillText(optType + opts[i].optType, txtFirst3X + txtAddX * i, txtFirst3Y + txtAddY * i); 90 91 if( i == len - 1) 92 break; 93 94 //连线样式及位置 95 context.strokeStyle = "rgb(250,0,0)"; 96 context.fillStyle = "rgb(250,0,0)" 97 context.moveTo(lineFirst1X + lineAddX * i, lineFirst1Y + lineAddY * i); 98 context.lineTo(lineFirst2X + lineAddX * i, lineFirst2Y + lineAddY * i); 99 context.lineTo(lineFirst3X + lineAddX * i, lineFirst3Y + lineAddY * i); 100 context.lineTo(lineFirst4X + lineAddX * i, lineFirst4Y + lineAddY * i); 101 context.stroke(); 102 103 } 104 105 106 107 } 108 </script> 109 </html>
2）version2.0 部分代码：
flow.html:
1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 3 <title></title> 4 <meta name="keywords" content="HTML5,Canvas,Image,flow" /> 5 <meta name="description" content="" /> 6 </head> 7 8 <body> 9 <canvas id="canvas1"></canvas> 10 11 </body> 12 <script language="javascript" type="text/javascript" src="js/flow.js" charset='utf-8'></script> 13 <script type="text/javascript"> 14 window.onload=function(){ 15 flow('opts'); 16 } 17 </script> 18 </html>
flow.js:
util/map.js:
images/flow/:
结果：
6. css+div 组成的table 代码暂不上传
参考： http://www.cnblogs.com/Nimitz/archive/2010/04/24/1719327.html
