个人随手笔记。。比较乱,没有目录。

单例模式:

某个类只能有一个实例
必须自行创建实例
必须自行向整个系统提供这个实例

实现:

只提供私有的构造方法
含有一个该类的静态私有对象
提供一个静态的共有方法用于创建、获取静态私有对象

代码实现方案

饿汉式:

对象创建过程中实例化

懒汉式:

静态公有方法中实例化只有在用到时才实例化操作

JAVA WEB

Html

<Img>有src alt weigh width等

<p> <br> <font> title

Next超级链接标签：<a> ....</a> 示例: <a href=”page2.html”> 打开另一个页面</a>

锚点<a name=””> </a>

无序列表 <ul><li>...</li></ul>作用此列项目使用粗体圆点进行标记例子

个人前后端学习笔记(比较杂乱,当做个人备份)6.236.246.256.267.57.67.7JSP入门7.87.107.117.127.137.147.157.167.177.19

有序列表<ol><li>...</li></ol>

个人前后端学习笔记(比较杂乱,当做个人备份)6.236.246.256.267.57.67.7JSP入门7.87.107.117.127.137.147.157.167.177.19

表格 table\caption\tr\th\td\border\width

用于表格、行、列、宽度、边框的制作

个人前后端学习笔记(比较杂乱,当做个人备份)6.236.246.256.267.57.67.7JSP入门7.87.107.117.127.137.147.157.167.177.19

效果：

个人前后端学习笔记(比较杂乱,当做个人备份)6.236.246.256.267.57.67.7JSP入门7.87.107.117.127.137.147.157.167.177.19

表格合并 colspan rowspan

属性标签 caption tbody tfoot thead

thead表格表头部分一般都是表格第一行

tbody 主体部分

tfoot页脚

align 定义在列组合中内容的水平对齐方式

valign 定义在列组合中内容的垂直对齐方式

char 规定根据哪个字符来对齐列祖中的内容

charoff 规定第一个对齐字符的偏移量

cellpadding 内容和边框之间的间距

cellspacing 单元格之间的间距

表单：用于收集用户信息,进行人机交互操作

控件：文本框、单选按钮、列表框、图片框普通列表框(非下拉列表框) 隐藏域上传控件多行文本框

name\id\value\checked\selected\src\onclick\disabled\multiple

6.23

css层叠样式表

Css在HTML页面设计的必要作用

css语法格式、选择器以及分类

使用css设置字体、文本、背景、链接等

使用css列表,显示隐藏的方法、各种伪类用法

Css样式文件结构：样式的选择器（属性、属性值、分隔符）

内部样式表、背景设置、外部样式表

文本类样式、字体类样式、列表样式、伪类样式处理、伪类分类、伪元素选择器、其他选择器和选择器优先级

Css浮动效果设计：1边框、轮廓等块级元素设置,盒子模型2.标准流、文档流、脱标流等技术术语3.浮动的设置与特点4.浮动的特效制作

6.24

第三节

行级元素、块级元素定位机制:文档流、脱标流

文档流特点；空白折叠现象、高矮不齐,底边对齐、自动换行,一行写满,换行写

脱标流(float、position:absolute)：

float崩溃崩塌特性、包裹特性、其他特性float清除浮动

第四节css定位

css定位方式优劣特点
各种定位方法
层叠模式z-index
决定和相对定位
综合练习

相对定位:偏移参考元素是元素本身,不会使元素脱离文档流。元素的初试位置占据的空间会被保留不破坏文档流

绝对定位:相对于已定位的最近的祖先元素,如果没有已定位的最近的祖先元素,那么它的位置就相对于最初的包含块破坏文档流

绝对定位和float相同点：都会破坏文档流不同点:float不会覆盖文字而绝对定位会

z-index的使用

6.25

JS与综合案例

第一节

JS的重要性,HTML+CSS+JS之间的关系（HTML是框架,css是修饰,JS是实现功能）
JS脚本语言程序控制语法
JS脚本语言函数、自定义函数
JS脚本语言事件响应以及处理、表单处理
JS脚本语言DOM模型及操作
综合练习

JS JAVA-Script 是一种脚本语言

6.26

Js的内置函数、表单元素设置、事件与DOM总结

什么是事件：事件是指被程序发现的行为或发生的事情，而且它可能会被程序处理 js 事件以on开头 onclick、 onchange、onload等

鼠标事件:onclick\ondblclick\onmouseover\onmouseout\onmousedown等

键盘事件:onkeydown\onkeyup\keypress等

表单事件:onfoucs\onsubmit\onblur\onchange等

什么是DOM：将文档(页面)表现为结构化的表示方式,使每一个页面元素都是可操控,DOM将页面和脚本以及其他的编程语言联系了起来

Overflow:hidden 能把子float 属性的图像撑起来

水平居中margin: 24px auto

垂直居中:line-high:60px;heigh:60px;

找准层级关系,活学活用div

7.5

Java WEB的第10-11周导学

XML入门、Servlet入门、JSP入门、Servlet与JSP进阶、JSTL与EL表达式、Java Web基础入门测试

第一节重点知识

XML:可扩展标记语言

XML的作用:介绍XML作用以及应用场景、XML书写语法规则、Java解析XML、XML语义约束、XPath路径表达式

第二节重点知识 Servlet入门

B/S架构模式、Servlet开发技巧（是javaweb开发的最核心组件）Servlet执行原理（面试要用）

JSP入门（Servlet的简化版）

JSP用途、JSP执行原理、JSP基本语法规则

第四节Servlet与JSP进阶

Java Web核心特征（最重要）、Servlet核心对象、JSP九大内置对象

