【前端笔记】项目中运用到的前端操作

最新推荐文章于 2024-04-30 17:28:01 发布

寻找现实扭曲力场

最新推荐文章于 2024-04-30 17:28:01 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/pearyangyang/article/details/39184671

版权

前端笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.对于checkbox的操作：

在信息列表中，我们通常希望按住一个按钮就全部选中所有按钮，这个需要结合checkbox的checked事件和JS函数作处理

<html>
	<head>
		<script type="text/javascript">
		   function checkAll(obj){
			var check = document.getElementsByName("checkbox");
			if(obj.checked == true){
				for(var i=0;i<check.length;i++){
					check[i].checked = true;
				}
			}else{
				for(var i=0;i<check.length;i++){
					check[i].checked = false;
				}
			}
		    }
		</script>
	</head>
	<body>
		<input type="checkbox" name="checkboxAll" value="checkbox1" οnclick="checkAll(this);" />lead<br/>
		<input type="checkbox" name="checkbox" value="checkbox2"/>2<br/>
		<input type="checkbox" name="checkbox" value="checkbox3"/>3<br/>
		<input type="checkbox" name="checkbox" value="checkbox4"/>4<br/>
	</body>
</html>

当然以后我们要实现重用的话，可以把checkAll(obj)这个函数写在一个.js文件里面方便多个页面调用

2.当我们引用一个css的时候往往会忽略路径问题，导致css样式和js的函数没有效果。这时我们就要加上一些路径定位，可以称为绝对路径吧。

比如说我们的项目名叫StudentManage,那么在JSP中<%=request.getContextPath()%>输出的结果就是/StudentManage

然后我们就可以通过路径找到相应的css了，例如下面的树形图：我们要得到相应的样式，可以在JSP文件中引用为：

另外还有一种精确获得路径的方法：

<%
	String bathPath = request.getScheme() + "://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
	out.println(bathPath);
%>

可以看出getScheme()拿到的是http头，getServerName拿到的是服务器名——本地的话就是localhost(127.0.0.1)，getServerPort()拿到的就是端口号

3.起初我还不知道怎么在JSP页面循环遍历一个list，通常我们会用C标签的foreach，再加上EL表达式，这样我们可以实现Java代码与页面之间的分离。最常见的一个例子如下：

我们在Servlet端已经将list这个集合setAttribute进request了，我们通过foreach在JSP页面进行遍历吧，比如我们学生有姓名，年龄，学校这三个属性，我们通过foreach来遍历

首先在JSP中使用C标签肯定要导入：<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>，下面就是foreach遍历了：

	<table>
			<tr>
				<th>all</th>
				<td>name</td>
				<td>age</td>
				<td>school</td>
			</tr>
			<c:foreach items="${list}" var="stu">
			<tr>
				<th>1</th>
				<td>${stu.name}</td>
				<td>${stu.age}</td>
				<td>${stu.school}</td>
			</tr>
		</c:foreach>
		</table>

4.当我们有很多种情况的时候，需要一种种列出来，比如这个人的学历是初中？高中？本科？研究生？博士？时，这时候用到<c:choose><c:when>来代替<c:if>（因为这里条件判断给出的情况只有一两个，不允许多种判断）

<c:choose>
			<c:when test="">
				
			</c:when test="">
			<!--otherwise如果不需要的话可以不用-->
			<c:otherwise></c:otherwise>
		</c:choose>

5.在处理参数的问题，我们很有可能会传一个带中文字符的参数给Servlet，这时候很容易出现乱码情况，也就是Get参数乱码，这个情况出现在一个查询功能上，例如如图：

我们可以通过参数的转化达到解决乱码的问题，我的另一个解决方法是把这些封装在一个form表单里面，form表单里面增加一个隐藏标签，存查询列表的Servlet，点submit按钮提交的时候，就是表单的提交操作就可以了，如：

<input type="hidden" name="method" value="listmethod"/> 然后利用JS事件 document.getElementById("form2").submit(); 提交就行了。

6.今天我想做一个封装的JS，里面包括对页面操作的各种方法，然后我就直接在JSP页面导入使用就行了，这样达到代码的重用，因为JS代码和JSP代码分离，也看着舒服。但是在这个地方出现了一个问题，就是有些功能是能够使用的，但是一些功能却不能使用，遇到这种情况，我想应该不是导入JS路径的问题，排除了很多因素以后，我和同事讨论，最后我把这个JS文件的头<script type="text/javascript" src="<%=request.getContextPath()%>/js/func.js"></script>放在了</body>后面，哇，奇迹出现了，JS文件里面的功能全部都可以使用了，这就突然转向了JS加载顺序的问题。当我放在head里面时，JS文件和JSP文件里面的元素加载顺序就有些不一致，所以导致部分功能不能实现，等于说有些页面根本来不及调用JS的功能函数，而那些函数就是不能直接加载的。网上查了查资料找到一个页面加载完毕后的方法：

/*window.onload事件的封装，以后就可以直接调用*/
function addLoadEvent(func){
	var oldonload = window.onload;    //得到上一个onload事件的函数
	if(typeof window.onload !='function'){  //判断类型是否是'function'，注意typeof返回的是字符串
		window.onload = func;
	}else{
		window.onload = function(){
			oldonload();  //调用之前覆盖的onload事件的函数
			func();	//调用当前事件函数
		}
	}
}
//加载所需页面加载完毕后执行的功能函数add() del() update()
addLoadEvent(add);
addLoadEvent(del);
addLoadEvent(update);

这样无论JS文件放在哪儿，都是等页面加载完毕后才执行JS里面的函数。