前端基础之Html、CSS、JavaScript、JQuery、Ajax

最新推荐文章于 2023-08-04 20:36:41 发布

原创最新推荐文章于 2023-08-04 20:36:41 发布 · 1.9k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#java #html

前端

1.HTML

XML：可扩展标记语言
XHTML：可扩展的超文本标记语言

1. HTML 概述

HTML：超文本标记语言

网页组成：文字 + 图片 + 表格 + 表单 + 链接 + 视频 + 音频

网页文件的格式：htm ，html

网页的注释：

html 结构

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title>头部标题</title>
    </head>
    <body>
    	网页内容所在位置
    </body>
</html>

2. 标记

标记的语法
```
<起始标签 属性名="值" ......> 被标记的内容</结束标签>
```
注意：
1. 不区分大小写（个别浏览器区分）
2. 一般标记都是成对出现，极少数单独出现
3. 标签可以相互嵌套，但不可交叉嵌套（属性如果其冲突，就近原则）
标签分类：
1. 块级标签：有换行，有宽高，外边距正常，块级标签和行级标签都可以放
2. 行内标签：没有换行，宽高无效，上下外边距无效，只能放文字和行级标签，不能放块级标签
如果要给服务端提交数据，表单中的组件必须有 name 和 value 属性。用于给服务端获取数据方便

特殊字符

&nbsp; 空格
&gt; 	>
&lt; 	<
&quot; 	"
&amp; 	&
&copy; 	版权©
&reg; 	注册®

标记

常用标记

标题：<hn="1...6" align="left|center|right" ></hn>
段落：<p align="left|center|right"></p>
字体：<font size="1-7" color="颜色" face="字体风格[黑体]"></font>
    <i>斜体</i>		  <em>斜体</em>
    <b>加粗</b>		  <strong>加粗</strong>
    <u>下划线</u>		 <ins>下划线</ins>
    <s>删除线(贯穿线)</s><del>删除线</del>
    <sub>下标标识</sub>
    <sup>上部标识</sup>

换行：<br/>
居中：<center></center>
元信息：<meta />
预定义：<pre></pre>
地址：<address></address>
音频：<embed src=""></embed>
水平线：<hr size="粗细" color="颜色" width="长度" align="center|left|right" noshade(3D 凹凸效果)/>
滚动：<marquee direction="left|right|down|up" scrollamount="滚动速度"
	behavior="scroll(重复)|slide(不重复)|alternate(来回滚动)" 
    loop="滚动次数-1" scrolldelay="两次之间的有延迟 值越大越明显的停顿"> </marquee>
页面排版：<div> </div>

图片标记：img

<img src="路径" width="长度" height="高度 px" alt="加载失败" title="标题"/>

链接标记：a

文本链接

<a href="路径" target="_self|_blank(新窗口打开)" title="提示">百度</a>

图片链接：可做图片按钮

<a href="链接路径" title="提示"><img src="图片路径" alt="图片加载失败" title="提示"/></a>

锚连接：一般用于当前页面位置的跳转

<a name="锚名字" href="">首页</a>
<a href="#锚名字">跳转到首页</a>

表格

完整版

<table>
    <caption>标题</caption>
    <thead>
    	<tr><th></th></tr>
    <thead>
    <tbody>
    	<tr><td></td></tr>
    </tbody>
    <tfoot>
    	<tr><td></td></tr>
    </tfoot>
</table>

属性

table 表格

border: 	边框粗细
bordercolor:边框颜色
width:		宽度
height:		高度
bgcolor:	背景颜色
background:	背景图片
cellspacing:单元格与单元格之间的距离
cellpadding:单元格与数据之间的距离

tr 行

align:left|center|right 		 水平位置
valign:middle 中|top 上|bottom 下 垂直位置
height:
width:
bgcolor:
background:背景图片

td|th 列（th 列属于首列，自动居中加粗）

align:left|center|right 		 水平位置
valign:middle 中|top 上|bottom 下 垂直位置
height:
width:
bgcolor:
background:	背景图片
rowspan:	合并行
colspan:	合并列
# 合并行列：数格子,数过的格子不能再数

列表

有序列表

<ol type="1|A|a|I|i" start="阿拉伯数字从哪里开始">
	<li type="1|A|a|I|i"></li>
</ol>

无序列表

<ul type="disc(实心圆)|circle(空心圆)|square(正方形)">
	<li></li>
</ul>

自定义列表

<dl>
    <dt> 小标题 </dt>
    <dd> 内容 </dd>
</dl>

表单 form、input、select、textarea

表单：是页面提供客户端输入信息的元素的统称，包括表单和表单元素

如果要给服务端提交数据，表单中的组件必须有 name 和 value 属性，用于给服务端获取数据方便

