javaWeb--jsp & jQuery

时间 2019-11-19

标签 javaweb jsp jquery 栏目 Java 繁體版

原文原文链接

jsp页面的基本构成：
指令标签
HTML标记语言
注释    <%-- java代码注释 -->   //html注释对jsp嵌入的代码不起做用，所以能够组合它们构成动态的html注释
jsp动做标签 <jsp: >

1. 指令标签
指令标签不会产生任何内容输出到网页中，主要用于定义jsp页面相关信息
如使用的语言、导入的类包、指定错误处理页面

1.1 page指令
重要属性：
import属性，设置jsp导入的类包。由于jsp能够嵌入java代码，而这些代码在调用API时须要导入相应的类包
例如： <%@ page import="java.util.*"%>
pageEncoding属性，定义jsp页面编码格式
例如：<%@ page pageEncoding="GB18030"%>
contentType属性，设置jsp页面的MIME类型和字符编码，浏览器会据此显示网页类容
例如：<%@ page contentType="text/html;charset=UTF-8"%>
session属性，指定jsp页面是否使用HTTP的session会话对象
例如：<%@ page session="false"%>
isErrorPage属性，将当前jsp页面设置成错误处理页面来处理另外一个jsp页面的错误
例如：<%@ page isErrorPage="true"%>
errorPage属性，指定处理当前jsp页面异常错误的另外一个jsp页面，属性值是一个url字符串
例如：<%@ page errorPage="error/loginErrorPage.jsp"%>

1.2 inlcude指令
用于在jsp页面中包含另一个文件的内容，只支持静态包含，内容将原样包含在jsp页面中，被包含文件中
代码不会执行，能够是一段java代码、html代码或者另一个jsp,其值是当前jsp页面文件的相对url路径

1.3 taglib指令
用于加载用户自定义标签
prefix属性用来加载自定义标签的前缀
uri属性用于指定自定义标签的描述文件符位置
例如：<%@taglib prefix="view" uri="/tags/view.tld"%>

2. 嵌入java代码

jsp脚本段
语法格式以下：
<%   编写java代码   %>

jsp声明
定义全局变量与全局方法，能够在整个jsp页面使用
格式以下：
<%! 变量或者函数   %>

jsp表达式
jsp表达式能够把能够把java表达式的结果输出到jsp页面中，表达式的最终运算结果被转换为字符串类型
格式以下：
<%= 表达式 %>

3. jsp动做标签
<jsp:include>
该动做标签能够将另一个文件包含到当前的jsp页面中，可使静态文本也能够是动态代码
page属性用来指定被包含文件的相对路径
flush属性用来指定是否刷新缓冲区
注意，被包含的jsp文件中不要使用<html>和<body>标签,源文件和被包含文件中变量名和方法不要冲突
例如：
<jsp:include page="validate.jsp" flush="false"/>

<jsp:forward>
将当前页面的请求转发给其它web资源（html页面，jsp页面，Serverlet等）
用于转向页面，该指令后面的全部代码都没有机会执行了，由于页面的流程已经转向了另一个页面了

<jsp:param>
可做为其余标签的子标签，为其余标签传递参数
例如：
<jsp:forward page="addUser.jsp">
   <jsp:param name="userName" value="mi"/>
</jsp:forward>

4. 部署项目到tomcat
在tomcat的server.xml中编写<Content>标签
例如：
<Context path="/test" docBase="F:\Codeing\MyEclipseProjects\test\WebRoot" reloadable="true"/>
其中path为部署的逻辑路径，可与项目名称不一样，docbase是物理路径
例如：
https://localhost:8080/test/index.jsp

5. jsp声明与脚本端变量的区别
jsp声明格式 <%! int a = 3;%>
脚本段形式：<% int b = 5 %>
当服务器将jsp转换为servlet时，会将jsp的声明转换为类的成员变量，而脚本段转换为方法中的局部变量，
servlet是单实例的，这样成员变量的值就只有一个，每一个用户都会访问它，而脚本段中则是局部变量，每一个
用户访问时各有一份，互不影响。

