Java Web基础知识

javaweb知识总结(只针对有javaweb基础的人)

标签:

标签不能够交叉嵌套。

注释也不能够嵌套。

font标签是字体标签。

 

特殊标签:

<     &lt;

>     &gt;

空格   &nbsp;

 

段落标签:只有h1-h6 

超链接:a标签 超链接 href属性设置链接的位置

    target属性设置哪个目标进行跳转。

 

列表标签

ul 无序列表 ol有序列表 (order unorder)

li 列表 

 

img标签:图片标签

src属性可以设置图片的路径

width属性可以设置图片宽度

height 高度

border 边框

alt 当在指定路径时找不到图片时,用来代替显示的文本内容。

 

table 标签是表格标签

  border 设置表格标签

   width 设置表格宽度

 height 设置表格高度

 align 设置表格相对于页面的对齐方式

 cellspacing 设置单元格间距。

 tr 是行标签

 th 是表头标签

 td 是单元格标签 

 colspan 合并列,在合并之后要删除被合并的列

 rowspan 合并行,在合并之后要删除被合并的行 

 

iframe 可以在一个页面打开另一个页面

a标签和iframe的联合使用 达到的效果就是可以在本页面中的新的窗口中打开链接。

通过设置iframe的name属性。然后可以设置a标签的一个 target指向iframe的name。

 

表单:

input输入框  type

radio 单选框 需要通过name对相同的数据进行分组。

checkbox 复选框 

reset  重置按钮。重置表单上的内容

button 按钮

submit 提交按钮     按钮都可以通过value修改按钮上面的内容。

hidden 是隐藏域。

select 下拉列表框

option是下拉列表框中的内容

textarea 表示多行文本输入框 (起始标签和结束标签中的内容是默认值)

rows属性设置可以显示几行的高度

cols属性设置可以显示几个字符宽度

 

表单提交的时候,数据没有发送给服务器的三种情况:

1、表单项没有name属性

2、单选、复选(下拉列表中的option标签)都需要添加value属性,以便发送给服务器

3、表单项不在提交的form标签中。

 

GET请求的特点是:

1、浏览器地址栏中的地址是:action属性[+?+请求参数]

  请求参数格式:name=value 

2、不安全

3、它有数据长度的限制

 

POST请求的特点:

1、浏览器地址栏中只有action属性值

2、相对于GET请求要安全

3、理论上没有数据长度的限制。

 

div 标签 默认独占一行

span 标签 它的长度是封装数据的长度

p 标签 默认会在段落上方或下方各空出一行来(如果已有就不再空)

 

CSS和HTML结合:

第一种用法:
在标签后面使用style属性。

这种方式的缺点:1、如果标签多了。样式多了。代码量非常庞大。

2、可读性特别差

3、CSS代码没什么复用性而言。

 

第二种方法:

在head标签中添加style代码块

CSS注释是 /* */

这种方式的缺点:

1、只能在同一页面复用代码,不能在多个页面中复用代码

2、维护起来不方便,实际的项目中会有成千上万的页面,要到每个页面中去修改。工作量太大了。

 

第三种方法:

把CSS样式写成一个CSS文件,然后通过link标签导入文件即可。rel = stylesheet type  = “text/css” href= CSS文件地址。

 

CSS选择器

标签名选择器

标签名选择器,可以决定相对应标签的样式。

 

id选择器

id选择器的格式是:

#id属性值{

属性:值;

}

 

类选择器

类选择器的格式是:

. 类属性值{

属性:值;

}

可以通过class属性。

 

组合选择器:

组合选择器的格式:

  选择器1,选择器2,选择n{

  属性:值;

  }

组合选择器可以让多个选择器公用同一个CSS代码

 

常用的CSS样式:

color 

border

width

height

backgroud-color  背景颜色

font-size  字体大小

margin-left 

margin-right 

text-align 文本居中

text-decoration :none 去除标签的下划线。

border-collapse :collapse 去除表格单元格之间的间隔

 

 

javascript

特点:

1、交互性 (它可以做的就是信息的动态交互)

2、安全性(不允许直接访问本地磁盘)

3、跨平台性(只要是可以解释JS的浏览器都可以执行,和平台无关)

 

javascript与html的结合(两种方法)

1、在script标签里面写

2、可以将js文件导入进来通过src来填写文件路径获取文件。

 

变量

javascript 的变量类型:

数值类型: number

字符串类型 :String

对象类型 : object

布尔类型 :bollean

函数类型 :function

 

javaScript里特殊的值:

undefined :未定义,所有js变量未赋予初始值的时候,默认值都是undefined

null                空值

NAN    全称是:Not a Number 。非数字。非数值。

 

关系运算:

全等于:===不仅进行字面量的比较,还要进行类型的比较。

 

在JavaScript语言中,所有的变量,都可以做为一个bollean类型的变量去使用

0、null 、undefined、空串都认为是false。

 

&&且运算

有两种情况:

第一种:当表达式全为真的时候。返回最后一个表达式的值。

第二种:在表达式种,有一个为假的时候,返回第一个为假的表达式的值。

 

||或运算

有两种情况:

第一种情况:当表达式全为假时,返回最后一个表达式的值

第二种情况:只要有一个表达式为真,就会返回第一个为真的表达式的值。

 

数组:
javaScript中的数组,只要我们通过数组下标赋值;那么最大的下标值,就会自动的给数组做扩容操作。

扩容的大小就是最大的下标+1。

重点:只有在赋值的时候会有扩容的操作,在读的时候没有扩容的操作。

 

函数:

函数的两种定义方式:

第一种

使用格式:

  function fun(){

return  ;

}

第二种

使用格式:

  var fun = function(){}

 

javascript中不允许函数重载。会覆盖上一个的函数。

 

函数的arguments 隐形参数(只在function函数内)

类似于java中的可变数组。

因此可以通过这个可变参数来传递各种数量的参数。

 

JS中的自定义对象:

Object形式的自定义对象

  对象的定义:

  var 变量名 = new Object() //对象实例(空对象)

  变量名.属性名 = 值;//定义一个属性

  变量名.函数名 = function(){} //定义一个函数

 

   对象的访问:

  变量名.属性名/函数名;

 

大括号形式的自定义对象

      var 变量名 = {

   属性名:值, //定义一个属性

   属性名:值, //定义一个属性

   函数名:function(){}   //定义一个函数

};  //空对象

 

JS中的事件:

什么是事件?事件是电脑输入设备与页面进行交互的响应,我们称之为事件。

常用的事件:

onload 加载完成事件 :页面加载完成之后,常用于做页面js代码初始化操作

onclick 单击事件 :        常用于按钮的点击响应操作

onblur 失去焦点事件: 常用于输入框失去焦点后验证其输入内容是否合法

onchange 内容发生改变事件  常用于下拉列表和输入框内容发生改变后操作

onsubmit 表单提交事件   常用于表单提交前,验证所有表单项是否合法。

 

事件的注册又分为静态注册和动态注册两种:
什么是事件的注册(绑定)?

其实就是告诉浏览器,当事件响应后要执行哪些操作代码,叫事件注册或者事件绑定。

 

静态注册事件:通过html标签的事件属性直接赋予事件响应后的代码,这种方式我们叫做静态注册

动态注册事件:是指先通过js代码得到标签的dom对象,然后再通过dom对象,事件名  = function(){}这种形式赋予事件响应后的代码,叫动态注册。

动态注册基本步骤:
  1、获取标签对象

  2、标签对象.事件名 = function(){};

  

onload(最开始加载页面时事件) 静态注册:标签是body

动态注册 :固定用法 : window.onload = function (){};

 

onclik(点击事件) 静态注册:主要是通过button

动态注册: 先通过document.getElementById获取标签对象,再调用onclick事件。

 

 onblur(失去焦点事件) 静态注册 :主要是用于输入框的。

动态注册 :与onclik同理。

 

onchange(内容发生改变):静态注册:输入框或者下拉列表

动态注册:与上述同理。

 

onsubmit (表单提交之前验证 ) :静态注册 :通过form标签设置。如何阻止表单判断完成后不提交。

<form  onsubmit="return onsubmitfun()" action="http://www.baidu.com">

 function onsubmitfun(){

            alert("sucess");
            return false;
        }

 

通过return false 记住onsubmit后面的return不能省略 不然还是会提交表单。

 

动态注册 :与上述同理。但阻止表单提交只用return false即可。

 

document 模型

DOM全称是 Document Object Model 文档对象模型

大白话,就是把文档中的标签,属性,文本转换成为对象来管理