<form action="url 提交地址" method="get|post" name="formname">
       <fieldset>
          <legend>基本信息</legend>
    文本框:<input type="text" name="" size="" maxlength="" value="默认值"/>
    密码框:<input type="password" name="" size="" maxlength="" value="默认值"/>
    单选框:<input type="radio" name="sex" value="" checked="checked"/>提示符
    多选框:<input type="checkbox" name="" value="" checked="checked"/> 提示文字
    隐藏文本:<input type="hidden" name="" value=""/>
    上传文件:<input type="file" name=""/>
       </fieldset>
    
    下拉列表：<select name="" size="显示个数">
    			<optgroup lable="四川省">
                   <option value="成都">成都</option> 
                   <option value="南充" selected="selected">南充</option>
    			</optgroup>
            </select>
    文本域:<textarea name="" rows="" cols="" readonly="readonly"></textarea>
    提交按钮:<input type="submit" value=""/>
    重置按钮:<input type="reset" value=""/>
    普通按钮:<input type="button" value=""/>
    图片按钮：<input type="image" src="" alt="图片加载失败"/>
    按钮图片：<button type="submit"><img src="" alt="" title="提交"/></button>
</form>

页面框架

框架一般用于写后台页面的时候用

定义框架

<frameset rows="20%,*"> 纵向 
    <frame src="页面路径" noresize="noresize" frameborder="0" scrolling=""/>
	<frame src="页面路径" name="right"/>
</frameset>
<frameset cols="30%,60%,*"> 横向 </frameset>
<noframes>
	<body>浏览器不支持</body>
</noframes>

left.html: <a href="right2.html" target="right">美女</a> right是右侧框架的名称

导入框架

<frame src="页面路径" frameborder="0" scrolling="auto 可需|yes|no"/>	或
<iframe src="页面路径" frameborder="0" scrolling="" width="" height=""></iframe>

3. GET、POST

GET 请求和 POST 请求的区别：

在客服端的区别

区别	GET	POST
是否显示	提交的信息都`显示`在地址栏中	提交的信息`不显示`地址栏中
封装位置	将信息封装到了请求消息的请求行中	将信息封装到了请求体中
安全性	对于敏感的数据信息`不安全`	对于敏感信息`安全`
数据体积	对于`大数据不行`，因为地址栏存储体积有限，大小不超过4KB	可以提交`大体积数据`
速度	相对较快	相对较慢

1. 在服务端的区别（乱码处理方式）
  
  如果提交中文到 tomcat 服务器会出现乱码，服务器默认会用 iso-8859-1 进行解码，解决方法：
  1. 对 get 提交和 post 提交都有效
    1. 通过 iso-8859-1 进行编码，再用指定的中文码表解码即可
    2. 用 URLDecoder.decode(user,“utf-8”)
    3. 修改 tomcat 的配置文件 server.xml：加上 URIEncoding="UTF-8"
```
<Connector port="8080" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" URIEncoding="UTF-8"/>
```
  2. 对于 post 提交，还有另一种解决办法，就是直接使用服务端一个 request 对象
    
    request 对象的 setCharacterEncoding 方法直接设置指定的中文码表就可以将中文数据解析出来。这个方法只对请求体中的数据进行解码
```
// 在获取数据之前，设置请求的字符编码集
request.setCharacterEncoding("UTF-8");
```

和服务端交互的三种方式

位置	请求方式
地址栏输入 url 地址	get
超链接	get
表单	get 和 post

数据校验

	`客服端`校验	`服务端`校验
是否校验	如果在客户端进行`增强型`的校验 (只要有一个组件内容是错误，是无法继续提交的, 只有全对才可以提交)	服务端收到数据后，也还需要校验
校验目的	提高用户的`上网体验`效果，`减轻服务器端的压力`	为了`安全性`

2. CSS

CSS：层叠样式表。 HTML 定义网页的内容，CSS 定义内容的样式

CSS 的注释：/* 注释内容 */

1. 样式

行内样式 style

<p style="[属性样式] font-size:18px;background-image:url(.....);" ></p>

内嵌样式

<head>
    <title></title>
    <style type="text/css">
    	选择器{属性样式}
    </style>
</head>

外联样式 link

<head>
    <title></title>
	<link href="样式路径" rel="stylesheet" type="text/css"/>
</head>

2. 选择器

优先级：id 选择器 > 类选择器 > 标签选择器

id 选择器 #

#name{ background-color:red; width:500px; }

class 选择器 .
```
.name1{ 样式属性 }
```

标签选择器

h1{ font-size:36px;color:red;} /*页面所有的 h1 标记里的字体大小为 36px,颜色为红色*/

组合选择器

h1 a li{ font-size:36px;color:red; } /*所有h1下的a下的li里的字体大小为36px,颜色为红色*/

通配符选择器

*{样式属性} /* 整个页面所有的内容都具有的样式 */

3. 布局

漂浮 float

Float:none|left|right      浮动
Clear:none|left|right|both 清除浮动

定位 position

定位的原则：先相对定位，再绝对定位

position:relative; 相对定位，不脱离文档流
position:absolute; 绝对定位，脱离文档流
具体位置设置：top,left,right,bottom
z-index:数值越大，越在上层

4. 样式属性

标签转换

display:block;  行 转 块
display:inline; 块 转 行
display:none;   隐藏

尺寸、溢出、鼠标变手型

width:100px;固定宽
min-width:100px;最小宽度
max-width:100px;最大宽度

cursor:pointer;鼠标变手型
overflow:hidden/visible/scroll/auto;隐藏/显示/始终出现滚动条/需要时才出现滚动条

字体/文本

