Java Web学习

锦鲤5214

已于 2024-05-02 00:06:45 修改

阅读量569

点赞数 16

文章标签：学习

于 2024-04-19 19:01:50 首次发布

本文链接：https://blog.csdn.net/weixin_52414359/article/details/137871190

版权

1.HTML

CSS决定页面布局样式效果，用于页面元素美化

HTML决定页面内容，用于网页主体结构搭建

JavaScript用于页面元素动态处理

C/S结构是客户端服务器结构

B/S结构是浏览器服务器结构

浏览器用来解析html文件，既可以解析服务器中的html文件，也可以解析本地的html文件

页面由内容（页面数据），表现（展示形式），行为（元素与输入设备的响应）三部分组成

HTML是超文本标记语言，通过标签标记网页中各个部分，网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中内容

HTML书写规范

<!DOCTYPE html>文档声明（HTML5版本）

<html>表示页面开始

<head>头信息

</head>

<body>

页面主体内容

</body>

</html>表示页面结束

HTML概念

标签tag指<>

属性attribute指标签的一些特征

文本text指双标签中的文字

元素element指一个完整的标签（标签属性文本）

HTML标签语法

HTML代码注释

HTML标签格式<标签名>封装的数据</标签名>

标签细节：标签名大小写不敏感但是不能混用，对单双引号不严格区分，需要嵌套交替使用即可；

标签拥有自己的属性，分为基本类型（修改样式效果）和事件属性（可以设置事件响应后的代码）；

标签还分为单标签<标签名 />（自结束标签）和双标签（有开始和结束标签）

标签不能交叉嵌套

双标签必须正确关闭（有闭合标签）

单标签要有 / 结束

不能自定义标签名

属性必须要有值（属性名和属性值相同时可以省略），并且属性值要加双引号

注释不能嵌套

HTML常用标签

字体标签<font>

<br />换行<hr />加横线换行

<p></p>段落标签

特殊标签要用特殊符号代替，<用&lt；，>用&gt；，空格用&nbsp；

标题123456分别用<h1 align = "left,center,right">标题1</h1>表示左中右对齐，默认左对齐

超链接<a>

网页中所有点击跳转的内容都是超链接

<a href = "http://www/baidu.com" target = "_self,_blank">百度</a>，表示选择自身页面跳转和打开新窗口跳转，默认自身跳转

href表示资源地址，target表示打开方式

return false；可以阻止跳转

列表标签<ul>

无序列表、有序列表、定义列表

<ul>

</ul>

<ul>无序列表（前面是点），<ol>有序列表（前面是序号）

<ul type = "none">取消前面的点

img标签<img/>

相对路径：.当前目录；..上一级目录；文件名表示当前文件所在的目录，相当于./文件名

绝对路径：http://ip:port/工程名/资源路径

表格标签<table>

<table align = "left,center,right"> border = "边框粗细" width = "宽度" height = "高度" cellspacing = "单元格间距">

<tfoot></tfoot>三个结构均可省略，浏览器会自动补充

<tr>行标签

<td align = "left,center,right"><b>1.1</b></td>表示表格对齐方式，加粗居中，效果等同于<th>1.1</th>

</tr> <tr>

<td>1.1</td>行中单元格

</tr>

</table>

跨行跨列表格<table>

<table>

<tr>

</tr> <tr>

</tr>

</table>

可同时写跨行跨列

<iframe>框架标签（内嵌窗口）

在HTML页面上打开一个小窗口加载单独的页面

iframe与a超链接合并使用，首先要给iframe定义一个名字，然后修改超链接中的target为iframe名

表单标签

HTML页面中用来收集用户信息的所有元素集合，然后把这些信息发送给服务器

<form action = "提交地址" method = "提交方式（默认get，或POST）">表单

输入信息：<input type = "信息类型" value = "默认值" />

性别：<input type = "radio" name = "组名" checked = "checked"/><input type = "radio" name = "组名" />组名相同表示同一个组只能进行一次单选，checked=“checked”表示默认选中，=true表示选中

爱好：<input type = "checkbox" />选项一<input type = "checkbox" />选项二

</form>

国籍：<select>

<option>请选择国籍</option>

<option>select = "selected"中国</option>，表示默认中国

</select>

自我评价：<textarea rows = "行数" cols = "列数">默认值</textarea>

text是文本输入框，password是密码输入框，radio是单选框，checkbox为多选框，select是下拉列表框，textarea表示多行文本输入框，reset为重置默认值按钮，submit为提交按钮与重置按钮语法相同，button是按钮，file是文件上传域，hidden是隐藏域（发送信息但不需要用户看到，会提交给服务器）也可以使用readonly属性设置为只读，disabled能看到但不能改且不提交

可以用表格标签来对表单进行格式化，输入信息：与<input type = "信息类型" value = "默认值" />分别为一行中的两列

表单提交时未发给服务器可能是：1.表单项没有加name，2.单选复选下拉列表中option没有加value，3.表单项不在提交的form标签中

get请求的特点是：1.浏览器地址栏中的地址是action地址(+？+请求参数)请求参数的格式是第一组&第二组&...2.不安全3.有数据长度限制4.地址栏只能是文本字符（不适合提交文件）

post请求的特点是：1.浏览器地址栏中只有action属性值2.相对get更安全3.理论上没有数据长度限制4.数据单独打包通过请求体发送，提交的数据量大5.请求体中可以是字符或字节数据6.效率比get低

其他标签

块元素<div></div>默认独占一行，CSS样式一般生效

行内元素<span></span>长度等于封装数据的长度，CSS样式很多不生效