那么 它们是如何实现把标签,属性,文本,转换成对象来管理呢。

树的层级结构

 

document对象的理解:

第一点:Document它管理了所有的HTML文档内容。

第二点:document它是一种树结构的文档。有层级关系。

第三点:它让我们把所有的标签都对象化。

第四点:我们可以通过document访问所有的标签对象。

 

正则表达式:

主要是为了匹配字符串的内容

[ ] 方括号用于查找某个范围内的字符。

[a-z] [A-z] [0-9] [abc] 查找方括号之间的任何字符

 

元字符  是拥有特殊含义的字符。。。

 \w元字符用于查找单词字符

单词字符包括 :a-z A-Z 0-9 以及下划线 ,包含_(下划线)字符。

 

量词 

n+ 至少包含一个n的字符串

n* 包含零个或者多个n的字符串

n? 包含一个或者零个n的字符串

n{x} 匹配包含x个n的序列的字符串 因为是序列,所以必须是连续的。

n{x,y} 匹配包含X或Y个n的序列的字符串

n{x,} 匹配至少包括x个连续的n的字符串

n$ 匹配任何结尾为n的字符串

^n 匹配任何开头为n的字符串 

如果要匹配完整字符串,就需要使用 /*$/

 

getElementById

返回指定Id的dom对象。可以操作所有的该对象的属性。

 

getElementsByName  

返回相同name的集合,该集合是通过数组的形式操作的。可以通过for循环遍历进行操作。

 

getElementByTagName

返回相同的标签的集合,该集合也是通过数组的形式操作的可以通过for循环进行遍历操作。

 

注:

  document对象的三个查询方法,如果有id属性,优先使用getElementById方法来进行查询

  如果没有id属性,则优先使用getElementsByName方法来查询

  如果id属性和name属性都没有最后再按标签名查getElementByTagName

以上的三个方法,一定要在页面加载完成之后执行,才能查询到标签对象。

 

节点的常用属性和方法

  节点就是标签对象 

方法:

通过具体的元素节点调用

getElementsByTagName()方法,获取当前节点的指定标签名孩子节点

appendChild(oChildNode)方法,可以添加一个子节点,oChildNode是要添加的孩子节点

 

属性:

ChildNodes 属性 获取当前节点的所有子节点

firstChild 属性 获取当前节点的第一个子节点

lastChild 属性 获取当前节点的最后一个节点

parentNode 属性 获取当前节点的父节点

nextSibling 属性 获取当前节点的下一个节点

previousSibling 属性 获取当前节点的上一个节点

className 用于获取或设置标签的class属性值

innerHTML 属性 表示获取/设置起始标签和结束标签中的内容

innerText 属性 表示获取/设置起始标签和结束标签中的文本。 

 

特殊:

document.createElement(tagName);   创建一个标签对象

body的标签对象是dom对象自带的,直接使用document.body即可。

  

 

jQuery

什么是jQuery?

JQuery,顾名思义,也就是JavaScript和查询(Query),它就是辅助JavaScript开发的js类库。

 

JQuery的核心思想!!!
它的核心思想是write less ,do more ,所以它实现了很多浏览器的兼容问题。

 

JQuery的流行程度

JQuery现在已经成为最流行的JavaScript库,在世界前10000个访问最多的网站中,有超过55%在使用JQuery

 

JQuery的好处!!!

JQuery是免费的、开源的,JQuery的语法设计可以使开发更加便捷,例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。

 

在JQuery中,$(function(){}) 等同于window.onload = function(){} 都是在页面加载完之后才执行

 

$是JQuery的核心函数 ,能完成JQuery的很多功能。${}就是调用$这个函数

1、传入参数为[函数] 时,表示页面加载完成之后,相当于 window.onload = function(){};

 

2、传入的参数是[HTML字符串时]  :根据这个字符串创建元素节点对象      需要使用appendto(“标签名”)将这个代码添加到相应的标签里面。

 

3、传入参数为[选择器字符串时] :根据这个字符串查找节点对象

$("#id属性值"); id选择器,根据id查询标签对象

$("标签名");      标签名选择器,根据指定的标签名询标签对象

$(".class属性值") :  类型选择器,可以根据class属性查询标签对象

 

4、传入参数为[DOM对象]时:将DOM对象包装成JQuery对象返回

 

JQuery对象的本质是什么?

JQuery对象是dom对象的数组 + JQuery提供的一系列功能函数。

 

JQuery对象和Dom对象使用区别

JQuery 对象不能使用Dom对象的属性和方法

DOM对象也不能使用JQuery的属性和方法

 

DOM对象和JQuery对象互转

1、dom对象转化为JQuery对象

  1、先有DOM对象

  2、$(DOM对象)就可以转换成为JQuery对象

 

2、JQuery对象转为dom对象

  1、先有JQuery对象

  2、JQery对象[下标取出相应的DOM对象]

 

JQuery选择器:
基本选择器:

#ID 选择器 :根据ID查找标签对象

.class  选择器:根据class查找标签对象

element 选择器:根据标签名查找标签对象

*   选择器 :表示任意的,所有的元素

selector1,selector2组合选择器:合并选择器1,选择器2的结果并返回。(注意是合并,所以完成的运算是并集不是交集)

 

层级选择器:p 

ancestor descendant 后代选择器  :在给定的祖先元素下匹配所有的后代元素

parent > child  子元素选择器 :在给定的父元素下匹配所有的子元素

prev + next 相邻元素选择器 :匹配所有紧接在prev元素后的next元素             

prev ~ sibings  之后的兄弟元素选择器 :匹配prev元素之后的所有siblings元素。  同级

 

过滤选择器:过滤之后依旧是JQuery对象,就算只有一个元素也是。

基本过滤器:

:first  获取第一个元素

:last  获取最后个元素

:not(selector)  去除所有与给定选择器匹配的元素

:even  匹配所有索引值为偶数的元素,从0开始计数

:odd     匹配所有索引值为奇数的元素,从0开始计数

:eq(index)匹配一个给定索引值的元素

:gt(index)匹配所有大于给定索引值的元素

:lt(index)匹配所有小于给定索引值的元素

:header  匹配如h1,h2,h3之类的标题元素

:animated  匹配所有正在执行动画效果的元素

 

内容过滤器:

:contains (text)匹配包含给定文本的元素

:empty  匹配所有不包含子元素或者文本的空元素

:parent  匹配含有子元素或者文本的元素

:has(selector)  匹配含有选择器所匹配的元素的元素

 

属性过滤器:

[attribute] 匹配包含给定属性的元素

[attribute=value] 匹配给定的属性是某个特定值的元素

[attribute!=value] 匹配所有不含指定的属性,或者属性不等于特定值的元素

[attribute ^ = value] 匹配给定的属性是以某些值开始的元素

[attribute $ = value] 匹配给定的属性是以某些值结尾的元素

[attribute *=value] 匹配给定的属性是以包含某些值的元素

[attrSel1][attrSel2][attrSel3]  复合属性选择器,需要同时满足多个条件时使用。

 

表单过滤器:

表单

  :input  匹配所有的input,textarea,select和button元素

  :text     匹配所有的文本输入框

  :password  匹配所有的密码输入框

  :radio  匹配所有的单选框

  :checkbox  匹配所有的复选框

  :submit  匹配所有的提交按钮

  :image  

  :reset

  :button

  :file

  :hidden

 

在JQuery中,可以通过each方法来遍历元素

在遍历的functon函数中,有一个this对象,就是当前遍历到的dom对象。

 

JQuery元素的筛选:

first() 获取第一个元素

last() 获取最后一个元素

filter(exp) 留下匹配的元素

is(exp) 判断是否匹配给定的选择器,只要有一个匹配就返回true

has(exp) 返回包含有匹配选择器的元素的元素

not(exp) 删除匹配选择器的元素

children(exp) 返回匹配给定选择器的子元素

find(exp) 返回匹配给定选择器的后代元素

next() 返回当前元素的下一个兄弟元素

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

nextUntil() 返回当前元素到指定匹配的元素为之的后面元素

parent() 返回父元素

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

prevAll() 返回当前元素前面所有的兄弟元素

prevUntil() 返回当前元素到指定匹配位置的元素为止的前面元素

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

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

 

JQuery属性操作

html() 它可以设置和获取起始标签和结束标签中的内容。跟dom属性innerHTML一样

text()   它可以设置和获取起始标签和结束标签中的文本 。跟dom属性innerText一样

val()   它可以设置和获取表单项的value属性值。    跟dom属性value一样

val方法可以同时设置多个表单项的选中状态:

$().val([,,])

 

attr()   可以设置和获取属性的值,不推荐操作checked、readOnly、selected、disabled等等

    attr()方法还可以设置

prop()  可以设置和获取属性的值,只推荐操作checked、readOnly、selected、disabled等等

 

------------恢复内容开始------------

javaweb知识总结(只针对有javaweb基础的人)

标签:

标签不能够交叉嵌套。

注释也不能够嵌套。

font标签是字体标签。

 

特殊标签:

<     &lt;

>     &gt;

空格   &nbsp;

 

段落标签:只有h1-h6 

超链接:a标签 超链接 href属性设置链接的位置

    target属性设置哪个目标进行跳转。

 

列表标签

ul 无序列表 ol有序列表 (order unorder)

li 列表 

 

img标签:图片标签

src属性可以设置图片的路径

width属性可以设置图片宽度

height 高度

border 边框

alt 当在指定路径时找不到图片时,用来代替显示的文本内容。

 

table 标签是表格标签

  border 设置表格标签

   width 设置表格宽度

 height 设置表格高度

 align 设置表格相对于页面的对齐方式

 cellspacing 设置单元格间距。

 tr 是行标签

 th 是表头标签

 td 是单元格标签 

 colspan 合并列,在合并之后要删除被合并的列

 rowspan 合并行,在合并之后要删除被合并的行 

 

iframe 可以在一个页面打开另一个页面

a标签和iframe的联合使用 达到的效果就是可以在本页面中的新的窗口中打开链接。

通过设置iframe的name属性。然后可以设置a标签的一个 target指向iframe的name。

 

表单:

input输入框  type

radio 单选框 需要通过name对相同的数据进行分组。

checkbox 复选框 

reset  重置按钮。重置表单上的内容

button 按钮

submit 提交按钮     按钮都可以通过value修改按钮上面的内容。

hidden 是隐藏域。

select 下拉列表框

option是下拉列表框中的内容

textarea 表示多行文本输入框 (起始标签和结束标签中的内容是默认值)

rows属性设置可以显示几行的高度

cols属性设置可以显示几个字符宽度

 

表单提交的时候,数据没有发送给服务器的三种情况:

1、表单项没有name属性

2、单选、复选(下拉列表中的option标签)都需要添加value属性,以便发送给服务器

3、表单项不在提交的form标签中。

 

GET请求的特点是:

1、浏览器地址栏中的地址是:action属性[+?+请求参数]

  请求参数格式:name=value 

2、不安全

3、它有数据长度的限制

 

POST请求的特点:

1、浏览器地址栏中只有action属性值

2、相对于GET请求要安全

3、理论上没有数据长度的限制。

 

div 标签 默认独占一行

span 标签 它的长度是封装数据的长度

p 标签 默认会在段落上方或下方各空出一行来(如果已有就不再空)

 

CSS和HTML结合:

第一种用法:
在标签后面使用style属性。

这种方式的缺点:1、如果标签多了。样式多了。代码量非常庞大。

2、可读性特别差

3、CSS代码没什么复用性而言。

 

第二种方法:

在head标签中添加style代码块

CSS注释是 /* */