Font-style:normal/italic(斜体)
Font-size:24px;
Font-family:宋体/楷体
Font-weight:bold/bolder/lighter
Color:字体颜色

Line-height:行高
Letter-spacing:字间距
word-spacing:词间距
Text-decoration:none/underline/overline/line-through;无修饰/下划线/上划线/贯穿线
Text-transform:uppercase/lowercase/capitalize; 大写/小写/首字母大写
Text-indent:文本缩进
Text-align:left/right/center

背景 transparent：透明

Background-color:背景颜色 透明 transparent
Background-image:背景图片
Background-repeat:repeat|no-repeat|repeat-x|repeat-y 重复
Background-position:背景位置

边框

样式：border-style:solid;
颜色：border-color:red;
宽度：border-width:2px;
简写：border:2px solid red;

border-top-width:3px;
border-top-style:dashed;
border-top-color:#000;

border-width:2px; 一值(四边) 两值(上下 左右) 三个值(上 左右 下) 四个值(上 右 下 左)

边距 Margin、Padding

内边距:当前标记和当前标记里的内容区域之间的距离
    Padding 两值(上下 左右) 三个值(上 左右 下) 四个值(上 右 下 左)
        Padding-top:
        Padding-left:
        Padding-right:
        Paddding-bottom: 
外边距:当前标记与该标记之外的内容的区域之间的距离
	Margin

列表

list-style-image;
list-style-position;
list-style-type：disc/circle/square/decimal/none;
list-style：none;取消列表样式

5. 伪类

a:link{当连接被访问之前的样式}
a:visited{当连接被访问之后的样式}
a:hover{当鼠标悬浮在连接之上时的样式}
a:active{当连接点击与释放的瞬间的样式}
a:focus{获得焦点}

3. JavaScript

1. JavaScript 概述

JavaScript 是基于对象和事件驱动的脚本语言，主要应用在客户端

javascript 是由上到下解析的，浏览器会按照编写的顺序执行每条语句

JS注释：// 单行注释 、/**/ 多行注释

特点：

交互性(它可以做的就是信息的动态交互)
安全性(不允许直接访问本地硬盘)
跨平台性(只要是可以解释 Js 的浏览器都可以执行，和平台无关)

JavaScript 与 Java 不同

Js 是基于对象，Java 是面向对象
Js 只需解释就可以执行，Java 需要先编译成字节码文件，再执行
Js 是弱类型，Java 是强类型

JavaScript 可以做什么？

写入 html 输出（把 html 标签写入 html 页面）
对事件做出反应
改变 html 内容
改变 html 图像
改变 html 样式
验证输入

Js 和 HTML 相结合的方式

将 javascript 代码封装到<script>标签中

<head>
    <title></title>
	<script type="text/javascript">
        // js代码
    </script>
</head>
或放在<body><script></script></body>

将 javascript 代码封装到 js 文件中，并通过<script>中的 src 属性进行导入

注意：如果<script>标签中使用 src 属性，那么该标签中封装的 javascript 代码不会被执行，
所以通常导入 js 文件都是用单独<script>来完成。格式：
```
<script type="text/javascript" src="xxx.js"></script> 
```

2. JavaScript 语法

1. 变量

变量的命名规则：

变量通常以字母开头
变量也能以$和符号开头（不推荐这么做）
变量名对大小写敏感（y 和 Y 是两个不同的变量）

变量（数据类型）：Number、Boolean、String、Object、Array、Object、null、undefined

全局变量：在<script></script>标签中直接声明的变量
局部变量：在方法中声明的变量

javascript 拥有动态类型，即是相同的变量可用作不同的类型（弱数据类型）,由等号右边的值来决定变量的数据类型。

例如:
var x; 				// 此时 x 是 Undefined 数据类型。
var x = 6; 			// x 是数字类型
var x = "bochy"; 	// x 是 String 类型

注意：

js 中定义变量，使用 var 关键字
如果把值赋给尚未声明的变量(没用 var 声明)，该变量将自动作为全局变量声明，即使他在函数内
undefined：未定义，其实它是一个常量
typeof ：判断具体的值的数据类型

2. 运算符

类型	运算符
算术运算符	+ - * / % ++ –
赋值运算符	= += -= *= /= %=
比较运算符	> < >= <= != == `===(全等)`
逻辑运算符	&&(与) \|\|(或) ! (非)
位运算符	& (与) \|(或) ^(异或) >>(右移) <<(左移) >>>(无符号右移)
三元运算符	? :

3. 语句

顺序结构
判断结构：if-else
选择结构：switch

循环结构：for、while、do_while、for…in(用于数组或者对象)

for(var 新变量 in 循环的变量){ 
    //要执行的循环语句 
}

特有语句：with

异常语句：try/catch、throw