//jsp中的几个主要对象
6. 关于requset方法
request的setAttribute与getAttribute方法通常都是成对出现的，首先经过setAttritbute方法设置属性与
属性值，而后经过getAttribute方法根据属性获取到对应对象值。setAttribute与getAttribute方法都是在
服务器端内部执行，客户端不知道服务器是否执行过这两个方法
而request的getParameter方法做用是经过表单或者url请求的参数发送过来的参数值，是客户端和服务器之
间的交互，并无对应的set方法
request对象内数据的存活范围：客户端向服务器发送一个请求，服务器返回一个响应后该请求对象就被销毁，
以后再向服务器发送新的请求时，服务器会建立新的request对象，该对象跟以前的对象没任何关系。

session对象的生命周期：同一个浏览器中，不管发送多少请求，session对象只有一个。

application存活范围：存活范围最大的对象，只要服务器没有关闭，application对象中的数据就会和一直
存在，整个服务器运行过程当中，application对象只有一个。

7. 重定向和请求转发
RequestDispatcher的forward方法称为请求转发

请求转发与重定向的区别：
1）请求转发整个过程都处于同一个请求当中
2）重定向实际上   客户端向服务器发送两个请求
3）RequestDispatcher是经过调用HttpServletRequest对象的getRequestDispatcher方法获得的，是属于请求
对象的方法。
4）sendRedirect是HttpServletRsponce对象的方法，即响应对象的方法，既然调用了响应对象的方法，代表整
个请求过程已经结束，服务器开始向客户端返回执行的结果。

8. 一个标准的javaBean有如下几个特性：
是一个公共类
有一个不带参数的构造方法
经过set和get方法设置属性

典型的javaBean类
public class Person {
   private String name = "zhumingjie";

   public String getName() {
       return name;
   }

   public void setName(String name) {
       this.name = name;
   }
}

10. jsp访问javaBean的语法

1）导入javaBean类
<%@ page import="com.zhongcunmu.bean.Person" %>

2）声明javaBean对象
<jsp:useBean id="person1" class="com.zhongcunmu.bean.Person"></jsp:useBean>

3）访问javaBean属性
<jsp:getProperty property="name" name="person1"/><br>
<jsp:setProperty property="name" name="person1" value="zcm"/><br>
<jsp:setProperty property="name" name="person1" prama="myname"/><br>

11. javaBean的做用域
scope可选值为application,session,request,page
选择相应的scope值就能够得到相同的生命周期
而后可使用javaBean的id做为属性经过getAttribute属性得到对应的javaBean对象，原理实际上根据做用域不一样，
在servlet类中生成了javaBean相应的局部变量，成员变量或者静态变量查看生成的对应servlet源码便可知道。

12. servlet源码分析
1）每一个Servlet都必须实现Servlet接口，GenericServlet是个通用的、不特定于任何协议的Servlet，
它实现了Servlet接口，而HttpServlet继承于GenericServlet，所以HttpServlet也实现了Servlet
接口，因此咱们定义的HttpServlet只须要继承HttpServlet父类便可。

2）Servlet接口中定义了一个service方法，HttpServlet对该方法进行了实现，实现方式就是将ServletRequest
与ServletResponce转换为HttpServletRequest与HtppServletResponce.

3）在HttpServlet类的service方法中，首先得到请求的方法名，而后根据方法名调用对应的doXXX方法。

4）在HttpServlet类中定义的doGet个doPost等都是直接返回错误信息，所以咱们须要重载这些错误处理方法。

13. servlet生命周期
1)servlet的启动阶段
在下列时刻Servlet容器装载Servlet：
Servlet容器启动时自动装载某些Servlet
在Servlet容器启动后，客户首次向Servlet发出请求
Servlet的类文件被更新后，从新装载Servlet

Servlet被装载后，servlet容器建立一个Servlet实例，并调用servlet的init方法，在servlet整个生命周期
中，init方法只会被调用一次。

2）Servlet响应客户请求阶段
对于到达Servlet容器的客户请求，Servlet容器建立特定于这个请求的ServletRequest对象和ServletResponce
对象，而后调用Servlet的service方法。service方法从ServletRequest对象得到客户请求信息、处理该请求，
并经过ServletResponce对象向客户端返回响应结果。

3）Servlet终止阶段
当web应用被终止，或Servlet容器终止运行，或者Servlet容器从新装载Servlet的新实例时，servlet容器会调用
Servlet的destory方法，在destory方法中，能够释放Servlet所占用的资源。

