web前端

Web前端知识点总结

1. B/S架构资源

静态资源:使用静态网页开发技术发布的资源

  • 所有用户访问,得到的结果是一样的。
  • 如:文本,图片,音频、视频, HTML,CSS,JavaScript。
  • 如果用户请求的是静态资源,那么服务器会直接将静态资源发送给浏器。
  • 用HTML搭建基础网页, 用CSS美化、布局页面,用JavaScript控制页面的元素,让页面有动态效果。

动态资源:使用动态网页及时发布的资源

  • 所有用户访问,得到的结果可能不一样。
  • 如:jsp/servlet,php,asp…。
  • 如果用户请求的是动态资源,那么服务器会执行动态资源,转换为静态资源,再发送给浏览器。

2. HTML

1
Hyper Text Markup Language 超文本标记语言,是最基础的网页开发语言

超文本:用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本

标记语言:由标签<标签名称> 构成的语言,如html、xml,不属于编程语言。

标签:标签可以嵌套,不区分大小写,建议用小写,分为两类:

  • 围堵标签:有开始标签和结束标签。如
  • 自闭标签:开始标签和结束标签在一起。如 < br/>
标签 说明 属性
< html> 文档的根标签
< head> 头标签,用于指定html文档的一些属性,引入外部的资源
< title> 标题标签
< body> 体标签
< !DOCTYPE html > html5中定义该文档是html文档
< !– 注释内容 – > 注释
< h1> to < h6> 标题标签,h1到h6字体大小逐渐递减
< p> 段落标签
< br/> 换行标签
< hr> 展示一条水平线 color/width/size/align
< b> 字体加粗
< i> 字体斜体
< font> 字体标签 color/face/size
< center> 文本居中
< img src=” “ alt=” “> 展示图片(src为图片URL,alt为图片替代文本) align/height/width
< ol> < li>< /li> < /ol> 有序列表 type
< ul> < li>< /li> < /ul> 无序列表 type
< a href=””>< /a> 超链接标签 target( _self/ _blank)
< div> 块级标签
< span> 行内标签
< header> 页眉
< footer> 页脚

超链接的功能:1. 生成可以被点击的样式; 2. 点击后跳转到href指定的url

若需要保留1功能,去掉2功能,则:href = "javascript:void(0)"

3. 表格标签

table:定义表格

  • width:宽度
  • border:边框
  • cellpadding:定义内容和单元格的距离
  • cellspacing:定义单元格之间的距离。如果指定为0,则单元格的线会合为一条
  • bgcolor:背景色
  • align:对齐方式

tr:定义行

  • bgcolor:背景色
  • align:对齐方式

td:定义单元格

  • colspan:合并列
  • rowspan:合并行

th:定义表头单元格

4. 表单标签

1
用于采集用户输入的数据,和服务器进行交互的标签。

action:指定提交数据的URL,若是写一个#,那么就是提交到本页面

method:指定提交方式,表单项中的数据要想被提交,必须指定其name属性

  • get:请求参数会在地址栏中显示,参数大小不能超过255, 不太安全

  • post:请求参数不会在地址栏中显示,参数的大小没有限制,多用于提交视频和图片,比较安全

    input:可以通过type属性值,改变元素展示的样式

  • text:文本输入框,默认值(参数placeholder:指定输入框的提示信息)

  • password:密码输入框

  • radio:单选框,多个单选框的name属性值必须一样,在value属性中指定其被选中后提交的值

  • checkbox:在value属性中指定其被选中后提交的值

  • file:文件选择框

  • hidden:隐藏域,用于提交一些信息,不需要用户输入

  • submit:提交按钮,可以提交表单

  • image:图片提交按钮,src属性指定图片的路径

label:label的for属性一般会和input的id属性值对应。点击label区域,会让对应的input输入框获取焦点

select:下拉列表,子元素option为指定列表项

textarea:文本域,cols:指定列数, rows:默认多少行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FormTest</title>
</head>
<body>