这种方式的缺点:

1、只能在同一页面复用代码,不能在多个页面中复用代码

2、维护起来不方便,实际的项目中会有成千上万的页面,要到每个页面中去修改。工作量太大了。

 

第三种方法:

把CSS样式写成一个CSS文件,然后通过link标签导入文件即可。rel = stylesheet type  = “text/css” href= CSS文件地址。

 

CSS选择器

标签名选择器

标签名选择器,可以决定相对应标签的样式。

 

id选择器

id选择器的格式是:

#id属性值{

属性:值;

}

 

类选择器

类选择器的格式是:

. 类属性值{

属性:值;

}

可以通过class属性。

 

组合选择器:

组合选择器的格式:

  选择器1,选择器2,选择n{

  属性:值;

  }

组合选择器可以让多个选择器公用同一个CSS代码

 

常用的CSS样式:

color 

border

width

height

backgroud-color  背景颜色

font-size  字体大小

margin-left 

margin-right 

text-align 文本居中

text-decoration :none 去除标签的下划线。

border-collapse :collapse 去除表格单元格之间的间隔

 

 

javascript

特点:

1、交互性 (它可以做的就是信息的动态交互)

2、安全性(不允许直接访问本地磁盘)

3、跨平台性(只要是可以解释JS的浏览器都可以执行,和平台无关)

 

javascript与html的结合(两种方法)

1、在script标签里面写

2、可以将js文件导入进来通过src来填写文件路径获取文件。

 

变量

javascript 的变量类型:

数值类型: number

字符串类型 :String

对象类型 : object

布尔类型 :bollean

函数类型 :function

 

javaScript里特殊的值:

undefined :未定义,所有js变量未赋予初始值的时候,默认值都是undefined

null                空值

NAN    全称是:Not a Number 。非数字。非数值。

 

关系运算:

全等于:===不仅进行字面量的比较,还要进行类型的比较。

 

在JavaScript语言中,所有的变量,都可以做为一个bollean类型的变量去使用

0、null 、undefined、空串都认为是false。

 

&&且运算

有两种情况:

第一种:当表达式全为真的时候。返回最后一个表达式的值。

第二种:在表达式种,有一个为假的时候,返回第一个为假的表达式的值。

 

||或运算

有两种情况:

第一种情况:当表达式全为假时,返回最后一个表达式的值

第二种情况:只要有一个表达式为真,就会返回第一个为真的表达式的值。

 

数组:
javaScript中的数组,只要我们通过数组下标赋值;那么最大的下标值,就会自动的给数组做扩容操作。

扩容的大小就是最大的下标+1。

重点:只有在赋值的时候会有扩容的操作,在读的时候没有扩容的操作。

 

函数:

函数的两种定义方式:

第一种

使用格式:

  function fun(){

return  ;

}

第二种

使用格式:

  var fun = function(){}

 

javascript中不允许函数重载。会覆盖上一个的函数。

 

函数的arguments 隐形参数(只在function函数内)

类似于java中的可变数组。

因此可以通过这个可变参数来传递各种数量的参数。

 

JS中的自定义对象:

Object形式的自定义对象

  对象的定义:

  var 变量名 = new Object() //对象实例(空对象)

  变量名.属性名 = 值;//定义一个属性

  变量名.函数名 = function(){} //定义一个函数

 

   对象的访问:

  变量名.属性名/函数名;

 

大括号形式的自定义对象

      var 变量名 = {

   属性名:值, //定义一个属性

   属性名:值, //定义一个属性

   函数名:function(){}   //定义一个函数

};  //空对象

 

JS中的事件:

什么是事件?事件是电脑输入设备与页面进行交互的响应,我们称之为事件。

常用的事件:

onload 加载完成事件 :页面加载完成之后,常用于做页面js代码初始化操作

onclick 单击事件 :        常用于按钮的点击响应操作

onblur 失去焦点事件: 常用于输入框失去焦点后验证其输入内容是否合法

onchange 内容发生改变事件  常用于下拉列表和输入框内容发生改变后操作

onsubmit 表单提交事件   常用于表单提交前,验证所有表单项是否合法。

 

事件的注册又分为静态注册和动态注册两种:
什么是事件的注册(绑定)?

其实就是告诉浏览器,当事件响应后要执行哪些操作代码,叫事件注册或者事件绑定。

 

静态注册事件:通过html标签的事件属性直接赋予事件响应后的代码,这种方式我们叫做静态注册

动态注册事件:是指先通过js代码得到标签的dom对象,然后再通过dom对象,事件名  = function(){}这种形式赋予事件响应后的代码,叫动态注册。

动态注册基本步骤:
  1、获取标签对象

  2、标签对象.事件名 = function(){};

  

onload(最开始加载页面时事件) 静态注册:标签是body

动态注册 :固定用法 : window.onload = function (){};

 

onclik(点击事件) 静态注册:主要是通过button

动态注册: 先通过document.getElementById获取标签对象,再调用onclick事件。

 

 onblur(失去焦点事件) 静态注册 :主要是用于输入框的。

动态注册 :与onclik同理。

 

onchange(内容发生改变):静态注册:输入框或者下拉列表

动态注册:与上述同理。

 

onsubmit (表单提交之前验证 ) :静态注册 :通过form标签设置。如何阻止表单判断完成后不提交。

<form  onsubmit="return onsubmitfun()" action="http://www.baidu.com">

 function onsubmitfun(){

            alert("sucess");
            return false;
        }

 

通过return false 记住onsubmit后面的return不能省略 不然还是会提交表单。

 