<p></p>默认在段落上下方空出一行

2.CSS

CSS是层叠样式表单，用于增强控制网页样式并允许将样式信息与网页内容分离的一种标记性语言

CSS语法规则

选择器：浏览器根据选择器决定受CSS样式影响的HTML元素（标签）

属性：是要改变的样式名，每个属性都有一个值，属性和值被冒号分开，并由花括号包围，组成一个完整的样式声明

多个声明：每个声明由分号分开，最后一条声明可以不加，但是最好加上

CSS与HTML结合

第一种：在每个标签的style属性上设置key：value value；

缺点是样式多了代码量庞大，可读性差，没有复用性；样式代码和结构代码交织，不利于阅读

第二种：在head标签中，使用style标签定义需要的CSS样式

<head>

div{

border:边框粗细边框形式边框颜色;

}

</style>

</head>

style里面要用css语法，注释使用/*注释内容*/

缺点是只能在一个页面内复用代码，维护起来不方便

第三种：把css样式写成单独的css文件，再通过link标签引入即可复用

div{

border:边框粗细边框形式边框颜色;

}

<head>

div{

border:边框粗细边框形式边框颜色;

}

</style>

</head>

CSS标签选择器

标签名选择器

标签名{

属性：值；

}

标签名选择器可以决定哪些标签被动的使用这个样式

缺点：覆盖范围广，难以协调

id选择器

#id 属性值{

属性：值；

}

可以通过id属性选择性的使用样式，但只能作用在一个元素上

class选择器

.class 属性值{

属性：值；

}

可以通过class属性选择使用样式，class属性可以重复且一个元素可以有多个class值，通过空格分隔

组合选择器

选择器1,2,3，...n{

属性：值；

}

可以让多个选择器公用同一个css样式代码

常用样式

color：颜色

width：宽度px像素

height：高度px像素

background-color：背景颜色

font-size：字体大小px像素

border：边框样式

padding：内边距

margin-left与margin-right：auto，边框和内容自动居中

margin：10px 20px表示上下10px，左右20px。放四个值表示上右下左宽度

text-align：文字居左中右

text-decoration：none超链接去下划线

table{

border:1px solid black;设置边框

border-collapse:collapse;合并边框

}

td,th{

border:1px solid black;设置边框

}

ul{

list-style:none去除列表修饰

}

CSS浮动

display：inline，把div变为行内元素，但是可能会变得不能修改行高

float：left/right向左向右浮动（文字环绕图片），向左浮动的div会挡住下面浮上来的div，同时把div内文字挤到下面的div中和下面的div文字重叠

CSS定位

position：static默认，relative相对元素原本位置，fixed相对浏览器窗口位置，absolute绝对位置

top：

bottom：

left：

right：距离上下左右多少px，一般成对的只设置一个

盒子由外到内分别是外边界margin-上下左右，边框border-上下左右，内边界padding-上下左右，盒子体div，内边界不会向内侵占盒子容量

3.JavaScript

JS是一种解释性的脚本语言，不会产生编译出的字节码文件，而是在程序执行中对源文件逐行解释

JS是一种基于对象的脚本语言，但是没有继承封装多态的性质。

JS是弱类型，Java是强类型。

弱类型指类型可变，强类型指定义变量时确定类型并且不可改变

JS是一种事件驱动的脚本语言，不需要经过web服务器就可以对输入作出响应

特点：交互性（可以做信息动态交互），安全性（不允许直接访问本地硬盘），跨平台性（只要是可以解释JS的浏览器都可以执行）

JavaScript和HTML结合

第一种：在head标签中，或body标签中使用script标签书写JavaScript代码（推荐放在head标签中）

