Web阶段重点内容

1.jsp的9大隐式对象

JSP隐式对象的定义：JSP隐式对象是JSP容器为每个页面提供的java对象，开发者可以直接使用它们而不用显示声明。JSP隐式对象也被称为预定义对象。
在这里插入图片描述

1.1 out输出流对象

隐藏对象out是javax.servlet.jsp.JspWriter类的实例，服务器向客户输出的字符内容可以通过out对象输出。获取方法： PrintWriter out = response.getWriter();out对象常用的方法如下：

void clear() 　　清除缓冲区的内容
void clearBuffer() 　　清除缓冲区的当前内容
void flush() 　　将缓冲内容flush到客户端浏览器
int getBufferSize() 　　返回缓冲大小，单位KB
int getRemaining() 　　返回缓冲剩余大小，单位KB
isAutoFlush() 　　返回缓冲区满时,是自动清空还是抛出异常
void close() 　　关闭输出流

1.2 request请求对象

隐藏对象request是javax.servlet.ServletRequest类的实例，代表客户端的请求。request包含客户端的信息以及请求的信息，如请求那个文件，附带的地址参数等。每次客户端的请求都会产生一个request实例。request对象的常用方法如下：

1 　　object getAttribute(String name)　　返回指定属性的属性值
2 　　Enumeration getAttributeNames() 　　返回所有可用属性名的枚举
3　　String getCharacterEncoding() 　　返回字符编码方式
4　　 int getContentLength() 　　返回请求体的长度(以字节数)
5　　 String getContentType() 　　得到请求体的MIME类型
6　　 ServletInputStream getInputStream()　　得到请求体中一行的二进制流
7 　　String getParameter(String name) 　　返回name指定参数的参数值
8　　 Enumeration getParameterNames()　　返回可用参数名的枚举
9 　　String[] getparameterValues(String name) 　　返回包含参数name的所有值的数组
10　　 String getProtocol() 　　返回请求用的协议类型及版本号
11　　 String getScheme() 　　返回请求用的计划名,如:http https及ftp等
12 　　int getServerPort() 　　返回服务器接受此请求所用的端口号
13　　 String getServerName() 　　返回接受请求的服务器主机名
14 　　BufferedReader getReader() 　　返回解码过了的请求体
15 　　String getRemoteAddr() 　　返回发送此请求的客户端IP地址
16 　　String getRemoteHost() 　　返回发送此请求的客户端主机名
17 　　void setAttribute(String key Object obj) 　　设置属性的属性值
18　　 String getRealPath(String path) 　　返回一虚拟路径的真实路径
19 　　void setCharacterEncoding(“gb2312”) 　　设置接受参数的字符集

1.3 response响应对象

隐藏对象response是javax.servlet.ServletResponse类的实例，代表客户端的响应。服务器端的任何输出都通过response对象发送到客户端浏览器。每次服务器端都会响应一个response实例。response对象的常用方法如下：

1 　　String getCharacterEncoding() 　　返回响应用的是何种字符编码
2 　　ServletOutputStream getOutputStream() 　　返回响应的一个二进制输出流
3 　　PrintWriter getWriter() 　　返回可以向客户端输出字符的一个对象
4 　　 void setContentLength(int len) 　　设置响应头长度
5　　 void setContentType(String type) 　　设置响应的MIME类型
6 　　sendRedirect(java.lang.String location) 　　重新定向客户端的请求
7 　　void setCharacterEncoding(“gb2312”) 　　设置响应头的字符集

1.4 config配置对象

隐藏对象config是javax.servlet.ServletConfig类的实例，ServletConfig封装了配置在web.xml中初始化JSP的参数。JSP中通过config获取这些参数。每个JSP文件中共有一个config对象。config对象的常用方法如表

1　　String getInitParameter(String name)　　返回配置在web.xml中初始化参数
2　　Enumeration getInitParameterNames() 　　返回所有的初始化参数名称
3　　ServletContext getServletContext()　　返回ServletContext对象
4　　String getServletName　　返回Servlet对象名称

1.5 session会话对象

隐藏对象session是javax.servlet.http.HttpSession类的实例。session与cookie是记录客户访问信息的两种机制，session是用于服务器端保存用户信息，cookie用于在客户端保存用户信息。Servlet中通过request.getSession()来获取session对象，而JSP中可以直接使用。如果JSP中配置了<%@page session=”false”%>,则隐藏对象session不可用。每个用户对应一个session对象。session对象的常用方法如下:

1　　 long getCreationTime() 　　返回Session创建时间
2 　　public String getId() 　　返回Session创建时JSP引擎为它设的唯一ID号
3 　　long getLastAccessedTime() 　　返回此Session里客户端最近一次请求时间
4　　 int getMaxInactiveInterval()　　返回两次请求间隔多长时间此Session被取消(ms)
5　　 String[] getValueNames() 　　返回一个包含此Session中所有可用属性的数组
6　　 void invalidate() 　取消Session,使Session不可用
7 　　boolean isNew() 　　返回服务器创建的一个Session,客户端是否已经加入
8 　　void removeValue(String name) 　　删除Session中指定的属性
9　　 void setAttribute(String key,Object obj) 　　设置Session的属性
１０，　Object getAttribute(String name)　　返回session中属性名为name的对象

扫描二维码关注公众号，回复： 11967996 查看本文章

1.6 application应用程序对象

隐藏对象application是javax.servlet.ServletContext类的对象。application封装JSP所在Web应用程序的信息，例如web.xml中配置的全局的初始化信息。Servlet中application对象需要通过ServletConfig.getServletContext()来获取。整个Web应用程序对应一个application对象。application对象常用的方法如下：

1　　Object getAttribute(String name)　　返回application中属性为name的对象
2　　Enumeration getAttributeNames() 　　返回application中的所有属性名
3　　void setAttribute(String name,Object value)　　设置application属性
4　　void removeAttribute(String name) 　　移除application属性
5　　String getInitParameter(String name)　　返回全局初始话函数
6　　Enumeration getInitParameterNames(）　　返回所有的全局初始话参数
7　　String getMimeType(String filename)　　返回文件的文档类型，例如getMimeType(“abc.html”)将返回“text.html”
8　　String getRealPath(String relativePath）　　返回Web应用程序内相对网址对应的绝对路径

1.7 page页面对象

隐藏对象page是javax.servlet.jsp.HttpJspPage类的实例。page对象代表当前JSP页面，是当前JSP编译后的Servlet类的对象。page想当于Java类中的关键字this

1.8 pageContext页面上下文对象

隐藏对象pageContext为javax.servlet.jsp.PageContext类的实例。pageContext对象代表当前JSP页面编译后的内容。通过pageContext能够获取到JSP中的资源，pageContext常用方法如下：

1 　　 JspWriter getOut() 　　返回out对象
2 　　 HttpSession getSession() 　　返回Session对象(session)
3 　　 Object getPage() 　　返回page对象
4 　　 ServletRequest getRequest() 　　返回request对象
5 　　 ServletResponse getResponse() 　　返回response对象
6 　　 void setAttribute(String name,Object attribute) 　　　设置属性及属性值，在page范围内有效
7 　　 void setAttribute(String name,Object obj,int scope)　　在指定范围内设置属性及属性 int 1=page,2=request,3=session,4=application
8 　　public Object getAttribute(String name) 　　取属性的值
9　　 Object getAttribute(String name,int scope) 　　在指定范围内取属性的值
10　　 public Object findAttribute(String name) 　　寻找一属性,返回起属性值或NULL
11 　　void removeAttribute(String name) 　　删除某属性
12 　　void removeAttribute(String name,int scope) 　　在指定范围删除某属性
13　　 int getAttributeScope(String name)　　返回某属性的作用范围
14　　Enumeration getAttributeNamesInScope(int scope) 　　返回指定范围内可用的属性名枚举
15 　　void release() 　　释放pageContext所占用的资源
16　　void forward(String relativeUrlPath) 　　使当前页面重导到另一页面
17 　　void include(String relativeUrlPath) 　　在当前位置包含另一文件

1.9 Eexception异常对象

隐藏对象exception为java.lang.Exception类的对象。exception封装了JSP中抛出的异常信息。要使用exception隐藏对象，需要设置<%@page isErrorPage”true”%>。隐藏对象exception通常被用来处理错误页面

2.四大域对象及其作用域

JavaWeb的四大作用域为：page，request，session，application

page：作用范围是整个JSP页面，是四大作用域中最小的一个；生命周期是当对JSP的请求时开始，当响应结束时销毁。对page对象的引用通常存储在pageContext对象中。
request：作用范围是在当前请求中有效；生命周期是在service方法调用前由服务器创建，传入service方法。整个请求结束，request生命结束。Servlet之间的信息共享是通过HttpServletRequest接口的两个方法来实现的。

void setAttribute（String name, Object value）：将对象value以name为名称保存到request作用域中。
ObjectgetAttribute（String name）：从request作用域中取得指定名字的信息。

session：作用范围是一次会话。生命周期是在第一次调用request.getSession()方法时，服务器会检查是否已经有对应的session,如果没有就在内存中创建一个session并返回。当一段时间内session没有被使用（默认为30分钟），则服务器会销毁该session。如果服务器非正常关闭（强行关闭），没有到期的session也会跟着销毁。如果调用session提供的invalidate（），可以立即销毁session。session是通过HttpSession接口实现的，它提供的主要方法如下：

Object HttpSession.getAttribute（String name）：从session中获取信息。
void HttpSession.setAttribute（String name, Object value）：向session中保存信息。
HttpSession HttpServletRequest.getSession()：获取当前请求所在的session的对象。

application：作用范围是整个Web应用。当Web应用被加载进容器时创建代表整个web应用的ServletContext对象，当服务器关闭或Web应用被移除时，ServletContext对象跟着销毁。application作用域就是服务器启动到关闭的整段时间，在这个作用域内设置的信息可以被所有应用程序使用。application作用域上的信息传递是通过ServletContext实现的，它提供的主要方法如下：

Object getAttribute（String name）：从application中获取信息。
void setAttribute（String name, Object value）：向application作用域中设置信息。

作用域从小到大为：page（jsp页面），request（一次请求），session（一次会话），application（整个web应用）。

3.servlet的生命周期

Servlet的生命周期：

加载和实例化
当Servlet容器启动(web.xml中配置load-on-startup=1，默认为0)或客户端发送一个请求时，Servlet容器会查找内存中是否存在该Servlet实例，若存在，则直接读取该实例响应请求；如果不存在，就创建一个Servlet实例。
初始化
实例化后，Servlet容器将调用Servlet的init()(只调用一次。它在第一次创建 Servlet 时被调用)方法进行初始化（一些准备工作或资源预加载工作）。
服务
初始化后，Servlet处于能响应请求的就绪状态。当接收到客户端请求时，调用service()的方法处理客户端请求，HttpServlet的service()方法会根据不同的请求转调不同的doXxx()方法(doGet、doPost、doPut，doDelete 等方法)。
销毁
当Servlet容器关闭时，Servlet实例也随时销毁。其间，Servlet容器会调用Servlet 的destroy()(只会被调用一次，在 Servlet 生命周期结束时被调用，在调用 destroy() 方法之后，servlet 对象被标记为垃圾回收)方法去判断该Servlet是否应当被释放（或回收资源）

4.cookie和session的工作原理,联系和区别

4.1 cookie 工作原理

在这里插入图片描述

Cookie是通过Set-Cookie响应头和Cookie请求头将会话中产生的数据保存在客户端，是客户端的技术。
客户端向服务器发送请求，服务器获取需要保存的数据，并将需要保存的数据通过Set-Cookie响应头发送给浏览器，浏览器会以Cookie的形式保存在浏览器的内部。
当客户端再次发送请求访问服务器，服务器可以通过Cookie请求头获取上次发送给浏览器的Cookie信息，通过这种方式可以保存会话中产生的数据。
由于Cookie技术是将会话中产生的数据保存在客户端，每个客户端各自持有自己的数据，当需要时再带给服务器，因此不会发生混乱！

4.2 session 工作原理

在这里插入图片描述

Session是将会话中产生的数据保存在服务端，是服务端的技术.
浏览器第一次发送请求需要保存数据时，服务端获取到需要保存的数据，再调用request.getSession() 获取一个session对象（如果在服务器内部有当前浏览器对应的session，则直接返回该session对象；如果没有对应session，则会创建一个新的session对象再返回），接着将数据保存在session中（通过session.setAttribute()方法可以将数据保存到session中），然后做出响应将session的id作为cookie发送给浏览器保存。
当浏览器再去访问服务器时，服务器可以从session中获取到之前为当前浏览器保存的数据（通过session.getAttribute()方法可以将数据从session中取出来），通过这种方式，也可以来保存会话中产生的数据。

4.2联系和区别

4.2.1 联系

session是通过cookie来工作的，session产生的session id 需要通过cookie保存。

4.2.2 区别

相同点：Cookie和session都属于会话技术，都可以保存会话中产生的数据
不同点：

cookie是将会话中产生的数据保存在浏览器客户端, 是客户端技术（JS可以访问cookie）；.session是将会话中产生的数据保存在服务器端，是服务器端技术。
cookie是将数据保存在客户端浏览器，容易随着用户的操作导致cookie丢失或者被窃取，因此cookie中保存的数据不太稳定，也不太安全；session将数据存在服务器端的session对象中，相对更加的安全，而且更加稳定。不容易随着用户的操作而导致session中的数据丢失或者是被窃取。
cookie将数据保存在客户端，对服务器端没有太多影响，可以将数据保存很长时间，因此cookie中适合存储需要长时间保存、但对安全性要求不高的数据；session是服务器端的对象，在并发量较高时每一个浏览器客户端在服务器端都要对应一个session对象，占用服务器的内存空间，影响效率，因此session中适合存储对安全性要求较高，但不需要长时间保存的数据。
Cookie应用场景：实现购物车、记住用户名、30天内自动登录等；Session应用场景：保存登录状态、保存验证码

5.GET提交和POST提交的区别

GET和POST提交方式是http请求的两种基本方式，区别如下：

GET是从服务器获取数据；POST是发送数据到服务器
GET是明文传参，所有参数都在URL地址栏里显示，不安全；而POST传参是通过request body实体，提交后地址栏里看不到参数，相对GET而言较安全些。
通过url传递数据，数据量有限制，通常不能超过1KB或者4KB，而POST没有限制。
GET执行效率上要比POST快些。
在FORM提交的时候，如果不指定Method，则默认为GET请求

注意：Form提交数据时，如果不指定method的话，默认是GET方式。

从GET和POST的区别上建议如下：

如果只是单纯做一个跳转，请求中没有数据，尽量使用GET提交

如果应用是上载附件，需要处理流的话，只能用POST方式

如果应用中需要传递中文参数，不建议走URL传递，建议用POST方式

如果应用涉及安全问题，建议用POST方式

6,请求转发和请求重定向的区别

转发是服务器行为，重定向是客户端行为。
转发（Forward）
通过RequestDispatcher对象的forward（HttpServletRequest request,HttpServletResponse response）方法实现的。RequestDispatcher可以通过HttpServletRequest 的getRequestDispatcher()方法获得。例如下面的代码就是跳转到login_success.jsp页面。

     request.getRequestDispatcher("login_success.jsp").forward(request, response);

重定向（Redirect） 是利用服务器返回的状态码来实现的。浏览器请求服务器的时候，服务器会返回一个状态码。服务器通过 HttpServletResponse 的 setStatus(int status) 方法设置状态码。如果服务器返回301或者302，则浏览器会到新的网址重新请求该资源。

区别：

转发前后地址栏地址不会发生变化，重定向前后地址栏有变化。

forward是服务器请求资源,服务器直接访问目标地址的URL,把那个URL的响应内容读取过来,然后把这些内容再发给浏览器.浏览器根本不知道服务器发送的内容从哪里来的,所以它的地址栏还是原来的地址.
redirect是服务端根据逻辑,发送一个状态码,告诉浏览器重新去请求那个地址.所以地址栏显示的是新的URL.

转发是一次请求, 一次响应，重定向是两次请求两次响应。
转发只能是同一个Web应用内的资源互相转发, 不可以是不同的Web应用之间的资源进行转发，重定向可以是同一个web应用,也可以是不同的web应用资源之间的跳转。
转发可以通过request共享数据，而重定向不能。
转发效率高，重定向效率相对较低。
转发一般用于用户登陆的时候,根据角色转发到相应的模块，重定向一般用于用户注销登陆时返回主页面和跳转到其它的网站等

7.HTTP协议的相关内容

7.1 什么是HTTP协议?

在这里插入图片描述
HTTP协议是用于规定浏览器和服务器之间的通信方式/规则

规定了浏览器给服务器发送的请求信息的格式
规定了服务器给浏览器发送响应信息的格式

HTTP协议在工作时所遵循的基本原则：

一次请求，只对应一次响应
请求只能由浏览器发起，服务器只能被动的等待请求，根据请求作出回应。

7.2 HTTP协议详解

IE浏览器的插件：HttpWatch，可以监听浏览器和服务器通信的内容。

7.2.1 HTTP请求

7.2.1.1 请求行

在这里插入图片描述
GET /news/hello.html HTTP/1.1

GET：表示请求方式，在HTTP协议中一共定义了7种提交方式，但是我们只用GET和POST。
/news/hello.html：请求资源路径，表示浏览器请求的是哪一个Web应用以及哪一个web资源文件。
HTTP/1.1：请求所遵循的协议和版本。

7.2.1.2 若干请求头

请求头都是Key-Value结构,例如：
在这里插入图片描述

Host：localhost – 通知服务器，浏览器要请求的是哪一台虚拟主机。
Accept：text/html, appliaction/xhtml+xml,… – 通知服务器，浏览器能接收的响应数据类型。
…
（空白行，用于分隔请求头和请求实体）

7.2.1.3 请求实体内容

如果请求方式为 GET 提交，请求实体是没有内容的。
如果请求方式为 POST 提交，并且请求中携带了数据，请求实体中才会有内容。

7.2.2 HTTP响应

在这里插入图片描述

7.2.2.1状态行

HTTP/1.1 200 OK

HTTP/1.1：表示响应所遵循的协议和版本
200：状态码，三位的数字，表示服务器对请求处理的结果。
- 200: 表示请求处理成功
- 302: 表示请求重定向(即需要再进一步请求才可以获取到相应的资源)
- 304/307: 表示通知浏览器使用缓存
- 404: 表示浏览器请求的资源不存在(浏览器的问题, 请求路径错误)
- 500: 表示服务器在处理请求的过程中抛出了异常。
OK：描述短语（可以忽略），也表示服务器对请求处理的结果，和状态码表示的结果一致。

7.2.2.2 若干响应头：也是key-value格式

Content-Type: 表示服务器响应的数据类型，text/html, image/*…
Content-Length: 表示服务器响应数据的长度, 例如: 384 /字节
Set-Cookie: 和cookie技术相关的一个头, 后面会提到。
…

7.2.2.3 响应实体内容

响应实体就是浏览器所请求文件的内容。例如：浏览器向服务器请求一个hello.html文件，服务器会找到hello.html文件，将文件的内容作为响应实体发送给浏览器。

8.如何防止表单的重复提交

8.1 通过JavaScript屏蔽提交按钮（不推荐）

通过js代码，当用户点击提交按钮后，屏蔽提交按钮使用户无法点击提交按钮或点击无效，从而实现防止表单重复提交。
ps：js代码很容易被绕过。比如用户通过刷新页面方式，或使用postman等工具绕过前段页面仍能重复提交表单。因此不推荐此方法。

   <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
        <!DOCTYPE HTML>
        <html>
        <head>
         <title>表单</title>
            <script type="text/javascript">
            //默认提交状态为false
            var commitStatus = false;
            function dosubmit(){
     
     
                  if(commitStatus==false){
     
     
                //提交表单后，讲提交状态改为true
                  commitStatus = true;
                  return true;
                 }else{
     
     
                  return false;
              }
             }
      </script>
     </head>
   
        <body>
            <form action="/path/post" onsubmit="return dosubmit()" method="post">
             用户名：<input type="text" name="username">
            <input type="submit" value="提交" id="submit">
            </form>
        </body>
    </html>

8.2 给数据库增加唯一键约束（简单粗暴）

在数据库建表的时候在ID字段添加主键约束，用户名、邮箱、电话等字段加唯一性约束。确保数据库只可以添加一条数据。
数据库加唯一性约束sql：

alter table tableName_xxx add unique key uniq_xxx(field1, field2)

服务器及时捕捉插入数据异常：

     try {
    
    
            xxxMapper.insert(user);
        } catch (DuplicateKeyException e) {
    
    
            logger.error("user already exist");
        }

通过数据库加唯一键约束能有效避免数据库重复插入相同数据。但无法阻止恶意用户重复提交表单（攻击网站），服务器大量执行sql插入语句，增加服务器和数据库负荷。

8.3 利用Session防止表单重复提交（推荐）

实现原理：
-服务器返回表单页面时，会先生成一个subToken保存于session，并把该subToen传给表单页面。当表单提交时会带上subToken，服务器拦截器Interceptor会拦截该请求，拦截器判断session保存的subToken和表单提交subToken是否一致。若不一致或session的subToken为空或表单未携带subToken则不通过。
-首次提交表单时session的subToken与表单携带的subToken一致走正常流程，然后拦截器内会删除session保存的subToken。当再次提交表单时由于session的subToken为空则不通过。从而实现了防止表单重复提交。

8.4 使用AOP自定义切入实现

实现原理：

自定义防止重复提交标记（@AvoidRepeatableCommit）。
对需要防止重复提交的Congtroller里的mapping方法加上该注解。
新增Aspect切入点，为@AvoidRepeatableCommit加入切入点。
每次提交表单时，Aspect都会保存当前key到reids（须设置过期时间）。
重复提交时Aspect会判断当前redis是否有该key，若有则拦截。

9.js和jQuery的常用选择器和函数

9.1 js常用选择器

getElementById(ID): 返回对指定ID的第一个对象的引用，如果在文档中查找一个特定的元素，最有效的方法是getElementById()
getElementsByName(name): 返回文档中name属性为name值的元素，因为name属性值不是唯一的，所以查询到的结果有可能返回的是一个数组，而不是一个元素。
getElementsByTagName(tagname): 返回文档中指定标签的元素
getElementsByClassName():返回文档中所有指定类名的元素

9.1 jQuery的常用选择器

9.1.1基本选择器

元素名选择器
$(“div”) – 选中所有的div元素
$(“span”) – 选中所有的span元素
class/类选择器
$(".s1") – 选中所有class值为s1的元素(class值为s1的元素可能是任何元素)
$(“span.s1”) – 选中所有class值为s1的span元素
id选择器
$("#one") – 选中id为one的元素
多元素选择器
$(“div,span,.s1,#one”) – 选中所有的div元素,以及所有的span元素,以及所有class值为s1的元素,以及id为one的元素

9.1.2层级选择器

$(“div span”) – 选中所有div内部的所有span元素
$("#one span") – 选中id为one的元素内部的所有span元素
$("#two+span") – 选中id为two的元素后面紧邻的span兄弟元素
$("#two").next(“span”) – 选中id为two的元素后面紧邻的span兄弟元素
$("#two").prev(“span”) – 选中id为two的元素前面紧邻的span兄弟元素
$("#two~span") – 选中id为two的元素后面所有的span兄弟元素
$("#two").nextAll(“span”) – 选中id为two的元素后面所有的span兄弟元素
$("#two").prevAll(“span”) – 选中id为two的元素前面所有的span兄弟元素
$("#two").siblings(“span”) – 选中id为two的元素前、后所有的span兄弟元素

9.1.3 基本过滤选择器

选中第一个div元素
$(“div:first”)
$(“div:eq(0)”)
$(“div”).eq(0)
选中最后一个div元素
$(“div:last”)
$(“div:eq(-1)”)
$(“div”).eq(-1)
选中第n+1个div元素(n从零开始)
$(“div:eq(n)”)
$(“div”).eq(n)

9.3 JS常用函数

随机数生成器 Math.random()
转换为整数 parseInt()
日期时间函数（需要用变量调用）：

var b = new Date(); //获取当前时间
b.getTime() //获取时间戳
b.getFullYear() //获取年份
b.getMonth()+1; //获取月份
b.getDate() //获取天
b.getHours() //获取小时
b.getMinutes() //获取分钟
b.getSeconds() //获取秒数
b.getDay() //获取星期几
b.getMilliseconds() //获取毫秒

数学函数（用Math来调用）：

abs(x) 返回数的绝对值。
ceil(x) 对小数进行上舍入。
floor(x) 对数进行下舍入。
round(x) 把数四舍五入为最接近的整数。
max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值。
pow(x,y) 返回 x 的 y 次幂。
sqrt(x) 返回数的平方根。
random() 返回 0 ~ 1 之间的随机数。 ****

字符串函数（用变量来调用）：

indexOf
返回字符串中一个子串第一处出现的索引（从左到右搜索）。如果没有匹配项，返回 -1 。
var index1 = a.indexOf(“l”);
//index1 = 2

charAt
返回指定位置的字符。
var get_char = a.charAt(0);
//get_char = “h”

lastIndexOf
返回字符串中一个子串最后一处出现的索引（从右到左搜索），如果没有匹配项，返回 -1 。
var index1 = lastIndexOf(‘l’);
//index1 = 3

match
检查一个字符串匹配一个正则表达式内容，如果么有匹配返回 null。
var re = new RegExp(/^\w+$/);
var is_alpha1 = a.match(re);
//is_alpha1 = “hello”
var is_alpha2 = b.match(re);
//is_alpha2 = null

substring
返回字符串的一个子串，传入参数是起始位置和结束位置。
var sub_string2 = a.substring(1,4);
//sub_string2 = “ell”

substr ********
返回字符串的一个子串，传入参数是起始位置和长度
var sub_string1 = a.substr(1);
//sub_string1 = “ello”
var sub_string2 = a.substr(1,4);
//sub_string2 = “ello”

replace *******
替换字符串，第一个参数代表被替换的字符串，第二个参数代表替换的字符串
a.replace(“he”,“aa”)

search
执行一个正则表达式匹配查找。如果查找成功，返回字符串中匹配的索引值。否则返回 -1 。
var index1 = a.search(re);
//index1 = 0
var index2 = b.search(re);
//index2 = -1

split ******
通过将字符串划分成子串，将一个字符串做成一个字符串数组。
var arr1 = a.split("");
//arr1 = [h,e,l,l,o]
length 属性 *******
返回字符串的长度，所谓字符串的长度是指其包含的字符的个数。

toLowerCase
将整个字符串转成小写字母。
var lower_string = a.toLowerCase();
//lower_string = “hello”

toUpperCase
将整个字符串转成大写字母。
var upper_string = a.toUpperCase();
//upper_string = “HELLO”

JS获取元素

document.getElementById( id值 ) – 通过元素的id值，获取一个元素。返回的是表示该元素的js对象。
document.getElementsByTagName( 元素名 ) – 通过元素名称获取当前文档中的所有指定名称的元素，返回的是一个数组，其中包含了所有指定名称的元素。
document.body – 获取当前文档中的body元素
ele.parentNode – 获取当前元素的父元素。ele表示当前元素

JS增删改元素

document.createElement( 元素名称 ) – 根据元素名称创建指定名称的元素，返回的是表示新创建元素的js对象
parent.appendChild( child ) – 通过父元素添加子元素，其中parent表示父元素，child表示子元素
parent.removeChild( child )-- 通过父元素删除子元素，其中parent表示父元素，child表示子元素
ele.innerHTML – 获取当前元素的html内容(从开始标签到结束标签之间的所有内容)，还可以设置当前元素的html内容(如果元素内部有内容，将会覆盖原有内容)

9.4 jQuery常用函数

9.4.1html元素操作

创建元素
$("<div></div>") – 创建一个div元素，返回的是一个表示div元素的jQuery对象
$("<div>xxxx</div>") – 创建一个包含内容的div元素，返回的是一个表示div元素的jQuery对象
添加子元素
$parent.append( $child ) – 父元素调用方法添加子元素
$("body").append( "<div>我是新来的...</div>" ); – 往body元素内部追加一个div子元素
删除元素
$("div").remove() – 删除所有的div元素

JS删除所有div元素：
//获取所有的div元素(返回的是所有div组成的数组)
var divArr = document.getElementsByTagName(“div”); //div数组
//遍历div数组,依次删除每一个div元素
var len = divArr.length;
for(var i=0;i<len;i++){
//通过当前元素的父元素删除当前元素(始终删除第一个)
divArr[0].parentNode.removeChild( divArr[0] );
}

替换元素
$("div").replaceWith("<p>我是来替换的…</p>")

9.4.2 html元素内容和值的操作

<div>
  	这是一个div11元素
    <span>这是一个span元素</span>
    这是一个div1111元素
</div>

html()函数 (类似于js中的innerHTML属性)
– 用于获取或设置元素的内容，比如为div、span、p、h1、table、tr、td , form等元素设置内容
$("div").html() – 获取所有div中的第一个div的内容
$("div").html("xxxx") – 为所有div设置内容
text()函数 (类似于js中的innerText属性，innerText在部分浏览器中不兼容)
– 用于获取或设置元素的文本内容
$("div").text() – 获取所有div中的所有文本内容
$("div").text("xxxx") – 为所有div设置文本内容
val()函数 (类似于js中的value属性)
– 获取或设置表单项元素的value值(input/select/option/textarea)
$("input").val() – 获取所有input元素中的第一个input元素的value值
$("input").val(值) – 为所有的input元素设置value值

9.4.3元素属性和css属性操作

<input type="text" name="username" id="inp"/>

prop()函数 – 用于获取或设置元素的属性值

在jQuery1.6版本之后才有这个函数，1.6之前版本的jQuery可以使用attr()函数

$("input[type='checkbox']").prop("checked")– 获取input复选框的选中状态, 返回true表示复选框为选中状态,返回false表示复选框为取消选中状态
$("input[type='checkbox']").prop("checked", true)– 设置所匹配的复选框元素为选中状态
$("#inp").prop("name"); --获取id为inp元素的name属性值, 返回useranme
$("#inp").prop("name","user"); --为id为inp的元素设置name属性值, name属性值就会变成user

css()函数 – 用于获取或设置元素的css属性值
$("#div1").css("width") – 获取id为div1元素的宽度
$("#div1").css("width","200px") – 设置id为div1元素的宽度为200px
$("#div1").css({ "width" : "200px", "height" : "150px", "border" : "5px solid red", "background" : "pink" });–设置id为div1元素的宽度为200px、高度为150px、边框以及背景颜色等样式

9.4.4 其他函数

each() 函数
$(selector).each(function( index,element ){})
each()函数可以遍历$(selector)选择器选中的所有元素(即每次都选择器选中的元素中获取一个元素,并执行function 函数)
function中的index – 表示遍历的元素的下标
function中的element – 表示当前正在遍历的元素(也可以通过this获取)
show()/hide() 函数
show() – 设置元素由隐藏变为显示;
hide() – 设置元素由显示变为隐藏;

$("div").show() – 设置所有的div元素为显示等价于: $(" d i v ") . c s s (" d i s p l a y ", " b l o c k "); ‘$ (“div”).hide() -- 设置所有的div元素为隐藏等价于:$(“div”).css(“display”, “none”)`
toggle()/slideToggle()
toggle() – 切换元素的显示状态, 如果元素是显示的, 则切换为隐藏, 否则切换为显示
slidToggle() --切换元素的显示状态, 如果元素是显示的, 则切换为隐藏，否则切换为显示，切换为显示为下拉状态，隐藏为收缩状态。

9.4.5 扩展:为元素绑定点击事件

以点击事件为例，为元素绑定点击事件的方式为:
方式1(js版)：

<script>
  function fn(){
    
    
    alert("input按钮被点击了...");
  }
</script>
<body>
	<input onclick="fn()" type="button" value="点我~!" />
</body>

方式2(js版)：

<script>
	window.onload = function(){
    
    
		//获取id为btn的元素
		var btn = document.getElementById("btn");
		btn.onclick = function(){
    
    
			alert("input按钮被点击了...");
		}
	}
</script>
<body>
	<input id="btn" type="button" value="点我~!" />
</body>

方式3(jQuery版)：openjdk-11-jdk

<script>
$(function(){
    
    
    //当点击btn按钮时,触发点击事件执行其中的函数
    $("#btn").click( function(){
    
    
        alert("input按钮被点击了...");
    });
});
</script>
<body>
	<input id="btn" type="button" value="点我~!" />
</body>

10.如何防止乱码问题

10.1 获取请求参数时的中文乱码问题？

在获取中文的请求参数时，可能会出现乱码问题（和请求方式、tomcat服务器版本有关），具体可以分为以下三种情况：

如果请求是GET提交，并且tomcat是8.0及以后的版本，GET提交的中文参数，在获取时不会出现乱码问题！（8.0以后的tomcat包括8.0在获取GET提交的中文参数时，已经处理中文乱码问题。）
如果请求是POST提交，不管是哪个版本的tomcat服务器，在获取中文参数时，都会出现乱码问题。因为tomcat底层在接收POST提交的参数时，默认会使用iso8859-1编码接收，而这个编码中没有中文字符，所以在接收中文参数时，一定会出现中文乱码问题！
解决方法是：通知服务器在接收POST提交的参数时，使用utf-8编码来接收!
request.setCharacterEncoding("utf-8");
注意：这行代码不会影响GET提交，只对POST提交有效！这行代码要放在任何获取参数的代码之前执行！
如果请求是GET提交，并且tomcat是7.0及以前的版本，GET提交的中文参数，在获取时会出现乱码问题！
解决方法：在[tomcat安装目录]/ conf/server.xml文件的(修改端口的)Connector标签上，添加一个 URIEncoding=“utf-8” 属性，如下：

<Connector port="80" protocol="HTTP/1.1"
           connectionTimeout="20000"
           redirectPort="8443"
           URIEncoding="utf-8" />

同时在[Eclipse]/Servers/[当前tomcat服务器对应的配置目录]/server.xml文件中，在Connector标签上，添加一个 URIEncoding=“utf-8” 属性，同上！