动态注册 :与上述同理。但阻止表单提交只用return false即可。

 

document 模型

DOM全称是 Document Object Model 文档对象模型

大白话,就是把文档中的标签,属性,文本转换成为对象来管理

那么 它们是如何实现把标签,属性,文本,转换成对象来管理呢。

树的层级结构

 

document对象的理解:

第一点:Document它管理了所有的HTML文档内容。

第二点:document它是一种树结构的文档。有层级关系。

第三点:它让我们把所有的标签都对象化。

第四点:我们可以通过document访问所有的标签对象。

 

正则表达式:

主要是为了匹配字符串的内容

[ ] 方括号用于查找某个范围内的字符。

[a-z] [A-z] [0-9] [abc] 查找方括号之间的任何字符

 

元字符  是拥有特殊含义的字符。。。

 \w元字符用于查找单词字符

单词字符包括 :a-z A-Z 0-9 以及下划线 ,包含_(下划线)字符。

 

量词 

n+ 至少包含一个n的字符串

n* 包含零个或者多个n的字符串

n? 包含一个或者零个n的字符串

n{x} 匹配包含x个n的序列的字符串 因为是序列,所以必须是连续的。

n{x,y} 匹配包含X或Y个n的序列的字符串

n{x,} 匹配至少包括x个连续的n的字符串

n$ 匹配任何结尾为n的字符串

^n 匹配任何开头为n的字符串 