alter();(警告框提示信息）

</script>

第二种：使用script标签引入单独的JavaScript代码文件，标签中间最好不要有任何字符，包括空格和换行

以上两种方法只能同时使用一种，不能把一种写在另一种里面，但是可以串行写多个

JS变量

数值型：number

字符串型：String

对象类型：object

布尔类型：boolean

函数类型：function

未定义：undefined（js变量未赋初值默认undefined）

空值：null（类型是object）

非数字非数值：NAN（not a number）

定义变量语法：var 变量名；或var 变量名=值；

typeof（变量），返回变量类型

var使用细节

1.弱类型变量可以统一声明为var

2.var声明的变量可以再次声明

3.变量可以使用不同的数据类型多次赋值

4.结尾可以有；也可以没有

5.变量标识符严格区分大小写

6.标识符命名规则参照java

7.使用未声明变量会报错uncaught ReferenceError

JS运算

数值运算

除以零会报Infinity

模零会报NaN

除的净返回整型，有小数返回浮点数

关系运算

等于==，简单做字面值比较。两边数据类型不一致，会都转化成number再对比，true转成1，false转成0

全等于===，除了字面值比较，还要求数据类型一样

逻辑运算

与&&，都为真时返回最后一个表达式值，有一个为假时返回第一个为假的表达式的值

或||，全为假返回最后一个表达式值，有一个为真时返回第一个为真的表达式的值

与和或会短路，出现结果不会继续执行

取反|

JS中所有变量都可以当做boolean变量使用，0，null，undefined，空字符串都被认为是false

JS数组

var 数组名 =[];或var 数组名 =[1,'abc',true];也可以用小括号

或var arr = new Array（）

只要通过数组下标赋值，数组长度会自动扩容到最大的下标长度

未被赋值的元素为undefined

数组合并arr1.concat（arr2）

移除并返回数组最后一个元素arr.pop（）

向尾端增加一个元素并返回新的长度arr.push（）

搜索数组中的元素，返回最后出现的位置arr.lastIndexOf（）

反转数组arr.reverse（）

转换晨会字符串arr.join（分隔符，默认逗号）

截取数组arr.slice（起始位置，终止位置+1）

添加和删除元素arr.splice（插入删除起始位置，要删除的元素个数（从起始位置连续向后），要插入的元素）

日期API

可以通过.setYear/Month等设置日期

通过.getYear/Month等获取日期

JS分支结构

if（）会将非零Number，非空字符串以及非空对象判断为true

switch（）{

case a：

case b：

处理方法；

break；

case c：

case d：

处理方法；

break；

}

for（var 元素名 in 数组）{}

JS函数

定义方式有两种，第一种：使用function定义

function 函数名（形参列表）{

函数体

}

第二种：

var 函数名 = function （形参列表）{

函数体

}

有参函数定义只需要指明参数个数，如两个参数，只需要写（a，b）即可

需要返回值只需要在函数体内使用return即可，没有返回值不用写void

函数没有访问修饰符

没有异常列表

函数也可以作为参数传递给另一个方法，另一个方法使用函数时可以在函数体内调用

js函数不允许重载，会覆盖掉上一次的定义

若是输入参数数量大于定义形参数量，多余的参数不做处理，作为隐形参数，可用arguments查看参数（仅在function函数内），在函数中arguments不需要定义，但却可以获取所有参数的变量

sum用在数值和字符串之间作为字符串拼接

JS自定义对象

第一种：var 变量名 = new Object（）；创建对象

第二种：（属性名：属性值，...，函数名：function（）{}）

变量名.属性名 = 值；赋值

变量名.函数名 = function（）{}定义函数

变量名.属性名；访问属性

变量名.函数名（）；访问方法

var 变量名 = {}；定义空对象

var 变量名 = {

"属性"：值，

"函数名"：function（）{}

}；定义对象同时赋属性

属性之间要加逗号，属性和方法之间也要加

JSON格式

一个特定的字符串语法结构，用于前后端对象之间数据转换

var personStr ='{"属性名"："属性值"}'

属性名必须加双引号，字符串类型属性值必须加双引号，数字可以不处理

不交互方法只交互属性

JSON.parse（）可以将字符串转换为对象

JSON.stringify（）可以将对象转换为字符串

map和list存放字符串和对象也可能转换成类似的形式

JS事件

事件时电脑输入设备与页面进行交互的响应

onload加载完成，页面加载完成后，常用于做页面JS代码初始化操作

onclick单击，按钮的点击响应

onblur失去焦点，输入框失去焦点后验证输入内容是否合法

onchange内容发生改变，下拉列表和输入框内容发生改变后

onsubmit表单提交，表单提交前，验证所有表单项是否合法

事件注册（绑定）

告诉浏览器事件响应后要执行哪些操作代码

静态注册，通过HTML标签事件属性直接赋予事件响应后的代码

动态注册，先通过js代码得到dom对象，再通过dom对象.事件名=function（）{}形式赋予事件响应后的代码。1.获取标签对象，2.标签对象.事件名 = function（）{}

onload由浏览器自动触发。静态注册可以在body头中直接写，<body onload = "代码">，可以在Script标签中写好函数，在body头中直接调用onload = "function（）"

动态注册固定写法，在Script标签中写window.onload = function(){}（不需要在body中写onload）

onclick静态注册，在Script标签中写好函数，在按钮设定中<button onclick = "fun1()，fun2（）">

动态注册window.onclick = function(){

var 标签对象 = document.getElementById("标签id");document是一个对象，表示整个文档

标签对象.onclick = function(){}

}

onblur静态注册，在Script标签中写好函数，<input type = "text" onblur = "fun(this.value)">可以返回改变后的值

动态注册window.onblue = function(){

var 标签对象 = document.getElementById("标签id");

标签对象.onblur = function(){}

}

console是控制台对象，是由js语言提供，专门用来向浏览器控制器打印输出，用于测试使用，log是打印方法

onchange静态注册，在Script标签中写好函数，<select onchange = "fun()">

动态注册window.onchange = function(){

var 标签对象 = document.getElementById("标签id");

标签对象.onchange = function(){}

}

onsubmit静态注册，在Script标签中写好函数，<form action = "提交地址" method = "提交方式" onsubmit = "fun()">，这里的fun（）如果return false；可以阻止表单提交，函数需要return一个return false；（两个return）

动态注册window.onsubmit = function(){

var 标签对象 = document.getElementById("标签id");

标签对象.onsubmit = function(){}

}

BOM编程

BOM是浏览器对象编程，由一系列对象组成，访问控制修改浏览器的属性和方法，通过window对象及属性的一系列方法，控制浏览器行为的一种编程，全写为window.属性/方法，实际可以省略直接用属性/方法

history表示窗口访问历史.forward向前翻页，.back返回上一页.go(页码)向前翻几页

location表示地址栏.href="网页地址"会自动跳转（是location属性）

document表示打开的HTML文档

console表示开发者工具控制台

screen表示屏幕

navigator表示浏览器本身

sessionStorage表示会话级存储，关闭则清除

localStorage表示持久级存储，关闭后还在，.setItem（"key","value"）存储数据，.getItem（“key”）读取数据，.removeItem（“key”）删除数据

通过window对象及其属性的API控制浏览器的属性和行为

window常用API

弹出提示框输出alter（）

确认框confirm（），根据确认与否返回true或false

弹窗输入prompt（"提示语"），以String类型返回

可以使用Number.parseInt（）转换成整数

控制台输出console.log()

setTimeout（function（），毫秒）定时任务

DOM模型

把文档中的标签、属性、文本转换成对象来管理

document对象

document对象管理了所有HTML文档内容，通过浏览器解析形成一种树结构的文档，有层级关系；它使所有标签都对象化；可以通过document访问修改所有标签对象

document属性

tagName标签名

parentNode父节点

children孩子节点

innerHTML起始标签和结束标签之间的内容

document方法

document.getElementById("标签id");通过标签id查找标签对象，返回一个对象

document.getElementsByName("标签name");通过标签name查找标签对象，返回符合要求的所有对象，通过数组形式

document.getElementsByTagName("标签名");通过标签名查找标签对象，如<input>，以数组形式返回标签对象集合，顺序是HTML页面从上到下

document.createElement("标签名");通过标签名创建标签对象，在Script标签中创建，要显示在body中使用appendChild（标签对象）方法（需要在页面加载完后执行，比如放在onload里）

有标签id优先用id标签查，没id优先用name查，都没有再用标签名查，因为越往后范围越大，需要过滤

查询方法要在页面加载完成后，才能查询到标签对象

正则表达式对象

正则表达式是描述字符模式的对象

正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具

var patt =new RegExp（"要查询是否包含的内容"）；

或var patt = /要查询的内容/修饰符；修饰符g表示全文查找，修饰符i表示不区分大小写

之后使用patt.test（"要检索的部分"）返回true或false

str.match(patt)可以获取出现的位置序号

str.replace(patt，'替换后的字符')可以把符合条件的字符替换掉

var patt = /[abc]/查询是否包含abc中的元素，a-z表示a到z中任意字符（区分大小写），^abc表示不存在abc中任意字符

/[a-zA-Z]{6-10}/表示任意英文字母，可以重复7-11次

/^查找指令$/表示从头到尾都要符合查找指令

DOM节点

节点指HTML标签

属性

查子节点时，空行当做空白字符串也算一个子节点，双标签包括里面的内容整体算一个子节点

innerHTML获取所有内容，innerText只获取文本

修改属性

元素.属性名=""

修改样式

元素.style.样式名=""

原始样式名中的-连接要改成后面的单词首字母大写

创建元素

creatElement（）

增加子元素

appendChild（）

在其他元素前追加元素

insertBefore（新元素，参照元素）

替换元素

replaceChild（新元素，被替换的元素）

删除元素

remove（）

清空元素

循环删除元素或直接给元素赋空值

4.jQuery

是JS和查询，辅助JS开发的js类库

使用时需要在JS标签中引入类库<script type = "js路径" src = "jQuery路径"></script>

控制台打印样式console.log（）；

jQuery核心函数

$是一个函数，能完成jQuery很多功能

1.$（function(){}）；，相当于window.onload = function(){}，页面加载完后自动调用

2.$（HTML字符串）；，会创建这个HTML标签对象。$（HTML字符串）；

3.$（"#id属性值"）；传入选择器字符串时，根据id查询标签对象

4.$（"标签名"）；根据标签名查询标签对象

5.$（".class"）；根据类名查询标签对象

6.$（"DOM对象"）；把dom对象转换为jQuery对象

dom对象和jQuery对象

通过dom方法创建或查询出来的对象是dom对象

通过jQuery查询创建包装的对象是jQuery对象

jQuery对象实质上是dom对象数组加上jQuery提供的一系列功能函数

jQuery和dom属性和方法不互通

dom对象转jQuery对象：$(dom对象)

jQuery对象转dom对象：用数组下标取出dom对象

jQuery选择器（$(选择器)）

基本选择器

#id根据id查找

.class根据类名查找

element根据标签名查找

*查找所有元素

selector1,selector2 合并两个选择器结果并返回，结果顺序和页面标签顺序相同

层级选择器

$("标签查询的标签")选择一个标签内部的某个标签

$("标签>查询的标签")选择一个标签的某个子标签（不包括孙子标签）

$("标签+查询的标签")选择一个标签紧邻（下一个）的某个标签

$("标签~查询的标签")选择一个标签同辈的某个标签

过滤选择器

基本过滤器

$("标签：first")选择第一个符合查询条件的标签

$("标签：last")选择最后一个符合查询条件的标签

$("标签：not （：查询条件）")去除所有符合查询条件的标签

$("标签：even")筛选索引值是偶数的标签（奇数行）

$("标签：odd")筛选索引值是奇数的标签（偶数行）

$("标签：aq（1）")筛选索引值是1的标签

$("标签：gt（1）")筛选索引值大于1的标签

$("标签：lt（1）")筛选索引值小于1的标签

$("：header")筛选标题标签

$("：animated")筛选所有执行动画的标签

内容过滤器

$("：contains（"查询内容"）")筛选所有包含查询文本的标签

$("：empty")筛选所有不包含子元素或文本的标签

$("：parent")筛选所有非空的标签

$("：has（"查询内容"）")筛选所有包含匹配元素的标签

属性过滤器

$("标签[属性]")筛选所有包含给定属性的标签

$("标签[属性='给定值']")筛选所有属性等于给定值的标签

$("标签[属性！='给定值']")筛选所有属性不等于给定值的标签

$("标签[属性^='给定值']")筛选所有属性以给定值开头的标签

$("标签[属性$='给定值']")筛选所有属性等于以给定值结尾的标签

$("标签[属性*='给定值']")筛选所有属性包含给定值的标签

$("标签[属性='给定值'][属性='给定值'][属性='给定值']")筛选同时满足多个选择器的标签

表单过滤器

$("：input")选择所有input标签

$("：text")选择所有text标签

$("：password")选择所有password标签

等等

表单对象属性

$("：enable")选择所有可用标签（可点可写可输入）

$("：disable")选择所有不可用标签

$("：checked")选择所有被选中标签

$("：selected")选择所有选中的option标签

jQuery方法

.each()可以遍历每个对象，括号里可以写function执行，每次遍历包含一个this对象表示当前遍历到的对象

.eq(序号)查找第序号个满足条件的元素

.first()查找第1个满足条件的元素

.last()查找最后一个满足条件的元素

.filter(表达式)筛选出与指定表达式匹配的元素集合，例如".selected"

.is（标签）判断是否匹配指定的选择器，有一个匹配就返回true

.has（）保留包含特定后代的元素

.not()删除符合要求的元素

.children（）返回给定匹配的元素的子元素

.find()返回匹配元素的后代元素

.next（）返回当前元素的下一个兄弟元素

.nextAll()返回当前元素后面所有兄弟元素

.nextUntil()返回当前元素到指定元素为止的中间的元素

.parent()返回父元素

.prev()返回当前元素的上一个兄弟元素

.prevaAll()返回当前元素前面所有兄弟元素

.prevUnit()返回当前元素到指定元素为止的中间的元素

.siblings()返回所有兄弟元素

.add()把add匹配的选择器元素添加到当前jQuery对象中

jQuery属性操作

html（）获取或修改起始标签和结束标签之间的内容

text（）获取或修改起始标签和结束标签之间的文本

val()可以获取或修改标签value值，可以同时设置多个标签的选中状态（可以同时修改多个选择框标签的value为指定项的value）

attr（"属性值","修改值"）获取和设置属性值（可以操作自定义属性）（对于选中未选中会返回确认值或undefined），不推荐在checked，readOnly，selected，disabled中使用

prop（）获取和设置属性值（对于是否选中会返回true或false），只推荐在checked，readOnly，selected，disabled中使用

dom的增删改

内部插入

a.appendTo(b)，把a插入b内部末尾

a.prependTo(b)，把a插入b内部开头

外部插入

a.insertAfter(b)，把a插入b外部末尾

a.insertBefore(b)，把a插入b外部开头

替换

a.replaceWith(b)，用b替换a

a.replaceAll(b)，用a换掉所有b

删除

a.remove()，删除a标签

a.empty()，清空a标签内容

CSS样式操作

addClass()，添加样式，添加多个用空格分隔

removeClass()，删除样式，可以写要删除的样式，不写则默认删除所有样式

toggleClass()，没有就添加，有就删除样式

offset()，获取和设置元素坐标，距离顶部top：和左侧left：的坐标，可以自己设置值

jQuery动画

基本动画

show()，将隐藏的元素显示

hide()，将显示的元素隐藏

toggle()，可见就隐藏，隐藏就可见

以上动画方法可以添加参数，第一个参数是动画时长（播放快慢），以毫秒为单位；第二个参数是回调函数（动画完成后自动调用），参数之间逗号隔开。

淡入淡出动画

fadeIn()，淡入

fadeOut()，淡出

fadeTo()，在指定时间内慢慢将透明度修改到指定的值，0透明，1完全可见，0.5半透明

fadeToggle()，淡入淡出切换

jQuery事件操作

jQuery和原始页面加载完成的区别

jQuery的页面加载完成后：$（function(){}）；该函数是浏览器的内核解析完页面的标签创建好dom对象后马上执行，把所有注册的function顺序执行

原生js的页面加载完成后：window.onload = function(){}，还要等标签显示时需要的内容加载完成，并且只会执行最后一次赋值函数

常用事件处理方法

click()，绑定或触发点击事件

mouseover()，鼠标移入事件

mouseset()，鼠标移出事件

bind()，给元素一次性绑定一个或多个事件，多个事件用空格隔开

one()，使用方法与bind一致，但是绑定的事件只会响应一次

ubind()，解除事件绑定

live()，用来绑定事件，但是可以用来绑定选择器匹配的所有元素的事件，后续创建的元素也有效

事件的冒泡

父子元素同时监听同一个事件，当子元素事件触发时，同一个事件也传递到父元素事件响应

在子元素事件体函数内使用return false；可以阻止事件冒泡传递

事件对象

封装了有触发的事件信息的一个js对象

在给元素绑定事件时，在事件的function（event）参数列表中添加一个参数，这个参数名，一般取名为event，这个event就是js传递参事件处理函数的事件对象

XML

可扩展标记语言，允许自定义格式

xml文件第一行固定格式<?xml version="1.0" encoding="UTF-8"?>

根标签只能有一个<jbdc></jbdc>

XML约束：dtd约束简单但是不细致；schema复杂但是细致

增加约束会有提示，防止出错

conf中有web.xml表示共用的xml配置，如果项目中没有做修改则默认使用conf中xml配置

Tomcat

是一种服务器软件，专门运行web应用软件

浏览器中的路径称为项目的上下文路径，或项目的访问路径；文件夹中的文件称为项目的部署目录，可以调整使二者不一样

WebAPP标准结构

app目录中包含static目录（存放js，css，img文件），page目录（存放html文件），WEB-INF目录（受保护的资源目录，不可以通过浏览器直接访问）存放classes字节码根路径，lib依赖的存放路径，web.xml项目配置文件

Web项目部署方式

首先准备一个app文件

之后在tomcat的conf文件中创建Catalina/host目录，在目录下创建一个app.xml文件

path表示上下文路径，docBase表示存储路径

关联IDEA

1.建立tomcat与idea关联；

2.使用idea创建javaweb工程，在工程中开发代码

3.使用idea将工程构建成一个可发布app

4.使用idea将构建好的app部署到tomcat中运行

HTTP协议

HTTP1.0支持三种请求方法GET，Head，POST

相对于0.9改进：每个请求附加了HTTP版本；响应开始时发送状态代码；请求和响应都包含HTTP报文头；内容类响应能传输HTML文件以外的文档。

1.0不是官方标准

HTTP1.1支持七种请求方法OPTIONS，GET，HEAD，POST，PUT，DELETE，TRACE

相对于1.0改进：虚拟主机允许从单个IP地址提供多个域；持久连接和流水线连接允许web浏览器通过单个持久连接发送多个请求；缓存支持节省了带宽并使响应速度更快

HTTPS协议：使用SSL/TLS进行安全加密的HTTP安全版本

HTTP2相对于1.1改进：多路复用；二进制传输；头部压缩；服务器推送；改进的安全性。

并且2兼容1.1

HTTP交互方式

永远是客户端向服务端发送请求；永远是服务端向客户端返回响应

HTTP数据格式

请求发送请求报文；响应返回响应报文

请求报文包括：请求首行（请求行），请求头信息（请求头），空行，请求体

响应报文包括：响应首行（响应行），响应头信息（响应头），空行，响应体

Servlet

静态资源：无需在程序运行时通过代码生成的资源

动态资源：需要在程序运行时通过代码生成的资源

tomcat收到请求后，会将请求报文转换成一个HttpServletRequest对象，对象中存储了所有请求信息。响应时也同样通过对象转换成响应报文

tomcat根据请求中的路径找到对应的servlet，将请求信息实例化，调用service方法，同时将请求和响应对象传入

Servlet开发流程

1.创建javaweb项目，添加tomcat依赖

2.重写service方法，service（HttpSwrvletRequest 对象形参，HttpSwrvletResponse 对象形参）

3.在service方法中定义处理代码

4.在web.xml中配置servlet对应的请求映射路径，把路径去掉开头的/放入表单action中（放入别名）

<servlet-name>用于关联请求的映射路径</servlet-name>

<servlet-class>告诉tomcat要实例化的servlet类（通过字节码反射创建实例对象并调用service方法）</servlet-class>

</servlet>

<servlet-mapping>定义别名和请求映射路径关系

<servlet-name>用于关联请求的映射路径</servlet-name>

<url-pattern>/路径</url-pattern>

</servlet-mapping>

Servlet方法

对象名.getParameter（），根据key值获取value

servlet-api.jar导入问题

servlet-api编码的时候需要，运行时在服务器环境中由tomcat提供，所以在打包时不需要携带该包

Content-Type响应头问题

MIME类型用于告诉客户端响应的数据类型，客户端根据数据类型决定如何响应

conf/web.xml中记录了几乎所有文件类型对应的MIME类型，当接收到请求时，查找对应的值并赋给Content-Type响应头

对于静态资源能找到对应的Content-Type响应头，对于动态资源需要手动设置Content-Type响应头，response.setContentType("头的值")

url-pattern

一个servlet-name可以对应多个url-pattern

一个servlet可以对应多个servlet-mapping标签

通过url-pattern别名找到对应的servlet-name，再通过servlet-name找到对应的<servlet-class>类

匹配机制：精确匹配：通过/url-pattern名精确匹配

模糊匹配：/表示匹配全部，不包括jsp文件；/*表示匹配全部，包括jsp文件；/a/*表示匹配a开头的所有；*.action表示以action结尾的所有

注解方式配置servlet

在java业务代码主方法前用@WebServlet（“/路径”）设置路径，不需要在xml中再配置

servlet生命周期

1.通过构造器实例化，第一次请求时执行

2.通过init方法初始化，构造完毕执行

3.通过service方法处理请求，每次请求执行

4.通过destroy方法销毁对象，关闭服务执行

servlet成员变量在多个线程栈中共享，不建议在service中修改成员变量，并发请求时会引发线程安全问题，加锁会降低性能

loadOnStartup参数默认-1表示tomcat启动时不运行构造器实例化和初始化;设置为其他正整数含义是启动时实例化的序号，序号冲突会自动协调，不需要考虑序号连续性。默认已经设置到5，一般从6开始写

当请求静态资源时，需要通过defaultServlet（请求路径匹配不上所有其他的servlet时），获取静态资源放入response中发送给客户端

servlet继承结构

servlet顶级接口方法

包括初始化方法init，获取ServletConfig对象的方法，处理请求方法service，返回servlet字符串形式描述信息的方法getServletInfo，销毁对象释放资源destroy方法

实现接口的抽象类GenericServlet

侧重除service方法以外的方法处理

destroy方法，将抽象方法重写为普通方法，方法内部没有任何实现代码，称为平庸实现

init含参方法，读取配置信息进入ServletConfig对象，并将该对象传入无参init方法，重写时重写无参init方法

getServletConfig方法，返回config属性

service方法，再次声明抽象方法但并不实现

抽象类HttpServlet

侧重service方法处理

继承HttpServlet后，要么重写service方法，要么重写do方法

首先将父类对象servletRequest和servletResponse转换成子类对象HttpServletRequest，HttpServletResponse，然后重写service方法获取请求方式，根据不同的请求方式调用不同的do处理方法

默认对所有请求方式都响应405请求方式不允许

对需要响应的请求在自定义的Servlet中进行重写

部分程序员推荐在servlet中重写do请求方法，service方法中可能做了一些处理，如果直接重写service方法会导致处理失效；目前直接重写service方法也没有问题；后续使用SpringMVC框架则不需要再继承HttpServlet，处理请求的方法也不需要再是do请求方法；如果doGet和doPost方法中执行的代码一样则可以直接调用另一个方法

ServletConfig对象

为Servlet提供初始配置参数的对象

可以通过getInitParaterNames方法获取对象中所有初始参数名

hasMoreElements判断后面是否还有参数

nextElement取出下一个元素，向下移动游标

每个Servlet有独自的ServletConfig对象

可以通过xml文件配置或通过注解形式initParms={@WebInitParam(name="",value=""),,,,,}

ServletContext对象

为所有Servlet提供公共参数

获取参数可以通过config，req，或者直接调用getServletContext获取

获取真实路径（存储路径）可以通过getRealPath（"目录名"）

获得上下文路径（访问路径）getContextPath，参数不会干扰上下文路径

域对象：一些用于存储数据和传递数据的对象，不同域对象共享不同数据

ServletContext域也叫应用域是webapp中最大的域，可以在本应用内实现数据共享和传递

webapp中域分为应用域，会话域，请求域

操作域中数据方法：setAttribute（string key， object value）；getAttribute（string key）同名key会覆盖上一次设置的；removeAttribute（string key）

HttpServletRequest相关API

是一个接口，是tomcat将请求报文封装而来的对象，在调用service方法时传入，

uri，统一资源标识符，表示项目内资源路径interface URI{}，是资源定位的要求和规范，url中前面的ip和端口号会经常变化，但是后面的部分必须保持稳定，所以单独拿出来称为uri

url，统一资源定位符，表示项目内资源的完整路径class URL implements URI{}，是具体某个资源的定位和语法

LocalPort，本应用容器的端口号

ServerPort，客户端发请求时使用的端口号（通过代理使用代理端口号）

RemotePort，客户端软件的端口号

端口号可以通过get获取

getHeader，获取单个请求头

getHeaderNames，获取全部请求头

getParameter，获取单个参数

getParameterValues，获取全部参数

getReader，读取字符的输入流，读取JSON串

getInputStream，读取二进制数据的字节流，读取文件

getServletPath，获取请求路径

HttpServletResponse相关API

setStatus，设置响应代码

setHeader，设置响应头

setContentType，设置ContentType响应头

setContentLength，设置响应体长度，可以先设置输出文本，再通过getBytes（）.Length获取长度

getWriter，获得一个向响应体中输入文本字符的输出流

getOutputStream，向响应体中输入二进制数据的字节流

请求转发

向服务器获取资源，服务器向其他地方转发请求获取资源，最终发送给客户端

请求转发时，请求和响应对象会继续传递给下一个资源，请求中的参数可以继续向下传递；

请求转发时服务器内部行为，对客户端屏蔽，客户端地址栏不变；

转发资源也可以是WEB-INF下受保护资源，该方式也是WEB-INF下的资源的唯一访问方式；

目标资源不能是外部资源；

客户端只发送一次请求，服务端只产生一对request和response对象；

请求转发通过HttpServletRequest对象实现的，请求发送给视图对象会直接展示视图页面。

首先RequestDispatcher 新的对象= getRequestDispatcher（转发路径），然后对象.forward（http请求对象，http回应对象）

响应重定向

向服务器获取资源，服务器告知可获取资源的方式

使用sendRedirect（"资源路径"）方法，设置响应状态码为302，同时设置Location响应头

响应重定向通过HttpServletResponse对象实现；

是在服务端提示下的客户端行为，客户端地址栏变化；

客户端产生多次请求；

后端有多个request对象，此时请求的参数不能继续传递；

目标资源可以是视图资源或外部资源，但不能是WEB-INF下的保护资源

乱码问题

根本原因：数据的编码和解码使用的不是同一个字符集，使用了不支持某个语言文字的字符集

html乱码

idea中可以通过setting中的file coding设置全局和项目编码形式

tomcat控制台乱码

修改 Tomcat/conf/logging.properties中，所有的UTF-8为GBK即可。

sout乱码问题（编译和加载使用不同字符集），设置JVM加载.class文件时使用UTF-8

设置方法：点击idea页面上方tomcat，设置VM options为-Dflie.encoding-UTF-8

get请求乱码

html文件中设置了提交请求的编码方式，但是tomcat默认处理方式是UTF-8，编码不一致时会产生乱码。

推荐设置get编码方式charset与tomcat默认解码方式一致；或设置conf/server.xml中Connecter添加URIEncoding="GBK"（不推荐）

这里设置的是URI中的解码方式，但post不生效

post请求乱码

tomcat默认对请求体进行UTF-8解码，可以通过req.setCharacterEncoding("GBK")改变请求体解码方式（要在get之前设置）

响应乱码

响应体默认编码utf-8，可以在输入之前设置编码格式setCharacterEncoding("GBK")（不推荐）

可以通过设置Context-Type响应头告知客户端使用指定的字符集解码。要先明确响应体编码格式再设置。setContext-Type("text/html;charset=UTF-8")，最好是两种方式都使用，因为不确定是什么版本的tomcat

路径问题

相对路径：

以当前资源所在路径为出发点寻找目标资源，不以/开头，./表示当前资源路径，../表示上一层目录

如果使用请求转发访问WEB-INF中的文件，地址栏不变，通过相对路径访问叠加在地址栏上无法找到资源

绝对路径：

以/开头，跟在host：8080后面写完整资源路径

绝对路径需要写完整上下文路径，当项目路径发生改变时需要修改

可以通过<head><base href="xxx">不加修饰的路径前会自动补充href中的公共前缀内容

当项目路径改变时只需要修改公告前缀即可

请求转发和响应重定向路径

其余均与前端路径一致

只有请求转发的绝对路径不需要补全上下文路径，内部通过ServletContext对象获取路径getContextPath（），加在路径之前，所以只需要/相对路径即可

可以直接把项目上下文定义为/，写绝对路径时可以直接/开头无需补全上下文

MVC架构模式

将软件系统分为模型，视图，控制器三个基本部分，用一种业务逻辑，数据，界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重写业务逻辑

模型model：负责数据增删改查以及业务逻辑处理运算。包含实体类包，数据库访问包，服务包

视图view：负责数据展示和页面处理。包含web目录下的视图资源，html，css，js等

控制器control：负责控制前后端数据交互和业务逻辑控制。包含控制层包

会话管理

http是无状态协议，需要通过cookie和session配合设置状态

Cookie

由服务端产生，是服务器存放在浏览器的一小份数据，浏览器以后每次访问该服务器的时候都会将这小份数据携带到服务器去

客户端发送请求后，服务端创建cookie，封装进Response对象返回给客户端，后续客户端每次请求会携带cookie，如果不携带cookie则数组长度为null

（默认）会话级cookie：浏览器开着则cookie存在存于内存中，关闭则数据被释放

持久级cookie：服务端设置了cookie存在时间，存于硬盘中，不受浏览器关闭影响，到时间被释放，setMaxAge（秒）

可以设置提交路径，在该路径提交时才携带cookie

Session

服务器为每个客户端开辟一块内存空间Session对象，客户端发送请求时可以使用自己的session，服务器可以通过session记录每个客户的状态

发送请求到服务器时，首先检查请求中是否携带JSESSIONID，如果有就去服务端查找对应Session对象，如果没有携带或没有找到对象，则创建新的Session对象并将JSESSIONID以Cookie形式放入响应对象中

Session时效默认30分钟，可以修改web.xml中的session-timeout参数，也可以通过setMaxInactiveInterval动态设置

三大域对象

域对象：用于存储和传递数据的对象，传递数据不同的范围为不同的域

请求域：传递数据范围是一次请求之内及请求转发，存放本次业务有关的数据

会话域：传递数据范围是一次会话之内，可以跨多个请求，存放本次会话客户端状态有关数据

应用域：传递数据范围是本应用之内，可以跨多个会话，存放应用程序有关的数据

域对象API

setAttribute（name，value）添加或修改数据

getAttribute（name）获取数据

removeAttribute（name）删除数据

请求域req，会话域session，应用域ServletContext，application

Filter过滤器

请求到达目标资源前需要先经过doFilter方法，该方法能控制请求是否继续向后到达目标资源，可以在该方法内直接向客户端做响应处理，请求到达目标资源后，响应前还会经过该方法

该方法有三个参数，分别是ServletRequest，ServletResponse，filterChain

请求到达目标资源前要判断是否登录，校验权限是否满足，需要放行执行filterChain.doFilter（ServletRequest，ServletResponse）方法

到达目标资源后进行执行处理

响应前HttpServletResponse转换为响应报文前的功能代码

配置过滤器可以在xml文件中配置<filter><filter-name></filter-name><filter-class></filter-class></filter>，<filter-mapping><filter-name></filter-name><url-pattern>资源路径</url-pattern>或<servlet-name>请求别名</servlet-name></filter-mapping>以及过滤器过滤资源规则也可以用注解方法配置

注解形式配置@WebFilter（属性="xxx"，，，）

Filter生命周期

1.构造

2.初始化，通过filterConfig对象读取初始信息

项目启动时自动构造和初始化，除了过滤操作，其他都只执行一次

3.过滤

4.销毁

Filter过滤器链

多个过滤器前后连接形成过滤器链，请求接收的过滤器顺序和响应发送的过滤器顺序相反

过滤器的顺序和mapping代码执行顺序有关，使用注解模式执行过滤顺序和命名有关

监听器

用于对域对象身上发生的事件或状态改变进行监听和相应处理的对象

按监听对象可以分为应用域，会话域，请求域监听器

按监听事件可以分为创建和销毁监听器，增删改事件监听器，其他监听器

session钝化：服务器关闭或到指定时间时，将session序列化到磁盘

session活化：服务器启动或再次获取某个session时将磁盘上session反序列化到内存

钝化和活化需要在xml文件中修改配置

Ajax

可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容

同步交互：服务端与客户端交替运行，如form表单

异步交互：客户端与服务端同时运行，不会停下来等待服务端响应请求，使用JS代码

实现方式：1.原生JS实现方式，代码繁琐，涉及到回调函数问题。原生JBDC

2.使用第三方封装好的工具jQuery。BaseDAO

3.使用框架VUE，axios。Mybatis

回调函数：XMLRequest对象的readyState有1 2 3 4四种状态，4为收到后端响应后的状态

status获取响应状态码；responseText获取响应信息

前端工程化

使用软件工程的方法来单独解决前端开发流程中模块化、组件化、规范化、自动化的问题

前端使用nodejs，nmp，vite

后端使用maven

锦鲤5214

关注

16
点赞
踩
25

收藏

觉得还不错? 一键收藏
1
评论
Java Web学习

var 变量名 = new Object（）；创建对象变量名.属性名 = 值；赋值变量名.函数名 = function（）{}定义函数变量名.属性名；访问属性变量名.函数名（）；访问方法var 变量名 = {}；定义空对象var 变量名 = {属性：值，属性：值，函数名：function（）{}定义对象同时赋属性属性之间要加逗号，属性和方法之间也要加，
复制链接

扫一扫