14. Session的运行机制
1）当一个Session开始时，Servlet容器将建立一个HttpSession对象，在HttpSession对象中能够存放客户的
状态信息
2）Servlet容器为HttpSession分配一个惟一的标识符，称为Session ID，并做为Cookie保存在客户浏览器中
3）每次客户发出Http请求时，Servlet容器能够从HttpServletRequest对象中读取Session ID,而后根据ID
找到相应的HttpSession对象。从而获取客户的状态信息。

15. EL表达式
EL目的是帮助产生无java脚本的jsp网页

EL默认对象
param: a map containing request parameters and single string values
sessionScope: a map containing session-scoped attributes and their values
applicationScope: XXX attributes and their values
requestScope: XXX attributes and their values
pageScope: XXX attributes and their values
pageContext: the PageContext object
paramValues: a map containings request parameters and their corresponding string arrays(适用于checkbox等同一name的数组)
header: a map containing header names and single string
headrValues: a map containing header names and single string values(一样也是数组概念)
cookie: a map containing cookie names and their values

例如：
   <form action="EL2.jsp">
       username:<input type="text" name="username">
       interest:<br>
       basketball<input type="checkbox" name="interset" value="basketball"><br>
       badminton<input type="checkbox" name="interset" value="badminton"><br>
       reading<input type="checkbox" name="interset" value="reading"><br>
       <input type="submit" value="submit">
    </form>

    <%session.setAttribute("version", "1.01") ;%>

如下EL表达式的等同效果
    <%= request.getParameter("username") %><br>
    ${param.username }<br>
    <%= request.getParameterValues("interest")[1] %>
    ${paramValues.interset[1] }<br>
    <%= session.getAttribute("version") %>
    ${sessionScope.version }<br>


EL表达式运算符(有的有两种表示方法)
运算符
+
-
*
/ div
% mod
== eq
!= ne
< lt
> gt
<= le
>= ge

EL表达式的逻辑运算符
&& and
|| or
! not

.与[]运算符
${sessionScope.user.sex}等于
${sessionScope.user["sex"]}
当要存取的属性名称包含一些特是字符如.- 等非字母或数字的符号，就必定要使用[]

EL变量
EL存取变量默认会先从Page范围找，找不到再以此从Request、Session、Application范围，没有则返回null

自动转变类型
${param.count+20}    //会将传来的count自动转换为数值类型

16. 建立客户化jsp标签的步骤
1）建立标签的处理类
2）建立标签库描述文件（标签库描述文件的后缀名是.tld，必须与web.xml一个目录下）
3）在jsp文件中引入标签库，而后插入标签

17. 两种cookie
1）持久性的cookie,会被存储到客户端的硬盘上
2）会话cookie，不会存储到客户端的硬盘上，而是存放在浏览器进程所处的内存当中，当浏览器关闭的话该会话cookie就被销毁了

18. jQuery 选择器
基本选择器
#id   根据给定的id匹配一个元素
例子：$("#button1")   //选取id为button1的元素
.class 根据给定的类名匹配元素，返回集合
例子：$(".left") //选取全部class为left的元素
element 根据给定的元素匹配，返回集合
例子：$("textarea") //选取全部的<textarea>元素
*   匹配全部元素
例子：$("*")
selector1,selector2,...selectorN 将每个选择器匹配到元素后合并一块儿返回
例子：$("div,span,p.myClass") //选取全部的<div>,<span>,及myClass类的<p>元素

层次选择器
$("ancestor eescedant") 选取ancestor元素里面的全部后代元素
例子：$("div span") //选取div里面的全部span元素
$("parent > child") 选择parent下面的直接子元素
例子：$("div > span") //选择div下面直接的span子元素
$("prve+next") 选取紧接在prev元素后面的next元素
有等价next方法
例子：$('.one+div') //选择class为one的下一个div元素
例子：$(".one").next("div") //选择class为one的下一个div元素
$("pre~sib") 选取pre元素后的全部sib元素
有等价的nextAll方法
例子：$('#two~div') //选取id为two的元素后面全部div兄弟元素
例子：$("#two").nextAll("div") //选取id为two的元素后面全部div兄弟元素

过滤选择器
1)基本过滤
:first   选取第一个元素
:last    选取最后一个元素
:not(selector)   除去全部与给定选择器匹配的元素
:even    选取全部索引是偶数的元素，索引从0开始
:odd     选取全部索引是奇数的元素
:eq(index)   选取索引是index的元素
:gt(index)   选取索引大一index的元素
:lt(index)   选取索引小于index的元素
:header      选取全部的标题元素
:animated    选取当前正在执行的动画元素