如果要匹配完整字符串,就需要使用 /*$/

 

getElementById

返回指定Id的dom对象。可以操作所有的该对象的属性。

 

getElementsByName  

返回相同name的集合,该集合是通过数组的形式操作的。可以通过for循环遍历进行操作。

 

getElementByTagName

返回相同的标签的集合,该集合也是通过数组的形式操作的可以通过for循环进行遍历操作。

 

注:

  document对象的三个查询方法,如果有id属性,优先使用getElementById方法来进行查询

  如果没有id属性,则优先使用getElementsByName方法来查询

  如果id属性和name属性都没有最后再按标签名查getElementByTagName

以上的三个方法,一定要在页面加载完成之后执行,才能查询到标签对象。

 

节点的常用属性和方法

  节点就是标签对象 

方法:

通过具体的元素节点调用

getElementsByTagName()方法,获取当前节点的指定标签名孩子节点

appendChild(oChildNode)方法,可以添加一个子节点,oChildNode是要添加的孩子节点

 

属性:

ChildNodes 属性 获取当前节点的所有子节点

firstChild 属性 获取当前节点的第一个子节点

lastChild 属性 获取当前节点的最后一个节点

parentNode 属性 获取当前节点的父节点

nextSibling 属性 获取当前节点的下一个节点

previousSibling 属性 获取当前节点的上一个节点

className 用于获取或设置标签的class属性值

innerHTML 属性 表示获取/设置起始标签和结束标签中的内容

innerText 属性 表示获取/设置起始标签和结束标签中的文本。 

 

特殊:

document.createElement(tagName);   创建一个标签对象

body的标签对象是dom对象自带的,直接使用document.body即可。

  

 

jQuery

什么是jQuery?

JQuery,顾名思义,也就是JavaScript和查询(Query),它就是辅助JavaScript开发的js类库。

 

JQuery的核心思想!!!
它的核心思想是write less ,do more ,所以它实现了很多浏览器的兼容问题。

 

JQuery的流行程度

JQuery现在已经成为最流行的JavaScript库,在世界前10000个访问最多的网站中,有超过55%在使用JQuery

 

JQuery的好处!!!

JQuery是免费的、开源的,JQuery的语法设计可以使开发更加便捷,例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。

 

在JQuery中,$(function(){}) 等同于window.onload = function(){} 都是在页面加载完之后才执行

 

$是JQuery的核心函数 ,能完成JQuery的很多功能。${}就是调用$这个函数

1、传入参数为[函数] 时,表示页面加载完成之后,相当于 window.onload = function(){};

 

2、传入的参数是[HTML字符串时]  :根据这个字符串创建元素节点对象      需要使用appendto(“标签名”)将这个代码添加到相应的标签里面。

 

3、传入参数为[选择器字符串时] :根据这个字符串查找节点对象

$("#id属性值"); id选择器,根据id查询标签对象

$("标签名");      标签名选择器,根据指定的标签名询标签对象

$(".class属性值") :  类型选择器,可以根据class属性查询标签对象

 

4、传入参数为[DOM对象]时:将DOM对象包装成JQuery对象返回

 

JQuery对象的本质是什么?

JQuery对象是dom对象的数组 + JQuery提供的一系列功能函数。

 

JQuery对象和Dom对象使用区别

JQuery 对象不能使用Dom对象的属性和方法

DOM对象也不能使用JQuery的属性和方法

 

DOM对象和JQuery对象互转

1、dom对象转化为JQuery对象

  1、先有DOM对象

  2、$(DOM对象)就可以转换成为JQuery对象

 

2、JQuery对象转为dom对象

  1、先有JQuery对象

  2、JQery对象[下标取出相应的DOM对象]

 

JQuery选择器:
基本选择器:

#ID 选择器 :根据ID查找标签对象

.class  选择器:根据class查找标签对象

element 选择器:根据标签名查找标签对象

*   选择器 :表示任意的,所有的元素

selector1,selector2组合选择器:合并选择器1,选择器2的结果并返回。(注意是合并,所以完成的运算是并集不是交集)

 

层级选择器:p 

ancestor descendant 后代选择器  :在给定的祖先元素下匹配所有的后代元素

parent > child  子元素选择器 :在给定的父元素下匹配所有的子元素

prev + next 相邻元素选择器 :匹配所有紧接在prev元素后的next元素             

prev ~ sibings  之后的兄弟元素选择器 :匹配prev元素之后的所有siblings元素。  同级

 

过滤选择器:过滤之后依旧是JQuery对象,就算只有一个元素也是。

基本过滤器:

:first  获取第一个元素

:last  获取最后个元素

:not(selector)  去除所有与给定选择器匹配的元素

:even  匹配所有索引值为偶数的元素,从0开始计数

:odd     匹配所有索引值为奇数的元素,从0开始计数

:eq(index)匹配一个给定索引值的元素

:gt(index)匹配所有大于给定索引值的元素

:lt(index)匹配所有小于给定索引值的元素

:header  匹配如h1,h2,h3之类的标题元素

:animated  匹配所有正在执行动画效果的元素

 

内容过滤器:

:contains (text)匹配包含给定文本的元素

:empty  匹配所有不包含子元素或者文本的空元素

:parent  匹配含有子元素或者文本的元素

:has(selector)  匹配含有选择器所匹配的元素的元素

 

属性过滤器:

[attribute] 匹配包含给定属性的元素

[attribute=value] 匹配给定的属性是某个特定值的元素

[attribute!=value] 匹配所有不含指定的属性,或者属性不等于特定值的元素

[attribute ^ = value] 匹配给定的属性是以某些值开始的元素

[attribute $ = value] 匹配给定的属性是以某些值结尾的元素

[attribute *=value] 匹配给定的属性是以包含某些值的元素

[attrSel1][attrSel2][attrSel3]  复合属性选择器,需要同时满足多个条件时使用。

 

表单过滤器:

表单

  :input  匹配所有的input,textarea,select和button元素

  :text     匹配所有的文本输入框

  :password  匹配所有的密码输入框

  :radio  匹配所有的单选框

  :checkbox  匹配所有的复选框

  :submit  匹配所有的提交按钮

  :image  

  :reset

  :button

  :file

  :hidden

 

在JQuery中,可以通过each方法来遍历元素

在遍历的functon函数中,有一个this对象,就是当前遍历到的dom对象。

 

JQuery元素的筛选:

first() 获取第一个元素

last() 获取最后一个元素

filter(exp) 留下匹配的元素

is(exp) 判断是否匹配给定的选择器,只要有一个匹配就返回true

has(exp) 返回包含有匹配选择器的元素的元素

not(exp) 删除匹配选择器的元素

children(exp) 返回匹配给定选择器的子元素

find(exp) 返回匹配给定选择器的后代元素

next() 返回当前元素的下一个兄弟元素

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

nextUntil() 返回当前元素到指定匹配的元素为之的后面元素

parent() 返回父元素

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

prevAll() 返回当前元素前面所有的兄弟元素

prevUntil() 返回当前元素到指定匹配位置的元素为止的前面元素

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

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

 

JQuery属性操作

html() 它可以设置和获取起始标签和结束标签中的内容。跟dom属性innerHTML一样

text()   它可以设置和获取起始标签和结束标签中的文本 。跟dom属性innerText一样

val()   它可以设置和获取表单项的value属性值。    跟dom属性value一样

val方法可以同时设置多个表单项的选中状态:

$().val([,,])

 

attr()   可以设置和获取属性的值,不推荐操作checked、readOnly、selected、disabled等等

    attr()方法还可以设置

prop()  可以设置和获取属性的值,只推荐操作checked、readOnly、selected、disabled等等

 

 

dom的增删改

内部插入:

appendTo()     a.appendTo(b)    把a插入到b子元素末尾,成为最后一个子元素

prependTo()  a.prependTo(b)   把a插到b所有子元素前面,成为第一个子元素

 

外部插入:

insertAfter()  a.insertAfter(b) 得到ba

insertBefore()  a.insertBefore(b)  得到ab

 

替换:

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

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

 

删除:

remove()   a.remove()  删除a标签

empty()    a.empty()  清空a标签里的内容

 

函数在没有给它绑定事件的时候默认的绑定事件是window对象。

 

JQuery样式操作:

addClass()  添加样式      可以添加多个或者删除多个 使用空格隔开即可

removeClass()  删除样式     如果什么都不填写默认删除全部

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

offset()    获取和设置元素的坐标   按照当前的大小来的

 

JQuery动画

基本动画

show()   将隐藏的元素显示

hide()   将可见的元素隐藏 

toggle()  可见就隐藏,不可见就显示

  以上的动画方法都可以添加参数。

    1、第一个参数是动画执行的时长,以毫秒为单位

    2、第二个参数是动画的回调函数(动画完成后自动调用的函数)

 

淡入淡出动画

fadeln()  淡入(慢慢可见)

fadeout()  淡出(慢慢消失)

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

fadeToggle()  淡入/淡出切换

 

JQuery事件操作

$(function(){})  和window.onload = function(){}的区别?

 

他们分别是在什么时候触发?

  1、JQuery的页面加载完成之后是浏览器的内核解析完页面的标签创建好DOM对象之后就会马上执行

  2、原生js的页面加载完成之后,除了要等浏览器内核解析完标签创建好dom对象,还要等标签显示时需要的内容加载完成。

 

他们触发的顺序?

  1、JQuery页面加载完成之后先执行

  2、原生js的页面加载完成之后

 

他们执行的次数?

  1、原生js的页面加载完成之后,只会执行最后一次的赋值函数

  2、JQuery的页面加载完成之后是全部把注册的function函数,一次顺序全部执行。

 

JQuery中其他的事件处理方法:
click()    它可以绑定单击事件,以及触发单击事件

mouseover()  鼠标移入事件  

mouseout()   鼠标移出事件

bind()     它可以给元素一次性绑定一个或多个事件

one()      使用上跟bind一样。但是one方法绑定的事件只会响应一次

unbind()    跟bind方法相反的操作,解除事件的绑定

live()      也是用来绑定事件。它可以用来绑定选择器匹配的所有元素的事件。哪怕这个元素是后面创建的也有效

 

事件的冒泡

什么是事件的冒泡?

事件的冒泡是指,父子元素同时监听同一个事件。当触发子元素的事件的时候,同一个事件也被传递到了父元素的事件里去响应。

 

那么如何阻止事件冒泡呢?

在事件函数体内,return false; 可以阻止事件的冒泡传递。 

 

XML简介

什么是XML?

xml是可扩展的标记语言

XML主要的作用?

  1、用来保存数据,而且这些数据具有自我描述性

  2、它还可以作为项目活着模块的配置文件

  3、还可以作为网络传输数据的格式(现在JSON为主)

 

xml语法

1、文档声明    

2、元素(标签)

3、xml属性

4、xml注释

5、文本区域(CDATA区)

 

什么是XML元素?

XML元素指的是从(且包括)开始标签直到(且包括)结束标签的部分

元素可包含其他元素、文本或者两者的混合物。元素也可以拥有属性。

 

XML命名规则

  名称可以含字母、数字以及其他字符

  名称不能以数字或者标点符号开始

  名称不能以字符xml或者XML、Xml开始

  名称不能够包含空格  

xml中的元素也分单标签和双标签

XML属性:

XML属性和html属性是很类似的。属性可以提供额外的信息

在标签上可以书写属性

  一个标签上可以书写多个属性。每个属性的值必须要用引号引起来

  属性的规则和标签的规则一致。

 

语法规则:

1、所有的XML元素必须要关闭标签

2、XML标签对大小写敏感

3、XML必须正确地嵌套

4、XML文档必须要有根元素 根元素就是顶级元素,必须是唯一的。

5、XML的属性值必须要加引号

6、XML中的特殊字符 > $gt    <$lt

7 、文本区域CDATA区,CDATA语法可以告诉xml解析器,只是纯文本,不需要xml语法解析

CDATA格式:<![CDATA[这里可以把你输入的字符原样显示,不会解析xml]] >

 

XML解析技术介绍

XML可扩展的编辑语言。不管是html文件还是xml文件它们都是标记型文档,都可以使用w3c组织制定的dom技术来解析。

早期的jdk为我们提供了两种xml解析技术 DOM 和Sax

dom 解析技术是 W3C 组织制定的,而所有的编程语言都对这个解析技术使用了自己语言的特点进行实现。 Java 对 dom 技术解析标记也做了实现。 sun 公司在 JDK5 版本对 dom 解析技术进行升级:SAX( Simple API for XML ) SAX 解析,它跟 W3C 制定的解析不太一样。它是以类似事件机制通过回调告诉用户当前正在解析的内容。 它是一行一行的读取 xml 文件进行解析的。不会创建大量的 dom 对象。 所以它在解析 xml 的时候,在内存的使用上。和性能上。都优于 Dom 解析

 第三方的解析: jdom 在 dom 基础上进行了封装 、 dom4j 又对 jdom 进行了封装。 pull 主要用在 Android 手机开发,是在跟 sax 非常类似都是事件机制解析 xml 文件。 这个 Dom4j 它是第三方的解析技术。我们需要使用第三方给我们提供好的类库才可以解析 xml 文件

 

通过dom4j解析xml文件的方法:

首先导入dom4j的jar包。然后需要创建一个与xml文件的内容匹配的实体类。

通过

SAXReader reader  = new SAXReader();
Document document = reader.read("")//xml文件的位置
Element root = document.getRootElement();//获取根元素
List <Element> element = root.elements();//获取根元素的子元素

 

通过for循环可以进行遍历,并且通过getText()可以获取到元素里面的文本内容,再通过存进book类中即可进行解析xml文件的效果。

 

 

JavaWeb的概念:

什么是JavaWeb

JavaWeb是指,所有通过Java语言编写可以通过浏览器访问的程序的总称,叫JavaWeb。JavaWeb是基于请求和响应来开发的。

 

什么是请求?

请求是指客户端给服务器发送数据,叫请求request

 

什么是响应?

响应是指服务器给客户端回传数据,叫响应response。

 

请求和响应的关系

请求和响应是成对存在的,有请求就有响应。

 

 

Web资源的分类:

web资源按实现的技术和呈现的效果的不同,又分为静态资源和动态资源两种

静态资源:html,css,js,txt,mp4视频,jpg图片

动态资源:jsp页面、servlet程序

 

常用的Web服务器

Tomcat:由 Apache 组织提供的一种 Web 服务器,提供对 jsp 和 Servlet 的支持。它是一种轻量级的 javaWeb 容器(服务 器),也是当前应用最广的 JavaWeb 服务器(免费)。

Jboss:是一个遵从 JavaEE 规范的、开放源代码的、纯 Java 的 EJB 服务器,它支持所有的 JavaEE 规范(免费)。

GlassFish: 由 Oracle 公司开发的一款 JavaWeb 服务器,是一款强健的商业服务器,达到产品级质量(应用很少)。

Resin:是 CAUCHO 公司的产品,是一个非常流行的服务器,对 servlet 和 JSP 提供了良好的支持, 性能也比较优良,resin 自身采用 JAVA 语言开发(收费,应用比较多)。

WebLogic:是 Oracle 公司的产品,是目前应用最广泛的 Web 服务器,支持 JavaEE 规范, 而且不断的完善以适应新的开发要求,适合大型项目(收费,用的不多,适合大公司)

 

 

 

Tomcat服务器和Servlet版本的对应关系

 

Servlet 程序从 2.5 版本是现在世面使用最多的版本(xml 配置) 到了 Servlet3.0 之后。

就是注解版本的 Servlet 使用。

以 2.5 版本为主线讲解 Servlet 程序。

 

Tomcat目录介绍

bin      专门用来存放Tomcat服务器的可执行程序

conf    专门用来存放Tomcat服务器的配置文件

lib     专门用来存放Tomcat服务器的jar包

logs     专门用来存放Tomcat服务器运行时输出的日志信息

temp    专门用于存放Tomcat运行时产生的临时数据

webapp     专门用来存放部署的web工程

work     是Tomcat工作时的目录,用来存放Tomcat运行时jsp翻译为Servlet的源码,和Session钝化的目录

 

 

部署web工程在tomcat服务器上的两种方式:

1、直接将web工程放在tomcat文件夹下的webapp下

2、在conf/Catalina/localhost 下创建一个xml配置文件 

通过    <Context path="/abc" docBase="D:\data\bookweb" />  可以用来部署web项目

其中Context指的是上下文环境,path指的是这个配置文件的名字 docBase 指的是web项目的真实路径。

 

 

手托html页面到浏览器和在浏览器中输入http://ip:端口号/工程名/访问的区别

 

 

ROOT的工程的访问,以及默认index.html页面的访问

当我们在浏览器地址栏中输入访问地址如下:

http://ip:port/    ====》 没有工程名的时候,默认访问的是ROOT工程

当我们在浏览器地址栏中输入的访问地址如下:

http://ip:port/工程名/ =======>>>>> 没有资源名,默认访问index.html页面

 

Servelt技术

什么是Servlet 

1、Servlet是JavaEE规范之一。规范就是接口

2、Servlet是JavaWeb三大组件之一。三大组件分别是:Servlet程序、Filter过滤器、Listener监听器。

 3、Servlet是运行在服务器上的一个java小程序,它可以接收客户端发送过来的请求,并响应数据给客户端

 

手动实现Servlet程序

1、编写一个类去实现Servlet接口

2、实现service方法,处理请求,并响应数据

3、到web.xml中去配置servlet程序的访问地址

 

 

Servlet的url地址如何定位到Servlet程序的?

 

 

Servlet的生命周期

1、执行Servlet构造器方法

2、执行init初始化方法

  第一、二步,是在第一次访问的时候创建Servlet程序会调用

3、执行service方法

  第三步每次访问都会调用

4、执行destroy销毁方法

  第四步,在web工程停止的时候调用

 

通过继承HttpServlet实现Servlet程序

一般在实际项目开发中,都是使用继承HttpServlet类的方式去实现Servlet程序

1、编写一个类去继承HttpServlet类

2、根据业务需要重写doGet或doPost方法

3、到web.xml中的配置Servlet程序的访问地址

 

Servlet类的继承体系

 

 

ServletConfig类

ServletConfig类从类名上来看,就知道是Servlet程序的配置信息类

Servlet程序和ServletConfig对象都是由Tomcat负责创建,我们负责使用

Servlet程序默认是第一次访问的时候创建,ServletConfig是每个Servlet程序创建时,就创建一个对应的ServletConfig对象

 

ServletConfig类的三大作用

1、可以获取Servlet程序的别名servlet-name的值

2、获取初始化参数init-param

3、获取ServletContext对象

 

ServletContext类

什么是ServletContext?

1、ServletContext是一个接口,它表示Servlet上下文对象

2、一个web工程,只有一个ServletContext对象实例

3、ServletContext对象是一个域对象

4、ServletContext是在web工程部署启动的时候创建的。在web工程停止的时候销毁

 

什么是域对象?

域对象,是可以像Map一样存取数据的对象,叫域对象

这里的域指的是存储数据的操作范围 整个web工程

 

          存数据                   取数据         删除数据

Map       put()        get()        remove() 

域对象     setAttribute()     getAttribute()    removeAttribute()

 

ServletContext类的四个作用

1、获取web.xml中配置的上下文参数context-param

2、获取当前的工程路径,格式:/工程路径

3、获取工程部署后在服务器硬盘上的绝对路径    映射到web上的路径

4、像Map一样存取数据

 

HTTP协议

什么是http协议

什么是协议?

协议是指双方,或多方,相互约定好,大家要遵守的规则,叫协议。

所谓http协议,就是指,客户端和服务器之间通信时,发送的数据,需要遵守的规则,叫http协议

http协议中的数据又叫报文。

 

请求的HTTP协议格式

客户端给服务器发送数据叫请求

服务器给客户端回传数据叫响应

请求又分为GET请求和POST请求两种

1、GET请求

  请求行

   (1)请求的方式  GET

   (2)请求的资源路径[+?+请求参数] 

   (3)请求的协议的版本号  HTTP/1.1

  请求头

    key:value  组成  不同的键值对,表示不同的含义

 

 

 

POST请求

  请求行

   (1)请求的方式    POST

   (2)请求的资源路径[+?+请求参数]

      (3) 请求的协议的版本号

  请求头

    key:value  不同的请求头,有不同的含义

  空行

  请求体 ==>> 就是发送给服务器的数据

 

 

 

 

常用请求头说明:

Accept: 表示客户端可以接收的数据类型

Accpet-Languege: 表示客户端可以接收的语言类型

User-Agent: 表示客户端浏览器的信息

Host: 表示请求时的服务器 ip 和端口

 

GET请求有哪些?

1、form标签 method = get

2、a标签

3、link标签引入css

4、script标签引入js文件

5、img标签引入图片

6、iframe引入html页面

7、在浏览器地址栏中输入地址后敲回车

 

POST请求有哪些:

1、form 标签 method = post

 

响应的HTTP协议格式

1、响应行

  (1)响应的协议和版本号

  (2)响应的状态码

  (3)响应状态描述符

2、响应头

  (1)key:value    不同的响应头,有其不同含义

3、响应体     ====>>>     就是回传给客户端的数据

 

 

 常见的响应码说明

200     表示请求成功

302     表示请求重定向

404     表示请求服务器已经收到了,但是你要的数据不存在(请求地址错误)

500     表示服务器已经收到请求了,但是服务器内部错误(代码错误)

 

MIME类型说明

MIME是HTTP协议中数据类型

MIME的英文全称是 “Multipurpose Internet Mail Extensions” 多功能Internet邮件扩充服务。MIME类型的格式是“大类型/小类型”

并与某一种文件的扩展名相对应

 

 

 

 

HttpServletRequest类

  HttpServletRequest类有什么作用。

每次只要有请求进入Tomcat服务器,Tomcat服务器就会把请求过来的HTTP协议信息解析好封装到Request对象中。然

后传递到service方法(doGet和doPost)中给我们使用。我们可以通过HttpServletRequest对象,获取到所有请求的信

息。

 

HttpServletRequest类的常用方法

getRequestURI()     获取请求的资源路径

getRequestURL()     获取请求的统一资源定位符(绝对路径)

getRemoteHost()     获取客户端的ip地址

getHeader()        获取请求头

getParameter()      获取请求的参数

getParameterValues()   获取请求的参数(多个值的时候使用)

getMethod()        获取请求的方式GET或POST

setAttribute(key,value)  设置域数据

getAttribute(key)       获取域数据

getRequestDispatcher()    获取请求转发对象

 

获取参数  

getParameter()     参数只有一个值

getParameterValues()  参数有很多值返回一个数组

 

在post请求中中文会出现乱码,因此需要通过setCharacterEncoding来设置编码为UTF-8从而解决这个问题

而且设置这个编码必须要在所有的获取参数值的前面。

 

 

请求的转发

什么是请求的转发?

请求转发是指,服务器收到请求后,从一个资源跳到另一个资源的操作叫做请求转发

 

 请求转发只能转发到相同的请求类型里面。例如get请求只能转发到get请求,不能转发到post请求。

只可以转发到web目录下,其他工程都不可以转发。

 

base标签

 

 

Web中的相对路径和绝对路径

在javaWeb中,路径分为相对路径和绝对路径两种

相对路径是:

  .    表示当前目录

  ..    表示上一级目录

  资源名  表示当前目录/资源名

 

绝对路径:

  http://ip:port/工程路径/资源路径

 

Web中/ 斜杠的不同意义

在web中 /斜杠是一种绝对路径

/ 斜杠如果被浏览器解析,得到的地址是 :http://ip:port/

  <a href = "/">斜杠</a>

/  斜杠 如果被服务器解析,得到的地址是:http://ip:port/工程路径

  1、<url-pattern>/dispatcherServlet2</url-pattern>

  2、servletContext.getRealPath("/")

  3、request.getRequestDispatcher("/");

特殊情况:response.sendRediect("/");   把斜杠发送给浏览器解析。得到 http://ip:port/

 

HttpServletResponse类

HttpServletResponse类的作用

HttpServletResponse 类和 HttpServletRequest 类一样。每次请求进来,Tomcat 服务器都会创建一个 Response 对象传 递给 Servlet 程序去使用。HttpServletRequest 表示请求过来的信息,HttpServletResponse 表示所有响应的信

息, 我们如果需要设置返回给客户端的信息,都可以通过 HttpServletResponse 对象来进行设

 

两个输出流的说明

  字节流  getOutputStream()    常用于下载(传递二进制数据)

  字符流  getWriter()        常用于回传字符串(常用)

 

两个流同时只能使用一个

使用了字节流,就不能再使用字符流,反之亦然,否则就会报错。

 

解决响应中文乱码问题

解决根据:通过设置服务器和客户端的编码为UTF8即可

方案一 :  resp.setCharacterEncoding("utf8")   设置服务器的响应编码

     resp.setHeader("Context-Type","text/html;charset=utf8") 设置浏览器的编码

方案二: resp.setContextType("text/html;charset=utf8")   可以同时设置服务器和客户端的编码

必须要在获取流之前设置,不然没有效果。

 

请求重定向

 

 

 

 请求重定向的特点:

1、浏览器地址栏会发生变化

2、两次请求

3、不共享Request域中数据

4、不能访问WEB-INF下的资源

5、可以访问工程外的资源

 

请求重定向第一种方法:

resp.setStatus(302);   
resp.setHeader("location","http://localhost:8080/05_web/response2");

 

请求重定向第二种方法(推荐使用):

resp.sendRedirect("http://localhost:8080")

 

 

JavaEE的三层架构

 

分层的目的是为了解耦。解耦就是为了降低代码的耦合度。方便项目后期的维护和升级

 

 

 JSP

什么是jsp?它有什么用?

jsp 的全换是 java server pages。Java 的服务器页面。

jsp 的主要作用是代替 Servlet 程序回传 html 页面的数据。

因为 Servlet 程序回传 html 页面数据是一件非常繁锁的事情。开发成本和维护成本都极高。

 

JSP的本质是什么?

jsp 页面本质上是一个 Servlet 程序。 当我们第一次访问 jsp 页面的时候。Tomcat 服务器会帮我们把 jsp 页面翻译成为一个 java 源文件。并且对它进行编译成 为.class 字节码程序。

 

JSP的三种语法:

1、JSP头部的Page指令:

jsp 的 page 指令可以修改 jsp 页面中一些重要的属性,或者行为

i. language 属性     表示 jsp 翻译后是什么语言文件。暂时只支持 java。

ii. contentType 属性     表示 jsp 返回的数据类型是什么。也是源码中 response.setContentType()参数值

iii. pageEncoding 属性    表示当前 jsp 页面文件本身的字符集。

iv. import 属性       跟 java 源代码中一样。用于导包,导类。

 

========================两个属性是给 out 输出流使用=============================

v. autoFlush 属性     设置当 out 输出流缓冲区满了之后,是否自动刷新冲级区。默认值是 true。

vi. buffer 属性        设置 out 缓冲区的大小。默认是 8kb

 vii. errorPage 属性    设置当 jsp 页面运行时出错,自动跳转去的错误页面路径。

viii. isErrorPage 属性    设置当前 jsp 页面是否是错误信息页面。默认是 false。如果是 true 可以 获取异常信息

 ix. session 属性       设置访问当前 jsp 页面,是否会创建 HttpSession 对象。默认是 true。

x. extends 属性      设置 jsp 翻译出来的 java 类默认继

 

 JSP中的常用脚本

i. 声明脚本(极少使用)

声明脚本的格式是: <%! 声明 java 代码 %>

作用:可以给 jsp 翻译出来的 java 类定义属性和方法甚至是静态代码块。内部类等

 

 ii. 表达式脚本(常用)

表达式脚本的格式是:<%=表达式%>

表达式脚本的作用是:在 jsp 页面上输出数据。

表达式脚本的特点:

1、所有的表达式脚本都会被翻译到_jspService() 方法中

2、表达式脚本都会被翻译成为 out.print()输出到页面上

3、由于表达式脚本翻译的内容都在_jspService() 方法中,所以_jspService()方法中的对象都可以直接使用。

4、表达式脚本中的表达式不能以分号结束。

 

 

iii. 代码脚本

代码脚本的格式是: <% java 语句 %>

代码脚本的作用是:可以在 jsp 页面中,编写我们自己需要的功能(写的是 java 语句)。

代码脚本的特点是:

1、代码脚本翻译之后都在_jspService 方法中

2、代码脚本由于翻译到_jspService()方法中,所以在_jspService()方法中的现有对象都可以直接使用。

3、还可以由多个代码脚本块组合完成一个完整的 java 语句。

4、代码脚本还可以和表达式脚本一起组合使用,在 jsp 页面上输出数据

 

c)jsp 中的三种注释

i. html 注释 html 注释会被翻译到 java 源代码中。在_jspService 方法里,以 out.writer 输出到客户端。

ii. java 注释 <% // 单行 java 注释 /* 多行 java 注释 */ %> java 注释会被翻译到 java 源代码中。

