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")/ (":reset")/(“:submit”) | 得到重置/提交按钮 |
属性过滤选择器
| 属性过滤 | |
|---|---|
| $(“a[href]”) | 得到所有包含href属性的a标签 |
| $(“a:not([href])”) | 得到所有不包含href属性的a标签 |
| $(“div[属性=值]”) | 得到指定属性和值的div |
| $(“div[属性!=值]”) | 得到指定属性不等于指定值的div |
| $(“div[属性^=值]”) | 得到以指定值开头的指定属性的div |
| ( " d i v [ 属性 ("div[属性 ("div[属性=值]") | 得到以指定值结尾的指定属性的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()提交和
.get()提交和.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(){})可以简写为 (document).ready(function())可以简写为(function(){})。
29、jQuery是如何处理缓存的？
答：
-
通过$.post()方法来获取数据，那么默认就是禁用缓存的。
-
通过$.get()方法来获取数据，可以通过设置时间戳来避免缓存。
-
通过$.ajax方法来获取数据，只要设置参数cache:false即可。
30、在ajax中发送data主要有几种方式？
答：
- json格式
- json字符串格式
- 标准参数模式
31、你知道jQuery中的事件冒泡吗，它是怎么执行的，何如来停止冒泡事件？
答： - 事件冒泡是从里面的往外面开始触发的，就是点击子节点，会向上触发父节点，祖先节点的点击事件
- 停止冒泡事件：
- 使用stopstopPropagation；
- 使用retrun false;
- 使用阻止默认行为preventDefault； -
2519
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