JSTL与EL表达式

EL表达式、JSTL常用标签

XML入门：

XML介绍与用途、XML语法规则、XML语义约束、Java解析XML、Xpath路径表达式

XML:EXtensible Markup Language 可扩展标记语言

优势:良好的人机可读性

XML与HTML的比较

都是编写标签
XML没有预定义标签 ,HTML存在大量预定义标签
XML重在保存与传输数据,HTML用于显示信息

XML用途:

Java程序的配置描述文件

用于保存程序产生的数据

网络间的数据传输

XML文档结构

第一行必须是XML声明
有且只有一个根节点
XML标签书写规则与HTML完全相同

XML标签书写规则

合法的标签名

标签名要有意义
建议使用英文,小写字母,单词之间使用”-”分割
建议多级标签之间不要重名

适当的注释与缩进
合理使用属性

标签属性用于描述标签不可或缺的信息
对标签分组或者为标签设置id时常用属性表示

特殊字符与CDATA标签

标签体中,出现”<”、”>”特殊字符,会破幻文档结构

解决办法:

实体引用

<表示小于号 >表示大于号等

2.使用CDATA标签

CDATA指的是不应由XML解析器进行解析的文本数据从<![CDATA[ 开始到]]>结束

有序的子元素

在XML多层嵌套的子元素中,标签前后顺序应当保持一致

XML语义约束

XML文档结构正确,但可能不是有效的

例如:员工档案XML中绝不允许出现”植物品种”标签.XML语义约束就是用于规定XML文档中允许出现哪些元素就是规定哪些元素可以出现,哪些不可以出现的

XML语义约束有两种定义方式:DTD与XML Schema。

DTD(Document Type Definition,文档类型定义)是一种简单易用的语义约束方式

DTD文件扩展名为.dtd

(1)利用<!ELEMENT>标签,我们可以定义XML文档中允许出现的节点以及数量

例如:<!ELEMENT hr(employee)> 定义hr节点下只允许出现1个employee子节点

<!ELEMENT employee(name,age,salary,department)>employee节点下必须包含以下四个节点,且按照顺序出现

