自己总结的一些入门的前端相关知识

一HTML基本常识

url:统一资源定位符

HTML:超文本标记语言

超文本：狭义的超文本指页面上可以点击的文字，广义的超文本：文字、图片、视频、音频。

标记：语言的语法特征，由一对对标签组成。

双标记：<标记名称>标记内容</标记名称>

单标记

渲染：依靠浏览器逐行解析代码并且最终呈现到页面上。

:文档类型声明，告诉浏览器按照什么样的标准规范解析html代码。

目前指定的是按照html5的规范解析。

Head标记：定义了页面的头部信息，包括但不限于界面的标题、以及编码等属性信息。

软件结构

B/S :浏览器/服务器：客户端安装的浏览器，软件项目本身位于服务器上

\1. 维护升级方便

\2. 服务器端的压力大

C/S：客户端/服务器 客户端安装了软件本身，或者说安装了软件的核心功能，共享数据位于服务器端。

\1. 维护升级麻烦

\2. 客户端压力大。

B/S结构的项目： （重点）

1.内容层技术 HTML

HTML :将页面上的内容放上去，内容层技术

CSS：对界面进行修饰和美化， 表现层技术。

JAVASCRIPT：给界面加动态交互的效果，交互层的技术。

服务器技术：数据库 、JAVA、PYTHON 、PHP

1.1单标记

Br:换行

Hr:水平线标记。

Size:粗细

Width:宽度

Color:颜色

Align:居中方式

Img:图片标记

Src:图片的路径

Width:宽度

Height:高度

Alt:图片不可见的提示信息

Title:鼠标悬停的图片上的提示信息

Align:表示图片和后面内容的相对位置

Top|absmiddle|bottom|left|right

1.2双标记

P:段落标记，跟前后内容在垂直方向上有空白Align:left|center|right

HN:标题标记，跟前后内容在垂直方向上有空白,n指从1到6的数字，字体依次从大到小。

Align:left|center|right

A:超链接

Href:链接的路径，如 news.html 或者http://www.baidu.com

Target:目标窗口,_self(自身窗口)或者_blank(新窗口)_parent(父窗口)_top(顶层窗口)

锚标记：

1：内容

2.文字内容

背景图片、背景色：

在body标记上加:

Bgcolor

Background

路径：相对路径（…代表上一层目录） （网络）绝对路径：适用于引用项目之外的图

片

可以换行的叫块级标记（元素） 列如：

不能换行的行内标记（元素） 列如：

1.3特殊符号：

空格： &nbsp后缀；

<:<

>:>

版权符号：© &copy

属性：属性是对标记的进一步说明。

< 标记 属性名称=”属性值” 。。。。。。></标记>

以下标记请你了解

(双标记)Font:

(双标记)B：加粗

(双标记)I：倾斜

(双标记)U：下划线

(双标记)Em：倾斜

(双标记)Strong:加粗图片标记的align属性

注意事项：

1.p hn hr不要互相嵌套使用

2.同一个站点注意风格的统一性

3.代码提示键：alt+/

4.代码缩进，正确封闭

1.4 表格

表格作用：局部内容布局

表格

Table 表格

Tr 行

Td（th） 单元格

Table标记常用属性：针对整个表格修饰

Border:边框线粗细

Bgcolor:背景色

background:背景图片

align: 表格整体的水平位置

width:宽度

height:高度

cellpadding:单元格填充距离

cellspacing:单元格间距

tr标记常用的属性：

Bgcolor:背景色

background:背景图片

align: 正行内容的水平居中方式

valign:正行位置的垂直居中方式

height:可以单独设置每行的高度。

Td标记的常用属性

Bgcolor:背景色

background:背景图片

align: 正行内容的水平居中方式

valign:正行位置的垂直居中方式width:单独设置每一列（td所处列）的宽度。

Rowspan:跨行合并

Colspan:跨列合并。

**注意事项：

\1. td标记是真正放置内容的容器

\2. tr的高度不受限于表格整体的高度。

\3. td的宽度受限于表格整体的宽度。

需要多练习的是表格布局。

1.5：表单 (重点)

表单：用于收集客户端的信息并提交给服务器

Form:将控件包围住不破坏其他标记的完整性。

属性：

Action:服务器路径（地址）

Method:表单提交方式 get|post.。默认是get.优先选用post

Get:将表单中的信息会跟到url的后面，不安全

Post:会将表单中的信息进行加密传输给服务器

表单中所包含的控件

文本框 :

Value:默认值

密码框：

Value:默认值

单选框：

\1. 一组单选按钮的名称需要一样