try{
    if(条件) throw "可能出现异常的代码块的具体异常";
}catch(e){ //处理异常的代码 }

4. 对象

常用对象有：String、Array、Date、Math、Number、Global、自定义对象

Number 对象：javascript 只有一种数字类型，数字可以带小数点，也可以不带
1. 定义方法
```
var a1 = 12; 
var a2 = 12.2;
var a3 = new Number(12);
```

Boolean 对象

定义方法

var b1 = new Boolean(); // 默认为false
var b2 = new Boolean(true); //true
var b3 = true;

String 对象

定义方法

var str1 = "hello";
var str2 = new String("hello");
var str3 = new String();
str3 = "hello";

属性（constructor、length、prototype 原型属性）

var str = "www.bochy.COM.cn";
var len = str.length;

方法（toString、valueOf）

toUpperCase();			// 转成大写
toLowerCase();			// 转成小写
charAt(index);			// 下标处的字符
indexOf("o");			// 首次出现的下标
substr(start,length);	// 从start处截取length长度的字串
substring(start,end);	// 截取字串 [start,end)
split(".");         	// 分割
valueOf(var)			// 转为字符串对象
test("正则表达式字符串");  // 使用正则表达式进行校验

Array 对象

特点：1.长度是可变的 2.元素类型是任意的，建议存储同一类型的元素，操作起来比较方便

定义方法

var arr1 = new Array(); // 相当于 Var arr = []
arr1[0] = "a1";
var arr2 = new Array(12,13,14,15);
var arr3 = [12,13,14,15];

属性（constructor、length、prototype）

方法

contact();	// 连接
join();		// 加入
pop();		// 删除最后一个
shift();	// 删除第一个
push();		// 添加
splice();	// 删除并替换
unshift();	// 插入第一个

Object 对象

定义方法

var per1 = {"name":"李四","age":22};
var per2 = new Object();
per2.name = "张三"; //设置对象的属性和值
per2.age = 20;

Date 对象

var d = new Date();
var year = d.getFullYear();		// 获取年
var month = d.getMonth()+1;		// 获取月份
var date = d.getDate(); 		// 获取日期
var hour = d.getHours();		// 获取小时
var minute = d.getMinutes(); 	// 获取分钟
var second = d.getSeconds();	// 获取秒数
var day = d.getDay();			// 获取星期值
var ms = d.getMilliseconds(); 	// 获取毫秒

Math 对象

Math 对象不能用 new 关键字创建，如果试图这样做会给出错误。

该对象在装载脚本引擎时，由该引擎创建。其方法和属性在脚本中总是可用

ceil(); 	  // 返回大于等于其数字参数的最小整数。
floor(); 	  // 返回小于等于其数值参数的最大整数。
max();min();  // 求最大值，最小值
random();     // 随机数, [0,1)

Global 对象
1. 方法
```
isNaN();	// 是否非法
```
自定义对象

5. 函数

分类：一般函数、匿名函数、动态函数

函数：就是一个功能的封装体

一般函数格式

function 函数名(参数列表){
    // 函数体：
    return 返回值; //如果没有具体的返回值，return 语句可以省略不写。
}

函数细节：

只要使用函数名就是对函数的调用
函数中有一个数组arguments在对传入的参数进行存储

动态函数

动态函数：使用 js 中的内置对象 Function，用的不是很多。参数列表，函数体都是通过字符串动态指定的
```
var add = new Function("x,y","var sum; sum=x+y; return sum;"); // 参数列表，函数体
```
匿名函数

匿名函数：没有名字的函数，函数的简写形式
```
var add3 = function (a,b){return a+b;}
```

6. 事件

常用事件

onblur="" 	// 失去焦点
onfocus="" 	// 获取焦点
onchange="" // 域的内容被改变
onsubmit="" // 提交按钮事件
onclick=""  // 单击事件
onmousemove="" // 进入某个元素移动
onmouseover="" // 鼠标悬停
onmousedown="" // 鼠标按下
onmouseup=""   // 鼠标松开
onmouseout=""  // 鼠标移出某个元素

表单的属性

类型	属性
文本	readonly=“readonly” 只读
复选框/单选框	`checked` 是否选中 value 属性值
下拉列表	value：获取值 `options`：所有的值 `selectedIndex`：返回被选择的选项的索引号，选中第一个返回 0，第二个返回 1

事件简单应用

复选框

function func_checkbox(){
	var myform = document.forms["myform"]; // 通过表单的name获得表单form对象
    var loves = myform.loves;	// 通过form对象获得loves属性,返回的是数组
    alter(loves.length);		// 使用弹窗，输出数组的长度
}

单选框

function func_radio(){
	var myform = document.forms["myform"]; // 通过表单的name获得表单form对象
    var sex_value = myform.sex.value;// 通过form对象获得被选中sex属性值,返回的是字符串
    alter(sex_value);				 // 使用弹窗，输出属性值
}

7. JS 的 DOM 操作

document 是 html 文本对象

常用 DOM 操作

var img =document.getElementById("id 名");			// 根据 id 获取 html 节点
var img =document.getElementsByName("属性的name值");  // 根据 name 获取 html 节点
var img =document.getElementsByTagName("标签名");	   // 根据标签名获取 html 节点
document.getElementById("id 名").value; 		// 获得 id 标签的值
document.getElementById("id 名").innerHTML; 	// 将内容写入到 id 标签中
document.write("hello"); 					 // 将 hello 写入到 html 页面

img.setAttribute("属性名","属性值");// 设置某个属性的值
img.getAttribute("属性名");		// 获取某个属性的值

var p = document.createElement("p");			// 创建元素节点
var m = document.createTextNode("段落里面的内容");	// 创建文本内容
p.appendChild(m);								// 把文本内容放到 p 标签中
p.removeChild(p1);								// 删除 p 的子节点
document.body.appendChild(p);					// 将 p 标签放入文档中

使用 HTML DOM 来分配事件

window.onload=function(){
    document.getElementById("username").onfocus=function(){
    	alert("请输入名字");
    }
}

8. JS 的 BOM 操作

浏览器对应的对象就是 window 对象，内置对象直接使用

window 对象的属性
1. document 文档对象（每个载入浏览器的 html 文档都会成为 document 对象）
```
document.write("hello"); 					 // 将 hello 写入到 html 页面
```
2. location 地址对象（包含当前 url）
```
window.location.herf = "url";
```
3. history 历史对象（包含客户访问过的 url 信息）
```
window.history.back(); // 退回到上一步
```

window 对象的方法

alert();	// 警告提示框
confirm();	// 选择提示框
prompt();	// 输入提示框
onload      //加载就绪

var ID = setInterval("函数名()",周期毫秒值); // 周期性
clearInterval(setInterval()返回的ID值);		// 跳出周期性函数
setTimeout,clearTimeout

3. BOM

BOM(Browser Object Model)： 浏览器对象模型，用于操作浏览器

浏览器对应的对象就是 window 对象，可通过查阅 dhtml api 获得

Window 对象常用方法：

alert();			 // 弹窗
confirm();			 // 弹窗确认
setTimeOut();		 // 超时事件
setInterval();
clearInterval();

常用对象：

Location 对象
Document 对象

4. DOM

DOM(Document Object Model)：文档对象模型，用来将标记型文档封装成对象，并将标记型文档中的所有的内容(标签，文本，属性等)都封装成对象。

封装成对象的目的：是为了更加方便操作这些文档以及文档中的所有内容。因为对象的出现就可以有属性和行为可被调用
常见的标记型文档：html xml

1. DOM 解析

只要是标记型文档，DOM 这种技术都可以对其进行操作

要操作标记型文档必须对其进行解析

解析方式：

DOM 解析方式

将标记型文档解析一棵 DOM 树，并将树中的内容都封装成节点对象

优缺点：
1. 优点：可以对树中的节点进行任意操作，比如：增删改查
2. 缺点：要将整个标记型文档加载进内存，意味着若标记型文档的体积很大，较为浪费内存空间
SAX 解析方式

SAX：基于事件驱动的解析

SAX 是由一些民间组织定义的解析方式，并不是 w3c 标准，而 DOM 是 W3C 的标准

优缺点：获取数据的速度很快，但是不能对标记进行增删改。

2. DHTML

DHTML：动态的 HTML，不是一门语言，是多项技术综合体的简称

DHTML中包含了 HTML，CSS，DOM，Javascript

HTML：负责提供标签，对数据进行封装，目的是便于对该标签中的数据进行操作。

简单说：用标签封装数据。
CSS：负责提供样式属性，对标签中的数据进行样式的定义。

简单说：对数据进行样式定义
DOM：负责将标签型文档及文档中的所有内容进行解析，并封装成对象，在对象中定义了更多的属性和行为，便于对对象操作。

简单说：将文档和标签以及其他内容变成对象。
JS：负责提供程序设计语言，对页面中的对象进行逻辑操作。

简单说：负责页面的行为定义。就是页面的动态效果。

所以 javascript 是动态效果的主力编程语言。

AJAX = DHTML + XMLhttpRequest

5. 正则表达式

常用的正则表达式:（/^是开始标记，$/是结束标记）

1. 验证邮箱： /^[_a-z0-9]+@([_a-z0-9]+\.)+[a-z0-9]{2,3}$/
2. 验证 IP 地址： /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/g 注：g 只是正则选项，不属于匹配内容
3. 验证手机号码： /^[1][3][0-9]{9}$/
4. 验证带区号的电话号码: /^[0][1-9]{2,3}-[0-9]{5,10}$/
5. 验证不带区号的电话号码: /^[1-9]{1}[0-9]{5,8}$/
6. 验证是否是整数: /^[-]{0,1}[0-9]{1,}$/
7. 检查输入字符串是否是带小数的数字格式,可以是负数: /^[-]{0,1}(\d+)[\.]+(\d+)$/
8. 检查输入字符串是否只由英文字母和数字和下划线组成: /^[0-9a-zA-Z\_]+$/
9. 验证年龄: /^[0-9]{1,3}$/
10. 验证数字: /^\d*\.?\d+$/

简单应用：

function is_age(){
	var ageRegExp = /^[0-9]{1,3}$/; // 注意：不要加""
    var age = document.getElementById("age"),value; // 获取表单中的值
    if(ageRegExp.test(age)){
       document.getElementById("age_info").innerHTML = "年龄正确";
    }else{
       document.getElementById("age_info").innerHTML = "请输入1-3位的数字";
    }
}

4. JQuery

1. JQuery 简介

JQuery 是一个 JavaScript 的函数库

JQuery 函数库包含哪些特性？

html 元素选取
html 元素操作
css 操作（获取和修改）
html 事件操作（各种事件，在 JQuery 里面做了封装）
html DOM 操作
ajax

2. JQuery 语法

JQuery 语法是为 html 元素选取编制，可以对元素执行某些操作

基础语法：$：表示 JQuery

$(selector).action(); // selector 是选择器，action 是动作

文档就绪函数：

作用：为了防止文档在未完全加载之前运行 JQuery 代码

$(document).ready(function(){
	//JQuery 代码
});

简写形式：
$((function(){
	//JQuery 代码
});

JQuery 是为事件处理特别设计的函数库，当你遵循以下原则时，你写的代码会更恰当且更易于维护：

把所有的 jquery 代码置于事件处理函数中
把所有事件处理函数都置于文档就绪函数中
把 jquery 代码置于单独的 js 文件中

3. JQuery 选择器

在 HTML DOM 中允许对 DOM 元素组或者单个节点进行操作，而在 JQuery 中有很多选择器

元素选择器

$("p"); 		// 选择<p>元素
$("p.intro");	// 选取所有 class="intro"的所有 p 元素
$("p#demo");	// 选取 id="demo"的第一个 p 元素

属性选择器

$("[href]"); 		 // 选取所有带有 href 属性的元素
$("[href='#']"); 	 // 选取所有带有 href 属性且 href 的值等于#的元素
$("[href!='#']"); 	 // 选取所有带有 href 属性且 href 的值不等于#的元素
$("[href$='.jpg']"); // 选取所有 href 值以.jpg 结尾的元素

4. 事件/效果/CSS 函数

JQuery 事件

$(document).ready(function(){}); 		// 文档的就绪事件
$(selector).click(function(){}); 		// 被选元素的单击事件
$(selector).dblclick(function(){}); 	// 被选元素的双击事件
$(selector).focus(function(){}); 		// 被选元素的获取焦点事件
$(selector).mouseover(function(){}); 	// 被选元素的鼠标悬停事件

JQuery 效果

$(selector).hide(); 		// 隐藏被选元素
$(selector).show(); 		// 显示被选元素
$(selector).toggle(); 		// 切换（在隐藏与显示之间）被选元素
$(selector).slideDown(); 	// 向下滑动（显示）被选元素
$(selector).slideUp(); 		// 向上滑动（隐藏）被选元素
$(selector).slideToggle(); 	// 切换（在隐藏与显示之间）被选元素
$(selector).fadeIn(); 		// 淡入被选元素
$(selector).fadeOut(); 		// 淡出被选元素
$(selector).fadeToggle(); 	// 切换

JQuery CSS 函数

$(selector).css(name,value); // 为所有匹配元素的给定 css 属性设置值。
$(selector).css(properties); // 为所有匹配元素的一系列 css 属性设置值。
$(selector).css(name); 		 // 返回指定的 css 的值
$(selector).width([val]); 	 // 获取/设置所有匹配元素的宽度
$(selector).height([val]); 	 // 获取/设置所有匹配元素的高度

5. JQuery 的 DOM 操作

类（Class 选择器的 css 样式）

addClass(类名); 		// 向匹配的元素添加指定的类名
removeClass(类名); 	// 删除匹配元素的类
toggleClass(类名); 	// 没有就添加类，有就删除类

属性

attr(); 				  // 设置/获取属性
removeAttr(要删除的属性名);  // 删除匹配元素某一个属性

内容

append(); 	// 向匹配的元素内部添加内容
after(); 	// 向匹配的元素之后添加内容
before(); 	// 向匹配的元素之前添加内容

其他

remove(); 	// 删除所有匹配的元素
html(); 	// 取得第一个匹配元素的 html 内容
text(); 	// 取得所有匹配元素的内容.结果是由所有匹配元素包含的文本内容组合起来的文本
val(); 		// 获取匹配元素的当前值
empty(); 	// 删除匹配的元素集合中所有的子节点。(包括文本节点)

5. Ajax 异步交互

1. Ajax 概述

Ajax：不用刷新整个页面便可与服务器通讯的办法

传统 Web 与 Ajax 的差异

差异	传统 Web	Ajax
发送请求方式	提交表单方式发送请求	异步引擎对象发送请求
服务器响应	响应内容是一个`完整页面`	响应内容只是`需要的数据`
客服端处理方式	`需等待`服务器响应完成，`并重新加载整个页面`后，用户才能进行操作	可以`动态更新`页面中的`部分内容`，用户可以`不需等待`请求的响应

Ajax 执行过程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EGnpELXS-1648561406717)(link-picture\image-20220114145756983.png)]