iii. jsp 注释 <%-- 这是 jsp 注释 --%> jsp 注释可以注掉,jsp 页面中所有代码

 

 

JSP九大内置对象

request      请求对象

response       响应对象

pageContext    jsp的上下文对象

session       会话对象

application     ServletContext对象

config        ServletConfig对象

out           jsp输出流对象

page        指向当前jsp对象

exception      异常对象

 

jsp四大域对象

四个域对象分别是:

pageContext    (PageContextImpl类)  当前jsp页面有效  

request        (HttpRequest类)    一次请求有效

session          (HttpSession类)     一次会话范围内有效(打开浏览器访问服务器,直到浏览器关闭)

application      (ServletContext类)   整个web工程范围内都有效(只要web工程不停止,数据都在)

 

域对象是可以像map一样存取数据的对象,四个域对象功能是一样的,不同的是它们对数据的存取范围。

虽然四个域对象都可以存取数据。在使用上它们是有优先顺序的。

四个域在使用的时候,优先顺序分别是,他们从小到大的范围的顺序。

pageContext ====>>> request ====>>> session ====>>>application

 

Jsp中的out输出和response.getWriter输出的区别

response中表示响应,我们经常用于设置返回客户端的内容(输出)

out也是给用户做输出使用的。

 

 

 

 由于 jsp 翻译之后,底层源代码都是使用 out 来进行输出,所以一般情况下。我们在 jsp 页面中统一使用 out 来进行输出。避 免打乱页面输出内容的顺序。