\2. 能够提交到服务器端的是value属性的属性值

\3. 使用 checked=”checked”设置默认选中项

复选框：

\1. 一组复选按钮的名称需要一样

\2. 能够提交到服务器端的是value属性的属性值

\3. 使用 checked=”checked”设置默认选中项

下拉菜单：

123

……..

Size:下拉菜单展开之后展示多少行文本区域：

按钮：

普通按钮:

重置按钮:

提交按钮:

补充控件：

文件域：

数字框:

隐藏域：

Href和src的区别

1.请求资源类型不同

（1） href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之

间的链接。常用的有：link、a。

（2）在请求 src 资源时会将其指向的资源下载并应用到文档中，常用的有script、img 、

iframe；

2.作用结果不同

（1）href 用于在当前文档和引用资源之间确立联系；

（2）src 用于替换当前内容；

3.浏览器解析方式不同

（1）若在文档中添加href ，浏览器会识别该文档为 CSS 文件，就会并行下载资源并且不

会停止对当前文档的处理。

（2）当浏览器解析到src ，会暂停其他资源的下载和处理，直到将该资源加载、编译、执

行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容。这也是为什么建议把

js 脚本放在底部而不是头部的原因。

二.表现层技术CSS

2.1、CSS:层叠样式表(串联式样式表)

2.2、三种样式表：根据css书写的位置

内部样式表：在head标记书写一对style标记，在style标记中书写css代码，

外部样式表：专门建立一个css文件，在css文件中书写css代码

需要在html文件的head标记中如下引用：

优点：可以在不同文件中多次引用，提高代码的复用性

内嵌样式表：

<html标记 style=”css属性：css属性值;……”>

三种样式表如果共存，遵循的是就近原则。

三、三种基础选择器：

选择器语法：

选择器{

Css属性:css属性值;………

}

\1. ID选择器：如果多个标记的样式各不一样，可以考虑使用ID选择器

#id属性值{ //一般是段落标签（p）

Css属性:css属性值;………

}

\2. 标签选择器:标签名称相同的多个标记如果样式相同，可以考虑使用标签选择器。

标签名称（a/p/b/del）{

Css属性:css属性值;………}

\3. 类选择器:非常灵活，如果标签名称不同的多个标记如果样式一样，可以考虑使用

类选择器。如果多个标签的样式各不一样，页可以考虑使用类选择器。

.自定义名称{

Css属性:css属性值;………

}

4.内嵌模式优先级最高 <标记 class=”自定义名称”>…….

2.3三种选择器的优先级：ID》类》标签

2.4、其他css属性

2.4.1伪类：

可以针对标记的不同状态做修饰

选择器:伪类名称

a:link{

css属性

}

Link:未被访问的时候

Hover:鼠标悬停的时候

Active:鼠标处于激活状态的时候

Visited:链接被访问过后

Div:是一个html标记，双标记，容器功能的标记，多个div呈垂直分布，高度默认靠内容撑开。

2.4.2常用css属性：

2.4.2.1背景的属性：

Background-color:背景色

Background-image:背景图片

background-repeat:no-repeat ;/背景的平铺方式/

background-size:1200px 200px ;背景大小

background-position: center;背景位置

2.4.2.2文字的常用CSS属性：

Color:字体颜色Font-size:字体大小

Font-family:字体类型

Font-weight:字体粗细

Text-decoration:文字的修饰线 ：none|underline

Text-align:left|center|right

Line-height:行高

超链接字体颜色设置是通过css来设置，a链接的颜色设置常用的有以下两种，1、超链接a的初始状态颜色，2、超链接字体的鼠标滑过颜色，还有两种病不常用：3、超链接字体的已访问颜色，4、超链接字体在按下鼠标时的颜色

四中超链接状态分别对应的css属性：a{}、a:hover{} 、a:visited{}、a:active{}，通常只写a{}、a:hover{}即可，如果你需要其他两种字体颜色设置请参照一下顺序来书写

a{color:red;}
a:visited{color:green;}
a:hover {color:yellow;background:blue;}
a:active {color:lime;background:red;}

2.4.2.3盒模型相关css属性

Border：边框线 粗细 线型 颜色

Border -left

Border -right

Border -top

Border -bottom

border-radius:边框线弧度

Margin:边距 （上 右 下 左|上下 左右|上 左右 下）

Margin-left

Margin-right

Margin-top

Margin-bottom

Padding:填充距离 （上 右 下 左|上下 左右|上 左右 下）

Padding -left

Padding -right

Padding -top

Padding –bottom