2. XMLHttpRequest 对象

XMLHttpRequest：Ajax 的核心对象

该对象是对 JavaScript 的一个扩展，可使网页与服务器进行通信，是创建 Ajax 应用的最佳选择。实际上通常把 Ajax 当成 XMLHttpRequest 对象的代名词

XMLHttpRequest 对象

XMLHttpRequest 的常用方法

						   // method为GET/POST,url为相对URL或绝对URL。第3个是可选参数
open(“method”,”url”，...); // 建立对服务器的调用
send(content);			   // 向服务器发送请求
setRequestHeader("label", "value");// 设置请求头的值，设置任何头部之前必须先调用 open()

XMLHttpRequest 的常用属性

onreadystatechange：事件处理函数
1. 该事件处理函数由 ajax 框架触发，而不是用户在 Ajax 执行过程中触发，
2. 触发后，服务器会通知客户端当前的通信状态，
  
  这依靠更新 XMLHttpRequest 对象的 readyState 来实现。改变 readyState 属性是服务器对客户端连接操作的一种方式。
3. 每次 readyState 属性的改变都会触发 onreadystatechange 事件。

readyState：表示 Ajax 当前的请求状态

它的值用数字代表：

readyState 值	含义
0	代表`未初始化`，还没有调用 open 方法
1	代表`正在加载`，open 方法已被调用，但 send 方法还没有被调用
2	代表`已加载完毕`，send 已被调用，请求已经开始
3	代表`交互中`，服务器正在发送响应
4	代表`响应完成`，响应发送完毕