out.write() 输出字符串没有问题 out.print() 输出任意数据都没有问题(都转换成为字符串后调用的 write 输出) 深入源码,浅出结论:在 jsp 页面中,可以统一使用 out.print()来进行输出

 

 JSP常用标签

a)Jsp静态包含

示例说明:

 <%@ include file=""%> 就是静态包含

file 属性指定你要包含的 jsp 页面的路径

地址中第一个斜杠 / 表示为 http://ip:port/工程路径/ 映射到代码的 web 目录

静态包含的特点:

1、静态包含不会翻译被包含的 jsp 页面。

2、静态包含其实是把被包含的 jsp 页面的代码拷贝到包含的位置执行输出。 --%>

<%@ include file="/include/footer.jsp"%>

 

b)jsp动态包含

示例说明:

<jsp:include page="/staticInclude/tail.jsp">
<jsp:param name="username" value="root"/>
</jsp:include>

这是动态包含

page 属性是指定你要包含的 jsp 页面的路径

动态包含也可以像静态包含一样。把被包含的内容执行输出到包含位置

动态包含的特点:

1、动态包含会把包含的 jsp 页面也翻译成为 java 代码

2、动态包含底层代码使用如下代码去调用被包含的 jsp 页面执行输出。 JspRuntimeLibrary.include(request, response, "/include/footer.jsp", out, false);

3、动态包含,还可以传递参数 --%> 

 

 

c)jsp标签-转发

<jsp:include page="tail.jsp"></jsp:include>
这就是请求转发的标签,其中的page属性设置jsp转发的界面。


 

 

Listener监听器

1、Listener 监听器它是 JavaWeb 的三大组件之一。JavaWeb 的三大组件分别是:Servlet 程序、Filter 过滤器、Listener 监听器。

2、Listener 它是 JavaEE 的规范,就是接口

3、监听器的作用是,监听某种事物的变化。然后通过回调函数,反馈给客户(程序)去做一些相应的处理。

 

 