Width:宽度

Height:高度

2.4.2.4盒模型的尺寸：

内容区域+填充距离（内边距）+边框+外边距

box-sizing: content-box|border-box;

content-box:我们设置的宽度或者高度仅仅指内容区域

border-box：设置的宽度或者高度包含了内容区域+填充距离+边框线

注意Margin:

父子标记之间：子标记距离父标记之间的距离，对于子标记来说叫外边距

兄弟标记之间：标记之间的距离，外边距

如果父标记没有border,那么子标记的外边距将作用到父标记上

如果父标记有Border，就会作用到子标记上

Padding:标记的内容距离标记边框之间的距离，内容也可能是其他的标记

父子标记之间：子标记距离父标记之间的距离，对于父标记来说叫填充距离

2.4.2.5定位方式：

浮动相关css属性：

Float:left|right

脱离文档流，朝指定的方向浮动，可以解决DIV水平排列的问题。

2.4.2.6表格css属性：

Border-spacing:表单单元格间距

Border-collapse:collapse 边框线合并。

vertical-align:垂直居中

2.4.2.7列表常用css属性

list-style-type 列表中添加图片

list-style-image

Padding:标记的内容距离标记边框之间的距离，内容也可能是其他的标记

父子标记之间：子标记距离父标记之间的距离，对于父标记来说叫填充距离

2.4.2.8内嵌框架iframe：

a标记的target属性值要和内嵌框架的名称保持一致。

2.4.2.9定位相关css属性：

position: relative|absolute

相对定位：相对于自身的默认位置的偏移，配合left top right bottom使用

绝对定位：脱离文档流，如果父标记设置过绝对定位或者相对定位，指在父标记中的绝对位置，如果父标记没有设置，在网页中的绝对位置，配合left top right bottom使用

应用场景：在局部内容中实现重叠效果，可以考虑使用相对或者绝对定位

固定定位：fixed,位置固定，配合left top right bottom使用

三、Javascript交互层技术

3.1概念

js是一种编程语言，同时也是基于对象的脚本语言（解释执行不需要编译，靠浏览器执行），弱数据类型**

3.2作用

动态交互，前端技术分为内容层、表现层、交互层，js为交互层的主要技术，其作用主要体现在以下几个方面：

1.     对鼠标的行为进行响应
   

2.     实现页面特效。
   

3.     可以将客户端的数据提交给服务器端.在提交的时候可以进行验证
   

JS****书写的位置

1.   书写在html页面内
   

a) 建议写在1.head标记中 结束的Body标记前

注意：位置不同会影响执行顺序

2.   写在一个专门的js文件中，然后在HTML页面中引入。
   

引入位置建议：

a) head标记中

b) 结束的Body标记前

如何引入：<script type = “text/javascript” src = "js文件的路径”>

3.3数据类型

1.     Js是弱数据类型的语言，在声明的时候不需要强制指定数据类型，但是会在运行的时候动态转换。
   

2.     Js中的数据类型：Number String  boolean Null  undefined  object function
   

3.     数据类型实例：
   

4.     数据类型的转换、
   

*3.3.1 输入的方式

​ Var a=prompt(“提示信息”);//输入的信息都是string类型

3.3.2 输出的方式

​ Alert(“信息”);//弹出对话框

​ Document.write(“信息”);//输出到html文档中了，也可以输出保含html代码的字符串

​ Console.log(“信息”);//输出到浏览器的控制台，可以输出测试信息

3.4****比较运算符

> < >= <= != == !== ===,用比较运算符连接起来的表达式，运算结果是boolean类型

注意：=== 和==的区别：===内容和类型都一样就是true,==内容一样返回true;

3.5事件（重点）

1.编写HTML代码

2.确定事件

3.编写事件处理程序（体现为js函数）

4.事件中调用事件处理程序

3.5.1单击事件onclick

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xzY2QPK4-1619070134704)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1600074806191.png)]

3.5.2Onchange事件：

文本框，内容发生改变并且光标从文本框中移出的时候会触发

注意：value和innerHTML的区别：

​ Value指表单中控件的值

​ InnerHTML指双标记中的内容

innerHtml和InnerText的区别：*

都可以设置标记中的内容，

innertHtml可以设置HTML代码，并且会解析HTML代码。 innerText设置文本内容。但不会解析HTML代码，只会把它当做纯文本

value：得到或者设置表单控件 的值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CrEhPapf-1619070134705)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1600075431456.png)]

3.5.3聚焦及失焦事件

Onfocus

Onblur