每次 readyState 值的改变，都会触发 onreadystatechange 事件。如果把 onreadystatechange 事件处理函数赋给一个函数，那么每次 readyState 值的改变都会引发该函数的执行。readyState 值的变化会因浏览器的不同而有所差异。但是，当请求结束的时候，每个浏览器都会把 readyState 的值统一设为 4。

Status：状态码

服务器发送的每一个响应也都带有头部信息。三位数的状态码是服务器发送的响应中最重要的头部信息，并且属于超文本传输协议中的一部分。常用状态码及其含义：

状态码	含义
200	一切正常(ok)
304	没有被修改（服务器返回 304 状态，表示源文件没有被修改）
400	错误请求，如语法错误
403	禁止访问(forbidden)
404	没找到页面(not found)
500	内部服务器出错(internal service error)

在 XMLHttpRequest 对象中，服务器发送的状态码都保存在 status 属性里。通过把这个值和 200 或 304 比较，可以确保服务器是否已发送了一个成功的响应。

statusText：返回当前请求的响应状态
服务器的响应内容
1. responseText：从服务器返回的普通文本数据
2. responseXML：从服务器返回的是 XML。MIME 类型必须为 text/xml
它是一个 HTML，XML 或普通文本，这取决于服务器发送的响应内容。

注意：
1. 只有Ajax 的请求状态 readyState 值为 4 时, responseText/responseXML 属性才可用，表明 Ajax 请求已经结束。
2. 只有服务器发送了带有正确头部信息的数据(Status=200)时，responseText/responseXML 属性才是可用的。