<form action="#" method="get">
姓名:<input type="text" placeholder="请输入姓名" name = "username"> <br>
密码:<input type="password" placeholder="请输入密码" name="password"> <br>
性别:<input type="radio" name = "gender" value="男">
<input type="radio" name = "gender" value="女"><br>
爱好:<input type="checkbox" name = "hobby" value = 1> 小米
<input type="checkbox" name = "hobby" value = 2> 华为
<input type="checkbox" name = "hobby" value = 3> 锤子<br>
<label for="file">文件</label><input type="file" id="file"><br>
隐藏:<input type="hidden"><br>
提交:<input type="submit" value="提交"><br>
图片提交:<input type="image" src="baidu.png"><br>
地区:<select name="place" id="place" ><br>
<option>请选择地区</option>
<option value ="北京">北京</option>
<option value="深圳">深圳</option>
<option value="厦门">厦门</option>
</select>
</form>
</body>
</html>

5. CCS

1
2
Cascading Style Sheets 层叠样式表,多个样式可以作用在同一个html的元素上,用于页面美化和布局控制
好处:功能强大,将内容展示和样式控制分离,易于分工合作,提高效率,同时可以使页面中的样式得以复用。

CCS与Html的结合:

  1. 内联样式:在标签内使用style属性指定css代码:

    <div style="color:red;">hello css</div>

  2. 内部样式: 在head标签内,定义style标签,style标签的标签体内容就是css代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    >    <head>
    > <style>
    > div{color:blue;}
    > </style>
    > </head>
    > <body>
    > <div>hello css</div>
    > </body>
    >
  1. 外部样式:先定义css资源文件,再在head标签内,定义link标签,引入外部的资源文件

    <link rel="stylesheet" href="css/a.css">

    (也可以写为:<style> @import "a.css"; </style>

6. CCS选择器

1
2
3
4
5
6
选择器:筛选具有相似特征的元素
选择器 {
属性名1:属性值1;
属性名2:属性值2;
...
}

基础选择器:

  1. id选择器:选择具体的id属性值的元素,建议在一个html页面中id值唯一。语法:#id属性值{}
  2. 类选择器:选择具有相同的class属性值的元素。语法:.class属性值{}
  3. 元素选择器:选择具有相同标签名称的元素。语法:标签名称{}

扩展选择器:

  1. 选择所有元素。语法:*{}
  2. 并集选择器:同时筛选多个选择器。语法:选择器1,选择器2{}
  3. 子选择器:筛选选择器1元素下的选择器2元素。 语法:选择器1 选择器2{}
  4. 直系父选择器:筛选选择器2的父元素选择器1。语法:选择器1 > 选择器2{}
  5. 属性选择器:选择元素名称,属性名=属性值的元素。语法:元素名称[属性名="属性值"]{}
  6. 伪类选择器:选择一些元素具有的状态。语法:元素:状态{} 如:超链接标签 < a>:
    • a:link{}:初始化的状态
    • a:visited{}:被访问过的状态
    • a:active{}:正在访问状态
    • a:hover{}:鼠标悬浮状态

7. CCS属性

  1. 字体、文本:
    • font-size:字体大小
    • color:文本颜色
    • text-align:对齐方式
    • line-height:行高
  2. 背景background:可以设置背景色或填充图片
  3. 边框border:设置边框,符合属性
  4. 尺寸width:宽度height:高度
  5. 盒子模型:控制布局
    • margin:外边距
    • padding:内边距,默认情况下内边距会影响整个盒子的大小
    • box-sizing: border-box; 设置盒子的属性,让width和height就是最终盒子的大小
  6. 浮动:float,脱离文档流布局(靠左:left;靠右:right)

8. JavaScript基本语法

1
2
3
4
JavaScript是一门客户端脚本语言,运行在客户端的浏览器中,每一个浏览器都有JavaScript的解析引擎。
JS可以来增强用户和html页面的交互过程,可以来控制html元素,让页面有一些动态的效果,增强用户的体验。
脚本语言:不需要编译,可以直接被浏览器内核解析执行的语言。
客户端脚本语言的标准:ECMAScript,统一了所有客户端脚本语言的编码方式。

结合html

  • 内部JS:定义< script>,标签体内容就是js代码
  • 外部JS: 定义< script>,通过src属性引入外部的js文件

注意: < script>可以定义多个,可以定义在html页面的任何地方,但是定义的位置会影响执行顺序。

建议书写位置:1. head标题中 2. body最下方

数据类型

  • 原始数据类型:五种
    1. number:数字。包含整数、小数、NaN(Not a Number,代表不是数字的数字类型)
    2. string:字符串。 “abc”、 “a”、 ‘abc’
    3. boolean:true和false
    4. null:一个对象为空的占位符(注意:null运算是其typeof类型为object,属设计错误)
    5. undefined:未定义。一个没有初始化的变量,会被默认赋值为undefined
  • 引用数据类型:对象

变量

1
JavaScript是弱类型语言,定义变量的语法:var 变量名 = 初始化值
  • 强类型:在开辟变量存储空间时,定义了空间将来存储数据的数据类型。只能存储固定类型的数据。
  • 弱类型:在开辟变量存储空间时,不定义空间将来的存储数据类型,可以存放任意类型的数据。

运算符

  • 被正负号修饰的运算数(+(-))会自动转换为number类型,如果字面值不是数字,则转为NaN,true转为1,false转为0。

  • ==:直接比较字面值,类型不同时,先进行类型转换,再比较

    ===:全等于,在比较之前,先判断类型,如果类型不一样,则直接返回false

  • 进行逻辑运算时:

    1. number:0或NaN为假,其他为真
    2. string:除了空字符串(“”),其他都是true
    3. null&undefined:都是false
    4. 对象:所有对象都为true

9. JavaScript基本对象

Function:函数对象

  • 创建:

    1. var fun = new Function(形式参数列表,方法体);
    2. function 方法名称(形式参数列表){
      方法体
      }
    3. var 方法名 = function(形式参数列表){
      方法体
      }
  • 方法:

    ​ length:代表形参的个数

  • 特点:

    1. JS中不存在方法重载,方法的调用只与方法的名称有关,和参数列表无关
    2. 方法是一个对象,如果定义名称相同的方法,后执行的方法会覆盖之前的方法
    3. 第二种创建方法执行优先级较高,若定义名称相同,会被第三种创建方法覆盖
    4. 在方法声明中有一个隐藏的内置对象(数组)arguments,封装所有的实际参数

Array:数组对象

  • 创建:

    1. var arr = new Array(元素列表);
    2. var arr = new Array(默认长度);
    3. var arr = [元素列表]
  • 方法:

    1. join(参数):将数组中的元素按照指定的分隔符拼接为字符串
    2. push(参数):向数组的末尾添加一个或更多元素,并返回新的数组长度
  • 特点:

    JS中的数组长度可变,元素类型也可变。

Date:日期对象

  • 创建:var date = new Date();
  • 方法:
    toLocaleString():返回当前date对象对应的时间本地字符串格式
    getTime():获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差

RegExp:正则表达式对象

1
正则表达式也是一个字符串,是专门解决字符串规则匹配的工具,用来定义匹配规则
  • 创建:
    1. var reg = new RegExp(“正则表达式”);
    2. var reg = /正则表达式/; (表达式不需要双引号,不需要加转义字符)
  • 方法:
    1. test(参数):验证指定的字符串是否符合正则定义的规范
    2. match(参数):可以匹配正则,返回的是匹配正则的内容
表达式 含义
x 字符 x
\\ 反斜线字符
[abc] a、b 或 c(简单类)
[^abc] 任何字符,除了 a、b 或 c(否定)
[a-zA-Z] a 到 z 或 A 到 Z,两头的字母包括在内(范围)
\w 单词字符:[a-zA-Z_0-9]
X? X,一次或一次也没有
X* X,零次或多次
X+ X,一次或多次
X{n} X,恰好 n 次
X{n,} X,至少 n 次
X{n,m} X,至少 n 次,但是不超过 m 次
^ 开始
$ 结束

Global:全局对象

1
Global中封装的方法不需要对象就可以直接调用

方法:

  1. encodeURI():url编码
  2. decodeURI():url解码
  3. encodeURIComponent():url编码(编码的字符范围更大)
  4. decodeURIComponent():url解码
  5. parseInt():将字符串转为数字(逐一判断每一个字符是否是数字,直到不是数字为止,将前边数字部分转为number)
  6. isNaN():判断一个值是否是NaN(NaN六亲不认,连自己都不认。NaN参与的==比较全部问false)
  7. eval():将一个字符串转换为JS代码,并把它作为脚本代码来执行

10. BOM

1
Browser Object Model 浏览器对象模型:将浏览器的各个组成部分封装成为对象

Window:窗口对象

  • 弹出框相关方法:

    1. alert():显示带有一段消息和一个确认按钮的警告框
    2. confirm():显示带有一段消息以及确认按钮和取消按钮的对话框。
      • 如果用户点击确定按钮,则方法返回true
      • 如果用户点击取消按钮,则方法返回false
    3. prompt():显示可提示用户输入的对话框,返回用户输入的值。
  • 打开关闭窗口相关方法:

    1. close():关闭调用此方法的浏览器窗口
    2. open():打开一个新的浏览器窗口,返回新的window对象
  • 定时器相关方法:

    1. setTimeout(js代码或者方法对象,毫秒值):在指定的毫秒数后调用函数或计算表达式

      返回值:唯一标识,用于取消定时器

    2. clearTimeout():取消由 setTimeout() 方法设置的 timeout

    3. setInterval():按照指定的周期(以毫秒计)来调用函数或计算表达式

    4. clearInterval():取消由 setInterval() 设置的 timeout

注意:Window可以获取其他BOM对象【history/location/navigator/screen】,DOM对象【document】。

Window对象不需要创建可以直接使用,window.方法名(),且window本身可省略

Location:地址栏对象

  • 方法:reload():重新加载当前文档,同刷新

History:历史记录对象

  • 方法:
    1. back():加载 history 列表中的前一个 URL
    2. forward():加载 history 列表中的下一个 URL
    3. go(参数):加载 history 列表中的某个具体页面(参数:前进(正数)或后退(负数)几个历史记录)
    4. length:返回当前窗口历史列表中的 URL 数量。

Screen:显示器屏幕对象

11. DOM

1
2
3
4
5
Document Object Model 文档对象模型:将标记语言文档的各个组成部分封装为对象。可以使用这些对象对标记语言文档进行CRUD的动态操作。
W3C标准中,DOM被分为三个不同的部分:
1. 核心DOM -针对任何结构化文档的标准模型
2. XML DOM -针对XML文档的标准模型
3. HTML DOM -针对HTML文档的标准模型

Document:文档对象

  • 获取:在HTML DOM模型中可以通过window对象来获取
  • 获取Element对象方法:
    1. getElementById():根据id属性值获取元素对象。
    2. getElementsByTagName():根据标签名称获取元素对象们,返回值是一个数组
    3. getElementsByClassName():根据Class属性值获取元素对象们,返回值是一个数组
    4. getElementsByName():根据name属性值获取元素对象们,返回值是一个数组
  • 创建其他DOM对象方法:
    1. createAttribute(name):创建Attribute属性对象
    2. createComment():创建Comment注释对象
    3. createElement():创建Element元素对象
    4. createTextNode():创建Text文本对象

Element:元素对象

  • 属性:
    1. previousSibling:获取该元素的前一个节点
    2. nextSibling:获取该元素的后一个节点
    3. innerHTML:可以获取标签内所有的内容,包括标签
    4. innerText:可以获取标签内所有的文本内容,不包括标签
  • 方法:
    1. removeAttribute():删除属性
    2. setAttribute():设置属性

Node:节点对象

  • 特点:所有dom对象都可以被认为是一个节点
  • 属性:parentNode 返回节点的父节点
  • 方法:
    1. appendChild():向节点的子节点列表的结尾添加新的子节点。
    2. removeChild():删除(并返回)当前节点的指定子节点。
    3. replaceChild():用新节点替换一个子节点。

Attribute:属性对象

Text:文本对象

Comment:注释对象

12. 事件监听机制

1
概念:某些组件(按钮,文本输入框...)被执行了某些操作(单击,双击,键盘按下,鼠标移动...)后,触发某些代码的执行。

常见的事件:

  1. 点击事件:

    • onclick:单击事件
    • ondblclick:双击事件
  2. 焦点事件:(input框里面有光标的时候,叫获取焦点)

    • onblur:失去焦点
    • onfocus:元素获得焦点
  3. 加载事件:

    • onload:在页面当中所有的内容加载完之后触发,常作为入口函数

      window.onload = function(){}

  4. 鼠标事件:

    • onmousedown 鼠标按钮被按下
    • onmouseup 鼠标按键被松开
    • onmousemove 鼠标被移动
    • onmouseover 鼠标移到某元素之上
    • onmouseout 鼠标从某元素移开
  5. 键盘事件:

    • onkeydown 某个键盘按键被按下
    • onkeyup 某个键盘按键被松开
    • onkeypress 某个键盘按键被按下并松开
  6. 选择和改变:

    • onchange 域的内容被改变。失焦后触发
    • onselect 文本被选中
  7. 表单事件:

    • onsubmit 确认按钮被点击
    • onreset 重置按钮被点击

13. 综合案例

动态表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<head>
<meta charset="UTF-8">
<title>动态表格</title>
<style>
table{
border: 1px solid;
margin: auto;
width: 500px;
}
td,th{
text-align: center;
border: 1px solid;
}
div{
text-align: center;
margin: 50px;
}
</style>
</head>
<body>

<div>
<input type="text" id="id" placeholder="请输入编号">
<input type="text" id="name" placeholder="请输入姓名">
<input type="text" id="gender" placeholder="请输入性别">
<input type="button" value="添加" id="btn_add">
</div>

<table>
<caption>学生信息表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
</table>

<script>
//给添加按钮绑定单击事件
document.getElementById("btn_add").onclick = function () {
//获取文本框内容
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value;
//将输入的内容添加到表格
var table = document.getElementsByTagName("table")[0];
table.innerHTML += '<tr>\n' +'<td>'+ id +'</td>\n' +
'<td>'+ name +'</td>\n' +'<td>'+ gender +'</td>\n' +
'<td><a href="javascript:void(0)" onclick="delTr(this)">删除</a></td>\n' +'</tr>';
}
//定义删除方法
function delTr(obj) { //节点关系:a -> td -> tr -> table
var table = obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
table.removeChild(tr);
}
</script>

表单校验

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
// 校验name的方法
function checkName() {
var name = document.getElementById("name").value;
var flag = /^[a-zA-Z]{1,12}$/.test(name);
var name_add = document.getElementById("span_name");
if(flag) {
name_add.innerHTML = "<img height = '25' width = '35' " +"src = 'img/gou.png'>"
}else{
name_add.innerHTML = "姓名格式有误";
}
return flag;
}
</script>
<!--表单校验的第一种方式-->
var form = document.getElementById("form");
form.onsubmit = checkName;
<!--表单校验的第二种方式-->
<form action="#" id="form" onsubmit="return checkName()">
...
</form>

14. Bootstrap

1
一个前端开发的响应式布局框架,基于HTML、CSS、JavaScript开发,简洁灵活,使得 Web 开发更加快捷。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!--快速入门:导入Bootstrap文件和jQuery包,创建html页面,引入必要的资源文件: -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都必须跟随其后! -->
<title>Index</title>

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- Bootstrap中js插件都是依赖于jquery的,要第一步引入-->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>

响应式布局

1
2
响应式布局可以使同一套页面兼容不同分辨率的设备。
实现方式依赖于栅格系统:将一行平均分成12个格子,可以指定元素占几个格子。

实现步骤:

  1. 定义容器:作用相当于< table>,样式:< div>

    容器分类:1. container:两边留白; 2. container-fluid:每一种设备都是100%宽度

  2. 定义行:作用相当于< tr>,样式:< row>

  3. 定义元素:指定元素使用的设备和格子数目,样式:col-设备代号-格子数目

    设备代号:

    • xs:超小屏幕 手机 (<768px)
    • sm:小屏幕 平板 (≥768px)
    • md:中等屏幕 桌面显示器 (≥992px)
    • lg:大屏幕 大桌面显示器 (≥1200px)

注意:

  1. 一行中如果格子数目超过12,则超出部分自动换行
  2. 栅格类属性可以向上兼容,小尺寸设备代号兼容大尺寸设备显示
  3. 如果设备真实宽度小于栅格指定的设备代码的临界值,会一个元素占满一整行

15. JQuery

1
jQuery是一个快速、简洁的JavaScript框架,封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互,本质上就是一些js文件。

JQuery对象和JS对象方法不通用,需要转换:

  • jq – > js:jq对象[索引] 或者 jq对象.get(索引)
  • js – > jq:$(js对象)

入口函数:$(function(){}); 与window.onload不同,可以定义多次

样式控制:$("#div1").css("backgroundColor","pink");

选择器操作

  • 基本选择器
    1. 标签选择器(元素选择器):$("html标签名")获得所有匹配标签名称的元素
    2. id选择器:$("#id的属性值")获得与指定id属性值匹配的元素
    3. 类选择器:$(".class的属性值") 获得与指定的class属性值匹配的元素
    4. 并集选择器:$("选择器1,选择器2....")获取多个选择器选中的所有元素
  • 层级选择器
    1. 后代选择器:$("A B") 选择A元素内部的所有B元素
    2. 子选择器:$("A > B") 选择A元素内部的所有B子元素
  • 属性选择器
    1. 属性名称选择器:$("A[属性名]") 包含指定属性的选择器
    2. 属性选择器:$("A[属性名='值']") 包含指定属性等于指定值的选择器
    3. 复合属性选择器:$("A[属性名='值'][]...")包含多个属性条件的选择器
  • 过滤选择器
    1. 首元素选择器:first 获得选择的元素中的第一个元素
    2. 尾元素选择器:last 获得选择的元素中的最后一个元素
    3. 非元素选择器:not(selector) 不包括指定内容的元素
    4. 偶数选择器:even 偶数,从 0 开始计数
    5. 奇数选择器:odd 奇数,从 0 开始计数
    6. 等于索引选择器:eq(index) 指定索引元素
    7. 大于索引选择器:gt(index) 大于指定索引元素
    8. 小于索引选择器:t(index)小于指定索引元素
    9. 标题选择器:header 获得标题(h1~h6)元素,固定写法
  • 表单过滤选择器
    1. 可用元素选择器:enabled获得可用元素
    2. 不可用元素选择器:disabled 获得不可用元素
    3. 选中选择器:checked 获得单选/复选框选中的元素
    4. 选中选择器:selected 获得下拉框选中的元素

DOM操作

  • 内容操作
    1. html():获取/设置元素的标签体内容 <a><font>内容</font></a> --> <font>内容</font>
    2. text():获取/设置元素的标签体纯文本内容 <a><font>内容</font></a> --> 内容
    3. val():获取/设置元素的value属性值
  • 属性操作
    1. attr():获取/设置元素的属性(偏向操作元素的固有属性)
    2. removeAttr():删除属性
    3. prop():获取/设置元素的属性(偏向操作元素自定义的属性)
    4. removeProp():删除属性
    5. addClass():添加class属性值(并且保留原class属性)
    6. removeClass():删除class属性值
    7. toggleClass():切换class属性(若对象已有要切换的class属性,则删除;不存在则添加)
    8. css():操作对象的css样式
  • CRUD操作
    1. A.append(B):对象A将对象B追加到自己元素内部的末尾
    2. A.appendTo(B):对象A将自己添加到对象B元素内部的末尾
    3. A.prepend(B):对象A将对象B追加到自己元素内部的开头
    4. A.prependTo(B):对象A将自己追加到对象B元素内部的开头
    5. A.after(B):对象A将对象B添加到自己后边,对象A和对象B是兄弟关系
    6. A.before(B):对象A将对象B添加到自己前边,对象A和对象B是兄弟关系
    7. A.insertAfter(B):对象A将自己添加到对象B后边,对象A和对象B是兄弟关系
    8. A.before(B):对象A将自己添加到对象B前边,对象A和对象B是兄弟关系
    9. A.remove():将对象A删除掉,也可以添加一个参数,删除指定标签内部的某个标签
    10. A.empty():将对象A的后代元素全部清空,但是保留当前对象以及其属性节点

高级操作

  • 动画操作

    • 默认显示和隐藏方式
      1. show([speed,[easing],[fn]])
      2. hide([speed,[easing],[fn]])
      3. toggle([speed],[easing],[fn])
    • 滑动显示和隐藏方式
      1. slideDown([speed],[easing],[fn])
      2. slideUp([speed,[easing],[fn]])
      3. slideToggle([speed],[easing],[fn])
    • 淡入淡出显示和隐藏方式
      1. fadeIn([speed],[easing],[fn])
      2. fadeOut([speed],[easing],[fn])
      3. fadeToggle([speed,[easing],[fn]])
    • 三个参数含义:
      1. speed:表示动画时长的毫秒数,或三个预定义的值(slow,normal, fast)
      2. easing:用来指定切换效果,默认是swing(慢>快>慢),可用参数linear(匀速)
      3. fn:在动画完成时执行的函数,每个元素执行一次
  • 遍历操作

    • jq对象.each(callback):citys.each(function(index,element) {});
    • $.each(object, [callback]):JQuery.each(citys,function(index,element) {});
    • for…of:for(city of citys) {}; (jquery 3.0 版本之后提供的方式)
  • 事件绑定

    • 标准绑定:jq对象.事件方法(回调函数);

    • 绑定事件:jq对象.on(“事件名称”,回调函数)

    • 解除绑定:jq对象.off(“事件名称”)

    • 事件切换:jq对象.toggle(fn1,fn2…) (通过单击循环切换方法)

      1
      2
      >     1.9版本中.toggle() 方法删除,JQuery Migrate(迁移)插件可以恢复此功能。
      >
  • 插件操作

    • $.fn.extend(object):增强JQuery的对象的功能

      1
      2
      3
      4
      5
      6
      7
      8
      9
      >     $.fn.extend({
      > check:function () {
      > this.prop("checked", true);
      > },
      > uncheck:function () {
      > this.prop("checked", false);
      > }
      > })
      >
  • $.extend(object):增强JQuery全局的功能

    1
    2
    3
    4
    5
    6
    7
    8
    9
    >      $.extend({
    > max: function (a, b) {
    > return a > b ? a : b;
    > },
    > min: function (a, b) {
    > return a < b ? a : b;
    > }
    > })
    >

16. AJAX

1
ASynchronous JavaScript And XML,可以使网页实现异步更新的技术,在服务器处理请求的过程中,客户端可以不需要等待服务器端的响应,进行其他的操作。这意味着可以在不重新加载整个网页的情况下,对网页的部分进行更新。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
JQuery实现方式:
//1.使用$.ajax()发送异步请求
$.ajax({
url:"ajaxServlet", // 请求路径
type:"POST", //请求方式
data:{"username":"jack","age":23}, //请求参数
success:function (data) { //响应成功后的回调函数
alert(data);
},
error:function () { //若响应失败的回调函数
alert("出错啦...")
},
dataType:"text"//设置接受到的响应数据的格式
});
//2. $.get():发送get请求
语法:$.get(url, [data], [callback], [type])
参数:url:请求路径;data:请求参数;callback:回调函数;type:响应结果的类型;
//3. $.post():发送post请求
方法同$.get()

17. JSON

1
JavaScript Object Notation,JavaScript的对象表示法,多用于存储和交换文本信息的语法,进行数据传输

基本规则var p = {"name":"张三","age":23,"gender":"男"};

  • JSON数据由键值对构成,键可以用单引号、双引号包裹,也可以不使用引号
  • 值的取值类型有六种:
    1. 数字(整数或浮点数)
    2. 字符串(在双引号中)
    3. 逻辑值(true 或 false)
    4. 数组(在方括号中) {“persons”:[{},{}]}
    5. 对象(在花括号中) {“address”:{“province”:”陕西”….}}
    6. null
  • 数据由逗号分隔:多个键值对由逗号分隔
  • 花括号保存对象:使用{}定义json 格式
  • 方括号保存数组:[]

获取数据

  • json对象.键名
  • json对象[“键名”]
  • 数组对象[索引]

注解

  • @JsonIgnore:排除属性,用于JavaBean成员变量上
  • @JsonFormat:属性值的格式化 @JsonFormat(pattern = "yyyy-MM-dd")

JSON数据和Java对象的相互转换

1
2
3
4
5
6
7
8
9
10
常见的JSON解析器:Jsonlib,Gson,fastjson,jackson
1. 导入jackson的相关jar包
2. 创建Jackson核心对象 ObjectMapper
3. 调用ObjectMapper的相关方法进行转换
//将JSON数转换为java对象据:
Object obj = mapper.readValue(json, Object.class);
//将java对象转换为JSON数据:
String json = mapper.writeValueAsString(obj);//将obj对象转换为JSON字符串
mapper.writeValue(new File("C://a.txt"),obj);//将obj对象转换为JSON字符串,并保存到指定的文件中
mapper.writeValue(response.getWriter(), obj);//将obj对象转换为JSON字符串,并响应至请求来源处

18. 案例展示:用户名检验

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//Servlet代码
@WebServlet("/findUserServlet")
public class FindUserServlet extends HttpServlet {
public void doPost(...) throws IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("application/json;charset=utf-8");

String username = request.getParameter("username");
User user = UserDao.username_check(username);
HashMap<String, Object> map = new HashMap<>();
if (user != null) {
map.put("userExist", true);
map.put("msg", "该用户名已存在");
} else {
map.put("userExist", false);
map.put("msg", "该用户名可用");
}
//将map转为JSON,并传给客户端
ObjectMapper mapper = new ObjectMapper();
mapper.writeValue(response.getWriter(), map);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!--html代码-->
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<script src = "js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
$("#username").blur(function () { //为username绑定失焦事件
//将username的内容异步传递给findUserServlet进行判断
var username = $(this).val();
$.get(
"findUserServlet",
{username:username},
//data接收mapper.writeValue(response.getWriter(), map)响应的JSON
function (data) {
if(data.userExist) { //用户名存在
$("#user_check").html(data.msg);
}else { //用户名不存在
$("#user_check").html(data.msg);
}})});})
</script>
</head>
<body>
<input type="text" name="username" id="username" placeholder="请输入用户名">
<span id="user_check"></span>
<br>
<input type="text" name="password" id="password" placeholder="请输入密码">
<br>
<input type="button" value="提交">
</body>
</html>