注意：对于文本框，Onblur和Onchange的区别，onblur在光标移除的时候会触发，不管内容是否改变，Onchange要失去焦点且内容发生改变才会触发

Onchange在光标移除并且内容改变的时候才会触发。

3.5.4onload页面加载事件

onKeyup 键盘事件

onmouseover:鼠标在上面的事件

onmouseout：鼠标离开后的事件

onmousedown：鼠标点击的事件

onmouseup：鼠标点击完离开的事件

3.5.5onsubmit表单提交事件

1.点击submit类型按钮

2.点击非submit类型按钮，但是可以调用表单.submit（）函数进行提交

3.阻止表单提交，在函数体中添加return false；

四.JavaScript的组成部分

由三部分组成：ECMAScript，BOM, DOM

4.1ECMAScript:

是JavaScript的内置对象，也是核心的语法组成部分，包含的属性有string对象，math对象，date对象。

string方法有：length，charat()，indexOf（），substring，split（）

math方法有：math.random()获取随机数（0-1）,math.floor()向下取整,math.ceil()向上取整

date方法有：var now = new Date（）

now.setFullYear()设置年 ，同理其他的也是这样设置

now.getFullYear()得到年份，同理其他的也是这样

需要注意获取的索引是从0开始的（月，）

4.2BOM

是浏览器对象模型，描述了浏览器对象之间的层次关系，顶层对象为window，不同浏览器遵循规则不同

包含的属性：document，location，history，screen

方法有：alert（） settimeout（）setinterval（） cleartimeout（） reload（）forward（） back（）等等

settimeout（）和setinterval（）区别：

前者在指定时间调用函数，只调用一次，后者可以调用多次

cleartimeout（）可以解除定时器，传入定时器的返回值

CORE ——–DOM

document的一些方法：靠标签得到一组标签（返回数组）getElementsByTagName()

靠标记名得到一组标记（返回数组）getElementsByName()

靠类选择器得到一组标记（返回数组）getElementsByClassName()

html .xml

html ——DOM

html()，text()

xml —–DOM

4.3DOM

文档对象模型，将HTML文件视为一棵节点树，文件中的每一个标签文字都属于树上的节点。

常用的方法如下图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oKYVvNlH-1619070134707)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1600245098757.png)]

4.4注册事件的方式

Javascript事件的绑定方式：

1.以标记属性的方式给标记加事件

2.直接用js代码：标记.事件=事件处理函数

3.标记.addEventListener(“事件名称(去掉on)”,事件处理函数)

五，jQuery

基于JavaScript的前端框架，体积小

5.1jQuery的核心函数

$是核心函数的名称，共有以下四种形式：

1. **$（function（）{}）**参数是一个匿名函数，匿名函数会在页面加载完之后，ready事件触发的时候才会执行
2. **$（选择器/过滤器）**靠选择器或者过滤器选择页面上的标记，返回的是jQuery包装集（集合） var jQueryObject = $("#testDiv");
3. $（HTML代码）：根据HTML代码形成一个DOM元素，返回也是jQuery的包装集
4. $(dom元素)：将DOM元素转换为jQuery包装集，返回的jQuery包装集

5.2ready事件的写法两种写法

• $（document）.ready(function (){})
• 简化写法$（function （）{}）

5.3ready事件和load事件的区别：

Ready事件是在页面中的所有dom元素加载完毕执行

Onload是在页面中的所有dom元素及静态资源加载完毕后执行。

5.4jQuery的选择器

5.4.1基础选择器

依靠id选择器只能选择得到一个标记

例如：$（“#p1”）.css(“css属性”)

可以同时依靠多个选择器进行选择，取其并集，中间使用逗号隔开

$("#p1,div").css(“background-color”,“yellow”)

5.4.2层次选择器

1. 空格表示子孙辈
2. 大于号表示的是直接的子
3. +表示得到后面紧挨的兄弟标记
4. ~过滤得到后面所有同级符合选择器的标记

例如：

$(“ul li”).css(“background-color”,“red”);

/$(“body>li”).css(“background-color”,“red”);

/$("#container+p").css(“background-color”,“red”);

$("#container~p").css(“background-color”,“red”);

5.4.3基本过滤器

如下图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-al0JTJrj-1619070134708)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1600246734811.png)]

5.5.4内容过滤器

名称	说明	举例
：contains（text）	匹配包含指定文本的元素	$(“div:contains(“john”)”)
：empty	匹配所有不包含子元素或文本的空元素	$(“td:empty”)
：has（选择器）	匹配含有选择器所匹配的元素的元素	$(“div:has§”).addClass(“test”)
：parent	匹配含有父元素或者文本的元素	$(“td:parpent”)查找所有含有父元素或者文本的td

