华清远见-重庆中心-前端技术总结与面试题解析
华清远见-重庆中心-前端技术总结与面试题解析
前端技术总结
HTML
Hyper Text Markup Language 超文本标记语言
超文本：超级文本/超链接文本，超越了文本的限制，如多媒体文件、超链接等。
标记：也可以称为标签，用<>括起来的一个特定单词，整体称为标记或标签，分为单标签和双标签。
- 单标签：<单词/>
- 双标签：<单词></单词>
标签的类型
- 块级元素，占页面中的一整行。block
- 行内元素，占一行中的一部分。inline
标签的属性
标签第一个中括号中，使用 属性=“值” ，让某个标签拥有特定属性。
如
<meta charset="utf-8">
中，charset=“utf-8"就是meta标签的属性
chartset称为属性名，utf-8称为属性值。
如果有多个属性，使用空格隔开。
如
<div id="xxx" class="xxx"></div>
。
页面种显示颜色的方式
- 颜色单词，如red、blue、green等
- 颜色RGB。R-RED,G-GREEN,B-BLUE。rgb(255,0,0)表示红色，数字范围[0,255]，值越大，对应的颜色越深
- 颜色的十六进制RGB。#FF0000表示红色，相当于RGB(255,0,0)
资源的路径
绝对路径：资源的完整地址。如在线图片地址或带有盘符的地址
相对路径：从当前页面出发，找到图片所在位置
- 使用“…/”跳出当前目录
- 使用"xxx/“进入xxx目录
常用标签
文字
| 标签名 | 作用 |
|---|---|
| h1~h6 | 块级元素。标题。文字加粗，1最大，6最小。通常用h1~h3 |
| p | 块级元素。段落。 |
| span | 行内元素。 |
| pre | 块级元素。预处理标签。 |
| i | 行内元素。倾斜。 |
| u | 行内元素。下划线。 |
| b | 行内元素。加粗。 |
| sub | 行内元素。文字下标。 |
| sup | 行内元素。文字上标。 |
| 以上标签都是双标签 |
用法：复制表情对应的十进制或十六进制的代码，最好使用span显示
<!--十进制 &#特定值;-->
<span>⭐</span>
<!--十六进制 &#x特定值; -->
<span>⌛</span>图片img
单标签，行内元素
<img src="图片路径" alt="无法显示图片时显示的文字" title="鼠标悬停时的提示文字" width="宽度" height="高度">列表ul/ol/li
双标签，块级元素，li是ul或ol的子标签
无序列表ul
默认每一项前用实心圆符号修饰
通过type属性修改符号
- disc 默认，实心圆
- circle 空心圆
- square 正方形
- none 去掉修饰符号
<ul>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
</ul>有序列表ol
默认每一项前用自增数字修饰
通过type属性修改符号
- a/A 英文字母
- i/I 罗马符号
- 1 默认数字
- none 去掉修饰符号
<ol>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
</ol>表格table
| 表格中的标签 | 作用 |
|---|---|
| tr | 表格中的行 |
| td | 每行中的单元格 |
| th | 特殊的单元格，表头，文字加粗居中 |
td可以通过
colspan=“3”属性实现跨3列
rowspan=“2”属性实现跨2行
<table border="1" >
<tr>
<th></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<tr>
<td rowspan="2">上午</td>
<td>语文</td>
<td>数学</td>
<td>语文</td>
<td>数学</td>
<td>语文</td>
</tr>
<tr>
<td>数学</td>
<td>语文</td>
<td>数学</td>
<td>语文</td>
<td>数学</td>
</tr>
<tr>
<td colspan="6" align="center">午休</td>
</tr>
<tr>
<td rowspan="2">下午</td>
<td>体育</td>
<td>音乐</td>
<td>自然</td>
<td>科技</td>
<td>美术</td>
</tr>
<tr>
<td>音乐</td>
<td>体育</td>
<td>科技</td>
<td>美术</td>
<td>自然</td>
</tr>
</table>水平线hr
<hr color="颜色" size="粗细" width="宽度">换行br
<br>a标签
行内元素，双标签。
超链接
可以通过a标签访问任何一个地址
<a href="资源路径" target="">点击跳转</a>target可以控制要访问的资源在哪里打开
_self 默认。在当前页面打开
_blank 在新页面打开
_parent 在父页面打开
指定的name名
- 如果是锚点的name，通过“#name“访问
- 如果是iframe的name，通过"name"访问
锚点
可以通过a标签定义锚点和访问锚点，实现当前页面的快速定位
1.设置锚点
<a name="锚点名"></a>2.访问锚点
<a href="#指定的锚点名">点击访问锚点</a>浮动框架iframe
<a href="xx" target="main">xx</a>
<a href="yy" target="main">yy</a>
<iframe name="main" src="页面的路径" width="宽度" height="高度">
</iframe>marquee 标签
<!--
direction="left/right/up/down"朝向。默认 left
behavior=""行为。scroll 默认重复 slide 移动到底后停止 alternate 往复
scrollamount=""移动速度。
-->
<marquee scrollamount="10" direction="right" >
xxxx
</marquee>表单和表单元素
表单 form
双标签，用于接收用户输入的数据
<form action="表单提交的最终目的路径" method="表单提交方式">
</form>form 表单有两个重要的属性
- action:设置提交路径
- 可以是一个页面，也可以是后台请求映射
- method:设置提交方式
- 默认值为 get，表示使用 get 方式提交，提交的数据会暴露在浏览器地址栏中
- 设置为 post 方式，提交的数据不会暴露在浏览器地址栏中
表单元素
定义在表单 form 标签中的标签
| 常用表单元素 | 作用 |
|---|---|
| input | 单标签，行内元素。通过修改关键属性 type，变化为不同的组件 |
| select | 双标签，行内元素。下拉菜单 |
| textarea | 双标签，行内元素。文本域 |
| input 标签 type 属性的值 | 作用 |
|---|---|
| text | 文本框 |
| password | 密码框 |
| radio | 单选按钮 |
| checkbox | 复选框 |
| date | 日历组件 |
| number | 数字组件 |
| hidden | 隐藏域 |
| file | 上传文件 |
| image | 图片提交按钮 |
| submit | 提交按钮 |
| reset | 重置按钮 |
| 表单元素中的属性 | 作用 |
|---|---|
| name | 用于提交数据时设置提交的参数名 |
| value | 用于设置组件的默认值 |
| checked | 用于设置单选按钮和复选框的默认选中 |
| placeholder | 用于设置输入框的提示文字 |
| required | 用于设置输入框为必填项 |
| selected | 用于设置下拉菜单默认选中 |
| disabled | 用于设置某个组件为不可用状态 |
| readonly | 用于设置某个组件为只读状态 |
| max/min/step | number 独有，用于设置最大值、最小值和步长 |
| rows/cols/ | textarea 独有，用于设置文本域的行数和列数 |
div 标签
块级元素，双标签，没有任何特点。
页面布局时采用 div 布局。
CSS
Cascading Style Sheets 层叠样式表
用于控制 HTML 中标签样式的语言。可以精确到像素，美化修饰 HTML 标签。
CSS 语法
样式名：样式值；
color:red;
font-size:20px;
选择器
用于选择页面中元素(标签)的工具。
id 选择器
1.给标签添加 id 属性，对其命名
2.在 style 标签中通过**#id**名获取
通常用于选择某 一个元素
<html>
<head>
<style>
#test{
}
</style>
</head>
<body>
<div id="test">
</div>
</body>
</html>class 选择器
1.给标签添加 class 属性，对其命名
2.在 style 标签中通过**.class**名获取
通常用于选择 一组元素
<html>
<head>
<style>
.test{
}
</style>
</head>
<body>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</body>
</html>元素/html/标签选择器
直接通过标签名获取。
通常用于选择一组元素。
<html>
<head>
<style>
div{
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>层次选择器
通过空格或>获取某个元素的子元素。
“元素 A 元素 B” 表示获取元素 A 下的所有元素 B
““元素 A > 元素 B” 表示获取元素 A 下的第一层元素 B
<html>
<head>
<style>
#father div{
获取其中的所有子元素
}
#father > div{
获取其中的第一层子元素
}
</style>
</head>
<body>
<div id="father">
<div>
<div>使用>无法获取该 div</div>
</div>
<div></div>
</div>
</body>
</html>群组选择器
通过,同时选择多个元素
<html>
<head>
<style>
div,#mp,.mu{
}
</style>
</head>
<body>
<div ></div>
<p id="mp"></p>
<ul class="mu">
<li></li>
</ul>
</body>
</html>CSS 优先级
style 属性==>style 标签==>引入 css 文件。
如果某个元素同时拥有 id、class 以及 style 属性时。
优先级从高到低
style 属性==>id 选择器==>类选择器==>元素选择器
常用样式
尺寸
只能对块级元素设置尺寸。
如果要对行内元素设置尺寸，需要先将其改为块级元素。
| 样式名 | 作用 | 值 |
|---|---|---|
| width | 设置块级元素的宽度 | px 像素或百分比或 vw |
| height | 设置块级元素的高度 | px 像素或百分比或 vh |
设置为像素时，元素不会根据浏览器的窗口大小变化而变化，是固定值。
设置为百分比或 vh/vw 时，元素会根据浏览器的窗口大小变化二变化，都是百分比。
如果元素需要根据实际窗口变化，宽度建议使用百分比，高度建议使用 vh。
背景 background
| 样式名 | 作用 | 值 |
|---|---|---|
| background-color | 背景色 | 颜色的单词、十进制 RGB、十六进制 RGB |
| background-image | 背景图 | url(图片路径) |
| background-repeat | 背景重复 | 默认重复。 no-repeat 不重复 repeat-x 表示 x 轴重复 repeat-y 表示 y 轴重复 |
| background-size | 背景尺寸 | 默认加载原图。 100%表示完整显示图片。 cover 表示覆盖元素。 如 body 的背景如果设置为 cover，随着页面高度变大，背景也会变大，100%则会完整显示图片。 |
| background-position | 背景位置 | 可以同时设置 x 轴和 y 轴的距离。 如 10px 20px 表示向右移动 10px，向下移动 20px 也可以通过 background-position-x 或-y 只移动具体轴 通过使用 right left top bottom center 设置指定方向 |
| background-attachment | 背景固定方式 | fixed 表示固定背景，scroll 或默认表示跟随滚动条移动 |
| background | 背景属性简写 | 可以同时设置图片路径、是否重复和图片位置，无关顺序。如 background:url(图片地址) no-repeat right top 表示图片不重复位于容器右上角 |
| background | 渐变函数 | linear-gradient(to left, #7a28c1, #a17fe0, #59C173) |
边框 border
边框会"套"在元素外层，元素原本大小不变，但所占区域会变为原本大小+边框宽度
| 样式 | 作用 | 值 |
|---|---|---|
| border-style | 边框线型 | solid 单线，double 双线，dotted 点线，dashed 虚线 |
| border-width | 边框宽度 | 像素 |
| border-color | 边框颜色 | 颜色的三种写法 |
| border | 同时设置边框线型、宽度和颜色 | 1px solid red |
| border-方向-样式 | 某个方向的 style 或 width 或 color。方向可以是 left、right、top、bottom | border-bottom-color:red |
| border-方向 | 同时设置指定方向边框线型、宽度和颜色 | border-right:1px solid red; |
| border-上下-左右-radius | 设置某个方向为圆角 | |
| border-radius | 同时设置四个角为圆角。如果正方形，值设置为边长的一半变为圆形 | |
| outline | 轮廓。input 文本框获得焦点时，会自动显示一个轮廓，通过将该属性设置为 none 去除轮廓 | |
| border-collapse | 合并相邻边框。通常用于表格设置边框时，将其值改为 collapse，表示合并相邻 td 边框。 | collapse |
字体 font
| 样式名 | 作用 | 值 |
|---|---|---|
| font-size | 字体大小 | 像素。默认 16px，最小 12px |
| font-family | 字体字型 | 默认微软雅黑 |
| font-weight | 字体粗细 | lighter 细，bolder 粗 |
文本 text
| 样式 | 作用 | 值 |
|---|---|---|
| color | 文本颜色 | 颜色的三种写法 |
| text-align | 文本对齐方式 | 默认 left，right 右对齐，center 居中 |
| line-height | 行高 | 像素。如果希望文字“垂直居中”，设置行高为所在容器的高度。 |
| letter-spacing | 字符间距 | 像素。 |
| text-indent | 首行缩进 | 像素。如果缩进 2 个字，默认设置为 32px |
| text-shandow | 文本阴影 | 颜色 水平位置 垂直位置 模糊程度。如 gray 4px 4px 3px 表示向右下角移动 4px，模糊 3px |
| text-decoration | 文本修饰 | under-line 下划线，over-line 上划线，line-through 删除线。通常将 a 标签设置该样式为 none 表示去掉默认的下划线 |
| word-break | 英文换行方式 | 默认以单词为单位换行，不会拆分单词。break-all 表示以字母为单位换行，会拆分单词。 |
列表 list
| 样式名 | 作用 | 值 |
|---|---|---|
| list-style-type | 列表符号 | 通常用 none 去掉。 |
| list-style-image | 使用图片替换列表符号 | url(图片路径) |
| list-style-position | 列表符号位置 | 默认 outside 表示符号和文本分离。inside 表示符号和文本绑定。 |
伪类
表示某个元素的某种状态。
用于对某些元素在不同的情况下呈现不同的效果。
如 a 标签在访问前、悬停时、访问时、访问后的四个状态对应四个伪类
| a 标签伪类 | 作用 |
|---|---|
| a:link | 未访问时 |
| a:hover | 鼠标悬停 |
| a:active | 鼠标按住 |
| a:visited | 访问后 |
以上的:hover 可以适用于很多标签，如 div:hover。
但其余伪类只适用于 a 标签。
鼠标样式 cursor
| 值 | 效果 |
|---|---|
| pointer | 光标呈现为指示链接的指针（一只手） |
| crosshair | 光标呈现为十字线。 |
| move | 此光标指示某对象可被移动。 |
| text | 此光标指示文本。 |
| wait | 此光标指示程序正忙（通常是一只表或沙漏）。 |
| help | 此光标指示可用的帮助（通常是一个问号或一个气球）。 |
| progress | 载入 |
显示方式 display
| 值 | |
|---|---|
| block | 将元素设置为块级元素，能设置尺寸，独占一行 |
| inline | 将元素设置为行内元素，不能设置尺寸，占一行中的一部分，尺寸由内容决定 |
| inline-block | 将元素设置为行内块，能设置尺寸，占一行中的一部分 |
| none | 不显示，不保留自身位置，后续元素会顶替其位置 |
浮动 float
让某个元素脱离原本的位置，朝某个方向对齐。
| 值 | 作用 |
|---|---|
| left | 向左浮动 |
| right | 向右浮动 |
| none | 清除浮动 |
float:left 和 display:inline-block 的区别
相同点：都能让多个独占一行的块级元素位于同一行
display:inline-block
多个元素最终会位于同一行内，保留该行位置，元素以下线对齐，保留元素间的缝隙，后续元素是新的一行。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZtO4J682-1671623446415)(F:\221001\前端\CSS.assets\image-20221207115233441.png)]
float:left
多个元素脱离自身的位置向指定方向贴合，不保留该行位置，元素向上线对齐，不保留元素间的缝隙，后续元素会顶替之前元素的位置
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ofiCbEts-1671623446429)(F:\221001\前端\CSS.assets\image-20221207115258819.png)]
盒子模型
页面中的所有块级元素，都是一个“盒子”，每个“盒子”由元素自身、内边距 padding、边框 border、外边距 margin 组成
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5A4EgtNf-1671623446432)(F:\221001\前端\CSS.assets\image-20221207141602649.png)]
内边距 padding：边框与元素自身之间的距离
外边距 margin：元素 A 的边框与元素 B 的边框之间的距离
| 盒子模型相关样式 | 作用 |
|---|---|
| padding | 内边距。一个参数表示同时设置 4 个方向，两个参数表示上下 左右；三个参数表示上 左右 下；四个参数表示上 右 下 左； |
| padding-方向 | 某个方向的内边距，方向可以是 left、right、top、bottom |
| margin | 外边距。如果某个值设置为 auto 表示自动将所在容器剩余距离除以 2 |
| margin-方向 | 某个方向的外边距 |
一个元素的所占位置是外边距+边框+内边距+元素自身的大小。
溢出 overflow
当子元素超出父元素的范围时，称为溢出。通过 overflow 控制溢出部分的表现。
默认显示溢出部分，溢出部分不会影响后续元素。
| 值 | 作用 |
|---|---|
| hidden | 溢出部分隐藏 |
| scroll | 使用滚动条 |
| visiable | 默认。显示。 |
盒子模型阴影 box-shadow
类似于 text-shadow，通常设置 4 个值 颜色 左右位置 上下位置 模糊程度
box-shadow:gray 4px 5px 6px 灰色阴影 向右 4px 向下 5px 模糊 6px
定位 position
将元素以像素为单位调整位置
| 值 | 作用 | |
|---|---|---|
| relative | 相对定位 | |
| fixed | 固定定位 | |
| absolute | 绝对定位 |
配合定位使用样式
| 定位相关方向样式 | 作用 | 值 |
|---|---|---|
| left | 元素距离页面左边界的左右距离 | 正值向右，负值向左 |
| top | 元素距离页面左边界的上下距离 | 正值向下，负值向上 |
| right | 元素距离页面右边界的左右距离 | 正值向左，负值向右 |
| bottom | 元素距离页面下边界的上下距离 | 正值向上，负值向下 |
文档流
页面中每个元素默认都有自己的位置，这个位置称为文档流。
如果某个元素脱离文档流，就会失去原本所占位置，让后续元素顶替其位置。
可以通过 浮动 float 、 固定定位 fixed 和 绝对定位 absolute 让元素脱离文档流。
脱离文档流后，通过改变元素的 left、top、bottom、right 移动其位置
相对定义 relative
让某个元素，相对于原本的位置进行定位。定位原点为元素本身的位置。
元素不会脱离文档流(后续元素不会顶替其位置)。
固定定位 fixed
让某个元素脱离文档流，默认根据页面的四个边界进行定位。
通常用于放置一些工具、广告、返回首页等。
绝对定位 absolute
让某个元素脱离文档流，根据 已定位的父元素 进行定位。如果没有已定位的父元素，会根据页面定位。
层叠 z-index
某个已定位的元素，可以通过 z-index 控制其层叠顺序。
z-index 是一个数字，数字越大，距离视线越近。
不透明度
取值范围[0,1]，值越大，越不透明
opacity
独立的样式，修改某个元素的不透明度
opacity:0.5;rgba
background-color 的值的一种写法，修改背景的不透明度
background-color:rgba(255,0,0,0.5);转换 transform
改变某个元素的状态，如旋转、移动、缩放等
| 值 | 作用 |
|---|---|
| rotate(30deg) | 顺时针旋转 30 度 |
| translate(10px,20px) | 向右平移 10px，向下平移 20px |
| translateX(10px)/translateY(10px) | 向右/向下平移 10px |
| rotateX(30deg)/rotateY(30deg)/rotateZ(30) | 沿着 X/Y/Z 轴 3D 旋转 30 度 |
| rotate3d(1,1,0,30deg) | 沿着 X 和 Y 轴 3D 旋转 30 度(0 表示该轴不变化) |
| scale(1.5) | 放大 1.5 倍 |
以上所有效果可以通过“transform:效果 1 效果 2 …”同时设置，如
transform:rotate(30deg) scale(1.5) translate(10px,20px);过渡 transition
设置某个转换效果完成所需的时间等
| 相关样式 | 作用 |
|---|---|
| transition-duration:3s | 所需时间 |
| transition-delay:2s | 延时生效 |
| transition-timing-function:linear | 时间函数 |
| transition:5s 2s ease | 2s 后执行，所需 5s，慢-快-慢 |
动画 animation
1.定义动画的关键帧
@keyframes 动画名{
0%{
/_该阶段的样式_/
样式名:值;
}
25%{}
50%{}
75%{}
100%{}
}2.给某个元素设置 animation 样式
#xxx{
/_指定动画名_/
animation-name:动画名;
/_动画执行时间_/
animation-duration:3s;
/_延时_/
animation-delay: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 | 简写。只写一个时间表示用时 写两个时间表示第一个是用时，第二个是延时 |
滤镜 filter
| 滤镜函数 | 作用 |
|---|---|
| grayscale(100%) | 灰度 |
| blur(4px) | 模糊 |
| brightness(150%) | 亮度 |
| contrast(150%) | 对比度 |
| hue-rotate(45deg) | 色调旋转 |
| invert(100%) | 颜色反转 |
| opacity(50%) | 不透明度 |
| saturate(2) | 饱和度 |
| sepia(80%) | 灰褐色(做旧) |
可以同时给某个元素设置多个滤镜
filter:滤镜函数 1 滤镜函数 2 ...;JavaScript
JavaScript 通常简称为 JS，由网景(NetScape)公司推出。
是一门面向对象、轻量级、弱类型的解释型脚本语言。
弱类型：没有数据类型的限制，变量甚至可以不同定义就能使用。
解释型：无需编译，通过解释器解释运行。浏览器就是一个 JS 解释器。
script 脚本：按指令顺序执行。
JS 的作用
HTML 用于定义页面中的内容
CSS 用于控制 HTML 元素的外观和样式
JS 用来操作 HTML 元素
HTML+CSS+JS 组成前端基本三要素。
- 可以在页面中控制任意元素
- 可以在页面中动态嵌入元素
- 可以操作浏览器
- 可以与用户进行数据交互
- 。。。
JS 写在哪里
1.写在某个标签的某个事件中
事件如鼠标单击 onclick，鼠标移入 onmouseenter 等
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body >
<!-- 通过提示框输出alert("输出内容") -->
<button onclick="alert('Hello JS!')">点击1</button>
<!-- 通过控制台输出console.log("输出内容") -->
<button onclick="console.log('Hello JS!')">点击2</button>
<!-- 通过新页面输出document.write("输出内容") -->
<button onclick="document.write('Hello JS!')">点击3</button>
</body>
</html>2.写在 <script> 标签中
该标签是一个双标签，可以放在页面的任何位置，通常放在 head 标签中或 body 标签结束之前
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 可以将 js 代码写在这里 -->
<script>
//js 代码
</script>
</head>
<body >
<!-- 建议将 js 代码写在这里 -->
<script >
//js 代码
</script>
</body>
</html>3.写到一个独立的.js 文件中，再通过 script 标签导入
JS 中的输出语句
1.弹警告框
alert(字符串或变量);2.控制台输出
console.log(字符串或变量);3.打印在新页面中
document.write(字符串或变量);JS 的组成
1.ECMAScript
简称为 ES，是 JS 的标准，也是 JS 的核心语法。
包含了数据类型、定义变量、流程控制语句等语法内容。
2.BOM
浏览器对象模型
3.DOM
文档对象模型
ECMAScript 核心语法
数据类型
原始类型
| JS 中的原始类型 | 说明 |
|---|---|
| 数值型 number | 整数、小数都称为数值型 |
| 字符串 string | 用单引号或双引号引起来的都是字符串 |
| 布尔型 boolean | true/false |
| 未定义 undefined | 当某个变量没有声明或没有值时 |
| 空 null | 某个引用类型变量通过 null 设置为空 |
引用类型
如对象、数组、函数等都是引用类型
定义变量
var/let 变量名;
var name;
var age;
let sex;标识符的命名规则
- 由字母、数字、下划线和$符号组成
- 不能以数字开头
- 不能使用 js 中的关键字
变量的初始化
var name;
name = "Tom";
var age = 22;
//可以不用 var 定义，但不建议
sex = "男";
//都可以正常输出
console.log("name:" + name + ",age:" + age + ",sex:" + sex);运算符
js 中的 boolean 类型，0 可以表示 false，非 0 可以表示 true。
默认 true 为 1，所以可以用 true 或 false 当做数字来运算。
算术
+ - * / % - 两端如果有一端是字符串，作为拼接使用。 - 两端如果都是数值，作为相加使用。 除+外，其余符号都可以计算字符串。关系
> < >= <= 用法同 java，结果为 boolean == 比较值是否相同，不比较数据类型，如"123"==123 结果为 true === 比较值和数据类型是否相同，如"123"===123 结果为 false != 比较值是否不同，如"123"!=123 结果为 false !== 比较值和数据类型是否不同，如"123"!==123 结果为 true逻辑
&& || ! 用法同 java赋值和复合赋值
= += -= *= /= %= a*=b+c 相当于 a=a*(b+c) 符号两端当做整体运算后赋值给符号左侧变量自增自减
++ -- 符号在前，先+1 或-1 后使用 符号在后，先使用后+1 或-1 如果独立成行，都为+1 或-1 var i=10; var res=i-- - --i; //res 为 10-8=2,i 最终为 8条件
表达式 1?表达式 2:表达式 3 判断表达式 1，结果为 true 执行表达式 2，结果为 false 执行表达式 3
条件语句
if 语句
js 中的 if 语句条件可以是 boolean 值也可以是一个数字(0false,非 0true)
//单分支
if(){
}
//双分支
if(){
}else{
}
//多分支
if(){
}else if(){
}
//嵌套
if(){
if(){}
}多分支 if 语句，如果有一个条件满足则不再判断后续的条件，所以将范围最小的情况写在最前
switch 语句
//可以是任意类型
var op;
switch(op){
case "a":
break;
case 123:
break;
case true:
break;
default:
}与 java 中不同的是，小括号中没有数据类型的限制，不同的 case 后也可以写不同类型的数据。
没有 break，会继续执行后续 case 后的内容，直到 break 或没有代码，如果没有任何 case 满足，执行 default。
循环
while
while(循环条件){
循环体;
}先判断后执行，有可能一次都不执行。
do-while
do{
循环体;
}while(循环条件);先执行一次，再判断，至少执行一次。
for
for(定义循环变量;判断循环条件;更新循环变量){
循环体
}continue 和 break
continue 停止本次循环，执行下一次循环。
break 停止所有循环。
JS 中的本地对象
数组 Array
JS 中的数组类似于 Java 中的 ArrayList，
可以保存不同类型的数据，数组大小可变。
定义数组
var 数组名 = new Array();
var 数组名 = [];数组使用
//定义数组
// 1.默认没有给某个位置赋值时，是 undefined
// 2.最大下标决定了数组长度
// 3.可以保存不同类型的数据
var list1 = new Array();
list1[0] = 123;
list1[3] = "hello";
list1[10] = true;
console.log(list1[3]);数组遍历
// length 属性可以获取数组长度
// 循环所有下标，没有赋值元素的输出 undefined
for (var i = 0; i < list1.length; i++) {
console.log(list1[i]);
}
// 增强 for 循环，获取保存了数据的下标
for(var index in list1){
// 通过下标获取元素
console.log(list1[index]);
}数组初始化
var 数组名 = new Array(元素1,元素2...);
var 数组名 = [元素1,元素2...];常用方法
| 方法名 | 作用 | 返回值 |
|---|---|---|
| sort() | 将数组中的元素进行升序排序 | 排序后的数组 |
| reverse() | 将数组中的元素倒序保存 | 倒序后的数组 |
| pop() | 移除数组中的最后一个元素 | 被移除的元素 |
| push(元素) | 添加元素到数组末尾 | 最新的数组长度 |
| shift() | 移除数组中的第一个元素 | 被移除的元素 |
| unshift(元素) | 添加元素到数组开头 | 最新的数组长度 |
| fill(元素) | 使用指定元素填充数组 | 填充后的数组 |
| splice(index) | 从指定索引开始分割数组，方法调用后，数组为剩余元素的数组 | 截取到的元素集合 |
| splice(index,length) | 从指定索引开始截取指定长度的数组，方法调用后，数组为剩余元素的数组 | 截取到的元素集合 |
| 以上方法在调用后，都会影响原数组 |
| 方法名 | 作用 | 返回值 |
|---|---|---|
| indexOf(元素) | 得到某个元素第一次出现的索引 | 索引 |
| lastIndexOf(元素) | 得到某个元素最后一次出现的索引 | 索引 |
| concat(元素) | 将指定元素添加到元素数组末尾 | 添加元素后的数组 |
| join(字符) | 使用指定符号将数组元素拼接为一个字符串 | 拼接后的字符串 |
| slice(start,end) | 截取指定[start,end)区间内的元素 | 截取后的数组 |
| slice(index) | 截取从 index 开始至末尾的元素 | 截取后的数组 |
| map(方法名) | 让数组中的元素都执行指定方法 | 执行方法后的新数组 |
| 以上方法在调用后，都不会影响原数组 |
日期 Date
创建 Date 对象
var now = new Date();常用方法
// 获取当前日期时间
var now = new Date();
// 年
document.write(now.getFullYear()+"<br>");
// 0-11 表示 1-12 月
document.write(now.getMonth()+"<br>");
// 日期
document.write(now.getDate()+"<br>");
// 一周中的第几天 0-6 表示周天到周六
document.write(now.getDay()+"<br>");
document.write(now.getHours()+"<br>");
document.write(now.getMinutes()+"<br>");
document.write(now.getSeconds()+"<br>");
// 获取从 1970/1/1 起经过的毫秒数
document.write(now.getTime()+"<br>");
//以上方法都有对应的 set 方法用于设置指定值
// 获取日期时间字符串
document.write(now.toString()+"<br>");
// 获取日期部分字符串
document.write(now.toDateString()+"<br>");
// 获取时间部分字符串
document.write(now.toTimeString()+"<br>");
// 以当前环境输出日期时间字符串
document.write(now.toLocaleString()+"<br>");
// 以当前环境输出日期字符串
document.write(now.toLocaleDateString()+"<br>");
// 以当前环境输出时间字符串
document.write(now.toLocaleTimeString()+"<br>");jQuery
jQuery 是一个轻量级的 javascript 函数库，封装了很多 javascript 中的内容。jQuery 的本质依然是 javacript(一个.js 文件)。
作用
jQuery 的宗旨：”write less,do more”，意味写更少的代码，做更多的事情。
用于获取文档中的元素，对元素进行操作
更强大的选择器
支持链式写法
封装了 ajax，更方便使用
…
jQuery 对象和 js 对象(dom 对象)
在 js 中，使用 document.getElementXXX 获取到的是 dom 对象。
dom 对象只能使用如.style、.innerText 等属性修改样式或内容，不能使用 jQuery 对象中的属性或函数。
在 jQuery 中，使用 jQuery 选择器获取到的是 jQuery 对象。
jQuery 对象只能使用 jQuery 中的属性或函数，不能使用 dom 对象中的属性或函数。
通常在 jQuery 对象命名时，使用$符号作为前缀，方便区分 jQuery 对象和 dom 对象。
两者之间转换
jQuery 对象转换为 dom 对象
- jQuery 对象[0]
- jQuery 对象.get(0)
dom 对象转换为 jQuery
$(dom 对象)
<html>
<body>
<h1 id="test"></h1>
</body>
<script src="jQuery.js"></script>
<script>
$(function(){
//通过js的方式获取的对象，称为dom对象，只能使用dom对象操作节点的属性和方法
var test= document.getElementById("test");
test.innerText="修改文本"；
//通过jQuery的选择器获取的对象，称为jQuery对象，只能使用jQuery对象操作节点的属性和方法
//$("#test").innerText="xxx"//无效
$("#test").text("修改文本");
//将jQuery对象转换为dom对象
$("#test")[0].innerText="修改文本";
//将dom对象转换为jQuery对象
$(test).text("修改文本");
});
</script>
</html>$符号冲突问题
在页面中引入jQuery.js后，$符号相当于"jQuery"这个单词，有特殊的含义。
如果一个页面中，会引入多个 js 函数库，并且这些函数库都会用到
符号时，就会造成 符号时，就会造成
符号时，就会造成 符号冲突。
jQuery提供了一个**noConflict()**函数用于释放对$的使用权。
//直接调用该方法，释放对$的使用权，之后只能使用默认的"jQuery"
$.noConflict();
//$("#md")//这时会无效
jQuery("#md")//只能这样使用
//调用该方法，使用变量接收，释放对$的使用权，用指定的变量名代替$
var jq=$.noConflict();
jq("#md")//将jq当做$使用
jQuery 中的选择器
基本选择器
| 基本选择器 | |
|---|---|
| $(“#id 名”) | id 选择器，根据 id 名获取某个节点 |
| $(“.class 名”) | class 选择器，根据 class 名获取某些节点 |
| $(“标签名”) | 元素选择器，根据标签名获取某些节点 |
| $(“#id 名，.class 名，标签名”) | 群组选择器，根据指定的选择器获取所有满足的节点 |
| $(“a.test”) | 获取 class 名为 test 的 a 标签 |
| $(“a#test”) | 获取 id 名为 test 的 a 标签 |
| $(“_”) | 获取所有节点 |
层次选择器
| 层次选择器 | |
|---|---|
| $(“#test 空格_”) | 得到 id 为 test 节点中的所有子节点。 |
| $(“#test 空格 div”) | 得到 id 为 test 节点中的所有 div 子节点。 |
| $(“#test>*”) | 得到 id 为 test 节点中的第一层所有子节点。 |
| $(“#test>.test”) | 得到 id 为 test 节点中的第一层 class 为 test 的子节点 |
| $(“#test+p”) | 得到 id 为 test 节点后紧邻的第一个 p 节点 |
| $(“#test~p”) | 得到 id 为 test 节点后同级的 p 节点 |
注意
$(“p .test”)表示得到 p 标签下的 class 为 test 的标签。有空格
<p> <div class="test"></div> <p class="test"></p> </p> //可以得到 p 标签中的两个$(“p.test”)表示饿到 class 为 test 的 p 标签。无空格
<p> <div class="test"></div> <p class="test"></p>//只能得到这一个 </p>
过滤选择器
普通过滤
$(“选择器:特定单词”)
| 普通过滤 | |
|---|---|
| $(“tr:odd”) | 奇数索引 。得到索引为 1,3,5…的 tr 标签，按自然顺序为偶数 |
| $(“tr:even”) | 偶数索引 。得到索引为 0,2,4…的 tr 标签，按自然顺序为奇数 |
| $(“tr:first”) | 得到所有 tr 标签中的第一个 |
| $(“tr:last”) | 得到所有 tr 标签中的最后一个 |
| $(“tr:eq(索引)”) | 得到指定索引的 tr |
| $(“tr:gt(索引)”) | 得到大于指定索引的 tr |
| $(“tr:lt(索引)”) | 得到小于指定索引的 tr |
| $(“li:nth-child(3n+1)”) | |
| $(“#test p:first-child”) | |
| $(“#test p:last-child”) | |
| $(“div:not(.test)”) | 得到 class 不为 test 的 div |
| $(“div:not(:eq(3))”) | 得到索引不为 3 的 div |
表单元素过滤
| 表单元素过滤 | |
|---|---|
| $(“:input”) | 得到所有表单元素，包含 input、select、textarea |
| $(“:text”) | 得到文本框 |
| $(“:password”) | 得到密码框 |
| $(“:radio”) | 得到单选按钮 |
| $(“:checkbox”) | 得到复选框 |
| $(“:checked”) | 得到被选中的表单元素，包含 radio、checkbox、select |
| $(“:checkbox:checked”) | 得到被选中的复选框 |
| $(“:selected”) | 得到被选中的下拉菜单选项 |
| ( " : r e s e t " ) / (":reset”)/ ( " : rese t " ) / (“:submit”) | 得到重置/提交按钮 |
属性过滤选择器
| 属性过滤 | |
|---|---|
| $(“a[href]”) | 得到所有包含href属性的a标签 |
| $(“a:not([href])”) | 得到所有不包含href属性的a标签 |
| $(“div[属性=值]”) | 得到指定属性和值的div |
| $(“div[属性!=值]”) | 得到指定属性不等于指定值的div |
| $(“div[属性^=值]”) | 得到以指定值开头的指定属性的div |
| ( " d i v [ 属性 (“div[属性 ( " d i v [ 属性 =值]”) | 得到以指定值结尾的指定属性的div |
| $(“div[属性*=值]”) | 得到包含指定值的指定属性的div |
$("div[属性1=值][属性2=值]") | 得到既包含指定值的属性1且包含指定值的属性2的div |
内容(文本)过滤选择器
| 内容过滤选择器 | |
|---|---|
| $(“p:contains(文字)”) | 得到带有指定文字的p标签 |
| $(“p:not(:contains(文字))”) | 得到不带有指定文字的p标签 |
| $(“p:empty”) | 得到没有任何文本的p标签 |
操作节点
获取、设置节点内容
| 函数 | |
|---|---|
| 节点.text() | 获取节点中的文本。相当于js中的var text=x.innerText； |
| 节点.text(“内容”) | 设置节点中的文本。相当于js中的x.innerText=“内容”； |
| 节点.html() | 获取节点中的内容。相当于js中的var text=x.innerHTML； |
| 节点.html(“内容”) | 设置节点中的内容。相当于js中的x.innerHTML=“内容”； |
| 节点.val() | 获取某节点中的value属性值。相当于js中的var val=x.value; |
| 节点.val(“内容”) | 设置某节点中的value属性值。相当于js中的x.value=“内容”; |
获取、设置节点样式
| 函数名 | |
|---|---|
| 节点.css(“样式名”) | 获取某个节点的某个样式值 |
| 节点.css(“样式名”,“值”) | 设置某个节点的某个样式 |
| 节点.css({样式名:“值”,样式名:“值”…}) | 同时设置多个样式 |
| 节点.css(“样式名”,“值”).css(“样式名”,“值”) | 同时设置多个样式 |
获取、设置节点属性
| 函数名 | |
|---|---|
| 节点.attr(“属性名”) | 获取某个属性的值 |
| 节点.attr(“属性名”,“值”) | 设置某个属性的值 |
| 节点.removeAttr(“属性名”) | 移除指定属性 |
| 节点.addClass(“class名”) | 给某个节点追加class值 |
| 节点.removeClass(“class名”) | 移除某个节点的某个class值 |
| 节点.toggleClass(“class名”) | 添加或移除某个class值。如果没有则添加，有则移除。 |
| 节点.hasClass(“class名”) | 判断是否存在某个class值 |
创建节点
$(“完整标签”)
如
//js写法
var h1=document.createElement("h1");
h1.innerText="创建出的 h1";
//jquery 写法
var $h1=$("<h1>创建出的 h1</h1>");
//以上两种方式创建出的节点都是处于游离态，需要添加到已有的某个节点上
添加节点
| 添加子节点 | |
|---|---|
| 父节点.append(子节点) | 将子节点添加到父节点中的最后 |
| 子节点.appendTo(父节点) | 将子节点添加到父节点中的最后 |
| 父节点.prepend(子节点) | 将子节点添加到父节点中的最前 |
| 子节点.prependTo(父节点) | 将子节点添加到父节点中的最前 |
| 添加兄弟节点 | |
|---|---|
| 原始节点.before(新节点) | 添加新节点到原始节点之前 |
| 新节点.insertBefore(原始节点) | 添加新节点到原始节点之前 |
| 原始节点.after(新节点) | 添加新节点到原始节点之后 |
| 新节点.insertAfter(原始节点) | 添加新节点到原始节点之后 |
移除节点
| 移除节点 | |
|---|---|
| 某节点.remove() | 移除某节点 |
| 某节点.empty() | 移除某节点中的子节点 |
复制节点
| 复制节点 | |
|---|---|
| 某节点.clone() | 复制某节点，不复制节点的事件 |
| 某节点.clone(true) | 复制某节点，复制节点的事件 |
修饰节点
| 替换节点 | |
|---|---|
| 旧节点.replaceWith(新节点) | 用新节点替换旧节点 |
| 新节点.replaceAll(旧节点) | 用心节点替换旧节点 |
| 包裹节点 | |
|---|---|
| 原节点.wrap(指定节点) | 使用指定节点包裹原节点，如果原节点是集合，会逐一包裹 |
| 原节点.wrapAll(指定节点) | 使用指定节点包裹原节点，如果原节点是集合，会整个用一个节点包裹 |
| 父节点.wrapInner(指定节点) | 使用指定节点对父节点中的所有子节点整个包裹 |
通过节点获取节点
| 函数名 | |
|---|---|
| 某节点.next() | 得到某节点的下一个节点 |
| 某节点.prev() | 得到某节点的上一个节点 |
| 某节点.nextAll(参数) | 得到某节点之后的所有或指定节点。参数为标签名的字符串，如 nextAll(“a”)表示得到后续所有 a 标签 |
| 某节点.prevAll(参数) | 得到某节点之前的所有或指定节点 |
| 某节点.siblings(参数) | 得到某节点同级所有或指定节点 |
| 父节点.children(参数) | 得到某父节点的所有或指定子节点 |
| 节点集合.first() | 得到节点集合中的第一个子节点 |
| 节点集合.last() | 得到节点集合中的最后一个子节点 |
| 子节点.parent() | 得到某节点的父节点 |
| 某节点.index() | 得到节点所在集合的索引 |
面试题解析
1、javascript 基本数据类型？
答：
- 原始类型：
- 数值型 number： 整数、小数都称为数值型
- 字符串 string： 用单引号或双引号引起来的都是字符串
- 布尔型 boolean： true/false
- 未定义 undefined 当某个变量没有声明或没有值时
- 空 null 某个引用类型变量通过 null 设置为空
- 引用类型： 如对象、数组、函数等都是引用类型
2、浅谈 javascript 中变量和函数声明的提升？
答：
- 对于同名的变量声明，Javascript 采用的是忽略原则，后声明的会被忽略，变量声明和赋值操作可以写在一起，但是只有声明会被提升，提升后变量的值默认为 undefined，结果是在赋值操作执行前变量的值必为 undefined
- 对于同名的函数声明，Javascript 采用的是覆盖原则，先声明的会被覆盖，因为函数在声明时会指定函数的内容，所以同一作用域下一系列同名函数声明的最终结果是调用时函数的内容和最后一次函数声明相同
- 对于同名的函数声明和变量声明，采用的是忽略原则，由于在提升时函数声明会提升到变量声明之前，变量声明一定会被忽略，所以结果是函数声明有效
3、JS 数组和对象的遍历方式，以及几种方式的比较？
// length 属性可以获取数组长度
// 循环所有下标，没有赋值元素的输出 undefined
for (var i = 0; i < list1.length; i++) {
console.log(list1[i]);
}
// 增强 for 循环，获取保存了数据的下标
for(var index in list1){
// 通过下标获取元素
console.log(list1[index]);
}4、javascript 定义类的四种方法?
答：
构造方式定义类:缺点:类里的方法，每个实例对象都会产生一个，导致产生大量方法;优点:所有实例对象都单独拥有一份类里的属性，即属性不共享
原型方法定义类:缺点:所有实例对象都共同拥有一份类里的属性，即属性共享。优点:类的方法只会产生一个，不会产生大量方法
构造和原型结合方式创建类:优点:类的方法只会产生一个，不会产生大量方法,同时属性还不共享;缺点:属性和方法分开定义不是太好。
动态的原型方式:优点:类的方法只会产生一个，不会产生大量方法,同时属性还不共享,同时属性和方法不是分开定义的
5、javascript 实现继承的三种方法？
答：
原型继承：既继承了父类的模板，又继承了父类的原型对象。优点是 继承了父类的模板，又继承了父类的原型对象，缺点就是父类实例传参，不是子类实例化传参，不符合常规语言的写法。
类继承（借用构造函数的方式继承）：继承了父类的模板，不继承了父类的原型对象。优点是方便了子类实例传参，缺点就是不继承了父类的原型对象
混合继承（原型继承和类继承）：既继承了父类的模板，又继承了父类的原型对象。优点方便了子类实例传参，缺点就是 Boy.pertotype = new Persion() 函数又实例一次，函数内部变量又重复实例一次，大程序时候会很好性能。
6、说说 ajax 的原理？
答：Ajax 相当于在用户和服务器之间加了一个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器，像一些数据验证和数据处理等都交给 Ajax 引擎自己来做，只有确定需要从服务器读取新数据时再由 Ajax 引擎代为向服务器提交请求。
7、异步加载 JS 的方式有哪些？
答：
- Script Dom Element
- onload 时的异步加载
- $(document).ready()
- script 标签的 async=“async"属性
- script 标签的 defer=“defer"属性
8、介绍 JS 有哪些内置对象？
答：
- 浏览器对象模型
- document，location，history 等
- 文档对象模型
- interface Node ，interface HTMLDocument : Document 等
- 全局 JavaScript 对象
- String，Number，Date，Math 等
9、说几条写 javascript 的基本规范？
答：
- 不要在同一行声明多个变量；
- for-in 循环中的变量，应该使用 var 关键字明确限定作用域，从而避免作用域污染。
- 冒号与属性值间有个空格
- 函数不应该有时候有返回值，有时候没有返回值
10、说说对 JSON 的理解？
答：
- JSON 指的是 JavaScript 对象表示法（javascript object notation）
- JSON 是轻量级的文本数据交互格式，并不是编程语言
- JSON 独立于语言存在
- JSON 具有自我描述性，更容易理解
- JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串，然后就可以在函数之间轻松地传递这个字符串，或者在异步应用程序中将字符串从 Web 客户机传递给服务器端程序。
11、说说 JS 延迟加载的方式有哪些？
答：；defer 属性、async 属性、动态创建 dom 方式、使用 jquery 的 getScript 方法、使用 setTimeout 延迟方法、让 js 最后加载。
12、说说 attribute 和 property 的区别？
答：
- property 是 DOM 中的属性，是 JavaScript 里的对象；
- attribute 是 HTML 标签上的特性，它的值只能够是字符串；
13、正则表达式的使用？
答：正则表达式是用于匹配字符串中字符组合的模式。 在 JavaScript 中，正则表达式也是对象。 这些模式被用于 RegExp 的 exec 和 test 方法, 以及 String 的 match 、 matchAll 、 replace 、 search 和 split 方法。
14、javascript 数组去重的方法汇总？
答：
- 使用双重 for 循环，再利用数组的 splice 方法去重（ES5 常用）
- 利用数组的 indexOf 方法去重
- 利用数组的 sort 方法去重（相邻元素对比法）
- 利用 ES6 中的 Set 方法去重
- 利用 reduce 方法去重
15、javascript 数组排序的几种方式？
答：
sort()方法
reverse() 方法
冒泡排序
选择排序
插入排序
快速排序
希尔排序
16、javascript 数组一行代码去重方法？
答：
let arr = [1,2,3,4,1,4,5,6,8,6];
arr = [...new Set(arr)]17、javascript 如何判断一个对象是否为数组？
答：
- 通过 instanceof 判断
- 通过 constructor 判断
- 通过 Object.prototype.toString.call()判断
- 通过 Array.isArray()判断
18、javascript 有几种类型的值？
答：
原始类型：
- 数值型 number： 整数、小数都称为数值型
- 字符串 string： 用单引号或双引号引起来的都是字符串
- 布尔型 boolean： true/false
- 未定义 undefined 当某个变量没有声明或没有值时
- 空 null 某个引用类型变量通过 null 设置为空
引用类型： 如对象、数组、函数等都是引用类型
19、javascript 深浅拷贝？
答：
浅拷贝只会将被复制对象的第一层属性进行复制，若第一层属性为原始类型的值，则直接复制其值，一般称之为“传值”；若第一层属性为引用类型的值，则复制的是其存储的指向堆内存对象的地址指针，一般称之为“传址”。因此浅拷贝的结果存在当改变一个对象的值时引起另一个对象值变化的问题。即新对象和旧对象之间值相互影响。
而不同于浅拷贝，深拷贝是逐层对目标对象进行复制，意味着会在栈内存中重新分配空间存储指向一个新对象的新地址指针，因此不存在改变一个对象值而引发另一个对象随之改变的问题。
20、你知道 jquery 中的选择器吗，请讲一下有哪些选择器？
答：
- jquery 的基本选择器：通过元素 id、class 和标签名来查找 DOM 元素。
- jquery 层次选择器：通过 DOM 元素间的层次关系来获取元素，主要的层次关系包括父子、后代、相邻、兄弟关系。
- jquery 过滤选择器：通过特定的过滤规则来筛选出所需的 DOM 元素，过滤规则与 CSS 中的伪类选择器语法相同，即选择器都以一个冒号(:)开头。
- jquery 表单选择器：利用表单选择器我们可以极其方便地获取表单的某个或某类型的元素。
21、 jquery 对象和 dom 对象是怎样转换的？
答：
- jQuery 对象转换为 dom 对象
- jQuery 对象[0]
- jQuery 对象.get(0)
- dom 对象转换为 jQuery
- $(dom 对象)
22、 你是如何使用 jquery 中的 ajax 的？
答：
$.ajax 方法
$.get 方法
$.post 方法
$.getJSON 方法
23、同步和异步区别？
答：
同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去;
异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。
24、jquery 中
. g e t ( ) 提交和 .get()提交和
.
g
e
t
(
)
提交和 .post()提交有区别吗？
答：
- 请求方式不同：. g e t ( ) 方 法 使 用 G E T 方 法 来 进 行 异 步 请 求 的 。 .get() 方法使用GET方法来进行异步请求的。.get()方法使用GET方法来进行异步请求的。.post() 方法使用POST方法来进行异步请求的。
- 参数传递方式不同：get请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器 的，这种传递是对用户不可见的。
- 数据传输大小不同：get方式传输的数据大小不能超过2KB 而POST要大的多
- 安全问题： GET 方式请求的数据会被浏览器缓存起来，因此有安全问题。
25、你在jquery中使用过哪些插入节点的方法，它们的区别是什么？
答：
| 添加子节点 | |
|---|---|
| 父节点.append(子节点) | 将子节点添加到父节点中的最后 |
| 子节点.appendTo(父节点) | 将子节点添加到父节点中的最后 |
| 父节点.prepend(子节点) | 将子节点添加到父节点中的最前 |
| 子节点.prependTo(父节点) | 将子节点添加到父节点中的最前 |
| 添加兄弟节点 | |
|---|---|
| 原始节点.before(新节点) | 添加新节点到原始节点之前 |
| 新节点.insertBefore(原始节点) | 添加新节点到原始节点之前 |
| 原始节点.after(新节点) | 添加新节点到原始节点之后 |
| 新节点.insertAfter(原始节点) | 添加新节点到原始节点之后 |
26、jquery中如何来获取或和设置属性？
答：
| 函数名 | |
|---|---|
| 节点.attr(“属性名”) | 获取某个属性的值 |
| 节点.attr(“属性名”,“值”) | 设置某个属性的值 |
| 节点.removeAttr(“属性名”) | 移除指定属性 |
| 节点.addClass(“class名”) | 给某个节点追加class值 |
| 节点.removeClass(“class名”) | 移除某个节点的某个class值 |
| 节点.toggleClass(“class名”) | 添加或移除某个class值。如果没有则添加，有则移除。 |
| 节点.hasClass(“class名”) | 判断是否存在某个class值 |
27、你jquery中有哪些方法可以遍历节点？
答：
| 函数名 | |
|---|---|
| 某节点.next() | 得到某节点的下一个节点 |
| 某节点.prev() | 得到某节点的上一个节点 |
| 某节点.nextAll(参数) | 得到某节点之后的所有或指定节点。参数为标签名的字符串，如nextAll(“a”)表示得到后续所有a标签 |
| 某节点.prevAll(参数) | 得到某节点之前的所有或指定节点 |
| 某节点.siblings(参数) | 得到某节点同级所有或指定节点 |
| 父节点.children(参数) | 得到某父节点的所有或指定子节点 |
28、$(document).ready() $(function（{}）)方法和window.onload有什么区别？
答：
执行时间上的区别：window.onload必须等到页面内（包括图片的）所有元素加载到浏览器中后才能执行。而$(document).ready(function(){})是DOM结构加载完毕后就会执行。
编写个数不同：window.onload不能同时写多个，如果有多个window.onload，则只有最后一个会执行，它会把前面的都覆盖掉。$(document).ready(function(){})则不同，它可以编写多个，并且每一个都会执行。
简写方法：window.onload没有简写的方法，
( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) ) 可以简写为 (document).ready(function(){})可以简写为
(
d
oc
u
m
e
n
t
)
.
re
a
d
y
(
f
u
n
c
t
i
o
n
(
)
)
可以简写为 (function(){})。
29、jQuery是如何处理缓存的？
答：
- 通过$.post()方法来获取数据，那么默认就是禁用缓存的。
- 通过$.get()方法来获取数据，可以通过设置时间戳来避免缓存。
- 通过$.ajax方法来获取数据，只要设置参数cache:false即可。
30、在ajax中发送data主要有几种方式？
答：
json格式
json字符串格式
标准参数模式
31、你知道jQuery中的事件冒泡吗，它是怎么执行的，何如来停止冒泡事件？
答：
事件冒泡是从里面的往外面开始触发的，就是点击子节点，会向上触发父节点，祖先节点的点击事件
停止冒泡事件：
- 使用stopstopPropagation；
- 使用retrun false;
- 使用阻止默认行为preventDefault； -