3. JavaScript 的 Ajax 异步交互

浏览器端

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>JavaScript 的 Ajax 请求</title>
    </head>
    <body>
        <label>用户名:</label>
        <input name="userName" id="userName" onblur="checkUserExist()"/>
        <label id="NameMsg"></label>
        
        <script type="text/javascript">
            var xmlHttpRequest; 			  // 定义 XMLHttpRequest 对象
            function createXmlHttpRequest() { // 建立 XMLHttpRequest()对象
                if (window.ActiveXObject) {	  // 解决浏览器的兼容问题
                	return new ActiveXObject("Microsoft.XMLHTTP");
                } else if (window.XMLHttpRequest) {
                	return new XMLHttpRequest();
                }
            }
            function checkUserExist(){ //发起 ajax 请求
                var userName = document.getElementById('userName');
                var NameMsg = document.getElementById('NameMsg');
                if(userName.value == null || userName.value == ''){
                    NameMsg.innerHTML = '用户名不能为空';
                    userName.focus();
                    return;
                }else{
                	NameMsg.innerHTML = '';
                }					  // encodeURIComponent 是JQuery的方法
                var param = 'userName='+ encodeURIComponent(userName.value);
                var url = '${pageContext.request.contextPath}/servlet/UserServlet';
                // 1.创建 xmlhttprequest 对象
                xmlHttpRequest = createXmlHttpRequest(); 
                // 2.设置回调函数
                xmlHttpRequest.onreadystatechange=callback;
                // 3.建立连接 open
                xmlHttpRequest.open('POST', url);		   
                // 4.设置请求头
                xmlHttpRequest.setRequestHeader('Content-Type', 
                                           "application/x-www-form-urlencoded");
                // 5.发送请求 send
                xmlHttpRequest.send(param); 
            }
            //处理 ajax 请求的结果
            function callback(){ 
                if(xmlHttpRequest.readyState == 4){ //完成
                    if(xmlHttpRequest.status == 200){ //成功
                        var result = xmlHttpRequest.responseText; //响应的返回值
                        var NameMsg = document.getElementById('NameMsg');
                        if("true" == result){ // 被占用
                        	NameMsg.innerHTML = '用户名被占用';
                        }else{
                        	NameMsg.innerHTML = '用户名可用';
                        }
                    }
                }
            }
        </script>
    </body>
</html>

服务器端

获取浏览器端发过来的参数并作出响应

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
    String userName = request.getParameter("userName"); //参数是写在 uri 中的
    if(userName != null){
        //uri 默认的编码方式是 ISO8859-1
        userName = new String(userName.getBytes("ISO8859-1"),"UTF-8");
    }
    System.out.println(userName);
    response.setContentType("text/html;charset=utf-8");
    PrintWriter out = response.getWriter();
    if("jacky".equals(userName) || "张三".equals(userName)){
    	out.print("true");
    }else{
    	out.print("false");
    }
    out.flush();
    out.close();
}