5.5.5可见性过滤器

名称	说明	举例
：hidden	匹配所有不可见元素	$(“tr:hidden”)
：visible	匹配所有的可见元素	$(“tr:visible”)

5.5.6属性过滤器(如图)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T2LpOroB-1619070134709)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1600247907193.png)]

5.5.7元素过滤器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dMriwYx8-1619070134710)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1600247957359.png)]

5.5.8表单选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aMMwIOuz-1619070134710)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1600248017999.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wlxtcOYn-1619070134711)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1600248029629.png)]

5.6jQuery进行DOM操作

查找dom元素的函数

1.parents:返回一个标记的所有上层标记

2.parent：返回一个标记的直接父标记

3.find:在当前标记的所有 子孙标记中查找

4.children：获得当前标记的直接子标记

5.next：获得当前标记的下一个兄弟标记

6.nextAll：获得当前标记后面所有的兄弟标记

7.prev()：获得当前标记的前一个兄弟标记

8.prevAll（）：获得当前标记的前面所有的兄弟标记

9.each：$(“选择器”).each(function(){ })：对选择到的标记进行遍历每次遍历的时候，会执行匿 名函数。

对dom元素进行修改的函数

1.prepend:在一个标记中追加子标记，从前面追加

2.append：在一个标记中追加子标记，从后面追加

3.before：在当前标记前面追加标记

4.after:在当前标记后面追加标记

5.remove:将选择到的标记移除了

6.empty:将选择到的标记中的子标记清空

7.replaceWith:将选择到的标记用指定的html代码进行替换

8.wrapInner：将选择到的标记中的内容使用指定的html代码包围

实例如下：

//返回一个标记的父标记（直接父辈）

​ $("#p1").parent().css(“background-color”,“red”);

//返回的是所有的上层标记

​ $("#p1").parents().css(“background-color”,“red”);

​ $("#p1").parents().css(“background-color”,“red”);

