内容：在网页中可以看到的数据，所有的文字、图片等等。使用HTML实现
表现：在页面上的展示形式，布局、颜色、大小等等。使用CSS实现
行为：页面中的元素与输入设备的交互响应。通过JavaScript实现
2. HTML 2.1HTML简介HTML全称为：Hyper Text Markup Language(超文本标记语言)
通过**标签来标记要显示的网页中的各个部分。网页文件本身是一种文本**文件，通过在文本文件中添加标记符，可以高速浏览器如何显示其中的内容，如文字如何处理，画面如何安排，图片如何显示等。
2.2HTML格式DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Smiletitle>
head>
<body>
初识HTML
body>
html>
<标签名>
封装的数据
标签名，大小写**不敏感**
标签有自己的属性
基本属性：bgcolor = “red” 可以修改简单的样式效果
事件属性：onclick = “alert(‘你好！’)” 可以直接设置事件响应后的效果
标签的分类
单标签：<标签名/> 换行(br)、水平线(hr)等
双标签：<标签名>…封装的数据…
2.3.2HTML标签语法 标签不能交叉嵌套标签必须正确闭合(双标签成对出现！)属性必须要有值注释不能嵌套 2.4常用标签 2.4.1 字体设置 font可以设置字体的颜色，类型，字号
可选属性：
固有属性：color, face, size
事件属性：null
<font color="#a52a2a" size="7" face="宋体">
听说你很猛？
font>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-scgu5PKV-1628852457276)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210809145935476.png)]
2.4.2 按钮添加 button<body bgcolor="#7fffd4">
hello
<button onclick="alert('爬')">莫挨老子button>
body>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zJz4JGBQ-1628852457281)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210809143708111.png)]
2.4.3 标题添加 h添加标题
可选属性：
固有属性：align(对齐) = “left(默认) / center / right”
color, face, size
标题内容
…
标题内容
2.4.4 超链接添加 a注：当连接为外部链接时，要带上前缀协议http。
可选属性：
事件属性：target = “__self(在当前页面打开) / blank(新建窗口打开)”
<a href="http://www.baidu.com" target="_blank">谷歌首页a>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MdkHHMSS-1628852457282)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210809152307762.png "alt = “image-20210809152307762.png " style = " zoom 200%”)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ftL3xaxs-1628852457283)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210809152940329.png)]
当超链接遇到图片，就变成了，广告！西八儿
<a href="http://www.baidu.com" target="_blank"><img src="src/images.jpg"/>a>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DeTBiIeA-1628852457284)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210809165235008.png)]
点进去以后，直接打开porn，不，打开百度页面
2.4.5 列表生成 2.4.5.1无序列表 ul<ul>
<li>尼古拉斯狗蛋li>
<li>尼古拉斯？？li>
<li>尼古拉斯？！li>
ul>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-POuHUPMT-1628852457285)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210809153455323.png)]
2.4.5.2有序列表 ol可选属性：
固有属性：type(符号类型 )
<ol>
<li>尼古拉斯狗蛋li>
<li>尼古拉斯？？li>
<li>尼古拉斯？！li>
ol>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SJOVNQxS-1628852457286)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210809153605283.png)]
2.4.6换行与添加水平线 br, hr注：< hr/ >默认在下一行加水平线，同时起点移到开头
hello<br/>我好困<hr/>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iv9Izx5i-1628852457286)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210809144235452.png)]
2.4.7添加图片 IMG属性：
固有属性：
src：设置图片的路径
width：设置图片宽度
height：设置图片高度
border：添加边框 单位：像素
事件属性：
alt：当图片找不到时，替换为后面的内容
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3p3HQdMh-1628852457287)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210809160207792.png)]
JaveSE中的路径：
相对路径：从工程名开始
绝对路径：盘符：/目录/文件名
web中的路径：
相对路径
. 表示当前文件所在的目录
… 表示当前文件所在的上一级目录
文件名 表示当前文件所在目录的文件
绝对路径
http://ip:port/工程名/资源路径
<img src="../src/images.jpg"/>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xqXLpPtn-1628852457288)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210809155153621.png)]
2.4.8表格生成 tabletable固有属性：
alain: 对齐方式
border：边框
cellspacing：单元格之间的间距
width, weight
行标签：tr
tr固有属性：
colspan：跨列
rowspan：跨行
单元格标签：td
加粗标签：b
td固有属性
align
表头：th
1.1
1.2
1.3
1.4
2.1
2.2
2.3
3.1
3.2
3.3
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c0CTZ54W-1628852457288)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210809163831674.png)]
2.4.9画中画 iframe可以在页面中开辟一个小区域，用来显示一个单独页面。
固有属性：
src, width, height
name：定义页面访问名称
这是第一个页面噢！<br/>
第二个页面在下面！<hr/>
<iframe src = "Tutorial2.html" width="310" height="200" frameborder="0"/>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WJDznn5L-1628852457290)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210809165715475.png)]
注：套娃 *** 作
<body>
这是第一个页面噢！<br/>
第二个页面在下面！<hr/>
<iframe src = "Tutorial2.html" width="310" height="200" frameborder="0" name="TKWA">iframe>
<br/>
新页面来咯！
<br/>
<a href="Tutorial1.html" target="TKWA" >套娃开始！！！a>
body>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VZonwnHy-1628852457290)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210809170846886.png)]
2.4.10表单生成 form表单就是html页面中用来收集用户数据的部分，然后浏览器将这些数据发送到服务器
form固有属性：
action：属性设置提交的服务器地址
method：属性设置提交的方式get(默认)或post
注：表单提交内容缺失的原因
1. 只提交有name属性的项，查看是否有忘了写name的
2. 单选、复选、下拉列表中的option，需要先赋值，这样发送的信息为所赋的值，而不是on(已选)
3. 只提交form标签内的内容
GET请求的特点：
浏览器地址栏中的地址是：action属性(+ ？+请求参数) 请求参数的格式是：name = value&name = value
不安全，参数在浏览器地址栏可以看到数据长度的限制，100个字符POST请求的特点：
浏览器地址栏中只有action属性值，即只有服务器地址
相对于GET请求，更安全
理论上没有数据长度的限制
标签(表单项)：
1. input 文本输入框
input固有属性：
type：输入值的类型
参数：type = “password” 输入直接就是*
type = “text”
type = “radio” 同组内单选项，注：需要提前用name属性进行分组
type = “checkbox” 多选
type = "reset"重置之前的内容为默认值
type = "submit"提交
type = "button"添加按钮
type = “file” 提交文件
type = "hidden"隐藏域 当需要发送某些信息，而不需要用户参与时，则使用隐藏域
value：默认值
maxlength：数据最大长度
name：分组
checked：默认
select：下拉项 select固有属性：
selected：默认
textarea：多行文本输入框 textarea固有属性：
rows：设置显示几行
cols：设置显示几列
表单格式化：加table
<body>
<h1 align="center">用户注册h1>
<table align="right">
<tr>
<td>用户名：td>
<td><input type="text"/>td>
tr>
<tr>
<td>密码：td>
<td><input type="password"/>td>
tr>
<tr>
<td>确认密码：td>
<td><input type="password"/>td>
tr>
<tr>
<td>手机号：td>
<td><input type="tel"/>td>
tr>
<tr>
<td>性别：td>
<td>
<input type="radio" name="sex" /> 男
td>
<td>
<input type="radio" name="sex" /> 女
td>
tr>
<tr>
<td>如何得知这个机构的：td>
<td>
<input type="checkbox" /> 朋友介绍
td>
<td>
<input type="checkbox" /> 听讲座知道的
td>
<td>
<input type="checkbox" /> 看到街边的广告知道的
td>
tr>
<tr>
<td>自我介绍：td>
<td>
<textarea rows="5" cols="20">textarea>
td>
tr>
<tr>
<td><input type="reset"/>td>
<td align="right">
<input type="submit" />
td>
tr>
table>
body>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Dewx7bwE-1628852457291)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210809181634347.png)]
2.4.11 文本文字的格式 div、span、p标签div标签 默认一个标签就是一行
span标签 默认一个标签跟一个空格
p标签 默认会在段落的上方或下方各空出一行
3.CSS技术 3.1 CSS简介CSS是层叠样式表单，用于增强控制网页样式，并允许将 样式与网页内容分离的一种标记性语言。
3.2 CSS语法规则[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h1fJNeJs-1628852457291)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210810082255058.png)]
选择器：浏览器根据选择器决定受CCS样式影响的HTML元素（标签）
属性：需要改变的样式名，属性与值用冒号"：“隔开，并用花括号”{}"包围；
若定义不止一个声明，则需要用分号将每个声明分开。
3.3 HTML结合CSS 3.3.1 第一种：加键值对在标签的style属性上设置键值对
<td style = "border: 1px solid #ff0000">用户名：td>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HTKMwBlu-1628852457292)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210810085933985.png)]
3.3.2 第二种：在head标签中定义需要的css格式注：head标签下语言为CSS语言，不是HTML语言！
注：在head标签下，修改后，所有的标签都会改变。
注：在单个标签设置的样式优先级更高！
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style type="text/css">
td{border: 1px solid red}
style>
head>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mpBz6irP-1628852457292)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210810091218955.png)]
3.3.3 第三种：将css样式写成单独的css文件link标签可以引入css样式文件
<link rel="stylesheet" type="text/css" href="src/1.css">
标签名选择器格式：
标签名{
属性：属性值；
}
可以确定哪些标签使用这些样式
3.4.2 id选择器注：id 不受标签名的影响，可以跨标签名进行同类设置
id选择器格式：
#id 属性值{
属性：属性值；
}
3.4.3 class选择器class选择器格式：
.class 属性值{
属性：属性值；
}
3.4.4 id选择器与class选择器的使用摘自 @theusProme CSS ID选择器与类选择器的区别
id选择器与class选择器类似，也都可以任意使用。
但是id选择器原则上，只能使用一次，而class不限制使用次数。
工程上，
id选择器留给写js的人用
class选择器用来写css
3.4.5 组合选择器组合选择器的格式：
选择器 1，选择器 2，… ，{
属性：属性值；
}
可以让多个选择器共享一个格式
4.JavaScript语言 4.1 JavaScript简介JavaScript主要是完成页面的数据验证，因此运行在客户端，需要浏览器来解析执行JavaScript代码。
JS是Netscape网景公司的产品，最早取名为LiveScript，为了吸引更多的java程序员，更名为JavaScript
JS是弱类型，类型可变
弱类型Java是强类型，在定义变量的时候，类型已确定且不可变
特点：
1. 交互性（可以做的就是信息的动态交互）
2. 安全性（不允许直接访问本地磁盘）
3. 跨平台性（只要是可以解释JS的浏览器都可以执行，与平台无关）
在head或body标签中，使用script标签来书写JavaScript代码
<script type="text/javascript">
//alert 提供警告框函数
alert("hello,javascript!");
script>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3Y7sZ6Sh-1628852457293)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210810112144855.png)]
4.2.2 第二种方式：引入.js文件在head或body标签中，使用script标签引入js文件来书写JavaScript代码
<script type="text/javascript" src ="hello.js">script>
注：一个script标签，引入js文件或建立js域只能二选一
4.3 变量 4.3.1 变量类型数值类型： number
字符串类型： string
对象类型： object
布尔类型： boolean
函数类型： function
4.3.2 特殊值undefined 未定义（所有js变量未赋初始值的时候，默认为undefined）
null 空值（）
NAN 非数值（全称Not A Number）
4.3.3 变量的定义var 变量名；
var 变量名 = 初值；
4.4 运算 4.4.1 关系运算除常规运算符以外，还有
== 字面匹配
=== 全匹配
<script type="text/javascript">
var i1 = "123";
var i2 = 123;
alert(i1 == i2);
alert(i1 === i2);
script>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fFuL1EdO-1628852457293)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210810161609095.png)]
第一个为字面匹配，一个字符型的 i1 一个是数值型的 i2，字面匹配为true
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RuJhj6hE-1628852457293)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210810161614015.png)]
第二个为全匹配，由于一个是字符型，一个是数值型，因此为false
4.4.2 逻辑运算注：所有类型均可当做布尔型，其中0、null、空串、undefined均为假
空串：var i = “” 不能有空格
与运算：&&
当表达式全为真，返回最后一个表达式的值
当表达式中有一个为假，返回第一个为假的表达式的值
<script type="text/javascript">
var i1 = "123";
var i2 = true;
alert(i1 && i2);
alert(i2 && i1);
script>
第一个返回：true
第二个返回：123
或运算： ||
当表达式全为假时，返回最后一个表达式的值
当表达式有一个为真，则返回第一个为真的表达式的值
取反运算： |
4.5 数组注：数组中的可以包含多种类型
注：可以通过下标完成对数组的扩容（随时可以对数组元素进行添加）
注：仅限于赋值 *** 作
注：未赋值的数组元素为undefined
var 数组名 = []； 空数组
var 数组名 = {}； 带初值的数组
4.6 函数注：必须调用才能执行！
注：含参函数无需指明参数类型
注：返回值无需设定，直接用return就可以
注：js中函数无法重载，会直接完成函数的覆盖
4.6.1 函数的定义方式第一种定义格式：
function 函数名(形参){
函数体
}
第二种定义格式：
var 函数名 = function(形参){
函数体
}
4.6.2 arguments 隐形参数(只在function函数内)在function函数中，无需定义，但是可以获取所有参数的变量。
js中的隐形参数，与java基础的可变长参数一样， *** 作类似数组
作用：在没有规定个数的函数中，实现对参数的处理。
如：在不规定输入参数个数的情况下，求和并返回
<script type="text/javascript">
function test(){
alert("无参函数test()调用")
alert(arguments.length);
alert(arguments[0]);
alert(arguments[1]);
alert(arguments[2]);
}
test(1,"smile",true);
script>
在网页中，依次输出： 无参函数test()调用 3 1 smile true
4.7 自定义对象 4.7.1 Object形式的对象定义格式：
var 变量名 = new Object()； 实例化一个空对象
变量名.属性名 = 属性值； 定义一个属性
变量名.函数名 = function(参数){函数体} 定义一个方法(函数)
访问格式：
变量名.属性名
变量名.方法(参数)
<script type="text/javascript">
var obj = new Object();
obj.name = "赵日天";
obj.age = 21;
obj.fun = function (){
alert("姓名：" + this.name + "，年龄：" + this.age);
}
obj.sum = function (a,b){
var result;
result = a+b;
alert("result的结果为：" + result);
}
obj.fun();
obj.sum(13,29);
script>
注：不同属性或函数之间用逗号"，"隔开，最后一个不加
定义格式：
var 变量名 = {
属性名：值，
函数名：function(形参){函数体}
属性名：值
}；
访问格式：
变量名.属性名
变量名.函数名(形参)
4.8 事件定义：电脑输入设备与页面进行交互的响应
4.8.1 事件的注册事件注册(绑定)：告诉浏览器，当事件响应后，要执行那些 *** 作。
4.8.1.1 静态注册通过HTML标签的事件属性直接赋予事件响应后的代码
4.8.1.2动态注册先通过js代码得到标签的dom对象，然后在通过dom对象.事件名 = function(){}这种形式赋予事件响应后的代码
基本步骤：
1. 获取标签对象
2. 赋予事件响应
浏览器页面解析完成(即，页面的文字、样式已经出现)之后，自动触发该事件。
4.8.2.1 onload事件静态注册注：一般在静态注册时，只写一个方法，增加可读性。
注：提前将所有需要调用的方法在head中写完，再直接调用该方法
<body onload="alert('静态注册onload事件')">body>
固定格式：
window.onload = function(形参){
函数体
}
4.8.3 onclick事件鼠标单击响应
4.8.3.1 onclick事件静态注册<head>
<script type="text/javascript">
function onclickfun(){alert("静态注册成功");}
script>
head>
<body>
<button onclick="onclickfun()">点点你试试button>
body>
注：小心方法重载，由于js无法重载，所以会直接覆盖之前的方法！
固定格式：
window.onload = function(){
var 标签对象名 = document.getElementById = (“标签的id”)
标签对象名.onclick = function(形参){函数体}
}
<head>
head>
<script type = "text/javascript">
window.onload = function (){
var btnObj = document.getElementById("btn01");
btnObj.onclick = function (){alert("动态注册成功");}
}
script>
head>
<body>
<button id="btn01">别点我button>
body>
常用于输入框离开后验证其输入内容是否合法
返回验证提示效果
4.8.4.1 onblur事件静态注册<head>
<script type="text/javascript">
function onblurfun(){
console.log("静态事件失去焦点事件"); //console为控制台对象，log为控制台输出方法
}
script>
head>
<body>
密码：<input type="password" onblur="onblurfun()"/>
body>
<head>
<script type="text/javascript">
function onblurfun(){
console.log("静态事件失去焦点事件");
}
window.onload = function() {
var psdObj = document.getElementById("psd");
psdObj.onblur = function () {
console.log("输出了");
}
}
script>
head>
<body>
密码：<input type="password" id="psd" />
body>
常用于下拉列表。
当列表内容改变时，触发事件
4.8.5.1 onchange事件静态注册<head>
<script type="text/javascript">
function onchangefun(){
alert("changed!")
}
script>
head>
<body>
你的职业是：
<select onchange="onchangefun()">
<option>学生option>
<option>教师option>
<option>建筑师option>
select>
body>
<head>
<script type="text/javascript">
window.onload = function (){
var onchangeObj = document.getElementById("change");
onchangeObj.onchange = function (){
alert("Something has changed.")
}
}
script>
head>
<body>
你的职业是：
<select id="change">
<option>学生option>
<option>教师option>
<option>建筑师option>
select>
body>
常用于表单提交前，验证表单内容是否合法
先调用，再提交！
注：onsubmit = “return false” 可以阻止表单提交
4.8.6.1 onsubmit事件静态注册<head>
<script type="text/javascript">
function onsubmitfun(){
alert("静态表单提交事件！");
// 将return false填在这里，可以阻止不合法表单
}
script>
head>
<body>
<form action="http://localhost:8085" method="get" onsubmit="onsubmitfun()">
<input type="submit" value="静态注册"/>
form>
body>
<head>
<script type="text/javascript">
window.onload = function (){
var submitObj = document.getElementById("form1");
submitObj.onsubmit = function (){
return false;
}
}
script>
head>
<body>
<form action="http://localhost:8085" method="get" id="form1">
<input type="submit" value="动态注册"/>
form>
body>
静态注册：在
标签下的中完成对需求的实现，直接在需求对应标签上进行方法的调用。动态注册：在
标签下的中写window.onload，在这个方法下面获取目标对象，并完成对该对象的个性化方法。 4.9 DOM模型DOM全称是Document Object Module，指的是把文档中的标签、属性、文本转换成对象进行处理
4.9.1 Document对象[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2HPBDznn-1628852457294)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210812152514913.png)]
特点：
1. Document 对象，管理了所有HTML文档的内容
2. Document对象是一种树形结构的文档，有从属关系
3. Document对象可以使我们将所有的标签都对象化
4. 我们可以通过Document对象访问所有的标签对象
注：若存在同名ID，只会返回第一个
调用格式：document.getElementById(elementId)
<head>
<script type="text/javascript">
window.onload = function (){
var patt = /^\w{5,12}$/ //正则表达式，实质为对象
var btnObj = document.getElementById("btn01");
var userNameObj = document.getElementById("userName");
btnObj.onclick = function (){
/*
* test方法用来测试某个字符串是否符合规则
* 匹配则返回true，不匹配则返回false
*/
if(patt.test(userNameObj.value))
alert("用户名合法");
else
alert("非法字符");
}
}
script>
head>
<body>
用户名：<input type="text" id="userName"/>
<button id="btn01">验证button>
body>
返回带有指定名称的对象集合
调用格式：document.getElementsByName(elementName)
<head>
<meta charset="UTF-8">
<title>Tutorial1title>
<script type="text/javascript">
window.onload = function (){
var chk_allObj = document.getElementById("chkAll");
var chk_nonObj = document.getElementById("chkNon");
var chk_reverseObj = document.getElementById("chkReverse");
//获取所有name属性为hobby的标签并以对象形式存入hobbyObj中，对它的 *** 作 *** 作类似数组
var hobbyObj = document.getElementsByName("hobby")
chk_allObj.onclick = function (){
for (var i=0;i<hobbyObj.length;i++){
//对checkbox类型的输入框对象可以调用其checked属性，可读可写。借此完成对选项的修改
hobbyObj[i].checked = true;
}
}
chk_nonObj.onclick = function (){
for (var i=0;i<hobbyObj.length;i++){
hobbyObj[i].checked = false;
}
}
chk_reverseObj.onclick = function (){
for (var i=0;i<hobbyObj.length;i++){
hobbyObj[i].checked = ! hobbyObj[i].checked;
}
}
}
script>
head>
<body>
兴趣爱好：
<input type="checkbox" name="hobby" value="cpp"/>C++
<input type="checkbox" name="hobby" value="java"/>Java
<input type="checkbox" name="hobby" value="js"/>JavaScript
<br/>
<button id="chkAll" >全选button><button id = "chkNon">全不选button><button id="chkReverse">反选button>
body>
注：范围太大，不好用。
调用格式：document.getElements ByTagName(tagname)
4.9.3 Document中对象查询的方法总结使用优先级：id > name > tag
以上三个方法，必须在页面加载完成之后执行，才能查询到标签对象。
4.10 正则表达式(RegExp)正则表达式是描述字符模式的对象，可以用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。
语法：
var patt = new RegExp(patten,modufiers)；
或
var = patt = /patten/modifiers；
其中：pattern 描述了表达式的模式
modifiers 用于指定全局匹配、区分大小写的匹配和多行匹配
4.11 常见的验证提示效果[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sv4vPxQl-1628852457295)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210812170934255.png)]
实现方式：
<head>
<meta charset="UTF-8">
<title>Tutorial1title>
<script type="text/javascript">
window.onload = function (){
/*正则表达式，实质为对象
该表达式的意义为
5-12个字符，字母数字或下划线*/
var patt = /^\w{5,12}$/
var btnObj = document.getElementById("btn01");
var userNameObj = document.getElementById("userName");
var userNameSpanObj = document.getElementById("userNameSpan");
btnObj.onclick = function (){
/*
* test方法用来测试某个字符串是否符合规则
* 匹配则返回true，不匹配则返回false
*/
if(patt.test(userNameObj.value))
userNameSpanObj.innerText = "用户名合法";
else
userNameSpanObj.innerText = "用户名不合法";
}
}
script>
head>
<body>
用户名：<input type="text" id="userName"/>
<span id="userNameSpan" style="color:red" >span>
<button id="btn01">验证button>
body>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cqcx1k62-1628852457295)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210812174219755.png)]
实现方式：
<head>
<meta charset="UTF-8">
<title>Tutorial1title>
<script type="text/javascript">
window.onload = function (){
var patt = /^\w{5,12}$/ //正则表达式，实质为对象
var btnObj = document.getElementById("btn01");
var userNameObj = document.getElementById("userName");
var userNameSpanObj = document.getElementById("userNameSpan");
btnObj.onclick = function (){
/*
* test方法用来测试某个字符串是否符合规则
* 匹配则返回true，不匹配则返回false
*/
if(patt.test(userNameObj.value))
userNameSpanObj.innerText = "用户名合法";
else
userNameSpanObj.innerText = "用户名不合法";
}
}
script>
head>
<body>
用户名：<input type="text" id="userName"/>
span>
<button id="btn01">验证button>
body>
innerHTML 指的是从对象的起始位置到终止位置的全部内容,包括Html标签。
innerText 指的是从起始位置到终止位置的内容,但它去除Html标签。
以上两种方法在实际网站中使用失去焦点事件触发
5.jQueryjQuery是辅助JavaScript开发的js类库，是JavaScript和Query结合的产物
核心思想：Write less，do more。
5.1 jQuery的导入在jQuery下载地址完成jQuery的下载，之后导入到项目所在路径。
当传入参数为函数时
表示页面加载完成之后，相当于window.οnlοad=function(){}
当传入参数为HTML字符串时
表示创建这个HTML标签对象。
注：要写在$(function(){})；里面，否则无法正常执行
<head>
<script type="text/javascript" src="src/jquery-3.6.0.min.js">script>
<script type="text/javascript">
$(function (){
$("").appendTo("body");
});
script>
head>
<body>
body>
在body标签内容为空时，出现按钮组件。
当传入参数为选择器字符串时
$(“#id属性值”)； 根据id查询标签对象
$(“标签名”)； 根据标签名查询对象
$(“.class属性值”)； 根据class属性查询对象
当传入参数为DOM对象时
会把DOM对象转换为jQuery对象。
5.3 jQuery与Dom对象DOM对象Alert出来的效果为 [object HTML标签名Element]
jQuery对象Alert出来的效果为 [object Object]
jQuery对象的本质：数组，存放dom对象的数组，同时包含jQuery提供的函数
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NcpmgQx6-1628852457296)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210813100614059.png)]
5.4 jQuery的选择器与过滤器 5.4.1层级选择器$(“祖标签 后代标签名”)： 找祖先标签下的所有匹配的后代标签
$(“父标签 > 子标签”)： 找父标签下的所有匹配的子标签
$(“prev标签 + next标签”)： 找prev标签的下一个next标签
$(“prev标签 ~ next标签”)： 找与prev同级的所有next标签
5.4.2 普通过滤器$(“标签名：first”)： 获取第一个元素
$(“标签名：last”)： 获取最后一个元素
$(“标签名：not(：属性名)”)： 获取不包含某属性的标签
$(“标签名：even”)： 获取所有索引值为偶数的元素
$(“标签名：odd”)： 获取所有索引值为奇数的元素
$(“标签名：eq(索引值)”)： 获取指定索引值的元素
$(“标签名：gt(索引值)”)： 获取大于索引值的元素
$(“标签名：lt(索引值)”)： 获取大于索引值的元素
$(“标签名：header”)： 获取所有标题
$(“标签名：animated”)： 获取正在执行动画效果的标签
5.4.3 内容过滤器$(“标签名：contains(‘内容’)”)： 获取包含指定内容的标签
$(“标签名：empty”)： 获取不包含子元素或文本的空元素
$(“标签名：has(选择器名)”)： 获取包含选择器所匹配的元素的元素
$(“标签名：has(选择器名)”)： 获取包含选择器所匹配的元素的元素
<head>
<meta charset="UTF-8">
<title>Tutorial1title>
<script type="text/javascript" src="src/jquery-3.6.0.min.js">script>
<script type="text/javascript">
$(function (){
//选中包含p标签的div标签，为其添加class属性为test
$("div:has(p)").addClass("test");
});
script>
head>
<body>
<div><p>Hellop>div>
<div>Hello个屁呢！div>
body>
效果图如下，在body标签中并未给div标签设置属性，但是执行完之后，发现第一个div标签有了class属性，且值为test。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qQMsmbdL-1628852457297)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210813163150431.png)]
5.4.4 属性过滤器$(“标签名[属性名]”)： 获取包含某属性的标签
$(“标签名[属性名 = ‘属性值’]”)： 获取包含某属性且属性值为特定值的标签
$(“标签名[属性名 ！= ‘属性值’]”)： 获取包含某属性且属性值不为特定值的标签
注：两种情况都会被选出来，第一：不包含该属性；第二：属性值不是给定值
验证如下：
<head>
<meta charset="UTF-8">
<title>Tutorial1title>
<script type="text/javascript" src="src/jquery-3.6.0.min.js">script>
<script type="text/javascript">
$(function (){
$("div[name != 'Smile']").addClass("test");
});
script>
head>
<body>
<div name = "Smlie">Hellodiv>
<div>Hello个屁呢！div>
<div name = "sry">Hello个屁呢！div>
body>
在标签name属性为为sry以及不包含name属性的div标签均出现新的class属性[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nm6bSGUI-1628852457297)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210813165823236.png)]
$(“标签名[属性名 ^= ‘属性值’]”)： 获取包含某属性且以某些值开头的标签
比如，就可以通过查到
$(“标签名[属性名 $= ‘属性值’]”)： 获取包含某属性且以某些值结尾的标签
$(“标签名[属性名 *= ‘属性值’]”)： 获取包含某属性包含某些值开头的标签
$(“标签名[属性选择][属性选择]”)： 获取包含某属性包含某些值开头的标签
5.4.4 表单过滤器$(“：input”)： 获取所有表单内的input、select、textarea、button等标签
$(“：text”)： 获取所有表单内的type=text的标签
$(“：password”)： 获取所有表单内的type=password的标签
$(“：hidden”)： 获取所有表单内的type=hidden以及的标签
$(“：enabled”)： 获取所有表单内的可用标签
$(“：disabled”)： 获取所有表单内的不可用标签，内容存在，但不可 *** 作
$(“：checked”)： 获取所有表单内被选中标签(一般值单选框、复选框，不包含下拉框)
$(“：selected”)： 获取所有表单内被选中的下拉框标签
5.5 jQuery属性 *** 作html()
可以设置和获取起始标签和结束标签中的内容。与dom属性的innerHTML相同。
<head>
<meta charset="UTF-8">
<title>Tutorial1title>
<script type="text/javascript" src="src/jquery-3.6.0.min.js">script>
<script type="text/javascript">
$(function (){
//传参则设置，不传参则获取
//获取是获取第一个，设置，是设置所有
console.log($("div").html());//获取div标签中的内容，包含html标签
console.log($("p").html());//获取p标签中的内容
//console.log($("div").html("关你屁事！"));//将所有div标签中的内容改为关你屁事
$("div").html("关你屁事！");//将所有div标签中的内容改为关你屁事，且添加span标签
});
script>
head>
<body>
<div name = "Smlie"><span>Hello!span>div>
<p>Hello个屁呢！p>
<div name = "sry">Hello个屁呢！div>
<h1>放大的屁！h1>
body>
效果图如下
页面内容：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZfeX16OK-1628852457298)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210813181951637.png)]
控制台内容：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1db2TDji-1628852457299)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210813182519043.png)]
text()
可以设置和获取起始标签和结束标签中的文本。与dom属性的innerText相同。
val()
可以设置和获取[表单项](id = “表单项”)的value属性值。跟dom属性的value相同
2.1 HTTP格式http: // ip:port / 项目路径 / 参数
ip也可以为域名，通过DNS解析。端口默认为80
2.1.1 请求的格式一个请求包含三个部分，请求头，请求行，请求正文。
Method Request_URI HTTP_Version CRLF
请求方法 统一资源标识符 请求的http版本 回车换行
请求头：host ：域名
connection ：连接状态
Referer：指明请求的来源，即这个页面的上一个页面 是什么
GET请求：无请求正文，直接将请求的各项参数填入到地址栏中，导致地址栏过长。
POST请求：将参数放进请求体
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ag2RswOE-1628852457300)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210805151142141.png)]
2.1.2 响应的格式一次响应也包含三个部分，响应行 ，响应头，响应正文
响应行包含：http协议版本，状态码，对状态码的说明。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BkSmH7UV-1628852457301)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210805151232319.png)]
200 即为连接成功
响应头：Location：用于重定向接受者到一个新的位置
Refresh：自动跳转，单位：秒，可以实现自动刷新或 跳转页面
2.2 HTTP特点 HTTP规定了浏览器与服务器之间的交互规则。HTTP在Version1.1之前只支持无连接传输，每次连接只处理一个请求。请求 -> 相应 -> 断开HTTP是一种无状态协议，不具有记忆功能，若需要对前面的信息进行处理，都需要重新上传。因此，在一些情况下会导致资源的过度使用。 3.Tomcat服务器 3.1 Socket通信客户端
向服务端发送数据
服务端
打开服务，等待客户端的请求
3.2 Tomcat服务器的特点轻量级应用服务器，适用于中小型系统和并发访问用户不多的情况下适用。
3.3 Tomcat目录结构bin：启动与关闭tomcat的bat文件
conf：配置文件server.xml，用于配置server相关信息，如tomcat的端口号，配置主机；web.xml文件，用于配置web应用；tomcat-user.xml配置用户名、密码即用户权限
lib：存放运行tomcat的jar包
logs：存放日志
webapps：放置web应用
work：用于存放jsp被访问后生成的server文件与.calss文件
3.4 Tomcat+IDEA[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CPXPP9Gd-1628852457301)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210805161415515.png)]
选bin目录的上级目录即可
3.5 问题一：无法正常启动TomcatNeither the JAVA_HOME nor the JRE_HOME environment variable is defined At least one of these environment variable is needed to run this program
原因：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y2GgY92D-1628852457302)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210805154712797.png)]
JAVA_HOME未找到，但是在环境变量中可以看到JAVA_HOME存在，因此手动设置环境变量。
解决方法：找到bin目录下的setcalsspath.bat，编辑。将目录手动添加到该文件中，如下图所示。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IICgNYOy-1628852457303)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210805155112129.png)]
成功启动Tomcat
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bWygtbMY-1628852457303)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210805155228794.png)]
4. Servlet实现 4.1 IDEA新建web项目[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GsQ463ZK-1628852457304)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210805163855992.png)]
new -> Java Enterprise -> Project template -> Web application
4.2 问题二：无法运行tomcat，8080被占用解决方法：
查看被占用端口对应的PID，输入命令：netstat -aon|findstr “端口号”
根据所得结果，进入任务管理器，
对应PID码，对服务进行关闭
4.3 Servlet工作过程localhost:8080/项目路径/项目资源
新建类继承HttpServlet类重写Service方法添加注解(@WebServlet(“/项目资源名”)) 4.4 Servlet的生命周期实例和初始化阶段
当请求到达容器(Tomcat)时，容器查找该Servlet对象是否存在，如果不存在则会创建实例并进行初始化。
就绪/调用/服务阶段
有请求到达容器，容器调用Servlet对象的service()方法，处理请求的方法可以在整个生命周期中被反复调用。HttpServlet的service()方法会依据请求的方式(get/post)调用doget或dopost方法。但是，这两个方法默认的情况下，会抛出异常，此时需要子类去override。
就绪/调用/服务阶段
当容器关闭（应用程序停止）会将程序中的Servlet实例进行销毁。
init() ：系统方法，在请求到达servlet容器时，服务器自动调用，创建实例化对象，只会被调用一次
destroy()：系统方法，当服务器关闭或程序停止时自动调用，只会被调用一次。
service()：系统方法，当有请求到达servlet时自动调用，可以多次调用。
作用：接收客户端发送过来的请求信息，如请求的参数，发送的头等。
常用方法：
getRequestURL()：获取客户端发出请求时的完整URL
getRequestURI()：获取请求行中的资源名称部分
getQueryString()：获取请求行中的参数部分
getMethod()：获取客户端请求方式
getProtocol()：获取HTTP版本号
hetContextPath()：获取webapp名称
3.5 问题一：无法正常启动TomcatNeither the JAVA_HOME nor the JRE_HOME environment variable is defined At least one of these environment variable is needed to run this program
原因：
[外链图片转存中…(img-Y2GgY92D-1628852457302)]
JAVA_HOME未找到，但是在环境变量中可以看到JAVA_HOME存在，因此手动设置环境变量。
解决方法：找到bin目录下的setcalsspath.bat，编辑。将目录手动添加到该文件中，如下图所示。
[外链图片转存中…(img-IICgNYOy-1628852457303)]
成功启动Tomcat
[外链图片转存中…(img-bWygtbMY-1628852457303)]
4. Servlet实现 4.1 IDEA新建web项目[外链图片转存中…(img-GsQ463ZK-1628852457304)]
new -> Java Enterprise -> Project template -> Web application
4.2 问题二：无法运行tomcat，8080被占用解决方法：
查看被占用端口对应的PID，输入命令：netstat -aon|findstr “端口号”
根据所得结果，进入任务管理器，
对应PID码，对服务进行关闭
4.3 Servlet工作过程localhost:8080/项目路径/项目资源
新建类继承HttpServlet类重写Service方法添加注解(@WebServlet(“/项目资源名”)) 4.4 Servlet的生命周期实例和初始化阶段
当请求到达容器(Tomcat)时，容器查找该Servlet对象是否存在，如果不存在则会创建实例并进行初始化。
就绪/调用/服务阶段
有请求到达容器，容器调用Servlet对象的service()方法，处理请求的方法可以在整个生命周期中被反复调用。HttpServlet的service()方法会依据请求的方式(get/post)调用doget或dopost方法。但是，这两个方法默认的情况下，会抛出异常，此时需要子类去override。
就绪/调用/服务阶段
当容器关闭（应用程序停止）会将程序中的Servlet实例进行销毁。
init() ：系统方法，在请求到达servlet容器时，服务器自动调用，创建实例化对象，只会被调用一次
destroy()：系统方法，当服务器关闭或程序停止时自动调用，只会被调用一次。
service()：系统方法，当有请求到达servlet时自动调用，可以多次调用。
作用：接收客户端发送过来的请求信息，如请求的参数，发送的头等。
常用方法：
getRequestURL()：获取客户端发出请求时的完整URL
getRequestURI()：获取请求行中的资源名称部分
getQueryString()：获取请求行中的参数部分
getMethod()：获取客户端请求方式
getProtocol()：获取HTTP版本号
hetContextPath()：获取webapp名称
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）