本文是关于前端技术的总结，涵盖了HTML的基本结构、颜色表示和常用标签，CSS的选择器、样式和布局，JavaScript的输出方式、DOM操作以及常用的前端框架Bootstrap和LayUI的使用介绍。
WEB前端
应用程序分类
客户端/服务器
Client/Server CS模式
需要用户下载客户端才能使用。
特点：功能丰富、安装繁琐、需要更新、平台不同软件不同。
浏览器/服务器模式
Browser/Server BS模式
用户只需一个浏览器即可使用。
特点：功能较为丰富，无序安装软件，只需一个浏览器，无序更新 ，平台无关，开发时只需设计一套页面。
HTML
Hyper Text Markup Language 超文本标记语言
页面的基本组成结构
<!-- HTML中的注释 -->
<!-- DOC文档TYPE类型 说明当前页面的文档类型 HTML5-->
<!DOCTYPE html>
<html>
<head>
<!-- meta元 设置页面的属性 charset字符集 utf-8表示支持中文的编码格式 -->
<meta charset="utf-8">
<title>页面标题</title>
</head>
<body>
页面主题内容sdfsdfsdf
</body>
</html>HTML中表示颜色的方式
单词表示
red、green、blue、pink、gold、gray、orange
颜色的十进制RGB表示
RGB表示红绿蓝，每个颜色通过0-255范围内的数字表示其颜色的深浅
RGB(0,0,0) 黑色
RGB(255,255,255) 白色
RGB(255,0,0) 红色
RGB(255,0,255) 紫色
颜色的十六进制RGB
#000000 黑色
#FF0000 红色，可以简写为#F00
#00FF00 绿色
#00FFFF 青色
常用标签
页面中的标签，也称为页面中的元素或节点。所有的元素分为两大类。
标签的类型
块级元素
如果一个标签占满整行，称这个标签为块级元素。
行内元素
如果一个标签占一行中的一部分，称这个标签为行内元素。
单标签
| 常用单标签 | 作用 | 类型 |
|---|---|---|
<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> | 已过时。字体 |
列表ul/ol/li
双标签，都是块级元素，li写在ul或ol标签中
通常使用列表实现页面的水平导航、垂直导航
无序列表ul
默认每个li前用实心圆修饰，通过type属性更改
-
square 正方形
-
dist 默认实心圆
-
circle 空心圆
-
none 去掉修饰
有序列表ol
默认每个li前用数字修饰，通过type属性更改
-
a/A
-
i/I
-
1
<!--无序列表--> <ul> <li></li> <li></li> <li></li> </ul> <!--有序列表--> <ol> <li></li> <li></li> <li></li> </ol>
表格table
双标签，table是块级元素，tr、th、td是行内元素
| 表格相关标签 | 作用 |
|---|---|
| table | 定义表格 |
| tr | 表格中的行 |
| td | 一行中的单元格 |
| th | 特殊的td，文字加粗居中，使用th实现表头 |
合并行rowspan="n"
给td添加该属性，表示n行合1行
合并列colspan="n"
给td添加该属性，表示n列合1列
超链接
<!-- 访问某个域名 -->
<a href="http://baidu.com">跳转到baidu</a>
<!-- 访问当前项目中的页面 -->
<a href="指定路径下的指定资源">跳转到指定页面</a>
<!-- 访问资源 -->
<a href="指定路径下的指定图片">跳转到指定图片</a>锚点
1.设置锚点
<a name="锚点名"></a>
2.访问锚点名
<a href="#锚点名">访问锚点</a>
浮动框架iframe
在页面中嵌入一个页面。
<a target="某个iframe的名称" href="某个路径">访问</a>
表单与表单元素
表单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 | 用于输入框或按钮设置为必填或必选项 |
| placehoder | 用于输入框的默认提示文字 |
| checked | 用于单选按钮和复选框默认选中 |
| selected | 用于下拉菜单默认选中 |
| readonly | 只读 |
| disabled | 让某个元素失效 |
| min/max/step | number独有，设置最小/最大/步长 |
| rows/cols | textarea独有，设置行数/列数 |
CSS
Cascading StyleSheets 层叠样式表
用于控制HTML重碱标签样式的语言。
可以精确到像素，用于美化HTML标签
CSS语法
样式名：样式值
选择器
用于选中页面中元素（标签）的工具
ID选择器
1.给某个标签添加id的属性，对其命名
2.通过#id名获取
通常用于获取某一个元素，id名称不能冲突
类选择器
1.给某些标签添加class的属性，对其命名
2.通过.class名获取
用于获取一组元素
后代选择器
*表示所有元素
-
空格
-
得到所有子元素
-
-
>-
得到第一层子元素
-
选择器的优先级
内嵌在style标签 >> id选择器 >> class选择器 >> 标签选择器
在选择某个元素时，尽量将其层次关系写具体，如a b c{}
常用样式
尺寸
只有块级元素才能设置尺寸。
如果要对某个行内元素设置尺寸，需要先将其转换为块级元素。
| 相关样式名 | 值 | 举例 |
|---|---|---|
| width | px/百分比/vw | width:100px/50%/30vw; |
| height | px/百分比/vh | 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代码自动生成uiGradients - Beautiful colored gradients
background: linear-gradient(to 方向, 颜色1, 颜色2，颜色3...) 方向：left right top 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-weight | 字体粗细 | lighter细，bolder粗 |
| font-family | 字体字型 | 默认微软雅黑 |
文本
| 样式名 | 作用 | 值 |
|---|---|---|
| color | 文本颜色 | 颜色的三种写法 |
| text-decoration | 文本修饰 | underline下划线 line-through删除线 overline上划线 通常给页面中的所有a标签设置text-decoration:none去掉a标签默认的下划线 |
| text-align | 文本对齐方式 | 默认left左对齐，right右对齐，center居中 |
| line-height | 行高 | 设置为与文字相同大小时，行间距为0。"垂直居中"时，将行高设置为容器高度。 |
| text-indent | 首行缩进 | 根据文字大小设置缩进的像素。如默认文字16px，首行缩进2个字符，则设置为32px; |
| text-shadow | 文本阴影 | 颜色 水平位置 垂直位置 模糊程度。如#000 4px 5px 3px表示水平向右4px，垂直向下5px，模糊3px |
| 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可以适用于很多标签，如#xx: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
多个元素最终位于同一行内，可以设置尺寸，元素以下线对齐，保留该行位置，保留元素间的缝隙，后续元素为新的一行
盒子模型
页面中的所有块级元素，都是一个"盒子"，每个"盒子"由元素自身、内边距padding、边框border、外边距marjin组成。
边框border：元素外的一圈
内边距padding：边框与元素自身之间的距离
外边距marjing：元素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 | 固定定位 | 让元素固定在页面的某个位置，不会页面的滚动而改变位置。 |
| absulote | 绝对定位 | |
| relative | 相对定位 |
配合定位使用样式
| 作用 | 值 | |
|---|---|---|
| left | 元素距离页面左边界的左右距离 | 正值向右，负值向左 |
| top | 元素距离页面上边界的上下距离 | 正值向下，负值向上 |
| right | 元素距离页面右边界的左右距离 | 正值向左，负值向右 |
| bottom | 元素距离页面下边界的上下距离 | 正值向上，负值向下 |
文档流
页面中每个元素默认都有自己的位置，这个位置称为文档流。
如果某个元素脱离文档流，就会失去它原本所占的位置，后续元素就会顶替其位置。
可以通过浮动float、固定定位positon:fixed、绝对定位positon:absolute让元素脱离文档流。
脱离文档流后，通过改变left、right、top和bottom移动其位置。
固定定位fixed
让某个元素脱离文档流，默认根据页面的四个边界进行定位。
绝对定位absolute
让某个元素脱离文档流，根据已定位的父元素进行定位。如果没有已定位的父元素，会根据body定位。
相对定位relative
元素不会脱离文档流，根据它原本的位置进行定位，定位原点是元素本身的位置。
层叠z-index
对于已定位的元素，可以通过z-index调整层叠顺序，值是一个数字，越大离眼睛越近。
不透明度opacity
设置某个元素的不透明度，0~1之间的小说表示不透明度。1完全不透明，0完全透明。
如果只是定义背景透明时，使用rgba(red,green,blue,alpha)，alpha使用
JavaScript
是一门弱类型的面向对象的解释型脚本语言。
解释型：无需编译，通过解释器解释运行，浏览器就是一个JS解释器
script脚本：按指令依次执行
JS中输出的方式
控制台输出
console.log(内容);
提示框输出
alert(内容);
页面输出
document.write(内容);
JS的组成
ECMAScript
简称ES，是JS的标准，也是JS的核心语法。
BOM
浏览器对象模型，用于操作浏览器。
DOM
文档对象模型，用于操作元素。
定义变量
通过var 定义变量
var/let 变量名;
var name;
var age;
let sex;
运算符
js中的boolean类型，0可以表示false，非0可以表示true。
默认true为1，可以用true或false当做数字来运算。
- 算术
+ - * / %
+ 两端如果有一段是字符串，作为拼接使用
+ 两端都是数值，作为相加使用
除+外，其余符号都能计算字符串
- 条件
表达式1?表达式2:表达式3
判断表达式1的结果，结果为true，执行表达式2，结果为false执行表达式3
条件语句
if语句
js中的if语句条件可以是boolean值，也可以是一个数字(0false，非0true)
//单分支
if(){
}
//双分支
if(){
}else{
}
//多分支
if(){
}else if(){
}
//嵌套
if(){
if(){
}
}else{
if(){
}
}switch语句
//可以是任意类型
var opt;
switch(opt){
case 1:break;
case "abc":break;
case true:break;
}break和continue
continue停止本次循环，执行下一次循环。
break停止所有循环。
数组中的方法
| 常用方法 | 作用 | 返回值 |
|---|---|---|
| reverse() | 反转数组中的元素 | 反转后的数组 |
| sort() | 对数组中的元素按字母表顺序排序 | 排序后的数组 |
| sort(function(a,b){return a-b}) | 按指定函数排序，返回负数升序，正数降序 | 排序后的数组 |
| pop() | 删除最后一个元素 | 被删除的元素 |
| push(obj...) | 添加n个元素到数组末尾 | 新数组的长度 |
| shift() | 删除第一个元素 | 被删除的元素 |
| unshift(obj...) | 添加n个元素到数组开头 | 新数组的长度 |
| fill(obj) | 使用obj填充数组 | 填充后的数组 |
| splice(index) | 移除[index,数组.length)的元素 | 被移除的元素数组 |
| splice(index,count) | 从index开始移除count个元素 | 被移除的元素数组 |
| 以上方法在调用后，都会影响原数组 |
| 方法名 | 作用 | 返回值 |
|---|---|---|
| indexOf(元素) | 得到指定元素第一次出现的索引 | 索引，没有返回-1 |
| lastIndexOf(元素) | 得到指定元素最后一次出现的索引 | 索引，没有返回-1 |
| concat(元素) | 将数组拼接指定元素 | 拼接后的新数组 |
| join(字符) | 将数组中的元素使用字符拼接为字符串 | 拼接后的返回值 |
| slice(index) | 从index开始截取至末尾的元素 | 截取后的元素数组 |
| slice(start,end) | 截取[start,end)范围内的元素 | 截取后的元素数组 |
| map(方法名) | 让数组中的每个元素执行指定的方法 | 执行方法后的数组 |
| 以上方法在调用后，不会影响原数组 |
字符串
JS中的字符串，是一个字符数组。
使用双引号或单引号或new String()定义字符串。
可以通过下标访问字符串中的某个字符。
| 常用属性和方法 | 说明 |
|---|---|
| length | 得到字符串长度 |
| trim()/trimLeft()/trimRight() | 去除首尾/左/右空格 |
| toUpperCase()/toLowerCase() | 转换大写/小写 |
| sub()/sup()/bold()/italics() | 文字下标/上标/加粗/倾斜 |
| charAt(index) | 得到index对应的字符 |
| indexOf(string)/lastIndexOf(string) | 得到string第一次/最后一次出现的索引，没有返回-1 |
| substring(index)/substring(from,to) | 截取index至末尾/截取[from,to)范围的字符 |
| substr(index)/substr(index,length) | 截取index至末尾/截取index起length个字符 |
| split(string) | 根据指定内容切分字符串，得到字符串数组 |
| replace(oldStr,newStr) | 替换第一次出现的oldStr为newStr |
| replaceAll(oldStr,newStr) | 替换全部的oldStr为newStr |
| startsWith(str) | 是否以str开头 |
| endsWith(str) | 是否以str结尾 |
| includes(str) | 判断是否包含str |
正则表达式
一套自定义规则，用于检索、修改满足条件的字符串。
//JS中定义正则表达式
var regex = /规则/;
//验证该字符串是否满足规则
regex.test(字符串);| 常用规则 | 说明 |
|---|---|
| /a/ | 检索字母a |
| /abc|hello/ | 检索abc或hello整体单词 |
| /a|b|c/ | 检索a或b或c |
| /[abc]/ | 检索a或b或c |
/[^abc]/ | 检索除a或b或c之外的内容 |
| /[a-c]/ | 检索a到c之间的字母 |
| \d | 检索任意数字，等效于[0-9] |
| \D | 检索任意非数字，等效于[^0-9] |
| \w | 检索任意字母、数字、下划线，等效于[0-9a-zA-Z_] |
| \W | 检索非字母、数字、下划线，等效于[^0-9a-zA-Z_] |
| \s | 检索空格 |
| \S | 检索非空格 |
| \d{3} | 检索连续3个数字 |
| \d{3,5} | 检索最少3个，最多5个连续数字 |
| \d{3,} | 检索最少3个连续数字 |
| ^ | 是否以指定内容开头 |
| $ | 是否以指定内容结尾 |
| [a-z]+ | 检索至少1个小写字母，相当于[a-z]{1,} |
| [a-z]? | 检索0个或1个小写字母，相当于[a-z]{0,1} |
| [a-z]* | 检索0个或多个小写字母，相当于[a-z]{0,} |
| . | 检索任意一个字符，如h.t表示hot或hat之类中间字符未知的情况 |
\. | 检索符号. |
| g | 全局匹配，默认情况下正则表达式只会匹配第一次满足的内容，g表示全文匹配 |
| i | 忽略大小写匹配 |
QQ邮箱的正则表达式
-
www.开头，可有可无
-
qq号码是非零开头的5-10位数字
-
@qq.com结尾
-
忽略大小写
Math
JS中的Math类似于Java中的Math类，其中的方法可以直接通过Math调用。
| 常用方法 | 作用 |
|---|---|
| Math.random() | 生成[0,1)内的随机数 |
| Math.abs(number) | number的绝对值 |
| Math.floor(number) | 向下取整 |
| Math.ceil(number) | 向上取整 |
| Math.round(number) | 四舍五入 |
| Math.sqrt(number) | number开平方 |
| Math.cbrt(number) | number开立方 |
| Math.pom(a,b) | a的b次幂 |
| Math.max(a,b...)/Math.min(a,b..) | 得到参数之间的最大/最小值 |
函数function
类似于java中的方法。是一段独立的代码，可以完整一件事情。
定义的函数可以被重复调用，函数能减少重复代码，达到代码复用的效果。
调用函数
通过.操作符号，由对象名或类名或直接调用。
ar now=new Date();
now.getMonth();//通过对象调用
Math.random();//通过类名调用
parseInt("123");//直接调用全局函数
JS中可以直接调用的函数
| 常用全局函数 | |
|---|---|
| parseInt(string)/parseFloat(string) | 将string转换为number,参数必须以数字开头，转换后只保留数字部分，如果无法转换结果为NaN(not a number) |
| Number(string) | 将纯数字字符串转换为number |
| isNaN(obj) | obj is not a number。"obj不是一个数字",如果结果为true，表示obj不是数字，结果为false，表示obj是数字 |
| eval(string) | 计算一个可计算的字符串。如"3+2*5",可以通过该函数计算出结果 |
自定义函数
function 函数名(形参名1,形参名2...){
return 函数体;
}
var 函数名=new function(形参名1,形参名2...){
//函数体
}
//通过函数名调用该函数
var 函数名=function(形参名1,形参名2...){
//函数体
}
//通过函数名调用该函数
var 函数名=(形参名1,形参名2...)=>{
//函数体
}
//通过函数名调用该函数函数的分类
-
无参数无返回值
function sayHello(){ alert("hello world"); } -
有参数无返回值
function getAge(birthYear){ var age=new Date().getFullYear()-birthYear; alert(age); } -
无参数有返回值
function getNowMonth(){ return new Date().getMonth()+1; } -
有参数有返回值
function getRandomNum(min,max){ return Math.floor(Math.random()*Math.abs(max-min))+Math.min(min,max); } -
匿名函数
页面中的元素.事件=function(参数){ 函数体; } 页面中的元素.事件=(参数)=>{ 函数体; }
window对象
表示浏览器窗口对象，可以获取当前窗口信息，控制该窗口的行为。
| 常用属性和方法 | 作用 |
|---|---|
| window.innerWidth window.innerHeight | 获取浏览器当前窗口的可视区域宽高 |
| window.screen | 获取当前screen对象，包含了屏幕相关信息 |
| window.location | 获取当前location对象，包含了浏览器地址栏相关信息 |
| window.history | 获取当前history对象，包含了浏览器历史记录相关信息 |
| [window.]alert("提示文字") [window.]confirm("提示文字") [window.]prompt("提示文字") | 警告框 确认框 输入框 |
| var wid=window.open("路径") | 弹出新窗口打开指定路径，返回打开的窗口对象 |
| window.close() wid.close() | 关闭本窗口/关闭指定窗口 |
| var myTimeout=[window.]setTimeout(函数,毫秒) | 在指定的毫秒后执行一次函数，返回该延时装置对象 |
| [window.]clearTimeout(myTimeout) | 关闭指定的延时装置 |
| var myInterval=[window.]setInterval(函数,毫秒) | 在指定的毫秒后重复执行函数，每次执行都会间隔指定时间，返回该间隔装置对象 |
| [window.]clearInterval(myInterval) | 关闭指定的间隔装置 |
| [window.]localStorage | 获取浏览器存储器对象 |
| [window.]sessionStorage | 获取浏览器会话存储器对象 |
| []可以省略，如alert()、setInterval()等 |
screen对象
| 属性 | 作用 |
|---|---|
| screen.width | 当前屏幕的宽度 |
| screen.heigth | 当前屏幕可用高度 |
| screen.availWidth | 当前屏幕去除任务栏后的可用宽度 |
| screen.availHeight | 当前屏幕去除任务栏后的可用高度 |
location对象
| 常用属性和方法 | 作用 |
|---|---|
| location.href | 读取或者设置浏览器当前地址栏的信息 |
| location.assign("地址") | 设置浏览器跳转到指定地址 |
| location.replace("地址") | 将当前浏览器地址替换为指定地址，无法后退 |
| location.reload() | 刷新页面 |
| location.host | 获取当前地址的主机名+端口号 |
| location.hostname | 获取当前地址的主机名 |
| location.port | 获取当前地址的端口号 |
| location.protocol | 获取当前地址的协议名 |
http://localhost:8080 http是协议protocol localhost是主机名hostname 8080是端口号port 整体是一个站点的名称
localStorage对象
| 常用方法 | 作用 |
|---|---|
| localStorage.setItem(key,value) | 在浏览器本地存储器中保存一组键值对，在同一个站点下，不同页面之间可以共享 |
| localStorage.getItem(key) | 在浏览器本地存储器中获取某个键的值 |
history对象
| 常用方法 | 作用 |
|---|---|
| history.forward() | 前进 |
| history.back() | 后退 |
| history.go(1)/history.go(-1) | 前进/后退 |
获取节点
| 获取节点的方式 | 说明 |
|---|---|
| document.getElementById("某个标签的id名") | 根据id获取唯一的一个节点 |
| document.getElementsByClassName("某些标签的class名") | 根据class获取对应的所有节点 |
| document.getElementsByTagName("某个标签名") | 根据标签名获取对应的节点 |
| document.getElementsByName("某些标签的name名") | 根据标签的name属性名获取对应的节点 |
| document.querySelector("任意选择器") | 根据选择器获取第一个满足条件的节点 |
| document.querySelectorAll("任意选择器") | 根据选择器获取所有满足条件的节点 |
内容操作
节点.innerText
获取或设置双标签中的文本
//设置id为md的标签中的文本为xxx
document.getElementById("md").innerText="xxx";
//获取id为md的标签中的文本
var text=document.getElementById("md").innerText;
console.log(text);
节点.innerHTML
能识别内容中的HTML元素
//设置id为md的标签中的文本为xxx
document.getElementById("md").innerHTML="xxx";
//获取id为md的标签中的文本
var text=document.getElementById("md").innerHTML;
console.log(text);
样式操作
修改单个样式
节点.style.样式名=值;
样式名是驼峰命名法，如设置背景色，css中为background-color，这里写为backroundColor
修改多个样式
节点.style.cssText="样式名:值;样式名:值;"
样式名和css中相同
事件
某个节点的某个行为，称为这个节点的事件。
| 常用事件 | 作用 |
|---|---|
| onclick | 鼠标单击 |
| onchange | 内容改变 |
| onfocus | 获得焦点 |
| onblur | 失去焦点 |
| onmouseenter/onmouseover | 鼠标移入 |
| onmouseout/onmouseleave | 鼠标移出 |
| onmousemove | 鼠标移动 |
| onmousedown/onmouseup | 鼠标按下/松开 |
| oninput | 文本框输入 |
| onsubmit | 表单提交 |
| ... | 鼠标滚轮监听、键盘监听等 |
获取表单
-
id、class、元素选择器等
-
document.forms获取页面中的表单集合
<form id="form_id" class="form_class" name="form_name">
</form>
<script>
var form=document.getElementById("form_id");
var form=document.getElementsByClassName("form_class")[0];
var form=document.getElementsByName("form_name")[0];
var form=document.forms()[0];
</script>jQuery
jQuery是一个轻量级的javascript函数库。
封装了很多js的内容，本质还是javascript，是一个.js文件。
选择器
基本选择器
| 基本选择器 | |
|---|---|
| $("#id名"); | id选择器，根据标签的id名获取单个节点 |
| $(".class名") | 类选择器，根据标签的class名获取多个节点 |
| $("标签名") | 元素选择器，根据标签名获取多个节点 |
| $("选择器1,选择器2...") | 群组选择器，根据各个选择器获取多个节点 |
| $("div#md") | 获取id为md的div节点 |
层次选择器
| 层次选择器 | |
|---|---|
| $("#md空格*") | id为md的节点下的所有子节点。*表示所有节点。 |
| $("#md空格p") | id为md的节点下的所有p节点。 |
| $("#md>*") | id为md的节点下的第一层子节点。 |
| $("#md>p") | id为md的节点下的第一层p节点。 |
| $("#md+p") | id为md的节点后紧邻的p节点 |
| $("#md~p") | id为md的节点之后同级的p节点 |
过滤选择器
普通过滤
$("选择器:特定单词")
| 普通过滤 | |
|---|---|
| $("tr:odd") | 奇数索引，得到索引1,3,5... |
| $("tr:even") | 偶数索引，得到索引0,2,4... |
| $("tr:eq(3)") | 得到指定索引的节点，eq表示equals |
| $("tr:lt(3)") | 得到小于指定索引的节点，lt表示less then |
| $("tr:gt(3)") | 得到大于指定索引的节点，gt表示greater then |
| $("td:nth-child(2n-1)") | 得到所有奇数td。2n-1表示奇数 |
| $("tr:first") | 得到所有的tr节点中的第一个节点 |
| $("tr:last") | 得到所有的tr节点中的最后一个节点 |
| $("li:first-child") | 得到所有作为头结点的li |
| $("li:last-child") | 得到所有作为尾节点的li |
| $("li:not(:first)") | 得到所有li中的非头结点li |
表单元素过滤
| 表单元素过滤 | |
|---|---|
| $(":input") | 得到所有的表单元素，包含input、select、textarea |
| $(":text") | 得到文本框 |
| $(":password") | 得到密码框 |
| $(":radio") | 得到单选按钮 |
| $(":checkbox") | 得到复选框 |
| $(":checked") | 得到被选中的单选按钮或复选框 |
| $(":selected") | 得到被选中的下拉菜单的option |
| $(":reset")/$(":submit") | 得到重置/提交按钮 |
属性过滤
| 属性过滤 | |
|---|---|
| $("选择器:not([属性名])") | 得到没有指定属性的节点 |
| $("选择器[属性名=值]") | 得到指定属性名为指定值的节点 |
| $(":text[name=username]") | 得到name属性为username的文本框 |
| $(":radio[name=sex]:checked") | 得到name属性为sex且被选中的单选按钮 |
| $(":checkbox[name=hobby]:checked") | 得到name属性为hobby且被选中的复选框 |
| $("选择器[属性名^=值]") | 得到指定属性名以指定值开头的节点 |
| $("选择器[属性名$=值]") | 得到指定属性名以指定值结尾的节点 |
$("选择器[属性名1=值][属性名2=值]") | 得到同时拥有属性1和属性2且指定值的节点 |
| $("选择器[属性名*=值]") | 得到指定属性包含指定值的节点 |
| $("选择器[属性名!=值]") | 得到指定属性名不为指定值的节点 |
js对象(dom对象)和jquery对象
使用jquery中的选择器获取到的节点，称为jquery对象，只能使用jquery的方法操作节点。
使用js中原生的方式获取到的节点，称为dom对象，只能使用js中的方法操作节点。
jquery对象和dom对象互转
-
jquery对象转换为dom对象
jquery对象.get(0); jquery对象[0]; -
dom对象转换为jquery对象
$(dom对象);操作节点
获取、设置节点的内容
常用函数 节点.val() 获取某个节点的value属性值，相当于js中的 节点.value 节点.val("值") 设置某个节点的value属性值，相当于js中的 节点.innerText="内容" 节点.text() 获取某个节点的文本，相当于js中的 节点.innerText 节点.text("内容") 设置某个节点的内容，相当于js中的 节点.innerText="内容" 节点.html() 获取某个节点的内容，相当于js中的 节点.innerHTML 节点.html("内容") 设置某个节点的内容，相当于js中的 节点.innerHTML="内容"
获取、设置节点的属性
| 常用函数 | |
|---|---|
| 节点.attr("属性名") | 获取某个节点的某个属性 |
| 节点.attr("属性名","值") | 设置某个节点的某个属性为指定值 |
| 节点.removeAttr("属性名") | 移除某个节点的某个属性 |
| 节点.addClass("class名") | 给某个节点追加class值 |
| 节点.removeClass("class名") | 移除某个节点的某个class值 |
| 节点.toggleClass("class名") | 切换某个节点的class值。如果存在该值则移除，不存在则追加 |
| 节点.hasClass("class名") | 判断某个节点是否存在某个class值 |
通过节点获取节点
| 函数名 | |
|---|---|
| 某节点.next() | 获取某节点之后紧邻的一个节点 |
| 某节点.prev() | 获取某节点之前紧邻的一个节点 |
| 某节点.nextAll(选择器) | 获取某节点之后的所有同级节点，参数可以是指定选择器 |
| 某节点.prevAll(选择器) | 获取某节点之前的所有同级节点，参数可以是指定选择器 |
| 某节点.sibling(选择器) | 得到某个节点的所有同级节点 |
| 父节点.children(选择器) | 得到父节点中的所有子节点 |
| 节点集合.first() | 得到节点集合中的第一个节点 |
| 节点集合.last() | 得到节点集合中的最后一个节点 |
| 子节点.parent() | 得到子节点的父节点 |
| 某节点.index() | 得到某个节点在所在同级节点集合中的索引 |
触发事件
节点.事件函数()
//轮播变量
var i = 1;
// 每隔2s，让对应的头像点击
setInterval(() => {
//触发节点的单击事件
$("#head>div:eq(" + i + ")").click();
// 循环
if (i++ == 4) {
i = 0;
}
}, 2000);| 常用事件 | |
|---|---|
| click() | 单击 |
| hover(函数1,函数2) | 鼠标进入时触发函数1，离开触发函数2。如果只有一个函数参数，进入和离开都触发该函数。 |
| mouseenter()/mouseover() | 鼠标进入 |
| mouseout()/mouseleave() | 鼠标离开 |
| mousemove() | 鼠标移动 |
| blur() | 失去焦点 |
| focus() | 获得焦点 |
| change() | 改变 |
| input() | 输入 |
| submit() | 表单提交 |
前端框架
设计者提供给用户该框架的css和js文件。
用于只需要导入css文件和js文件，就通过对应的class，使用该框架中相应的样式和效果。
任何前端框架都有对应的API，应用程序接口文档，包含了该框架的用法。
Bootstrap
由Twitter公司推出的一套Web框架。其核心内容是栅格系统。
使用
1.官网下载核心文件
/
/
2.将解压后的整个文件夹保存到项目目录中
3.新建页面，导入bootstrap中的核心文件
-
css文件
-
bootstrap.css或bootstrap.min.css
-
-
js文件
-
bootstrap依赖于jquery，所以先导入jquery.js文件
-
再导入bootstrap.js或bootstrap.min.js
-
LayUI
由国内开发者设计的一套基于jquery的前端框架。
官网现已下架，但LayUI可以继续使用。
使用
1.镜像网站下载
2.解压后将layui目录导入到项目目录中
3.在页面中导入layui的css文件和js文件
JSON
JavaScript Object Notation JS对象简谱
是一种数据交换格式，可以理解为保存数据、交换数据的一种格式。
JSON数以键值对的形式保存。
"键":值
键是一个字符串，值可以是普通类型、对象或数组
值的数据类型
| 值的类型 | |
|---|---|
| 字符串 | "name":"ez" |
| 数值 | "age":20 |
| 布尔值 | "married":true |
| 空 | "xxx":null |
| 对象 | "dog":{"name":"旺财","type":"哈士奇"} |
| 数组 | "cars":[{"name":"宝马"},{"name":"奔驰"}] |
- $.getJSON(URL,回调函数)
$.getJSON("json/selfinfo.json",(res)=>{
console.log(res.name);
console.log(res.age);
console.log(res.married);
console.log(res.house);
console.log(res.pet);
console.log(res.pet.name);
console.log(res.pet.type);
console.log(res.family[0]);
console.log(res.family[1]);
});- ajax，异步提交，局部刷新。在保证页面不重新加载的情况下，只更新部分数据
$.ajax({
url:"请求路径",
data:{
//请求时携带的参数
name:'xx',
age:20
},
type:"post/get/put/delete",
success:(res)=>{
//请求发送成功后的回调函数
//res表示请求后得到的数据
}，
error:(res)=>{
//请求发送失败后的回调函数
//res表示请求后得到的数据
}
});
349
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