​ $("#span1").parents("#container").css("background-

color",“red”);

//parents函数的参数可以写选择器，根据选择器进一步进

行过滤

​ $("#span1").parents("#p1").css("background-

color",“red”);

//返回所有直接的孩子标记

​ $("#container").children().css(“border”,"1px solid

red");

//children函数的参数可以带选择器，可以根据选择器做进

一步过滤

​ $("#container").children(“div”).css(“border”,"1px

solid red");

//在所有的子孙辈中根据find传入的选择器进行查找

​ $("#container").find(“p”).css(“border”,"1px solid

red");

//find函数中需要传入一个选择器，以下写法无效果//find函数中需要传入一个选择器，以下写法无效果

​ $("#container").find().css(“border”,“1px solid red”);

​ $("#container").next().css(“border”,“1px solid red”);

//next返回后面紧挨的符号选择器的标记（选择器可以写

也可以不写）

​ $("#container").next(“div”).css(“border”,"1px solid

red");

//返回后面所有的兄弟标记，如果传入选择器，则会根据

选择器进一步过滤

​ $("#container").nextAll().css(“border”,"1px solid

red");

​ $("#container").nextAll(“p”).css(“border”,"1px solid

red");

实例如下：

​ $(function(){

​ $("#appendBtn").click(function(){

​ var str="001张三

";

//append函数的参数可以直接写一段字符串形式的

html代码，

$("#data tbody").append(str);

});

$("#prependBtn").click(function(){

var str="001张三

";

$("#data tbody").prepend(str);

});

$("#afterBtn").click(function(){

//$("#data").after(“

我在表格后头

”);

$("#data").before(“

我在表格前头

”);

});

$("#removeBtn").click(function(){

//将选择到的标记从文档中移除

//$("#data tbody tr").remove();

//将选择到的标记的子元素（内容）清空

$("#data tbody tr").empty();});

$("#replaceBtn").click(function(){

//将选择到的标记进行替换

$("#data").replaceWith("

我是来替换表格的

");

});

//将选择到的标记中的内容用指定的html代码进行包围

$("#data td").wrapInner("");

5.7jQuery中属性事件操作

5.7.1得到或者设置标记的属性

Attr(“属性名称”)

Attr(“属性名称”,”属性值”)

prop(“属性名称”)

prop (“属性名称”,”属性值”)

Attr和prop的区别：attr，如果没有设置一个属性，返回的是undefined,prop 返回属性的默认值

5.7.2操作样式类选择器

AddClass ：根据类选择器添加样式

removeClass ：根据类选择器删除样式

hasClass ：根据类选择器判断是否有样式

**toggleClass：**交替添加或者移除样式

实例如下：

$(function(){ 
    var count=0; 
    $("p").click(function(){ //当前正在单击的p标记添加样式类 //如果有指定的样式就移除，没有就添加 /*if($(this).hasClass("bgColor")){     $(this).removeClass("bgColor");
    }else{ $(this).addClass("bgColor"); 
}*/
   //如果右样式就移除，没有就添加 //$(this).toggleClass("bgColor"); count++; 
  //第二个参数对应的表达式如果返回true就添加样式， 否则就移除$(this).toggleClass("bgColor",count%3==0); 
  }); 
})

5.7.3操作css样式属性

Css(“样式属性名称”);:get

Css(“样式属性名称”:”属性值”):set

Css({“样式属性名称”:”属性值”, “样式属性名称”:”属性值”}):set

**5.7.4.**直接得到宽和高

可以得到不带单位的宽或者高

Width（）：get

Width(值):set

Height（）:get

Height(值):set

5.7.5. 操作标记中的内容

Html() :get

Html(“html代码”):set

Text():get(只能get到文本内容)

Text(“文本内容”)：set（会将html代码当做文本内容进行设置）

5.7.6.操作控件的值

Val（）：get

Val(“值”)：set

5.8 事件：

Hover事件：mouseover和Mouseout的集合

$("标记名(p)").hover(function(){
    $(this).addClass("css属性");
    },function(){
    $(this).remmovClass("css属性");

});
//两个匿名函数并列

六，Javaweb开发

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3LmPJR1E-1619070134712)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1600394079191.png)]

servlet作用：是一个运行在服务器上的Java程序，处理请求和响应**

1、bs/cs

浏览器/服务器：客户端不需要安装应用程序，需要一个浏览器

客户端/服务器：客户端需要安装应用程序，服务器上一般放的是数据库

bs的优点：项目更新维护方便。

2.http协议：

超文本传输协议

信息传输过程：信息传输之前首先建立连接，无状态（本次请求后，服务器得不到上一次请求传递给服务器的信息）

信息传输格式

请求:

行(请求方式(get/psot) ,请求路径

头（客户浏览器一些信息以及发送给 服务器的信息的一些说明信息） 体（真正想发送给服务器的信息（如登录的用户名和，密 码））

响应：

行（响应的状态代码）

头（响应回来的内容的说明信息（如内容大小， 内容类型）以及服务器的信息）

体（在客户端界面上呈现出来的信息）

3、了解JAVA WEB服务器

​ tomcat

4、安装tomcat

4.1、下载地址：https://tomcat.apache.org/download-80.cgi

4.2、tomcat目录结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FqqvO9rh-1619070134712)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1600420262550.png)]

bin webapps(,非常重要，是web项目的发布目录) conf（配置文件所在的目录）

log（日志信息所在目录） lib（jar包所在的目录） work（存放项目在运行过程中产生的

文件） temp（临时文件所在的目录）

4.3、启动tomcat

bin---->startup.bat

http://localhost:8080/

协议：//ip地址：端口号

4.4、tomcat端口号的配置

tomcat的配置文件：

E:\devoloperSoft\apache-tomcat-8.0.48\apache-tomcat-

8.0.48\conf\server.xml

更改下图中的port属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-in7yLClW-1619070134713)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1600420208813.png)]

5、JAVAWeb项目的目录结构（了解）

项目根目录

资源文件(一些html页面 图片 css js jsp页面)

WEB-INF

web.xml （web项目的配置文件）

classes(目录，放到是java源文件编译之后形成的字节码文件)

lib(目录,jar包)

6、发布JAVAWEB项目：

将项目放到tomcat的webapps目录中

7、使用eclipse开发第一个web项目 （重点掌握）

7.1、 eclipse和tomcat进行关联1)建立项目的时候

7.2)winodw—preference------server----runtime enviroment------>add .javaweb项目，默认的类库如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-spjkUlUm-1619070134713)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1600420172572.png)]

7.3、运行web项目

RUN AS RUN ON SERVER--------->发布项目并启动服务

7.4、eclipse默认的项目发布目录：

工作区.metadata.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps

7.5、开发环境下本地的目录结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YcFqoqLJ-1619070134714)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1600420136729.png)]

run as run on server 做的事情：本地（项目中的webContent目录,及编译之后的字节码文件）------》服务器（工作区.metadata.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps）

最终在浏览器中看到内容是服务器上的内容

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fKWeC6zW-1619070134714)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1600420095341.png)]

