JSP-JS常用
超链接<a>标签，加上点击事件
<a href = "http://localhost/piprt/0/10#特殊字符测试_2017724135334669.docx" onclick="replaceChar(this);" />
<script>
function replaceChar(obj){
server_url = obj.href ;
window.open(server_url.replace("#","%23")); // URL中含有#号特殊字符需要做转换
return false ;// 加上return false 是不让a标签的href发生跳转，否则会连续打开两次超链接的网址
}
</script>
1.textarea:
<div class="wsy_row2">
<a class="wsy_f14 wsy_left">问题描述:</a>
<textarea name="ques.content" id="content" cols="80" rows="15" ${qu.user_id!=null && sessionScope.LOGIN_USER_ID!=qu.user_id ? "readonly" :"" }>${qu.content }</textarea>
</div>
<--textarea标签之间不要有多余空格或者换行，否则会导致输入框里有默认的空字符或者换行符-->
当textarea 标签内需要显示一些默认的文字时，换行符号为：“ ”
2. button
<button type="button" onclick="return saveQuestion();">添 加</button>
3. <c:if>
<c:if test="${qu.content!=null}">${qu.content}</c:if>
4. <c:forEach>
<c:forEach var="proList" items="${proList }">
<input type="checkbox" name="proIds" id="proId_${proList.id }" value="${proList.id }" />${proList.proName }
</c:forEach>
5.JS变更from提交action;这里用get提交，所以不会提交form表单内容Input
function exportExcel(){
$("#pagIndex").val("0");
var searchFrm = document.getElementById("searchFrm"); //根据id获取表单
searchFrm.action = "costlog/excel.action"; //重新指定action
searchFrm.submit(); //提交表单
}
//批量删除，需要提交表单里的checkbox类型的Input标签，所以也可以这样提交
function delSome(){
var cou = 0;
$("input[name='code_Value']").each(function(){
if(this.checked){
cou++;
}
});
if(cou==0){
alert("请选择需要删除的项！");
return false;
}
if(!confirm('您确认要删除此数据吗?删除后数据不能恢复!')){
return false;
}
document.getElementById("submitForm").action = "notification/delSome.action";
document.getElementById("submitForm").submit();
return true;
}
6.AJAX
ACTION:
public void tt(){
HttpServletResponse response = ServletActionContext.getResponse();
try{
PrintWriter writer = response.getWriter();
writer.print("hello ");
writer.flush();
writer.close();
}catch(Exception e){
e.printStackTrace();
}
}
JS:
function selectProv(){
var xmlHttp = null;
//表示当前浏览器不是ie,如ns,firefox
if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else if(window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.onreadystatechange=function()
{
if (xmlHttp.readyState==4 && xmlHttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText; //textarea标签可以正常赋值，但是Input标签这样不行
}
}
xmlHttp.open("GET","${basePath }adminuser/tt.action?",true);
xmlHttp.send();
}
HTML:
<select name="region" class="select1" id="BigClass" onchange="selectProv(this)">
7. 一个页面有多个form表单，提交时校验数据JS控制
【CSS】
<style type="text/css">
#loadStr{width:100%;height: 100%;position: fixed;z-index: 1;background-color: white;}
</style>
【html】
<form id="saveForm0" name="saveForm" action="proxy/saveWeishang.action?" method="post" enctype="multipart/form-data">
...
</form>
<button type="button" onclick="uploadFile('saveForm0');">添 加</button>
【JS】
function uploadFile(formId){
var form = $("#"+formId); //获取到id为参数formId的标签
var iptVersion = form.find("input[name='version']").val() ;
//debugger;
//alert(formId+" = "+form.find("input[name='version']")+" == "+iptVersion);
var remark = form.find("textarea[name='remark']").val() ;
var apkFile = form.find("input[name='apkFile']").val() ;
if(iptVersion == ""){
alert("必需填写版本号！");
return false;
}
if(remark == ""){
alert("新输入新版本描述！");
return false;
}
//alert(apkFile);
if(apkFile == ""){
alert("新选择文件！");
return false;
}
//return false;
$("#loadStr").show(); //上传进度显示
$("#"+formId).submit(); //提交表单
//return true;
}
8. JS获取页面中单选框的值
<input type="radio" name="safePhone_status" id="rd_pt1" value="0"/>
<input type="radio" name="safePhone_status" id="rd_pt2" value="1" />
var status = $("input[name='safePhone_status']:checked").val() ;
9. JS获取html标签的值；
var v = document.getElementById("xx").value;
var area2 = $("#area_name").val();
var temp01 = document.getElementById("span01").innerTHML;//获取span标签的内容
在iframe子页面获取父页面元素: $('#objld', parent.document);
在父页面获取iframe子页面的元素: $("#objid", document.iframes('iframe').document) ;
10. JS设置Html标签的值（id选择器并赋值）
$("#safePhone").val('abc');
$("#span01").text("sssssss");//设置span标签的内容
给Input标签赋值：document.getElementById("randNum").value="" ;
给textarae赋值：document.getElementById("txtHint").innerHTML="" ;
//两种方法设置disabled属性为禁用设置
$('#areaSelect').attr("disabled",true);
$('#areaSelect').attr("disabled","disabled");
document.getElementById("delbutton").disabled="disabled";
//三种方法移除disabled属性
$('#areaSelect').attr("disabled",false);
$('#areaSelect').removeAttr("disabled");
$('#areaSelect').attr("disabled","");
document.getElementById("nimei").style.display = "";//上面的不行用这个
document.getElementById("delbutton").disabled=""; //显示设置
jQuery 捕获：
$("#test").text() ; //text() - 设置或返回所选元素的文本内容
$("#test").html(); //html() - 设置或返回所选元素的内容（包括 HTML 标记）
$("#test").val() ; //val() - 设置或返回表单字段的值
$("#w3s").attr("href"); //attr() 方法用于获取属性值
$("#id").attr("class","aaa"); //获取属性，并设置属性值； 将ID为"id"的HTML标签的class改为aaa.
$("#id").show()表示display:block,
$("#id").hide()表示display:none;
$("#id").toggle()切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
$("#id").css('display','none');
$("#id").css('display','block');
或
$("#id")[0].style.display = 'none';
11.js css 路径问题 <script src="../js/V2/jquery.js"></script>
../ 上级
../../ 上上级
html标签中路径问题：basePath
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<form name="safeLoginFrm" id="safeLoginFrm" method="post" action="<%=basePath %>login/Login.action" >
12. EL表单式遍历标识勾选状态；
request.setAttribute("proList", proList);
request.setAttribute("abc", list);
${abc.contains(proList.id) ? "checked" : "" }
13. JS 厘米引用EL，用双引号就可以了
var num = "${adlst.size()}";
14. JS设置DIV显示：
function set_need_online(obj){debugger;
$("#need_online").val(obj);
if(obj==0){
document.getElementById("distr_type_div").style.display="none";
}else{
document.getElementById("distr_type_div").style.display="";
}
}
15. JQuery 处理select标签的点击事件：
$(document).ready(function(){
$('#deal_op').change(function(){
var t = $(this).children('option:selected').val();//selected的值
if(t==3){
document.getElementById("dealDiv").style.display="";
}else{
document.getElementById("dealDiv").style.display="none";
}
})
})
jQuery中获得选中select值(即复选框) *********
$('#testSelect option:selected').text();//选中的文本
$('#testSelect option:selected') .val();//选中的值
$("#testSelect ").get(0).selectedIndex;//索引
16. 下拉框嵌入EL
<select name="cust.serviceLevel" style="width: 120px" >
<option value="0" ${returnMap.c_serviceLevel==0 ? "selected" : "" } >-请选择-</option>
<option value="1" ${returnMap.c_serviceLevel==1 ? "selected" : "" } >普通</option>
<option value="2" ${returnMap.c_serviceLevel==2 ? "selected" : "" } >银卡</option>
<option value="3" ${returnMap.c_serviceLevel==3 ? "selected" : "" } >金卡</option>
</select>
17. html的span标签来组合行内元素，以便通过样式来格式化它们
<span style="color: #FF0000">金卡</span>
18. JSP页面mysql时间格式转换
实体类声明类型：import java.sql.Timestamp;
private Timestamp createtime ;
JSP页面引入:<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<fmt:formatDate value="${d.c_createtime }" pattern="yyyy-MM-dd HH:mm:ss" var="fmttime"/>${fmttime }</td>
19. html标签的id取值不能有点号，如：<input type="text" id="email.status" name="email.status" value="0" />
用jQuery给这个input赋值会失败：$("#email.status").val(type);
把点号去掉就可以正常赋值了;
*********************************
*********************************
Java时间：
new java.sql.Timestamp(System.currentTimeMillis())
获取Session:
HttpSession session = ServletActionContext.getRequest().getSession();
HttpServletRequest request = ServletActionContext.getRequest();
Struts配置文件传参：
<result name="redirectlist" type="redirect">
<param name="location">list.action?proStatus=${proStatus}&fromUserId=${fromUserId}</param>
</result>
生成随机字符串
import org.apache.commons.lang.RandomStringUtils;
System.out.println(RandomStringUtils.randomAlphanumeric(15));
import java.util.UUID;
ystem.out.println(UUID.randomUUID().toString());
获取reqeust:
HttpServletRequest request = ServletActionContext.getRequest();
HttpSession session = ServletActionContext.getRequest().getSession();
插入数据库时间；
nc.setCreatetime(new java.sql.Timestamp(System.currentTimeMillis()));
/*******************************************\
/*******************************************\
JS常用：
JS跳转：
<script>alert('登录超时,请重新登录!') ; window.location.href='../oauth_cashier_login_link.php' ;</script>
javascript confirm用法:
语法:confirm(message)
message：要在 window 上弹出的对话框中显示的纯文本（而非 HTML 文本）。
说明:如果用户点击确定按钮，则 confirm() 返回 true。如果点击取消按钮，则 confirm() 返回 false。
例如：
var message = '确定提交吗'；
if(confirm(message)){
...
}
获取iframe对象：
document.frames[0].document.getElementsByName("projid");//获取页面里第一个iframe对象，的document对象的Name为projid的元素
window.parent.frames //获取父页面的iframe对象
function myselect(t){debugger; //通过每次单击切换选中状态
if(t!=""){
var flag=document.getElementById("cb"+t).checked; //获取隐藏的checkBox的勾选状态
document.getElementById("t"+t).checked=!flag; //设置点击的那一行的选中状态
document.getElementById("t"+t).className=!flag?"clicked":""; //设置class样式
}
}
var remark = document.all.remark.value; //获取当前文档中所有id/name为remark的标签的value的值
JS获取子页面的按钮，模拟点击效果：
[HTML]
<iframe name="true_body" src="A18_detail_Interface.asp?doc_sid=<%=doc_sid%>" border="0" frameborder="0" width="100%" height="100%" scrolling="no">
[JS]
var mainFrame=document.frames["true_body"];
mainFrame.document.all.subbotton.click(); //subbotton是子页面上按钮的ID
JS弹出窗口方法：
【parent.html】
<input type="text" id="text1" value="hello world!" onchange="change()"/>
function showDialog(){
//弹出窗口关闭前，原窗口不能获得焦点
showModalDialog("Child.html",self,"dialogwidth=500px;dialogheight=500px;dialogtop=100px;dialogleft=100px;center=no;help=no;resizable=no;status=no;scroll=yes");
//弹出窗口不影响原窗口获得焦点 ，火狐 360浏览器不支持showModelessDialog
//window.showModelessDialog("Child.html",self,"dialogwidth=500px;dialogheight=500px;dialogtop=100px;dialogleft=100px;center=no;help=no;resizable=no;status=no;scroll=yes");
}
function change(){alert("hhahahha");}
【child.html】
获取父页面的标签并赋值：
parent.dialogArguments.document.getElementById("text1").value="你好世界！";
//var a = window.dialogArguments.document.getElementById("text1").value="你好世界！"; //用window也行
//window.dialogArguments.back_db(); //可以调用父页面的JS方法back_db
//获取到父页面的标签对象后还能触发标签里定义的函数，如上面的onchange()函数
if(parent.dialogArguments.document.getElementById("text1").onchange!=null){
parent.dialogArguments.document.getElementById("text1").onchange();
}
给input 添加触发事件：(当JS事件无法触发时，加上 javascript:)
<input type="text" name="book" id="book" onchange="javascript:autoCountMoney(this);" />
/*******************************************\
CSS 常用样式
/*******************************************\
1. class选择器
<style>
.center
{
text-align:center;
}
</style>
<h1 class="center">标题居中</h1>
2. id选择器（id一般用于页面唯一标识，建议还是用class选择器）
<style>
#para1{
text-align:center;
color:red;
}
</style>
<p id="para1">Hello World!</p>
3. 外边据：margin
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
4. 内边距（填充）：padding
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
5. 相对位置：position:relative
style="position:relative;left:-150px;
6. CSS样式优先级原则：就近原则，行间样式>页面样式>引入样式
7. 表单样式：
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
}
其他样式：
.wsy_list tbody td{ border-left:1px solid #dddddd;}
ul,li{ margin:0; padding:0; font-size:12px;}
html, body{height: 100%;}
位置浮动：
style="float:left;"