例子：
$("div:first")   //选取全部div元素中的第一个元素
$("input:not(.myClass)") //选取class不是myClass的input元素

2)内容过滤
:contains(text) //选取全部文本内容为text的元素
:empty           //选取不包含子元素或者文本为空的元素
:has(selector)   //选取含有选择器所匹配的元素的元素
:parent          //选取拥有子元素护着文本的元素

例子：
$("div:contains('我')")    //选取含有’我‘的div元素
$("div:empty")             //选取不含子元素的div元素
$("div:has(p)")            //选取含有p元素的div元素
$("div:parent")            //选取含有子元素的div元素

3)可见性过滤
:hidden     //选取全部不可见元素
:visible    //选取全部可见元素

例子：
$("div:hidden").show(8000).css("background", "yellow"); //将隐藏的div元素8秒钟显示出来并设置颜色

4)属性过滤器
[attribute]            //选取拥有此属性的元素
[attribute=value]      //选取属性值为value的元素
[attribute!=value]     //选取属性值不等于value的元素
[attribute^=value]     //选取属性值以value开头的元素
[attribute$=value]     //选取属性值以value结尾的元素
[attribute*=value]     //选取属性值含有value的元素
[selector1][selector2][selectorN] //用属性选择器合成一个复合属性选择器，知足多个条件

例子：
$("")
$("div[id]")   //选取拥有属性id的元素
$("div[title=test]") //选取属性title为test的元素
$("div"[id][title$=test])   //选取拥有属性id而且title以test结尾的div元素

5)子元素过滤
:first-child   //选取每一个父元素的第一个子元素
:last-child    //选取每一个父元素的最后一个子元素
:only-child    //若是每一个元素是它父元素中惟一的子元素，那么将会匹配

例子：
$("ul li:first-child")   //选取每一个ul中的第一个li

6)表单对象过滤
:enabled     //选取全部可用元素
:disabled    //选取全部不可用元素
:checked     //选取全部被选中(单选框，复选框)元素
:selected    //选取全部被选中(下拉列表)元素

例子：
$("#form1:enabled")   //选取id为form1的表单内全部可用元素
$("#form2:disabled") //选取id为form2的表单内全部不可用元素
$("input:checked")    //选取全部被选中的input元素
$("selectselected")   //选取全部被选中的选项元素

表单选择器
:input      //选取全部的input,textarea,select,button元素
:text       //选取全部的单行文本框
:password   //选取全部的密码框
:radio      //选取全部的单选框
:checkbox   //选取全部的多选框
:submit     //选取全部的提交按钮
:image      //选取全部的图像按钮
:reset      //选取全部的重置按钮
:button     //选取全部的按钮
:file       //选取全部的上传域
:hidden     //选取全部的不可见元素

18. jQuery 操做DOM对象
1)查询
例子：
var p = $("p");
var li = $("ul li:eq(1)");

var title = p.attr("title");
var title2 = li.attr("title");
var text = li.text();

2)添加DOM对象
append()         //向每一个元素匹配的元素内部追加内容
appendTo()       //将全部匹配元素追加到指定元素中
prepend()        //向每一个匹配的元素内部前置内容

remove()
replaceWith()
replaceAll()
clone()
wrap()
wrapInner()

属性方法
attr()
removeAttr()

例子：
$("p").append("<b>你好</b>") 结果：<p><b>你好</b></p>
$("<b>你好</b>").appendTo("p")

var li1 = $("<li title='a'>a</li>");
var li2 = $("<li title='b'>b</li>");
var li3 = $("<li title='c'>c</li>");

$("ul").append(li1);
$("ul").prepend(li2);
$("ul li:eq(4)").after(li3);
$("ul li:eq(2)").insertAfter("ul li:eq(4)");

js实现
var input = document.createElement("input");
input.setAttribute("type","text");
input.setAttribute("value",i);
//alert(document.getElementsByTagName("input").length);
var br = document.createElement("br");
document.getElementById("div1").appendChild(input);
document.getElementById("div1").appendChild(br);

//remove方法会返回被移除节点的jquery对象
//$("ul li:eq(1)").remove();
var removeLi = $("ul li:eq(3)").remove();
//alert(removeLi);
//alert("555");
removeLi.appendTo($("ul"));
$("ul li").remove($("li[title!=2]"));

css