访问路径（URL）：协议：//ip地址：端口号/项目根目录/具体资源的路径

http://localhost:8090/JAVAWEB20200610/index.html

7.6.欢迎页面的配置（了解）

直接输入项目名称就可以访问到的页面

http://localhost:8090/JAVAWEB20200918/

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uYgpRIpi-1619070134715)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1600420443598.png)]

6.1web项目目录结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tY6WBmp6-1619070134715)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1600397498614.png)]

七、JSP页面

解决什么问题：解决servlet中HTML代码拼接比较麻烦的问题

7.1 jsp页面是什么

Java server page：Java服务器端页面

作用：jsp页面可以写Java代码，实现内容和表现的分离

本质：是一个Java类和servlet一样，服务器会转换为一个servlet，存放在.metadata.plugins\org.eclipse.wst.server.core\tmp0\work

7.2 jsp页面组成

jsp页面：总共分为五大块分别是

1、HTML模板元素（HTML。css。JavaScript）

2、脚本元素（声明<%!expression>，脚本<%expression>，表达式<%=>）

*注意：*jsp声明中的代码：出现在Java类中，jsp脚本和小表达式中国的代码会出现在service方法中，运行jsp页面，在浏览器中看到的内容其实是服务器响应回来的

3、指令元素（page，include，taglib）

4、注释

5、动作元素（后面三个只有page会用）

7.3 jsp页面的执行过程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IxAZ8LAt-1619070134716)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1600677353387.png)]

7.4 servlet去jsp的两种方式区别

1. 请求转发：当需要携带一些数据那么使用
2. 重新定向：当只需要跳转页面时使用

区别：

• 执行过程 ：请求转发是一次请求，一次响应。重定向是2次请求，2次响应
• 浏览器是否知情：请求转发浏览器不知情，重定向浏览器知情
• 地址栏路径变化：请求转发的地址栏路径不会变化，显示第一次请求路径，重定向显示的是最后一次请求的路径
• 应用上的区别：请求转发可以携带一些比较复杂的数据，重定向用于跳转页面
• /请求转发代表的是当前项目的根目录，重定向代表的是服务器的项目根目录
• 是否共享请求和响应对象，请求转发共享，重定向不共享

7.5 jsp页面信息传递到servlet

表单提交：

URL传值：URL？键1=值1&键n=值n

7.6servlet的生命周期

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JGR4c4jy-1619070134716)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1600872874591.png)]

加载servlet

1.第一次请求到达servlet的时候进行实例化，调用无参的构造方法

2.第一次请求到达的时候初始化执行的是init（servletConfig confige）方法：ServletConfig：读取Servlet的初始化配置信息

lsls

com.woniuxy.servlets.LifeServlet

code

UTF-8

读取信息

public void init(ServletConfig config) throws ServletException { // TODO Auto-generated method stub String value=config.getInitParameter("code"); System.out.println(value); System.out.println("LifeServlet被初始话了(init(ServletConfig config))"); }

7.7生命周期注意事项

如果配置了load-on-startup,那么将会在服务启动的时候进行实例化及初始化

ls1

com.woniuxy.servlets.LifeServlet1

0

ls1

/ls1.do

1.service,处理请求和响应（service方法），向同样一个servlet反复发送请求，service方法会反复调用

2、自己写Servlet的时候建议重写doGet或者doPost方法。

3.执行service方法之前创建请求对象和响应对象

4、销毁,web应用停止的时候（destroy方法）

5.不可用，等等垃圾回收器的回收

总结：

1、相同类型的servlet对象在服务器运行期间只有一个。

2、请求对象及响应对象是每次请求到达的时候都会创建。

线程不安全原因：servlet对象只有一个，属性会成为多个线程之间的共享资源，多个请求进行读写的时候会出现异常。

ServletContext: （最大范围）

生命周期开始于应用启动，结束于应用停止在web项目运行期间对象只有一个，全局共享ServletContextcontext=req.getServletContext();

底层是一个map结构，可以存放数据，存放的数据全局共享，可以实现多个Servlet之间的通信

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mliMDkgx-1619070134717)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1600873411331.png)]

7.8servlet的一些接口

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iAo4I1ri-1619070134717)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1600873486736.png)]

1.ServletReuqet接口：请求对象

子接口：HttpServletRequest

getParameter:得到客户端的请求参数信息

getMethod:得到客户端的请求方式，返回GET或者POST

req.getServletContext();

2.ServletResponse:代表的是响应对象

getRequestDispatcher

setAtrribute()

getAttribute()