EL和JSTL

 a)什么是 EL 表达式,EL 表达式的作用?

EL 表达式的全称是:Expression Language。是表达式语言。

EL 表达式的什么作用:EL 表达式主要是代替 jsp 页面中的表达式脚本在 jsp 页面中进行数据的输出。 因为 EL 表达式在输出数据的时候,要比 jsp 的表达式脚本要简洁很多。

EL 表达式的格式是:${表达式}

EL 表达式在输出 null 值的时候,输出的是空串。jsp 表达式脚本输出 null 值的时候,输出的是 null 字符串

 

b)EL 表达式搜索域数据的顺序

EL 表达式主要是在 jsp 页面中输出数据。

主要是输出域对象中的数据。

当四个域中都有相同的 key 的数据的时候,EL 表达式会按照四个域的从小到大的顺序去进行搜索,找到就输出。

 

c)EL 表达式输出 Bean 的普通属性,数组属性。List 集 合属性,map 集合属性

i. 需求——输出 Person 类中普通属性,数组属性。list 集合属性和 map 集合属性。

 

 d)EL 表达式——运算

语法:${ 运算表达式 } ,

EL 表达式支持如下运算符:

1)关系运算

 == 或 eq 等于   ${ 5 == 5 } 或 ${ 5 eq 5 }   true != 或 ne

不等于   ${ 5 !=5 } 或 ${ 5 ne 5 } false

< 或 lt 小于   ${ 3 < 5 } 或 ${ 3 lt 5 } true

> 或 gt 大于   ${ 2 > 10 } 或 ${ 2 gt 10 } false

<= 或 le 小于等于   ${ 5 <= 12 } 或 ${ 5 le 12 } true

>= 或 ge 大于等于   ${ 3 >= 5 } 或 ${ 3 ge 5 } false

 

2)逻辑运算

 && 或 and 与运算   ${ 12 == 12 && 12 < 11 } 或 ${ 12 == 12 and 12 < 11 } false

|| 或 or 或运算     ${ 12 == 12 || 12 < 11 } 或 ${ 12 == 12 or 12 < 11 } true

! 或 not 取反运算    ${ !true } 或 ${not true } false

 

3)算数运

+ 加法   ${ 12 + 18 } 30

- 减法   ${ 18 - 8 } 10

* 乘法   ${ 12 * 12 } 144

/ 或 div 除法   ${ 144 / 12 } 或 ${ 144 div 12 } 12

% 或 mod 取模   ${ 144 % 10 } 或 ${ 144 mod 10 }

 

4 i. empty 运算

empty 运算可以判断一个数据是否为空,如果为空,则输出 true,不为空输出 false。

以下几种情况为空:

1、值为 null 值的时候,为空

2、值为空串的时候,为空

3、值是 Object 类型数组,长度为零的时候

4、list 集合,元素个数为零

5、map 集合,元素个数为零

 

 ii. 三元运算

表达式 1?表达式 2:表达式 3   

如果表达式 1 的值为真,返回表达式 2 的值,如果表达式 1 的值为假,返回表达式 3 的值。

示例: ${ 12 != 12 ? "国哥帅呆":"国哥又骗人啦" }

 

iii. “.”点运算 和 [] 中括号运算符

.点运算,可以输出 Bean 对象中某个属性的值。

[]中括号运算,可以输出有序集合中某个元素的值。 并且[]中括号运算,还可以输出 map 集合中 key 里含有特殊字符的 key 的值 

 

 e)EL 表达式的 11 个隐含对象

EL 个达式中 11 个隐含对象,是 EL 表达式中自己定义的,可以直接使用。

变量             类型               作用

pageContext          PageContextImpl          它可以获取 jsp 中的九大内置对象

pageScope         Map<string,object>          它可以获取 pageContext 域中的数据

requestScope       Map<string,object>          它可以获取 Request 域中的数据

sessionScope         Map<string,object>        它可以获取 Session 域中的数据

applicationScope      Map<string,object>        它可以获取 ServletContext 域中的数据

param             Map<string,string>        它可以获取请求参数的值

paramValues          Map<string,string[]>         它也可以获取请求参数的值,获取多个值的时候使用。

header            Map<string,string>        它可以获取请求头的信息

headerValues         Map<string,string[]>         它可以获取请求头的信息,它可以获取多个值的情况

cookie             Map<string,cookie>         它可以获取当前请求的 Cookie 信息

initParam           Map<string,string>        它可以获取在 web.xml 中配置的上下文参数

 

 

i. EL 获取四个特定域中的属性

pageScope       ====== pageContext 域

requestScope        ====== Request 域

sessionScope       ====== Session 域

applicationScope       ====== ServletContext 域

 

 ii. pageContext 对象的使用

1. 协议:

2. 服务器ip:

3. 服务器端口:

4. 获取工程路径:

5. 获取请求方法:

6. 获取客户端 ip 地址:

7. 获取会话的 id 编号

 

iii. EL 表达式其他隐含对象的使用
param       Map<String,String>          它可以获取请求参数的值
paramValues    Map<String,String[]>        它也可以获取请求参数的值,获取多个值的时候使用。
示例代码:
输出请求参数 username 的值:  ${ param.username } <br>
输出请求参数 password 的值:  ${ param.password } <br>
输出请求参数 username 的值:  ${ paramValues.username[0] } <br>
输出请求参数 hobby 的值:      ${ paramValues.hobby[0] } <br>
输出请求参数 hobby 的值:     ${ paramValues.hobby[1] } <br>

 

header         Map<string,string>          它可以获取请求头的信息

headerValues      Map<string,string[]>       它可以获取请求头的信息,它可以获取多个值的情况 示例代码: 输出请求头【User-Agent】的值:${ header['User-Agent'] }
输出请求头【Connection】的值:${ header.Connection }
输出请求头【User-Agent】的值:${ headerValues['User-Agent'][0] } 

 

cookie       Map<string,cookie>       它可以获取当前请求的 Cookie 信息

示例代码: 获取 Cookie 的名称:${ cookie.JSESSIONID.name 

获取 Cookie 的值:${ cookie.JSESSIONID.value }


initParam Map<string,string> 它可以获取在 web.xml 中配置的上下文参数

输出<Context-param>username 的值:${ initParam.username }

输出<Context-param>url 的值:${ initParam.url } 

 

JSTL标签库

JSTL 标签库 全称是指 JSP Standard Tag Library JSP 标准标签库。是一个不断完善的开放源代码的 JSP 标 签库。

EL 表达式主要是为了替换 jsp 中的表达式脚本,而标签库则是为了替换代码脚本。这样使得整个 jsp 页面 变得更佳简洁。 JSTL 由五个不同功能的标签库组成。

功能范围           URI                  前缀           

核心标签库--重点      http://java.sun.com/jsp/jstl/core       c

格式化           http://java.sun.com/jsp/jstl/fmt        fmt

函数            http://java.sun.com/jsp/jstl/functions     fn

数据库(不使用)       http://java.sun.com/jsp/jstl/sql        sql

XML(不使用)        http://java.sun.com/jsp/jstl/xml        x

 

i. <c:set />(使用很少)
作用:set 标签可以往域中保存数据
<%--
i.<c:set />
作用:set 标签可以往域中保存数据
域对象.setAttribute(key,value);
scope 属性设置保存到哪个域
page 表示 PageContext 域(默认值)
request 表示 Request 域
session 表示 Session 域
application 表示 ServletContext 域
var 属性设置 key 是多少
value 属性设置值
--%>
保存之前:${ sessionScope.abc } <br>
<c:set scope="session" var="abc" value="abcValue"/>
保存之后:${ sessionScope.abc } <br>

 

 

ii. if 标签用来做 if 判断

<%--
ii.<c:if />
if 标签用来做 if 判断。
test 属性表示判断的条件(使用 EL 表达式输出)
--%>
<c:if test="${ 12 == 12 }">
<h1>12 等于 12</h1>
</c:if>
<c:if test="${ 12 != 12 }">
<h1>12 不等于 12</h1>
</c:if

 

 

 

iii. 标签 作用:多路判断。跟 switch ... case .... default 非常接近

choose     标签开始选择判断

when        标签表示每一种判断情况

test        属性表示当前这种判断情况的值

otherwise       标签表示剩下的情

1、标签里不能使用 html 注释,要使用 jsp 注释

2、when 标签的父标签一定要是 choose 标签

 

 

 

 

 

 

 

 

     

 

posted @ 2021-10-26 09:59  夏天·烟火·我的尸体  阅读(282)  评论(0编辑  收藏  举报