4. JQuery 的 Ajax 异步交互

传统方式 JavaScript 实现 Ajax 的不足

方法、属性、常用值较多，不易记忆
实现步骤繁琐
还有浏览器兼容问题

1. JQuery 的 Ajax

语法：
```
$.ajax([参数]);
```

常用参数

属性名	说明
String url	发送请求的地址，默认为`当前页面地址`
String type	请求方式：POST/POST，默认GET
String headers	请求头
String accepts	通过请求头发送给服务器，告诉服务器当前`客户端可接受的数据类型`
String data或Object data	发送到服务器的数据
String contentType	发送信息至服务器的`内容编码类型`，默认： “application/x-www-form-urlencoded; charset=UTF-8”
String dataType	将服务器端返回的数据转换成指定类型，包括XML、HTML、Script、JSON、JSONP、text
Boolean async	是否异步，默认为true
Boolean `global`	是否触发全局Ajax事件，默认为true
Number `timeout`	设置请求超时时间
function beforeSend(XMLHttpRequest xhr)	`发送请求前`的回调函数，参数可选
function complete(XMLHttpRequest xhr,String st)	`请求完成后`的回调函数，参数可选
function success(Object result,String st)	`请求成功后`的回调函数，参数可选
function error(XMLHttpRequest xhr,String st,Exception e)	`请求失败时`的回调函数，参数可选

服务器端返回数据后转换类型（contentType）：

转换后类型	含义
xml	将服务器端返回的内容转换成 `xml 格式`
text	将服务器端返回的内容转换成`普通文本格式`
html	将服务器端返回的内容转换成`普通文本格式`，在插入 DOM 中时，如果包含 JavaScript 标签，则会尝试去执行
script	尝试将返回值当作 JavaScript 去执行，然后再将服务器端返回的内容转换成普通文本格式
json	将服务器端返回的内容转换成相应的 JavaScript 对象
jsonp	JSONP 格式使用 JSONP 形式调用函数时，如 “`myurl?callback=?`” ，jQuery 将`自动替换 ? 为正确的函数名，以执行回调函数`

常用方法

$.ajax();
$.get(); 
$.post();
$.getJSON();
load();

ajax：get、post都可以用 ajax 代替

$.ajax(
    url:url,
    type:"get", //1.9.0之后用method
    data:data,
    dataType:"txt",
    success:function(result){},
    error:function(){}
);

load：加载函数 可用 get 代替

$("#nameDiv").load(url,data);

等价于
$.get(url,data,function(result){
    $("#nameDiv").html(result);
})
等价于
$.ajax(
    url:url,
    type:"get",
    data:data,
    dataType:"txt",
    success:function(result){
    	// 处理服务器返回来的数据
	}
);

getJSON： 可用 ajax 代替

$.getJSON(url,data,success(result){
	// 处理服务器返回来的数据
});

等价于
$.ajax(
    url:url,
    type:"get",
    data:data,
    dataType:"json",
    success:function(result){
    	// 处理服务器返回来的数据
	}
);

5. JSON 的 Ajax 异步交互

客服端的 JSON 的使用

客服端使用 JQuery 的 getJSON() 方法发起请求

$.getJSON(url,data,success(result){
	// 处理服务器返回来的数据
});

服务端的 JSON 的使用

服务端使用 json-lib 类库，将要返回的数据转换成 JSON，或者反向转换。

json-lib：是一个 java 类库，提供将 Java 对象(包括 bean,map,collection,array,XML等)转换成 JSON，或者反向转换的功能。

使用 json-lib ，执行环境需要其他类库支持

ajax 代替`

  ~~~js
  $.ajax(
      url:url,
      type:"get", //1.9.0之后用method
      data:data,
      dataType:"txt",
      success:function(result){},
      error:function(){}
  );
  ~~~

load：加载函数 可用 get 代替

$("#nameDiv").load(url,data);

等价于
$.get(url,data,function(result){
    $("#nameDiv").html(result);
})
等价于
$.ajax(
    url:url,
    type:"get",
    data:data,
    dataType:"txt",
    success:function(result){
    	// 处理服务器返回来的数据
	}
);

getJSON： 可用 ajax 代替

$.getJSON(url,data,success(result){
	// 处理服务器返回来的数据
});

等价于
$.ajax(
    url:url,
    type:"get",
    data:data,
    dataType:"json",
    success:function(result){
    	// 处理服务器返回来的数据
	}
);

5. JSON 的 Ajax 异步交互

客服端的 JSON 的使用

客服端使用 JQuery 的 getJSON() 方法发起请求

$.getJSON(url,data,success(result){
	// 处理服务器返回来的数据
});

服务端的 JSON 的使用

服务端使用 json-lib 类库，将要返回的数据转换成 JSON，或者反向转换。

json-lib：是一个 java 类库，提供将 Java 对象(包括 bean,map,collection,array,XML等)转换成 JSON，或者反向转换的功能。

使用 json-lib ，执行环境需要其他类库支持