resp.setContentType(“text/html;charset=utf-8”);：设置响应内容的类型及编码

子接口：HttpServletResponse

req.getServletContext();

resp.sendRedirect()

八、session的应用（重点）

8.1、HTTP会话的概念：

客户端浏览器和服务器之间的一次通讯过程

2、session对象：在每一次会话过程，服务器会维护一个session对象，来保存一次会话过程中的私有信息

类型：HttpSession

创建时机：

首次使用session的时候：request.getSession()或者request.getSession(true); 请求Jsp页面的时候

注意：如果jsp页面禁用session，那么不会创建session对象。

session对象常用的操作：

如何创建并得到session对象

1.在jsp页面中得到session对象：直接使用session内置对象

2.在servlet中如何得到session对象：

HttpSession request.getSession(); 
HttpSession request.getSession(true); 
HttpSession request.getSession(false); 

通过会话对象可以保存、获得与当前客户相关的各种信息，如何使用session对象保存、提取信息：

session.setAttribute(“key”,objValue);  保存信息 
session.getAttribute(“key”);提取信息 
 session.removeAttribute(“key”);移除信息 

8.2getSession（true）和getSession（false的区别）：

getSession（true）：没有跟当前会话关联的session对象，就创建，有就直接返回对象。

getSession（false）：没有跟当前会话关联的session对象，返回Null，有就直接返回对象.一般在get数据的时候使用

二、application的应用

存放在线人数

1）登录成功的时候

//统计在线人数 
     ServletContext context=req.getServletContext(); 
//设置初始人数为0 
int count=0; 
//判断有没有放过在线人数，有就放过 
if(context.getAttribute("online")!=null){ 
    count=(Integer)context.getAttribute("online");
} 
//登录成功，在线人数加1 
count++; 
//设置在线人数 

context.setAttribute("online", count); 

2）显示，在jsp页面中

<%=application.getAttribute("online")%>人在线 

3）安全退出的时候，在线人数减1

//在线人数减1

ServletContext context=req.getServletContext(); 

if(context.getAttribute("online")!=null){ 

int count=(Integer)context.getAttribute("online"); 

count--; 

context.setAttribute("online", count); 

请求范围：session对象：在每一次会话过程，服务器会维护一个session对象，来保存一次会话过程中的私有信息 。

request表示一次会话中的请求范围最小

会话范围 ：客户端浏览器和服务器之间的一次通讯过程 ，只要客户端浏览器不关闭，那么就一直处于会话过程中。

application范围：这个是应用层的，范围最大，可以跨浏览器使用

9、cookie

9.1 什么是cookie

就是保存在客户端浏览器的一些信息

到session对象：直接使用session内置对象

2.在servlet中如何得到session对象：

HttpSession request.getSession(); 
HttpSession request.getSession(true); 
HttpSession request.getSession(false); 

通过会话对象可以保存、获得与当前客户相关的各种信息，如何使用session对象保存、提取信息：

session.setAttribute(“key”,objValue);  保存信息 
session.getAttribute(“key”);提取信息 
 session.removeAttribute(“key”);移除信息 

8.2getSession（true）和getSession（false的区别）：

getSession（true）：没有跟当前会话关联的session对象，就创建，有就直接返回对象。

getSession（false）：没有跟当前会话关联的session对象，返回Null，有就直接返回对象.一般在get数据的时候使用

二、application的应用

存放在线人数

1）登录成功的时候

//统计在线人数 
     ServletContext context=req.getServletContext(); 
//设置初始人数为0 
int count=0; 
//判断有没有放过在线人数，有就放过 
if(context.getAttribute("online")!=null){ 
    count=(Integer)context.getAttribute("online");
} 
//登录成功，在线人数加1 
count++; 
//设置在线人数 

context.setAttribute("online", count); 

2）显示，在jsp页面中

<%=application.getAttribute("online")%>人在线 

3）安全退出的时候，在线人数减1

//在线人数减1

ServletContext context=req.getServletContext(); 

if(context.getAttribute("online")!=null){ 

int count=(Integer)context.getAttribute("online"); 

count--; 

context.setAttribute("online", count); 

请求范围：session对象：在每一次会话过程，服务器会维护一个session对象，来保存一次会话过程中的私有信息 。

request表示一次会话中的请求范围最小

会话范围 ：客户端浏览器和服务器之间的一次通讯过程 ，只要客户端浏览器不关闭，那么就一直处于会话过程中。

application范围：这个是应用层的，范围最大，可以跨浏览器使用

9.1 什么是cookie

就是保存在客户端浏览器的一些信息