应用程序分类
客户端/服务器
Client/Server CS
模式
用户需要下载客户端才能使用。如微信、
QQ
、游戏等。
特点：功能丰富，安装繁琐、需要更新、平台不同，软件不同，开发成本高。
浏览器/服务器
Browser/Server BS
模式
用户只需一个浏览器即可使用。如网页
QQ
、商业网站等。
特点：功能较为丰富，无需安装软件，只需一个浏览器，无需更新，平台无关，开发时只需设计一套页
面。
B/S
模式下，用户访问便捷，无需安装多余软件，企业开发成本低。
所以
B/S
模式是
Java
主要开发的模式，一个
WEB
项目，需要浏览器、服务器和数据库。
用户通过浏览器访问服务器上的某个地址或页面，将数据传递到后端，再将数据交到数据库进行访问和
维护。
整个系统中，页面部分起着承接的作用，可以用于收集用户数据和呈现服务端的内容。
程序员既要开发服务器端的内容，也要掌握如何将数据渲染在页面，如何通过页面获取用户数据。
学习
Web基础，就是学习如何编写页面，如何通过浏览器呈现数据。
1.HTML
H
yper
T
ext
M
arkup
L
anguage
超文本标记语言
什么是超文本
可以理解为超级文本：超越了文本的限制，如图片、音频、视频等。
也可以理解为超链接文本：通过某个连接，可以访问互联网中的任意地址。
什么是标记
可以称为
标签
。用
<>
括起来的一个特定的单词。
标签分为单标签和双标签。
单标签：
<meta
属性名
="
属性值
"/>
双标签：
<body
属性名
="
属性值
"></body>
标签中可以加入属性，双标签中可以继续嵌套标签。
用
HTML
标签写出的文件保存为
.html
文件，称为页面文件
什么是标签的属性
在标签中，通过加入
属性名
="
属性值
" ,
就可以让某个标签拥有指定的特征。
例如：
<标签名 属性1="值" 属性2="值" ></标签名>
<html>
<head>
<!--charset就是一个属性， utf-8就是该属性的值-->
<meta charset="utf-8"/>
</head>
<body>
<!--src就是一个属性-->
<img src="图片路径">
</body>
</html>页面的基本结构
<!-- HTML中的注释 -->
<!-- DOC文档TYPE类型 说明当前页面的文档类型 HTML5-->
<!DOCTYPE html>
<html>
<head>
<!-- meta元 设置页面的属性 charset字符集 utf-8表示支持中文的编码格式 -->
<meta charset="utf-8">
<title>页面标题</title>
</head>
<body>
页面主题内容sdfsdfsdf
</body>
</html>HTML常用标签
1.块级元素标签
一个标签占满一行
2.行内元素标签
一个元素占一行的一部分
单标签
| 常用单标签 | 作用 | 类型 |
|---|---|---|
<input /> | 表单元素 | 行内元素 |
<img src="图片路径" alt="替换图片的文字" title="鼠标悬停时提示文件" width="图片宽度" height="图片高度"/> | 图片 | 行内元素 |
<br/> | 换行 | 块级元素 |
<hr/> | 水平线 | 块级元素 |
双标签
| 常用标签 | 作用 | 类型 |
|---|---|---|
<h1></h1>~<h6></h6> | 一级标题~六级标签，文字加粗，一级标题最大 | 块级元素 |
<p></p> | 段落 | 块级元素 |
<span></span> | 行内标签 | 行内元素 |
<sub></sub> | 文字下标 | 行内元素 |
<sup></sup> | 文字上标 | 行内元素 |
<b></b> | 文字加粗 | 行内元素 |
<i></i> | 文字倾斜 | 行内元素 |
<u></u> | 下划线 | 行内元素 |
<font color="" size="" face=""></font> | 已过时。字体 |
图片img
<img>单标签，行内元素
<img src="图片路径" alt="无法显示图片时的文字" title="鼠标悬停时的文字" width="宽度" height="高度">
图片路径可以使用相对路径或绝对路径
-
绝对路径：文件在计算机中的完整路径
-
相对路径：从当前页出发，找到图片所在位置
-
使用"../"跳出当前目录
-
使用"xxx/"进入xxx目录
-
列表ul/ol/li
双标签，都是块级元素，li写在ul或ol标签中
通常使用列表实现页面的水平导航、垂直导航
无序列表ul
默认每个li前用实心圆修饰，通过type属性更改
-
square 正方形
-
dist 默认实心圆
-
circle 空心圆
-
none 去掉修饰
有序列表ol
默认每个li前用数字修饰，通过type属性更改
表格table
双标签，table是块级元素，tr、th、td是行内元素
| 表格相关标签 | 作用 |
|---|---|
| table | 定义表格 |
| tr | 表格中的行 |
| td | 一行中的单元格 |
| th | 特殊的td，文字加粗居中，使用th实现表头 |
合并行rowspan="n"
给td添加该属性，表示n行合1行
合并列colspan="n"
给td添加该属性，表示n列合1列
a标签
<a>显示文字</a>，行内元素
| 核心属性 | |
|---|---|
| href | 访问某个链接。如果要访问锚点，#开头 |
| target | _self:默认自身页面访问，_blank:空白页面访问，_parent:父页面访问，某个iframe的name:在指定的iframe中访问 |
| name | 定义锚点 |
超链接
<!-- 访问某个域名 --> <a href="http://baidu.com">跳转到baidu</a> <!-- 访问当前项目中的页面 --> <a href="列表与表格.html">跳转到表格页面</a> <!-- 访问资源 --> <a href="../imgs/flower.webp">跳转到图片</a>
锚点
1.设置锚点
<a name="锚点名"></a>
2.访问锚点
<a href="#锚点名">访问锚点</a>
浮动框架iframe
在页面中嵌入一个页面。
<a target="某个iframe的名称" href="某个路径">访问</a> <iframe width="100%" height="600px" name="该iframe的名称"></iframe>
marquee标签
<!--scrollamount移动速度--> <!--direction方向 left right up down--> <!--behavior行为 alternate往复移动 scoll重复滚动 slide滑到顶端--> <marquee scrollamount="10" direction="right" behavior="scoll"> 一段文字 </marquee>
多媒体
公用属性
-
controls：显示控制器
-
muted：静音
-
autoplay：自动播放。chrome浏览器视频需要添加muted属性后才能使用autoplay
-
loop：循环
音频
<audio controls autoplay muted loop> <source src="音频文件路径"></source> </audio>
视频
<video controls autoplay muted loop> <source src="视频文件路径"></source> </video>
表单与表单元素
表单form
双标签，块级元素，用于接收用户输入的数据
<form action="表单提交路径" method = "表单提交方式"> </form>
| form标签核心属性 | 值 | 作用 |
|---|---|---|
| action | 可以是某个页面或某个控制器的路径 | 将表单中的数据提交到指定路径 |
| method | post/get | 默认为get，提交的数据会暴露在地址栏中，数据长度有限制，post方式不会存在这些问题 |
表单元素
| 常用表单元素 | 说明 |
|---|---|
| input | 单标签，行内元素。通过改变type属性值，变化为不同的表单元素 |
| select | 双标签，行内元素。下拉框 |
| option | 双标签，select的子标签，下拉菜单中的选项，value属性表示该选项的值，如果不设置，value值默认位option标签中的文本 |
| textarea | 双标签，行内元素。文本域。 |
| input标签的type值 | 作用 |
|---|---|
| text | 文本框 |
| password | 密码框 |
| radio | 单选按钮 |
| checkbox | 复选框 |
| date | 日历 |
| number | 数字选择器 |
| file | 提交文件 |
| hidden | 隐藏域 |
| button | 普通按钮 |
| reset | 重置按钮 |
| submit | 提交按钮 |
| 表单元素的属性 | 作用 |
|---|---|
| name | 用于提交表单时设置提交的参数名 |
| value | 用于输入框的默认值或单选复选按钮的默认值 |
| required | 用于输入框或按钮设置为必填或必选项 |
| placeholder | 用于输入框的默认提示文字 |
| checked | 用于单选按钮和复选框默认选中 |
| selected | 用于下拉菜单默认选中 |
| readonly | 只读 |
| disabled | 让某个元素失效 |
| min/max/step | number独有，设置最小/最大/步长 |
| rows/cols | textarea独有，设置行数/列数 |
div标签
双标签，块级元素，没有任何特点。
页面的主流布局就是采用div
2.CSS
CSS
Cascading Style Sheets 层叠样式表
用于控制HTML中标签样式的语言。
可以精确到像素，用于美化HTML标签。
CSS语法
样式名：样式值；
选择器
用于选中页面中元素(标签)的工具
ID选择器
1.给某个标签添加id的属性，对其命名
2.通过#id名获取
通常用于获取某一个元素，id名称不要冲突
<html>
<head>
<style>
选择器{
样式：值;
样式：值;
样式：值;
}
#mydic{
width:200px;
height:200px;
}
</style>
</head>
<body>
<div id="mydiv">
</div>
</body>
</html>
类选择器
1.给某些标签加class的属性，对其命名
2.通过.class名获取
通过用于获取一组元素
元素选择器/HTML选择器/标签选择器
直接通过标签名字获取元素，获取所有对应标签。
<html>
<head>
<style>
div{
width:100px;
height:100px
}
#mydiv{
background-color:red;
}
.md{
border:1px solid red;
}
</style>
</head>
<body>
<div id="mydiv"></div>
<div class="md"></div>
<div class="md"></div>
</body>
</html>
后代选择器
*表示所有元素
-
空格
-
得到所有子元素
-
-
＞
-
得到第一层子元素
-
div p{
/* 得到div下的所有子元素p */
}
div>P{
/* 得到div下的第一层元素p */
}
div *{
/* 得到div下的所有子标签 */
}
群组选择器
使用逗号将多个选择器同时选中
p,#md,.mp{
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p{
color: green;
}
/* #test{
color: red;
} */
#mp{
color: red;
}
.mp{
color: blue;
}
/* #md下的所有子标签p */
#md p{
font-size: 18px;
}
/* #md下的第一层标签p */
#md>p{
background-color: cadetblue;
}
#md,#md2{
font-weight: bold;
}
</style>
</head>
<body>
<div id="md">
<p id="mp">这是一段文字</p>
<p class="mp">这是一段文字</p>
<p class="mp">这是一段文字</p>
<p>这是一段文字</p>
<p>这是一段文字</p>
<div id="md2">
<p>这是一段文字</p>
<p class="mp" id="test" style="color: black;">这是一段文字</p>
<p>这是一段文字</p>
</div>
</div>
</body>
</html>
CSS写在哪里？
写在某个标签的style属性中
<div style="样式名：值;"> </div>
写在head标签下的style标签中
<html>
<head>
<stle>
选择器{
样式：值;
样式：值;
}
</stle>
</head>
</html>
写在一个独立的css文件中
1.新建一个.css文件，在其中编写css样式
*{
margin:0;
padding:0;
}
2.在页面中通过link标签导入
<html> <head> <!-- 导入css文件 --> <link rel="stylesheet" href="xxx.css"> </head> </html>
选择器的优先级
内嵌在style标签 >> id选择器 >> class选择器 >> 标签选择器
在选择某个元素时，尽量将其层次关系写具体，如a b c{}
常用样式
尺寸
只有块级元素才能设置尺寸。
如果要对某个行内元素设置尺寸，需要先将其转换为块级元素。
| 相关样式名 | 值 | 举例 |
|---|---|---|
| width | px/百分比/vw | width:100px/50%/30vw; |
| height | px/百分比/vw | height:100px/50%/30vh; |
背景background
| 样式名 | 作用 | 值 |
|---|---|---|
| background-color | 背景色 | 颜色的单词、十进制RGB、十六进制RGB |
| background-image | 背景图 | url(图片路径) |
| background-size | 背景图片尺寸 | cover覆盖、百分比。 cover会完全将区域覆盖。100%会完整显示图片。 |
| background-position | 背景图片位置 | 10px表示同时向下和向右移动10px |
| background-repeat | 背景图片是否重复 | 默认重复 no-repeat不重复 repeat-x表示x轴重复 repeat-y表示y轴重复 |
| background-attachment | 背景图片固定 | fixed表示将背景图片固定，不随滚动条滚动 |
| background | 背景样式简写 | 可以同时设置以上多个参数，如 background:#f00 url(图片地址) no-repeat center 表示图片能加载则显示图片，不能加载显示背景色，背景图不重复，居中显示 |
背景渐变
渐变色css代码自动生成https://uigradients.com
background: linear-gradient(to 方向,颜色1,颜色2,颜色3,...); 方向：left right rop bottom background: linear-gradient(to right,#fdeff9,#ec38bc)
边框border
边框会“套”在元素外层，元素原本大小不变，最终所占页面区域大小为元素大小＋边框宽度
| 边框相关样式 | 作用 | 值 |
|---|---|---|
| border-style | 边框线条样式 | solid、double、dashed、dotted |
| border-width | 边框宽度 | px |
| border-color | 边框颜色 | 颜色的三种写法 |
| border | 同时设置所有边框的线条、宽度和颜色 | border：1px solid red |
| border-方向-样式 | 某方向的style或width或color，方向为left、right、top、bottom | border-left-color：red |
| border-方向 | 同时设置某边框的线条、宽度和颜色 | border-top:1px dotted blue; |
| border-上下方向-左右方向-radius | 设置某个方向的边框为圆角 | |
| border-radius | 同时设置四个角为圆角，如果正方形，值为边长的一半，则为圆形 | |
| outline | 轮廓。input文本框默认获得焦点时，会显示一个轮廓，通常设置为none | |
| border-collapse | 合并相邻边框，通常用于合并表格中的td的边框 | 表格(border-collapse:collapse) |
字体
| 样式名 | 作用 | 值 |
|---|---|---|
| font-size | 字体大小 | 像素。默认16px，最小12px |
| font-family | 字体字型 | 默认微软雅黑 |
| font-weight | 字体粗细 | lighter细，boder粗 |
文本
| 样式名 | 作用 | 值 |
|---|---|---|
| color | 文本颜色 | 颜色的三种写法 |
| text-decoration | 文本修饰 | underline下划线 line-through删除线 overline上划线 通常给页面中的所有a标签设置text-decoration:none去掉a标签默认的下划线 |
| text-align | 文本对齐方式 | 默认left左对齐，right右对齐，center居中对齐 |
| text-indent | 首行缩进 | 根据文字大小设置缩进的像素。如默认文字16px，首行缩进2个字符，则设置为32px; |
| text-shadow | 文本阴影 | 颜色 水平位置 垂直位置 模糊程度。 如#000 4px 5px 3px表示水平向右4px，垂直向下5px，模糊3px |
| line-height | 行高 | 设置为与文字相同大小时，行间距为0。"垂直居中"时，将行高设置为容器高度。 |
| letter-spacing | 字符间距 | 像素 |
| word-break | 英文换行方式 | 默认break-word以单词为单位换行，不会拆分单词。 break-all以字母为单位换行，会拆分单词。 |
列表
| 样式名 | 作用 | 值 |
|---|---|---|
| list-style-type | 设置列表li前的标记 | 通常设置为none去除标记 |
| list-style-position | 设置列表li前的标记的位置 | 默认outside，标记位于li之外；inside表示标记位于li之中 |
| list-style-image | 设置列表li前的标记为图片 | url(图片 地址) |
空格
鼠标样式cursor
| 值 | 效果 |
|---|---|
| pointer | 指示链接的指针(手) |
| move | 可移动的十字箭头 |
| help | 带问号的箭头 |
| progress | 带载入的箭头 |
| wait | 载入状态 |
| crosshair | 十字线 |
| text | 光标 |
伪类
表示某个元素的某种状态
用于对某些元素在不同的状态下呈现不同的效果
如a标签有访问前、悬停时、按下时、访问后四种状态对应四个伪类
| a标签的伪类 | 作用 |
|---|---|
| a:link | 未访问时 |
| a:hover | 鼠标悬停 |
| a:active | 鼠标按下 |
| a:visited | 访问后 |
:hover可以适用于很多标签，如div:hover、#:hover表示鼠标悬停在id为xx的元素上时
追加内容，通过context属性编辑追加的内容， 同时可以设置其他样式
| 在某个元素之前后之后插入内容 | 说明 |
|---|---|
| :after | 之后 |
| :before | 之前 |
<!DOCTYPE html>
<html>
<head>
<style>
p:after
{
content "追加的内容"
color:red:
xx:xx
}
</style>
</head>
<body>
<p>My name is Donald</p>
<p>I live in Ducksburg</p>
</body>
</html>
显示方式display
控制元素的类型或是否显示。
| 值 | 作用 |
|---|---|
| block | 将元素设置为块元素，这样元素就能独占一行，设置尺寸 |
| inline | 将元素设置为行内元素，这样元素占一行中的一部分，不能设置尺寸 |
| inline-block | 将元素设置为行内块，这样元素占一行中的一部分，能设置尺寸 |
| none | 将元素不显示，并且不保留元素的位置 |
浮动float
让某个元素脱离原本的位置，朝某个方向对齐
| 值 | 作用 |
|---|---|
| left | 向左浮动 |
| right | 向右浮动 |
| none | 清除浮动 |
float：left和display:inline-block的区别
相同点：都能让多个块级元素成为行内块。
display:inline-block
多个元素最终位于同一行内，可以设置尺寸，元素以下线对齐，保留该行位置，保留元素间的缝隙，后续元素为新的一行
float:left
多个元素最终位于同一行内，可以设置尺寸,元素以上线对齐，不保留该行位置，不保留元素间的缝隙，后续元素会紧邻
盒子模型
页面中的所有块级元素，都是一个”盒子“，每个”盒子“由元素自身、内边距padding、边框border、外边距marjin组成。
边框border：元素外的一圈
内边距padding：边框与元素自身之间的距离
外边距margin：元素A的边框与元素B的边框之间的距离
| 盒子模型相关样式 | 作用 |
|---|---|
| padding | 内边距。1个参数表示同时设置4个方向，2个参数表示上下 左右。3个参数表示上 左右 下。4个参数表示上 右 下 左顺时针。 |
| margin | 内边距。1个参数表示同时设置4个方向，2个参数表示上下 左右。3个参数表示上 左右 下。4个参数表示上 右 下 左顺时针。如果值设置为auto，表示自动将所在的容器剩余距离除以2. |
| padding-方向 | 某个方向的内边距。方向可以是left、right、top、bottom |
| margin-方向 | 某个方向的外边距。 |
一个元素的所占位置是外边距+边框+内边距+元素自身大小。
如果让某个块级元素居中，使用margin:上下距离 auto;
盒子模型阴影
元素{
box-shadow:#000 4px 4px 4px;
}
溢出overflow
处理子元素超出父元素的部分
| 值 | 作用 |
|---|---|
| visible | 默认，溢出部分显示 |
| hidden | 溢出部分隐藏 |
| scroll | 溢出部分使用滚动条控制 |
定位position
将元素以像素为单位调整位置
| 值 | 含义 | 作用 |
|---|---|---|
| fixed | 固定定位 | 让元素固定在页面的某个位置，不随页面的滚动而改变位置。 |
| absolute | 绝对定位 | |
| relative | 相对定位 |
配合定位使用样式
| 作用 | 值 | |
|---|---|---|
| left | 元素距离页面左边界的左右距离 | 正值向右，负值向左 |
| top | 元素距离页面上边界的上下距离 | 正值向下，负值向上 |
| right | 元素距离页面右边界的左右距离 | 正值向左，负值向右 |
| bottom | 元素距离页面下边界的上下距离 | 正值向上，负值向下 |
文档流
页面中每个元素默认都有自己的位置，这个位置称为文档流。
如果某个元素脱离文档流，就会失去它原本所占的位置，后续元素就会顶替其位置。
可以通过浮动float、固定定位position:fixed、绝对定位position:absolute让元素脱离文档流。
脱离文档流后，通过改变left、right、top和bottom移动其位置。
固定定位fixed
让某个元素脱离文档流，默认根据页面的四个边界进行定位。
绝对定位absolute
让某个元素脱离文档流，根据已定位的父元素进行定位，如果没有已定位的父元素，会根据body定位。
相对定位relative
元素不会脱离文档流，根据它原本的位置进行定位，定位原点是元素本身的位置。
层叠z-index
对于已定位的元素，可以通过z-index跳转层叠顺序，值是一个数字，越大离眼镜越近。
#md1{
poxition:relative;
z-index:10;
}
#md2{
position:relative;
z-index:0;
}
不透明度opacity
设置某个元素的不透明度0-1之间的小数表示不透明度。1完全不透明，0完全透明
如果只是定义背景色时，使用rgba(red,greed,blue,alpha),alpha使用
div{
/*让div钟的所有内容都半透明，如文字*/
background-color:#000;
opacity:0.5;
/*让div背景半透明，其中的内容不受影响 */
background-color:rgba(0,0,0,0.5);
}
转换transform
改变元素的状态，如旋转、移动、缩放等
| 值 | |
|---|---|
| rotate(30deg) | 顺时针2D旋转30度 |
| rotateX/Y/Z(30deg) | 沿X/Y/Z轴3D旋转30度 |
| translateX/Y(50px) | 朝X或Y轴平移50像素 |
| translate(10px,30px) | 朝右移动像素px，下移动30像素 |
| scale(1.5) | 缩放1.5倍 |
以上所有效果可以通过transform:效果1 效果2 ... 同时设置
transform: rotate(30deg) translateX(100px) scale(1.2)
过渡transition
设置某个转换效果完成所需的时间等参数
| 相关样式 | 作用 |
|---|---|
| transition-duration:3s | 转换所需时间 |
| transition-delay:2s | 延时生效 |
| transition-timint-function:linear | 时间函数，linear表示匀速 |
| transition:4s 1s linear | 在1s后，匀速在4s内完成过渡 |
自定义动画animation
1.定义动画的关键帧
@keyframes 动画名{
0%{
/*该阶段的样式*/
样式名:值;
}
25%{}
50%{}
75%{}
100%{}
}
2.给某个元素设置animation样式
#xxx{
/*指定动画名*/
animation-name:动画名;
/*动画执行时间*/
animation-duration:3s;
/*延时*/
animation-dekay:3s;
/*动画执行次数 infinite无限*/
animation-iteration-count:4;
/*动画时间 linear匀速 ease-in ease-out ease-in-out*/
animation-timing-function:linear;
/*简写 只写一个时间表示用时 写两个时间表示第一个是用时，第二个是延时*/
animation:动画名 5s 2s infinite linear;
}
| animation相关样式 | 作用 |
|---|---|
| animation-name:动画名 | 执行指定动画 |
| animation-duration:3s | 动画执行时间 |
| animation-delay:3s | 动画延时时间 |
| animation-iteration-count:3 | 动画执行次数，infinite表示无限 |
| animation-timing-function:linear | 动画执行时间函数，linear表示匀速 |
| animation:动画名 5s 2s | 简写。只是一个时间表示用时，写两个时间表示第一个是用时，第二个是延时 |
3.Javascript
JavaScript
一门弱类型面向对象的解释型的脚本语言（不用编译）
弱类型：没有数据类型限制，一切皆对象
解释型；无需编译，通过解释器解释运行，浏览器就是一个JS的解释器
script脚本：按指令依次
1995年网景公司推出。
JS中的输出方式
| 控制台输出 | console.log(); |
|---|---|
| 提示框 | alert(); |
| 页面输出（可以写标签与样式） | document.writeln(); |
JS写在哪里
写在script标签中
写在html标签中
JS组成
ECMAScript
简称es ，是js标准
BOM
浏览器对象模型，用于操作浏览器
DOM
文档对象模型，用于操作元素
ES核心语法
数据类型
原始类型
| JS中的原始类型 | 说明 |
|---|---|
| 数值型number | 表示任意数据 |
| 字符串string | 用单引号或双引号引起来的都是字符串 |
| 布尔型boolean | true/false |
| 未定义undefined | 当某个变量没有声明或没有值时 |
| 空null |
引用类型
如对象，数组、函数
定义变量
var/let 变量名;
标识符命名规则
-
由字母、数字、下划线和$组成
-
不能以数字开头
-
不能用关键字
运算符
js中的boolean类型，0表示false，非0表示true
默认true为1，可以用来当做数字运算
-
算术
+ - * / % +两端是字符串则是拼接 +两端是数字，作为相加运算
-
关系
== >= <= != > < === ==比较值是否相等 ===比较值与数据类型是否相等 ！==比较值和数据类型是否同时不等
-
逻辑
&& || ！
-
赋值和符合赋值
-
自增自减
++ -- 符号在前，先+1或先-1
-
条件运算符
条件？表达式1；表达式2
条件语句
if语句
switch语句
switch(opt){}//opt可以是任何类型
循环语句
for语句
普通for循环
for（；；）
增强for循环
for(数据类型 in 遍历对象){}
只遍历有东西的
while语句
do-while语句
先执行后循环
<script>
//将一个数组分解质因数
var num = 24;
var res=num+"="+'';
for(var i=2;i<num;i++){
if(num%i==0){
res+=i+'*';
num/=i;
i=1;
}
}
res+=num;
console.log(res);
</script>
//我的误区：我认为在[2，num）这个区间中一个一个数去遍历会经历到被除数不是质数的情况，例如当i=4时要判断剔除4，其实不用，能被4整除的数必被2整除
break和continue
JS中的本地对象
数组Array
JS中的数组类似于Java中的ArrayList，可以保存不同类型的数据
-
数据定义时无需指定大小，数组长度由赋值索引最大值决定
数组定义
var list = new Array();
数组初始化
var list = new Array(元素1，元素2，、、、);
数组中的方法
| 方法 | 作用 | 返回值 |
|---|---|---|
| splice(start,length) | 从strart位置开始移除length长度的字符串 | 被移除的字符串 |
| splice(index) | 移除index位置到末尾的所有元素 | 被移除元素 |
| reverse() | 反转数组中的元素 | 反转后的数组 |
| sort（） | 字符串数组排序，按字母表顺序升序排列，先比较第一个字母 | 排序后的数组 |
| pop（） | 删除最后一个元素 | 被移除元素 |
| push（obj） | 添加一个元素加到末尾 | 新数组长度 |
| shift（） | 移除第一个元素 | 被移除元素 |
| unshift（obj） | 添加一个元素加到开头 | 新数组长度 |
| fill（obj） | 使用obj填充数组 | 新数组 |
| 以上方法均能影响数组元素 |
| 方法 | 作用 | 返回值 |
|---|---|---|
| indexOf（string） | 获取字符串在数组中第一次出现的索引 | -1 |
| lastIndexOf（string） | 获取字符串在数组中最后一次出现的索引 | -1 |
| concat（元素） | 将数组拼接指定元素 | 拼接后的新数组 |
| join（字符） | 将数组中元素使用指定字符拼接 | 拼接后的字符串 |
| slice（index） | 截取index位置到末尾的所有元素 | 截取的元素数组 |
| slice（strart，end） | 接取范围为（strart，end）中的元素 | 截取的元素数组 |
| map（方法名） | 让数组中的元素执行某个方法 | 执行方法后的新数组 |
| 这些方法调用后不会影响原数组 |
字符串
js中的字符串，是一个字符串数组
使用单引号或双引号或者new String（）定义的为字符串
可以通过下标访问字符串某个元素
| 常用属性和方法 | 说明 |
|---|---|
| length | 得到数组长度 |
| trim()/trimLeft()/trimRight() | 去除首尾/左/右边的空格 |
| toUpperCase()/toLowerCase() | 转换大写/小写 |
| sub()/sup()/bold()/italics() | 文字下标/上标/加粗/倾斜 |
| indexOf(string) | 获取string字符串第一次出现的索引 |
| charAt(int) | 获得int索引所对应的字符 |
| split(字符串) | 根据指定字符串切分字符串，返回切分后的字符串数组 |
| substring(index)/substring(from,to) | 截取index到末尾/截取[from,to）范围的字符 |
| substr(index)/substr(index,length) | 截取index到末尾/截取index起length长度的字符 |
| replace(str1,str2) | 将字符串中第一个str1转换成str2 |
| replaceAll(str1,str2) | 将字符串中所有str1转换成str2 |
正则表达式
//JS中定义正则表达式 var reges = /规则/ //校验字符串是否满足规则 reges.test(string);
| 常用规则 | 说明 |
|---|---|
| /a/ | 检索有没有a |
| /abc/ | 检索有没有abc整体 |
| /a|b|c/ 或/[abc]/或/[a-c]/ | 检索有没有a或b或c |
| [^abc] | 除abc之外 的字符 |
| \d或[0-9] | 表示0-9的数字 |
| \D | 表示非数字 |
| [a-zA-Z] | 表示任意字母 |
| \w | 表示任意数字、字母和下划线 |
| \W | 表示非任意数字、字母和下划线 |
| \s | 表示空格 |
| \S | 表示非空格 |
| \d{2} | 匹配两个连续的数字 |
| \d{2，5} | 匹配最少2个最多五个连续数据 |
| \d{2，} | 匹配最少2个连续的数据 |
| ^\d | 是否以数字开头 |
| $ | 以什么结尾 |
| + | 至少 有一个 |
| ？ | 可以存在也可以不存在，存在只能存在一次 |
| * | 可以存在也可以不存在，存在只能存在多次 |
| . | 表示任意字符 |
| g | 全局匹配 |
| i | 忽略大小写匹配 |
函数function
类似于java中的方法。是一段独一的代码块，可以独立完成一件事情
定义的函数能被重复调用，减少重复代码，达到代码复用的效果
调用函数
通过.操作符号，由对象名或类名或直接调用
var now = new Date(); now.getMonth();//通过对象调用 Math.max();//通过类名调用 parseInt();//直接调用
自定义函数
function 函数名(形参名1，形参名2。。。){
}
//创建一个匿名函数，赋值给fun变量，通过调用变量来调用函数
var 函数名 =function(){}
//箭头函数
var 函数名 =(str)=>{}
一切皆对象
函数分类
-
无参无返回值
-
有参无返回值
-
无参有返回值
-
无参无返回值
BOM
浏览器对象模型，用来控制浏览器行为
弹窗
-
警告框，带有确认按钮和提示文字
//window表示浏览器对象
window.alert("提示文字");
-
输入框，带有确认按钮和取消按钮和提示文字
//点击确认后返回输入内容，返回输入的字符串
window.prompt("提示内容");
-
确认框，带有确认和取消按钮和提示文字
//带有返回值的按钮，确认返回true，取消返回false window.confirm();
window对象
| 对象名 | 说明 |
|---|---|
| innerWidth | 浏览器窗口可视区域宽度 |
| innerHright | 浏览器窗口可视区域高度 |
| screen | 屏幕信息 |
| location | 包含了当前浏览器地址栏相关信息 |
| history | 浏览历史记录相关信息 |
| alert()/prompt()/confirm() | 三种弹窗 |
| open(URL)/close() | 打开/关闭一个新窗口，默认是一个空白页，返回值为弹出的窗口对象 |
| setTimeout*(handle，timeout) | 延迟定时器，timeout时间后执行handle事件 |
| clearTimeout( | 关闭 |
| setInetrval(handle，timeout) | 间隔定时，timeout时间后执行hand事件 |
| innerText | 表示双标签文本 |
| clearInetrval() | 关闭定时器 |
| clearTimeout() | 关闭定时器 |
location对象
| 常用属性和方法 | 作用 |
|---|---|
| href | 读取或设置浏览器当前地址栏信息 |
| assign（"地址"） | 设置了浏览器跳转到指定地址 |
| replace("地址") | 替换浏览器当前地址栏地址，无法后退 |
| reload() | 刷新页面 |
| host | 获取当前地址的IP+端口号 |
| hostname | 获取当前地址的主机名 |
| port | 获取当前地址的端口号 |
| protocol | 获取当前地址的协议名 |
localStorage对象
本地存储空间
生命周期：理论上永久存储
可以在同一站点不同页面可以共享数据
| 常用方法 | 说明 |
|---|---|
| setItem(key,value) | 将一对键值对本地存储 |
| getItem(key) | 本地 获取该键存储的内容 |
sessionStorage对象
会话存储空间
生命周期：随着浏览器关闭自动销毁
不同的页面不可共享数据
history对象
| 常用方法 | 说明 |
|---|---|
| forward() | 前进 |
| back() | 后退 |
| go(1)/go(-1) | 前进/后退 |
DOM
文档对象模型
-
每个页面都是一个文档树document tree
-
页面中每个标签都是这个树的结点node
-
根结点是<html>
-
document对象是DOM中的核心对象，表示当前页面
-
通过document对象获取页面的结点后，对其进行操作
获取结点的方式
| 获取结点的方式 | 说明 |
|---|---|
| document.getElementById("某个结点的id名") | 根据获取唯一的一个结点 |
| document.getElementsByClass("某些结点的class名") | 根据class获取对应的所有结点 |
| document.getElementsByTagName("某个标签名") | 根据标签名获取对应结点 |
| document.getElementsByName("某些标签的name名") | 根据标签的name属性名获取结点 |
| document.querySelector() | 获取满足条件的结点 |
| document.querySelectorAll() | 获取所有满足条件的结点 |
样式操作
修改单个样式
节点.style. 样式名=值
样式名是驼峰命名法
修改多个样式
节点.style.cssTest="css样式";
内容操作
-
节点.innerText
获取或设置双标签的文本内容，不能识别html元素
-
节点.innerHTML
能够识别文本中的html元素
属性操作
读取或设置节点的某个属性
| 常用属性 | 作用 |
|---|---|
| 节点.value | 获取或设置某个结点的value值，通常用于表单元素 |
| 节点.src | 获取或设置某个结点的src值 |
| 节点.href | 获取或设置a标签的href值 |
| 节点.className | 获取或设置某个标签的className值 |
| 节点.checked | 获取或设置某个标签的checked值 |
创建添加删除节点
创建节点
//创建的节点处于游离状态，需要将其挂载到某个节点中
document.createElement("标签名")
添加节点
//挂载
document.body.appendChild("创建节点对象名")
删除节点
父节点.removeChild(子节点)
获取父节点
子节点.parentNode
获取子节点
父节点.childern
事件
| 常用事件 | 作用 |
|---|---|
| onclick | 鼠标单机事件 |
| onchange | 内容发生改变事件 |
| onblur | 失去焦点事件 |
| onfocus | 获得焦点事件 |
| onmouseenter/onmouseover | 鼠标进入事件 |
| onmouseout | 鼠标移出事件 |
| onmousedown/onmouseup | 鼠标按下/松开事件 |
| oninput | 文本框输入事件 |
| onsubmit | 表单提交事件 |
| ... |
event对象
在函数中传入一个参数，来监听事件
| event常用方法 | 作用 |
|---|---|
| stopPropagation() | 阻止事件冒泡 |
| clientX | 获取鼠标所在位置横坐标 |
| clientY | 获取鼠标所在位置纵坐标 |
| preventDefault | 阻止默认事件 |
事件冒泡
文档中的节点出现重叠的情况，并且拥有相同的事件
默认子节点触发事件时，父节点也会触发事件
阻止事件冒泡
//放在子节点 e.stopPropagation(); //或使用 return false;
表单相关
表单提交使用onsubmit事件，表单中元素通常都需要name属性，除输入框外，还需要设置value属性
获取表单
-
通过id，class，元素选择器来选择
-
使用document.forms获取页面中表单集合
表单提交
表单.onsubmit()事件
阻止表单提交
在表单的提交事件中通过return false；来阻止提交
<body>
<form action="" method="post">
用户名：<input type="text" required placeholder="请输入用户名"><br>
密码：<input type="password" name="pwd" placeholder="请输入密码"><span id="info"></span><br>
性别: <input type="radio" name="sex" value="男" checked>男
<input type="radio" name="sex" value="女">女<br>
爱好: <input type="checkbox" name="hobby" value="旅游" checked>旅游
<input type="checkbox" name="hobby" value="阅读">阅读
<input type="checkbox" name="hobby" value="音乐">音乐<br>
<input type="checkbox" id="checkAll">全选
<input type="checkbox" id="checkChange">反选<br>
职业:<select>
<option value="教师">教师</option>
<option value="医生">医生</option>
<option value="律师">律师</option>
</select>
<input type="text" placeholder="请输入添加的职业" id="newJob"><br>
<input type="submit" id="sub" value="注册"/>
</form>
<script>
var pwdInput = document.querySelector("input[name=pwd]");
//文本失去焦点事件
//onblur 文本框失去焦点
//onchange 文本框失去焦点且内容发生改变
//oninput 内容发生改变 触发
pwdInput.οninput=()=>{
if(pwdInput.value.length<6){
document.getElementById("info").innerHTML="<span style='color:red'>*密码至少六位</span>";
}else{
document.getElementById("info").innerHTML="<span style='color:green'>√</span>";
}
}
var hobbies =document.querySelectorAll("input[name=hobby]");
var checkAll=document.getElementById("checkAll");
var checkChange=document.getElementById("checkChange");
checkAll.οnclick=()=>{
var flag=0;
for(var i = 0;i<hobbies.length;i++){
hobbies[i].checked=checkAll.checked;
if(hobbies[i].checked==true){
flag++;
}
}
if(flag==hobbies.length){
checkAll.checked=true;
}else{
checkAll.checked=false;
}
}
checkChange.οnclick=()=>{
var flag=0;
for(var i = 0;i<hobbies.length;i++){
hobbies[i].checked=!hobbies[i].checked;
if(hobbies[i].checked==true){
flag++;
}
}
if(flag==hobbies.length){
checkAll.checked=true;
}else{
checkAll.checked=false;
}
}
var newJob=document.getElementById("newJob");
newJob.οnblur=()=>{
if(newJob.value==""){
return;
}
if(confirm("确认添加吗？")){
var opt = document.createElement("option");
opt.innerText=newJob.value;
document.querySelector("select").appendChild(opt);
newJob.value="";
}
}
document.forms[0].οnsubmit=()=>{
return true;
}
</script>
</body>
4.jQuery
jQuery
是一个轻量级的js函数库
封装了大量的js内容，本质还是js，是一个js文件
作用
用更少的代码去做更多事情
-
可以获取文档中的元素，并对其操作
-
拥有强大的选择器
-
支持链式写法
-
封装了ajax，更方便使用
使用
1.下载jQuery文件，下载地址：https://jquery.com/
2.将jQuery添加到你的项目中
3.引入
基本选择器
$就是jQuery
| 基本选择器 | 说明 |
|---|---|
| $("#id"); | 根据标签id名获取一个节点 |
| $("div#md") | 获取id为md的div |
| $(".class"); | 根据标签class名获取节点集合 |
| $("标签名"); | 根据标签名获取节点集合 |
| $("选择器1，选择器2，...") | 群组选择器，根据各个选择器获取节点集合 |
层次选择器
| 层次选择器 | 说明 |
|---|---|
| $("div p") | div下的所有p节点 |
| $("div>P") | div下的第一层中所有的p节点 |
| $("#md+p") | id为md的节点后同层紧邻的一个p节点 |
| $("#md~p") | id为md的节点同级的所有p节点 |
过滤选择器
普通过滤选择器
格式：$("选择器：特定单词")
| 特定单词 | |
|---|---|
| odd | 集合中下标为奇数的节点 |
| even | 集合中下标为偶数的节点 |
| eq(index) | 集合中下标等于为index的节点 |
| lt(index) | 集合中下标小于为index的节点 |
| gt(index) | 集合中下标大于为index的节点 |
| first | 所有的元素中的第一个节点 |
| last | 所有的元素中的最后一个节点 |
| nth-child(index) | 集合中第index个节点 |
| first-child | 得到所有作为头节点的元素 |
| not() | 得到除了满足条件之外的所有节点 |
表单元素过滤
格式：$(":~")
| 表单元素过滤 | 说明 |
|---|---|
| :input | 获取所有表单元素 |
| :text | 获取表单中所有文本框 |
| :password | 获取表单中所有密码框 |
| :radio | 获取表单中所有单选框 |
| :checkbox | 获取表单中所有复选框 |
| :checked | 获取表单中被选中的所有单选框/复选框 |
| :selected | 获取表单中被选中的所有下拉菜单的option |
| :reset | 获取重置按钮 |
| :submit | 获取提交按钮 |
属性过滤
格式：$("选择器[属性名='属性值']...")
可写多个属性，表示全都满足的节点
获取属性名为指定值得节点
可以与正则表达式结合
！表示不等于
^表示以什么开头的
$表示以什么结尾的
*表示指定包含
内容过滤
| 内容过滤 | 说明 |
|---|---|
| contains(text) | 包含text文本的标签 |
| empty | 没有文本的标签 |
dom对象和jQuery对象
使用的jQuery选择器得到的对象，称为jQuery对象，只能使用jQuery方法操作节点
使用的js原生的方式得到的对象，称为dom对象，只能使用js中的方法操作节点
jQuery对象与dom对象的转换
jQuery对象转换为dom对象
jQueryObj[0] jQueryObj.get(0)
dom对象转换为jjQuery对象
$(domObj)
操作节点
| 方法 | 说明 |
|---|---|
| css(参数1，参数2).css()... | 操作节点的css样式，参数1表示样式名，参数2为样式值 |
| css({'样式名'：'值'，...}) | 同时设置多个样式 |
| text() | 操作节点的文本属性，有参数表示设置，无参数表示取值,相当于innerText |
| html() | 操作节点的文本属性，相当于innerHTML |
| val() | 获取节点的value值，有参数表示设置，无参数表示取值，相当于value |
| submit() | 表单提交事件 |
| each() | 遍历 |
创建节点
$("完整标签")；
//js写法
document.createElement("div")
//jquery写法
$("<div></div>");
//以上写法创建的节点都是游离的
添加节点
| 添加子节点方法 | 作用 |
|---|---|
| 父节点.append(子节点) | 添加到父节点的末尾 |
| 子节点.appendTo(父节点) | 添加到父节点的末尾 |
| 父节点.prepend(子节点) | 添加到父节点的开头 |
| 子节点.prependTo(父节点) | 添加到父节点的开头 |
| 添加兄弟节点 | 作用 |
|---|---|
| 原节点.before(新节点) | 在原节点前添加新节点 |
| 新节点.insertBefore(原节点) | 在原节点前添加新节点 |
| 原节点.after(新节点) | 在原节点后添加新节点 |
| 新节点.insertAfter(原节点) | 在原节点后添加新节点 |
移除节点
| 移除节点方法 | 作用 |
|---|---|
| 某节点.remove() | 移除指定节点 |
| 某节点.empty() | 移除某节点的子节点 |
复制节点
节点.clone()
修饰节点
| 替换节点 | 作用 |
|---|---|
| 旧.replaceWith(新节点) | 使用新节点替换旧节点 |
| 新.replaceAll(旧节点) | 使用新节点替换旧节点 |
| 包裹节点 | 作用 |
|---|---|
| 某节点.wrap(指定节点) | 某节点被指定节点包裹，即给某节点添加父元素，原节点是一个集合，则包裹所有节点 |
| 某节点.wrapAll(指定节点) | |
| 某节点.wrapInner(指定节点) |
预设动画
| 函数名 | 作用 |
|---|---|
| show() | 同时增大宽width高height，让某个节点展示 |
| hide() | 同时缩小宽width高height，让某个节点隐藏，最终display:none |
| toggle() | 节点显示则隐藏，节点隐藏则显示，通过改变宽高的方式 |
| fadeIn() | 淡入，改变透明度opacity从0-1 |
| fadeOut() | 淡出，改变透明度opacity从1-0，最终display:none |
| fadeToggle() | 节点显示则隐藏，节点隐藏则显示，通过改变透明度opacity的方式 |
| slideUp() | 改变某个节点的高height从原始到0，向上滑入，最后display:none |
| slideDown() | 改变某个节点的高height从0到原始，向下滑出 |
| sildeToggle() | 滑入滑出切换 |
注意：以上所有函数都可以写最多两个参数，第一个参数表示动画执行时间，第二个参数表示动画执行结束后 的回调函数
停止动画
| 函数 | 作用 |
|---|---|
| 节点.shop() | 停止当前动画 |
| 节点.shop(true) | 停止所有动画 |
读取json数据
-
ajax，异步提交，局部刷新，在页面不更新的情况下，更新部分数据
$ajax({
url:"请求路径"，
data:{
name:"xx",
...
},
type:"POST/GET/PUT/DELETE",
success:(res)=>{},
error:(err)=>{}
})
233
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