<!ELEMENT name(#PCDATA) 定义name标签体只能是文本,#PCDATA代表文本元素

(2)如某个子节点需要多次重复出现,则需要在子节点后增加相应的描述符

<!ELEMENT hr(employee+> hr节点hr下最少出现1个employee子节点

<!ELEMENT hr(employee*) hr节点下可能出现0..n个employee子节点

<!ELEMENT hr(employee?>hr节点下最多出现1个employee子节点

在XML中使用<!DOCTYPE>标签来引用DTD文件书写格式:<!DOCTYPE 根节点 SYSTEM “dtd文件路径” 例:<!DOCTYPE hr SYSTEM “hr.dtd”

XML Schema 比DTD更为复杂,提供了更多功能提供了数据类型、格式限制、数据范围等特性。是W3C标准（软件问题）

DOM文档对象模型

DOM(Document Object Model)定义了访问和操作XML文档的标准方法,DOM把XML文档作为树结构来查看,能够通过DOM树来读写所有元素。

DOM4j 是一个易用的、开源的库,用于解析XML。它应用于java平台,具有性能优异,功能强大和及其易使用的特点。

DOM4j将XML视为Document对象

XML标签被DOM4j定义为Element对象。利用DOM4j对XML文档读取遍历、对XML进行更新

XPath 路径表达式

XPath路径表达式是XML文档中查找数据的语言

掌握XPath可以极大的提高在提取数据时的开发效率

学习XPath本质就是掌握各种形式表达式的使用技巧

7.6

Servlet入门学习

了解Browser Server(B/S)模式:浏览器模式和服务器架构模式

优点：开发简单、无需安装客户端、数据易于共享

缺点:相较于C/S,执行速度与用户体验相对较弱

掌握Servlet开发技巧
掌握Servlet执行原理

B/S模式执行流程

用户把baidu.com发给浏览器,浏览器通过DNS把域名翻译成地址,通过http传到web服务器中,web服务器（Apache）和服务器程序(Servlet)相互交互,找到想要的数据。（web服务器和服务器程序统称为服务器主机）

请求与响应

从浏览器发出送给服务器的数据包称为”请求(request)”
从服务器返回给浏览器的结果称为”响应（response）”

J2EE

J2EE是指”Java 2企业版”

开发BS(Web)应用程序就是J2EE最核心的功能

J2EE由13个功能模块组成：

Servlet Web服务器小程序、2.JSP服务器页面、3.JDBC数据库交互模块、4.XML交互模块、5.EJB企业级Java Bean、6.RMI远程调用、7.JNDI目录服务、8.JMS消息服务、9.JTA事务管理、10.JavaMail发送/接收Email、11.JAF安全框架、12.CORBA集成、13.JTS CORBA事务监控

Apache Tomcat

Tomcat 是Apache软件基金会旗下一款免费的开放源代码的Web应用服务器程序

J2EE和Apache Tomcat的关系

J2EE是一组技术规范与指南,具体实现由软件厂商决定

Tomcat是J2EE Web(servlet与jsp)标准的实现者

J2SE是J2EE运行的基石,运行Tomcat离不开J2SE

Servlet

Servlet（Servlet Applet）服务器小程序,主要功能用于生成动态Web内容

Servlet是J2EE最核心的部分

Tomcat安装

安装JDK 8
安装Tomcat 8.x

Servlet 开发步骤

7.7

Servlet开发步骤

创建Servlet类,继承HttpServlet
重写其中的service方法,编写程序代码
配置web.xml,绑定URL

请求参数

请求参数是指浏览器通过请求向Tomcat提交的数据

请求参数通常是用户输入的数据,待Servlet进行处理

参数名1=值1&参数名2=值2&参数名...

?name=张三&mobile=111&sex=male&spec=English&spec=Program

请求参数 action可以链接java类中链接的URL

Servlet接收请求参数

req.getParameter() 接收单个参数、req.getParameterValues()可以接收多个同名参数

Get与Post请求方法

Get方式是将数据通过URL附加数据显性向浏览器发送数据如:http://localhost:8080/FirstDemo/sample?name=zhangsan

Post方式会将数据存放在”请求体”中隐性向服务器发送数据如:http://localhost:8080/FirstDemo/sample 请求体:name=zhangsan 在地址中隐藏数据

所有请求service()方法

Get请求 doGet()方法

Post请求 doPost()方法

Get与Post应用场景

Get常用于不包含敏感信息的查询功能例如https://www.baidu.com/s?wd=imooc&rsv_spt=1

Post用于安全性要求较高的功能或者服务器的”写”操作

如:1.用户登录 2.用户注册 3.更新公司账目

Servlet的生命周期

一共五个阶段: 1.装载 -web.xml文件 2.创建-构造函数 3.初始化 -init() 4.提供服务 -service() 5.销毁 -destroy()

注意:在创建时,有且只有唯一个对象,只有销毁后,才会有新的对象。

使用注解简化配置

Servlet 3.x之后引入了注解特性

注解用于简化Web应用程序的配置过程

Servlet核心注解:@WebServlet

启动时加载Servlet

Web.xml 使用<load-on-startup>设置启动加载

<load-on-starup>0~9999</load-on-startup>

启动时加载在工作中常用于系统的预处理

JSP入门

课程介绍:

了解JSP用途
了解JSP执行原理
掌握JSP基本语法

Servlet的缺点

静态HTML与动态的java代码混合在一起,难以维护

Servlet利用out.println()语句输出,开发效率低下

很难在开发过程中发现错误,调试困难

JSP介绍

JSP全程(Java Server Pages) Java服务器页面

JSP是J2EE功能模块,由Web服务器执行

JSP作用是为了降低动态网页开发难度

JSP特点

JSP使用简单,短时间学习便可上手使用

JSP可将Java代码与HTML分离,降低开发难度

JSP本质就是Servlet

JSP运行要求

可正常运行的Tomcat、所有JSP页面扩展名必须是.jsp、JSP页面应放在Web应用程序目录下

JSP执行过程

浏览器->Tomcat找到jsp文件->（转译）Servlet源代码->（编译）Servlet字节码

JSP转译过程 <h1><% int a=9 转译成out.write(“<h1>”); int a=9再执行成<h1>9

JSP基本语法

JSP代码块、2.JSP声明构造 3.JSP输出指令 4.JSP处理指令

JSP代码块语法 <% java代码 %>

JSP声明构造块用于声明变量或方法<%!声明语句 %> 如<%! public int add(int a,int b) {return a+b;} %>

JSP输出指令用于在JSP页面中显示java代码执行结果 <%=java代码 %> 如<%=”<b>”+name+”</b> %> 就是out.println简化形式

JSP处理指令用于提供JSP执行过程中的辅助信息 <%@jsp指令%> 如: <%@page import=”java.util.* %> 在当前页面汇总导入java.util包

JSP常用处理指令 <%@page %> 定义当前JSP页面全局设置 <%@include %>将其他JSP页面与当前JSP页面合并 <%@taglib %>引入JSP标签库

JSP注释的区别

<%-- 注释 --%> jsp注释,被注释语句不做任何处理

//、用于注释<% %>java代码,被注释代码不执行

HTML注释,备注是的语句不会被浏览器解释会被jsp执行,但是不会被浏览器显示

JSP页面重用

<%@include %>

7.8

课程介绍

掌握Java Web核心特性
掌握Servlet核心对象
了解JSP九大内置对象

HTTP请求结构

HTTP请求包包含三部分: 请求行、请求头、请求体

请求行：1.请求方法 2.请求URL 3.HTTP协议及版本

请求头:Accept-Language: 语言 User-Agent:使用的操作系统和环境 Content-Length 发送数据的总长度 Cache-Control 缓存设置 Cookie等

请求体:标准数据传递模式(get方式没有请求体

巧用请求头开发多端应用

req.getHeader(“User-Agent”) 查找环境判断是何种环境然后进行操作

resp.setContentType(“text/html;charset=utf-8”); 内容支持汉语

响应结构

HTTP响应包含三部分: 响应行、响应头、响应体

响应行:1.报文协议及版本 2.状态码及状态描述（响应成功还是失败）

响应头:数据以外的辅助信息,Content-Tyle:text/html

响应体 html源代码

HTTP响应行中的状态码: 200 服务器处理成功、404 无法找到文件、500内部服务器错误、403服务器拒绝访问、301 302请求重定向、400 无效的请求 401未经过授权、503服务器超负荷或正停机维护,无法处理请求

ContentType的作用

text/plain 描述为纯文本、text/html HTML文档 text/xml XML文档

请求转发与重定向

多个Servlet(jsp)之间跳转有以下两种方式:

req.getRequstDispatcher().forward() -请求转发

resp.sendRedirect() -响应重定向

请求转发

请求转发是服务器跳转,只会产生一次请求(还是原有地址) 在服务器内部转发的

语句是 req.getRequestDispatcher().forward()

浏览器请求->Tomcat的Servlet1,Servlet1请求语句转发请求到->Servlet2,Servlet2响应到浏览器中

响应重定向

重定向则是浏览器跳转,会产生两次请求。

语句是 resp.sendRedirect()

浏览器请求->Tomcat的Servlet1,Servlet1会产生响应,送回给浏览器中,然后浏览器产生新的请求2 ->Servlet2,Servlet2响应给浏览器

设置请求自定义属性

请求允许创建自定义属性

设置请求属性 request.setAttribute(属性名,属性值)

获取请求属性: Object attr=request.getAttribute(属性名)

浏览器Cookie

Cookie 是浏览器保存在本地的文本内容,一般是浏览器缓存

Cookie 常用于保存登录状态、用户资料等小文本

Cookie具有时效性（默认时效性是关闭浏览器）设置 cookie.setMaxAge(),Cookie内容会伴随请求发送给Tomcat

Session -用户会话

Session(用户会话)用于保存与”浏览器窗口”对应的数据

Session的数据存储在Tomcat服务器的内存中,具有时效性

Session通过浏览器Cookie的Sessionld值提取用户数据

7.10

Session的原理

浏览器发送请求->Tomcat为其开辟一个空间SessionID: id名称,然后在这个空间内自定义属性,然后Tomcat把SessionID的值返回给浏览器中,浏览器把其存在Cookie中。浏览器再次发送请求,id是不变的,session.getAttribute() 就会找到对应位置把值取出来

如果再来一个浏览器,发送请求,Tomcat为其开辟一个新的空间.其他都是一样的

ServletContext对象 (Web的全局对象)

ServletContext（Servlet上下文对象）,是Web应用全局对象

一个Web应用只会创建一个ServletContext对象

ServletContext随着Web应用启动而自动创建

Java Web三大作用域对象

HttpServletRequest -请求对象生命周期最短设置对象

HttpSession -用户会话对象保存与浏览器窗口所用数据(默认30分钟不用就被销毁)

ServletContext -web应用全局对象

作用域依次递增

Web应用的中文乱码由来

Tomcat默认使用字符集ISO-8859-1,属于西欧字符集

解决乱码的核心思路是将ISO-8859-1 转换为UTF-8

Servlet中请求与响应都需要设置UTF-8字符集

Web.xml常用配置

修改web应用默认首页

Servlet通配符映射及初始化参数

设置404、500等状态码默认页面

JSP九大内置对象

Request 请求对象、response 响应对象、session 用户会话、application 应用全局对象、out 输出对象、page 当前对象、pageContext 页面上下文对象、config 应用配置对象、exception 应用异常对象

Java Web打包与发布

Java Web应用采用war包进行发布

发布路径为:{TOMCAT_HOME}webapps

7.11

掌握EL表达式的书写方法

掌握JSTL的常用标签

EL表达式

EL（Expression Language）表达式语言,用于简化JSP的输出

EL表达式的基本语法: ${表达式}out.println示例：<h1>学生姓名: ${student.name} </h1>

EL作用域对象

EL表达式内置四种作用域

pageScope从当前页面取值、requestScope 从当前请求中获取属性值、sessionScope从当前会话中获取属性值、applicationScope 从当前应用获取全局属性值

忽略书写作用域对象时,el则按作用域从小到大依次尝试获取最好写出来作用域

EL表达式输出

语法: ${[作用域].属性名[.子属性]} 作用域.属性名

EL表达式支持将运算结果进行输出

EL支持绝大数对象输出,本质是执行toString()方法

例: ${title} 、${requestScope.student.name} 标准形式 ${emp.salary+300} 可以进行运算、${1<=3 &&2>4} 可以进行布尔表达式

EL输出参数值

EL表达式内置param对象来简化参数的输出

语法${param.参数名}

JSTL标签库

JSTL（JSP Standard Tag Library） JSP标准标签库

JSTL用于简化JSP开发,提高代码的可读性与可维护性

JSTL由SUN定义规范,由Apache Tomcat 团队实现

JSTL的标签库种类(在jsp动态页面中运用)

JSTL按功能划分可分为五类标签库

核心标签库-core、格式化输出标签库-fmt、SQL操作标签库-sql、XML操作标签库-xml、函数标签库-funcations

引用JSTL核心库

核心标签库(core)是JSTL最重要的标签库,提供了JSTL的基础功能

<%@ taglib prefix=”c” uri=”http://java.sun.com/jsp/jstl/core”%>

JSTL核心标签库在taglivs-standard-impl.jar由META-INF/c.tld定义

判断标签

JSTL核心库提供了两组判断的标签

<c:if> -单分支判断

<c:choose>、<c:when>、<c:otherwise> -多分支判断

遍历集合

<c:forEach>标签用于遍历集合中的每一个对象 varStatus索引值 var对象 item数据体

<c:forEach var=”p” item=”${persons}” varStatus=”idx”>

第${ind.index+1}位<br/>

姓名:${p.name} 性别${p.sex} 年龄${p.age}

</c:forEach>

Fmt格式化标签库

fmt的formatData中的value 是数据, pattern yyyy-四位年 MM- 两位月 dd-两位日 HH-24小时制、hh-12小时制 mm-分钟 ss-秒数 SSS-毫秒

fmt的formatNumber中的value 是数据,pattern0.00保留两位这种格式 0,000.00 是三位一逗号,保留两位小数

Fmt格式化标签库 URI:http://java.sun.com/jsp/jstl/fmt

<fmt:formatData value=””pattern=””> 格式化日期标签

<fmt:formatNumber value=””pattern=””>格式化数字标签

<c:out value=”” default=””></c:out> value 是数据源 default 是把数据源用什么代替还有个escapexml=”true” 转译,变成代码形式

7.12

JSON入门 2.jQuery与Ajax 3.Java正则表达式4.过滤器

JSON入门

JSON语法规则 JSON是编程中最主要的数据存储格式

JSON的JS开发技巧讲解如何利用JavaScript读写JSON

JSON序列化介绍java中如何对JSON进行处理

jQuery与Ajax（前端）

jQuery 3 使用方法 jQuery是前端开发必不可少的技能

Ajax原理介绍Ajax核心对象XmlHttpRequest对象

jQuery处理Ajax 讲解jQuery如何发起并处理Ajax

正则表达式

正则表达式语法: 正则表达式是业界通用的文本处理表达式

常用正则表达式: 通过常用正则表达式巩固语法规则

编程语言使用正则: 讲解如何在Java与JavaScript中使用正则

过滤器

过滤器的作用:介绍过滤器的功能与用途

过滤器的开发技巧: 讲解过滤器开发配置与底层执行过程

过滤器的应用场景:讲解在项目中的典型过滤器使用方法

JSON入门内容:

掌握JSON语法的书写规则
掌握JSON与JavaScript的交互技巧
掌握JSON与Java之间的序列化与反序列化

JSON介绍

JavaScript Object Notation (JavaScript对象表示法)

JSON是轻量级的文本数据交换格式

JSON独立于语言,具有自我描述性,很好理解例：

{

“sites”[

{“name”:”慕课网”,”url”:”www.imooc.com”},

{“name”:”百度”,”url”:”www.imooc.com”},

{“name”:”网易”,”url”:”www.163.com”},

}

JSON语法规则

数值由键(key)/值(value)描述,由逗号分隔键和值都要用””包裹

大括号{}代表一个完整的对象,拥有多个键/值对键和值之间要用冒号分隔

中括号保存数组,多个对象之间使用逗号分隔

JSON与字符串互相转换

JSON.parse()方法将字符串转换为JSON对象

JSON.stringify()方法将JSON对象转换为字符串

JSON与Java交互

Java的JSON工具包还有FastJson、Jackson、Gson、Json-lib

FastJson是阿里巴巴著名的JSON序列化与反序列工具包

FastJson国内拥有大量使用者,拥有API简单,效率高等优点

FastJson序列化与JSON注解

FastJson序列化 JSON.toJSONString() 将对象转换为json字符串

JSON.parseObject 将JSON转换为对象

JSON注解 @JSONField()

FastJson对象数组序列化与反序列化

jQuery和Ajax(前端)

了解jQuery 3的基本使用方法

掌握Ajax处理流程与实现流程

掌握jQuery中Ajax方法的使用

JavaScript库

为了简化JavaScript开发,第三方厂家开发了JavaScript库

主流JavaScript库

jQuery、 vue.js、 AngularJS、 Eeact等

jQuery介绍

jQuery是一个轻量级JS库，使用十分简单

jQuery的核心是选择器,用于获取页面元素

JQuery提供了大量的高效方法,开发速度大幅提升

7.13

jQuery选择器实验室

$(“”).addClass() //jQuery的选择器方法

Web页面开发的两个要素

在使用HTML开发页面时,有两个基本点:

1.选择HTML页面上的哪些元素

2.在这些元素上做哪些动作

jQuery选择器

jQuery选择器用于选中需要操作的页面元素

语法1. jQuery（选择器表达式）

语法2. $() （选择器表达式）

基本选择器

基本选择器是jQuery最基础也是最常用的选择器表达式:

语法：

$(“#id”) ID选择器,指定Id元素的对象

$(“标签”) 元素选择器,选中指定标签名的选择器

$(“.class”)类选择器,选中拥有指定css类的元素

$(“S1,S2,SN”)组合选择器,对元素进行组合

层叠选择器

层叠选择器是根据元素的位置关系来获取元素的选择器表达式

语法： $(“ancestor descendant”) 后代选择器用空格区分

$(“ancestor>descendant”)子选择器用大于号区分

$(“prev~siblings”) 兄弟选择器选择该选择器之后的平级选择器

属性选择器

属性选择器是根据元素的属性值来选择元素的选择器表达式

语法:

$(“selector[attribute=’value’]”) 选中属性值等于具体值的组件如 a[href='http://www.baidu.com']

$(“selector[attribute^=’value’]”) 选中属性值以某值开头的组件

$(“selector[attribute$=’value’]”) 选中属性值以某值结尾的组件

$(“selector[attribute*=’value’]”) 选中属性值包含某值某值的组件

位置选择器

位置选择器是指通过位置获取指定的元素,例如:”获取第三个元素”

语法：

$(“selector:first”) 获取第一个元素

$(“selector:last”) 获取最后一个元素

$(“selector:even”) 获取偶位置的元素(从0开始)

$(“selector:odd”) 获取奇数位置的元素(从0开始)

$(“selector:eq(n)”)获取指定位置的元素(从0开始)

表单选择器

表单选择器是获取表单元素的简化形式,例如:获取所有文本框

$(“selector:input”) 所有输入元素

$(“selector:text”) 获取文本框

$(“selector:password”) 获取密码框

$(“selector:submit”) 获取提交按钮

$(“selector:reset”)获取重置按钮

操作元素属性

attr(name|properties|key) 获取或设置元素属性

例：

var href_attr=$("a[href*='163']").attr("href");  //attr()内一个参数 是获取属性
$("a[href*='163']").attr("href","http://www.163.com"); //attr()内两个参数是修改属性
var attr=$("a").attr("href"); //默认返回第一个元素属性

removeAttr(name) 移除元素属性

例

$("a").removeAttr("href");  //移除超链接

操作元素的css样式

css() 获取或设置匹配元素的样式属性

$("a").css("color","red");  //设置字体颜色为红色
var color=$("a").css("color"); //获取指定的css属性值

还有一次性传输多个属性值内容,可以用到JSON中的表示法{} 例

$("a").css({"color":"red","font-weight":"bold","font-style":"italic"});

addClass() 为每个匹配的元素添加指定的类名

添加单个指定类，例:$("li").addClass("highlight");
添加多个指定类,用空格分隔 如$("li").addClass("highlight myclass");

removeClass() 从所有匹配的元素中删除全部或者指定的类

$("p").removeClass("myclass");  //移除类

设置元素内容

val()获取或者设置输入项的值

设置:$("input[name='uname']").val("administrator");
获取:var v=$("input[name='uname']").val();

text()获取或设置元素的纯文本

设置:$("span.myclass").text("飞流直下三千尺");
获取var s=$("span.myclass").text();

html() 获取或设置元素内部的html文本

设置$("span.myclass").html("<b>飞流直下三千尺</b>"); 
获取var s=$("span.myclass").html();  这个会有b标签
获取var s=$("span.myclass").text();  这个显示结果会只显示纯文本内容

text与html方法的最大区别在于对文本中的html的标签是否进行转义

jQuery事件处理方法

on(“click”,function) 为选中的页面元素绑定单击事件

click(function) 绑定事件的简写

处理方法中提供了event参数包含了事件的相关信息

jQuery常用事件:

鼠标事件: click(单击事件)、dblclick(双击事件)、mouseenter(鼠标移入事件)、mouseleave(鼠标离开)、mouseover(鼠标移动)

键盘事件:keypress(键盘按下弹起过程)、keydown(某一个键按下)、keyup(某一个键弹起)

表单事件: submit(表单提交)、change(表单输入项内容发生变化)、focus(表单输入项获得焦点)、blur(失去焦点)

文档/窗口事件: load(文档加载时)、resize(尺寸变化)、scroll(窗口滚动)、unload(窗口关闭、卸载)

例如 绑定单击事件:$("p.myclass").on("click",function (){
  $(this).css("background-color","yellow");
});
简写方法$("span.myclass").click(function () {
  $(this).css("background-color","lightgreen");
});

绑定键盘事件：$("input[name='uname']").keypress(function (){
  $(this).css("color","red");
});

7.14

Ajax介绍(直接传值,局部更新,不用中间过渡)

Anchronous JavaScript And XML(异步的JavaScript和XML)

Ajax可以在不刷新页面的前提下,进行页面局部更新(聊天的时候局部更新并不用刷新页面)

Ajax不是新的技术,Ajax并不是W3C标准

Ajax的使用流程

创建XmlHttpRequest对象

发送Ajax请求

处理服务器响应

创建XMLHttpRequest对象

XMLHttpRequest用于在后台与服务器交换数据,是AJAX的核心

XMLHttpRequest并不是W3C的标准,不同浏览器的创建方式不同

代码如:

Var xmlhttp;

If(window.XMLHttpRequest){

//IE7+.Firefox,Chrome,Opera,Safari浏览器执行代码

Xmlhttp=new XMLHttpRueqest();

}else{

//IE6.IE5浏览器执行代码

Xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);

发送Ajax请求

xmlhttp.open()用于创建请求

xmlhttp.open(“GET”,”http://localhost/test?name=admin”,true);

xmlhttp.send()用于发送请求

处理服务器响应

xmlhttp.onreadystatechange()事件用于监听AJAX的执行过程

xmlhttp.readyState属性说明XMLHttpRequest当前状态

xmlhttp.status 属性服务器响应状态码, 200:成功 404:未找到

readyState=0 请求未初始化

readState=1 服务器连接已建立

readState=2 请求已被接收

readState=3 请求正在处理

readState=4 响应文本已被接收

响应代码:

xmlhttp.onreadystatechange=function(){

//响应已被接收且服务器处理成功时才执行

if(xmlhttp.readyState==4&&xmlhttp.status==200{

//获取响应体的文本

var responseText=xmlhttp.responseText;

//对服务器结果进行处理

}

三部分整合

document.getElementById("btnLoad").onclick=function (){
  //1.创建XmlHttpRequest对象
  var xmlhttp;
  if(window.XMLHttpRequest){
    xmlhttp=new XMLHttpRequest();
  }else {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  console.log(xmlhttp);
  //2.发送Ajax请求

//true代表异步  false代表同步
//同步,前面的事情没做完,后面的事情不让做不用onreadystatechange
//异步的话,就要用到onreadystatechange进行监控

  xmlhttp.open("GET","http://localhost/ajax/content",true);
  xmlhttp.send();
  //3.处理服务器响应
  xmlhttp.onreadystatechange=function (){
    if(xmlhttp.readyState==4&&xmlhttp.status==200){
        var t=xmlhttp.responseText;
        alert(t);
        document.getElementById("divContent").innerHTML=t;
    }
  }

jQuery对Ajax的支持

jQuery对Ajax进行封装,提供了$.ajax()方法

语法:$.ajax(options)

常用设置项:

极大简化了Ajax的步骤

代码如下:<script src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">
  $(function(){
    $.ajax({
      "url":"/ajax/news_list",
      "type":"get",
      "data":"t=pypl",
      "dataType":"json",
      "success":function (json){
        console.log(json);
        for(var i=0;i<json.length;i++){
          $("#container").append("<h1>"+json[i].title+"</h1>");
          $("#container").append("<h2>"+json[i].source+"</h2>");
        }
      },
      "error":function (xmlhttp,errorText){
        console.log(xmlhttp);
        console.log(errorText);
        if(xmlhttp.status==405){
          alert("无效的请求方式");
        }else if(xmlhttp.status==404){
          alert("未找到url资源");
        }else if(xmlhttp.status==500){
          alert("服务器内部错误,请联系管理官");
        }else {
          alert("产生异常,请联系管理员");
        }
      }
    })
  })
</script>

正则表达式

什么是正则表达式（是一种描述规则）:

正则表达式是检查、匹配字符串的表达式

正则表达式是描述规则,主流语言都有良好的支持

字符串校验、查找与替换是正则表达式主要使用场景

正则表达式案例

检查输入的身份证号是否合法(15位、18位)

示例:13010220200328091x

正则表达式:(^\d{15}$)|(^\d{18}$)|(^\d{17}[xX]$)

字符范围匹配

个人前后端学习笔记(比较杂乱,当做个人备份)6.236.246.256.267.57.67.7JSP入门7.87.107.117.127.137.147.157.167.177.19

元字符

个人前后端学习笔记(比较杂乱,当做个人备份)6.236.246.256.267.57.67.7JSP入门7.87.107.117.127.137.147.157.167.177.19

匹配数字(3213.383219) \d\d\d\d\.\d\d\d\d\d\d

匹配杭州与宁波的座机号码(0571|0574-XXXXXXXX)057[14]-\d\d\d\d\d\d\d\d

匹配18位身份证号:130133199805182157 [1234568]\d\d\d\d\d\d\d\d\d\d\d\d\d\d\d\d[0-9xX]

多次重复匹配

个人前后端学习笔记(比较杂乱,当做个人备份)6.236.246.256.267.57.67.7JSP入门7.87.107.117.127.137.147.157.167.177.19

匹配18位身份证号:130133199805182157 [1234568]\d{16}[0-9xX]

验证短信验证码(6位数字) \d{6}

匹配全国座机号(区号3或4位-电话号码7或8位）

匹配英文姓名：[A-Z][a-z]+\s[A-Z][a-z]*

定位匹配

个人前后端学习笔记(比较杂乱,当做个人备份)6.236.246.256.267.57.67.7JSP入门7.87.107.117.127.137.147.157.167.177.19

贪婪模式（正则表达式的默认情况）

在满足条件的情况下尽可能多匹配到字符串

例：111222333 正则:\d{6,8} 会匹配11122233 八个

非贪婪模式(? 要写在描述数量的后面)

例：111222333 正则:\d{6,8}? 会匹配111222 六个

表达式分组

分组将”正则”分组为多个子表达式

例:abababcdcdcd 正则”(ab){3}(cd){3}

匹配验证码(4位或6位) 正则: (^\d{4}$)|(^\d{6}$)

匹配车牌号(冀A-U888G) 正则:^([冀黑粤晋][A-Z])-([A-Z0-9]{5})$

匹配中文或英文姓名正则: (^[A-Z][a-z]+\s[A-Z][a-z]*$)|(^[\u4e00-\u9fa5]{2,8}$)

7.15

JavaScript表单验证（regex工程）

Java中Web页面信息提取（regexSample.java+sample.html）

Pattern是正则表达式包名

利用正则表达式提取Web页面信息步骤

//创建正则表达式对象
    Pattern p=Pattern.compile("<li>([\\u4e00-\\u9fa5]{2,10})([a-zA-Z]+)</li>");
    //匹配正则表达式
    Matcher m=p.matcher(content);
    //查找匹配的结果
    while(m.find()){
//      System.out.println(m.group(0));  //提取完整匹配信息
//      System.out.println(m.group(1));   //对应分组的第一个
//      System.out.println(m.group(2));   //对应分组的第二个
      String chn=m.group(1);
      String eng=m.group(2);
      System.out.println(chn+"-"+eng);
    }

过滤器-Filter

理解过滤器作用 2.掌握过滤器开发技巧 3.在项目中过滤器的应用场景

过滤器(Filter)是J2EE Servlet模块下的组件

Filter的作用是对URL进行统一的拦截处理

Filter通常用于应用程序层面进行全局处理

过滤链

个人前后端学习笔记(比较杂乱,当做个人备份)6.236.246.256.267.57.67.7JSP入门7.87.107.117.127.137.147.157.167.177.19

不仅过滤请求,还过滤响应,就是过滤器顺序不同

开发过滤器三要素

任何过滤器都要实现javax.servlet.Filter接口

在Filter接口的doFilter()方法中编写过滤器的功能代码

在web.xml中对过滤器进行配置,说明拦截URL的范围

7.16

过滤器的生命周期

先初始化 -Filter.init()

提供服务- Filter.doFilter()

销毁（web应用重启或者关闭时） -Filter.destroy()

过滤器的特性

过滤器对象在Web应用启动时被创建,且全局唯一

唯一的过滤器对象在并发环境中采用”多线程”提供服务

过滤器的两种开发方式

过滤器的配置形式 :在web.xml中配置

过滤器的注解形式:@WebFilter(filterName=””,urlPatterns=”/*”)

配置和注解形式如何选择:

配置形式维护性更好,适应应用全局过滤(大型项目)
注解形式开发体验更好,适用于小型项目敏捷开发

开发字符集过滤器

Web中文乱码解决

GET请求,server.xml增加URIEncoding=”UTF-8”

POST请求-使用request.setCharacterEncoding(“UTF-8”);

响应部分 response.setContentType(“text/html;charset=UTF-8”)

过滤器参数化

过滤器为了增强灵活性,允许配置信息放在web.xml

在web.xml中配置<init-param>设置过滤器参数

Url-pattern设置过滤范围

<filter>
  <filter-name>CharacterEncodingFilter</filter-name>
  <filter-class>com.imooc.filter.CharacterEncodingFilter</filter-class>
  <init-param>
    <param-name>encoding</param-name>
    <param-value>UTF-8</param-value>
  </init-param>
</filter>
<filter-mapping>
  <filter-name>CharacterEncodingFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

/index.jsp -执行资源精准匹配

/servlet/* - 以前缀进行模糊匹配

*.jsp 以后缀进行模糊匹配允许组合使用

/映射问题:

/指映射Web应用根路径,且只对Servlet生效

默认首页index.jsp会让/失效

/与/*含义不同,前者指向根路径,后者代表所有

过滤链(记住过滤链是个环形)

过滤链开发注意事项

每一个过滤器应具有单独职能

过滤器的执行顺序以<filter-mapping>为准

调用chain.doFilter()将请求向后传递

个人前后端学习笔记(比较杂乱,当做个人备份)6.236.246.256.267.57.67.7JSP入门7.87.107.117.127.137.147.157.167.177.19

项目中过滤器应用场景

多端设备自动匹配

7.17

监听器

监听器介绍listener

理解监听器的作用、理解六种监听器接口作用、掌握项目中监听器应用场景

监听器

是J2EE Servlet模块下的组件

Listener的作用对Web应用对象的行为进行监控

通过Listener监听自动触发指定的功能代码

三种监听对象

ServletContext 对全局ServletContext及其属性进行监听

HttpSession 对用户会话及其属性操作进行监听

ServletRequest 对请求及属性操作进行监听

过滤器与监听器的区别

过滤器Filter的职责是对RUL进行过滤拦截,是主动的执行

监听器Listener的职责是对Web对象进行监听,是被动触发

开发监听器三要素

实现XxxListener接口,不同接口对应不同监听器

实现每个接口中独有的方法,实现触发监听的后续操作

在web.xml中配置<listener>使监听器生效

六种常用接口

内置对象监听接口（first-listener下的test）

ServletContextListener -监听ServletContext对象创建、销毁等操作

HttpSessionListener -监听HttpSession对象创建、销毁等操作

ServletRequestListener - 监听HttpServletRequest对象创建、销毁等

属性监听接口

ServletContextAttributeListener -监听全局属性操作

HttpSessionAttributeListener -监听用户会话属性操作

ServletRequestAttributeListener -监听请求属性操作

监听器的应用场景

请求流量分析（request-total项目）用到百度Echarts组件

静态数据预处理

7.19

模板引擎与Freemarker

了解模板引擎原理、掌握Freemarker常用语法、Freemarker项目实战

什么是模板引擎

模板引擎的目标是“数据+模板=结果”

模板引擎将数据与展现有效“解耦”

例子:

模板: <span>

${user.name}

</span>

数据:

User user=new User();

user.setName(“张三”); 模板引擎 --结果 <span>张三</span>

主流模板引擎

Java Server Page

Freemarker

Beetl

Freemarker

Freemarker是免费开源的模板引擎技术

Freemarker脚本为Freemarker Template Language

Freemarker提供了大量内置函数来简化开发

Freemarker快速上手（freemarker工程）

步骤://1.加载模板
Configuration cfg=new Configuration(Configuration.VERSION_2_3_31);
//设置加载的目录
cfg.setClassForTemplateLoading(FreemarkerSample1.class,"");
//得到模板对象
  Template t=cfg.getTemplate("sample1.ftl");

//2.创建数据
Map<String,Object> data=new HashMap<>();
data.put("site","百度");
data.put("url","http://www.baidu.com");
//3.产生输出
t.process(data,new OutputStreamWriter(System.out));   //字节流转换成字符流

FTL取值（freemarker工程）

${属性} 取值,可对属性进行计算

${属性名!默认值}  使用默认值  如果是空值,就输出!后面的数据,如果不是空值,就输出原有数据${author!"不存在的属性"}

${属性名?string} 格式化输出${date?string("yyyy-MM-dd")}

${number?string("0.00")}

在数据中有Map属性时,采用中括号形式,如CPU: ${computer.info["cpu"]}

if分支判断

代码模板:

<#if 条件1>

条件1成立执行代码

<#elseif 条件2>

条件2成立执行代码

<#elseif 条件3>

条件3成立执行代码

<#else>

其他情况下执行代码

switch分支判断

<#swich value>

<#case refValue1>

...

<#break>

<#case refValue2>

...

<#break>

....

<#default>

...

</#switch>

<#if computer.user??>
用户:${computer.user}
</#if>   表示如果user不为空 则执行

List迭代列表(FreemarkerSample2)

<#list student as stu>

<li>${stu_index}-$(stu.name}</li>

</#list>

<#list computer as c>
序号:${c_index+1}  <#-- 迭代变量_index保存了循环的索引,从0开始-->
SN:${c.sn}
型号:${c.model}
  <#switch c.state>
    <#case 1>
状态:使用中
      <#break >
    <#case 2>
 状态:闲置
      <#break >
    <#case 3>
状态:已作废
  </#switch>
  <#if c.user??>
用户:${c.user}
  </#if>

采购日期:${c.dop?string("yyyy-MM-dd")}
采购价格:${c.price?string("0.00")}

</#list>

List迭代Map

<#list map？Keys as key>

${key}:${map[key]}

</#list>

List迭代Map
<#list computerMap?keys as k>
${k}-${computerMap[k].model}
${computerMap[k].price?string("0.00")}
</#list>