编辑器使用的是Hbuilder，所有快捷键均以Hbuilder为标准

HTML

对文本注释Ctrl+？

嵌套快捷键：div>p*2+Tab

1
2
3
4
<div>
    <p></p>
    <p></p>
</div>

并列快捷键：div>(p+span)*2 +Tab

1
2
3
4
5
6
<div>
	<p></p>
	<span></span>
	<p></p>
	<span></span>
</div>

<!DOCTYPE html>声明标签为html界面

HEDE

1
<meta charset="UTF-8">

用于声明文本的编码格式，还有一些其他的格式例如gbk等等。

1
<meta name="keyword" content="***">

网站的关键字，用于百度收录

1
<meta name="description" content="***">

网站的描述，用于百度收录

1
<meta name="author" content="***">

作者信息

1
<meta http-equiv="refresh" content="1;http://www.baidu.com">

重定向的位置，1表示1秒

1
<link rel="shutcut icon" href="w1.ico">

定义网站上方的图标

1
<link rel="stylesheet" href="./style.css">

css样式的文件

标题

1
<h1>~</h6>

标签的大小从1到6依次递减

div

1
<div></div>

一个占一行，块级元素

span

1
<span></span>

自己多大占多大，行内标签

水平线

1
<hr width="60%"/>

画一个水平线，自结束width表示水平线的粗细

换行

1
<br/>

强制换行标签

空格

&nbsp;

段落

1
<p></p>

段落，下一段就会换行，p标签

字体

1
<i></i>

里面的文字变成斜体

1
<u></u>

字体加上下划线

1
<b></b>

字体加粗

1
<del></del>

删除线

字体的格式可以叠加

列表

1
2
3
<ul>
    <li>中国</li>
</ul>

无序列表，列表前面是用点表示的

1
2
3
<ol type="I">
 <li>湖南</li>
</ol>

有序列表，列表前面是用数字来表示，type表示使用的是罗马数字

1
dl>dt>dd

自定义列表，dt是列表的名词，dd是对列表的解释说明。

表格

1
2
3
4
5
6
7
8
<table border='1px'>
<thead>
	<tr> <th>表头</th> <th>表头</th> </tr>
</thead>
	<tr> <td>1</td> <td>数据1</td> </tr>
    <tr> <td>2</td> <td>数据2</td> </tr>
    <tr> <td>3</td> <td>数据3</td> </tr>
</table>

图片(img)

1
<img src="图片路径" alt="无图片时的描述" title="鼠标拖入表述">

链接（a）

1
<a href="05超链接.html" target="_parent" title="鼠标拖入表述"></a>

target包括(_blank，_parent，_self，_top)

href可以是一个网站也可以是一个锚点，锚点意思是id等标识

字节标签（span）

用来包裹部分文字，让页面符合规范。

表单（form）

表单用来提交内容到服务器

1
<form action="提交位置" method="post"> //相对路径

method有两个方法一个get一个post，get是http传输post是https传输

1
2
3
4
5
6
7
8
9
10
11
12
13
<input type="text" name="*" value="*" >
<input type="password" name="*" value="*" >
<input type="file" name="*" value="*" >

<input type="radio" name="n1" value="*" >
<input type="radio" name="n1" value="*" > //name相同互斥，不同不互斥

<input type="checkbox" name="*" value="*" >
<input type="checkbox" name="*" value="*" >
<input type="checkbox" name="*" value="*" >

<input type="button" name="*" value="*" >
<input type="submit" name="*" value="*" >

下拉框

1
2
3
4
5
6
7
8
9
10
11
<select>
	<option>内容1</option>
	<option>内容2</option>
	<option>内容3</option>
</select>

<select multiple> //多选
	<option>内容1</option>
	<option>内容2</option>
	<option>内容3</option>
</select>

多行文本

1
<textarea rows='行数'></textarea>

音频

1
2
<audio src="" controls="controls" autoplay="autoplay" loop="loop"></audio>
<video src="" controls="controls" autoplay="autoplay" loop="loop"></video>

audio音乐，video视频。

src是路径，controls表示列出控件，autoplay自动播放，loop重复播放

CSS

样式

内联样式

1
<p style="color:red;">1</p>

内部样式

1
2
3
4
5
<head>
<style>
p{color:red;}
</style>
</head>

外部样式

1
<link rel="stylesheet" type="text/css" href="CSS文件位置" media="screen and (min-width:1200px) and (max-width:1920px)"/>

在正规样式编辑中主要是使用外部样式

响应式网站

media="screen and (min-width:1200px) and (max-width:1920px)表示浏览器的像素在这个范围内使用这个样式表。响应式网站

自适应网站

1
2
3
4
5
6
@media screen and (min-width:1000px) and (max-width:1200px){
    .box{
        width:50%;
        background:red;
    }
}

可以使用media控件设置多个数值，使用多个不同的css样式

选择器

执行顺序是从上向下，会以最后一个执行的为标准。

类选择器（class）

在html元素中使用class命名一个类，可以使用多个名字，元素之间的class可以重名。

1
<p class="demo demo2">八月中秋白露，路上行人凄凉</p>

在css文件中进行选择，使用.表示是class选择器。

1
.demo{color:red;}

id选择器

在html元素中使用id命名，具有唯一性。

1
<p id="demo">八月中秋白露，路上行人凄凉</p>

在css文件中使用#选择

1
#demo{color:red;}

属性选择器

1
2
input[type='text']{color:red;}
<input id="demo" type='text'>

群组选择器

在css中同时选中多个，进行打组改变样式，使用，隔开

1
p,.demo,#demo{color:red;}

后代选择器

包含的所有都会选择

1
ul li{color:red;} /*表示选择了ul中的所有li元素*/

仅仅选择子代

1
ul>li{color:red;}

伪类选择器

hover

鼠标滑过效果。选择器:hover{属性}

1
demo:hover{color:red;}

after

在后面追加内容。选择器:hover{属性}

1
2
3
4
5
6
7
demo:after{content:"123";}

clearfix:after{ 
    content:"";
    display:block;
    clear:both; 
} /*防止*/

通配符选择器（*）

主要用于这个页面的归零

1
*{padding:0px;margin:0px;}

权重大小

  • 元素选择器：0001
  • calss选择器：0010
  • id选择器：0100
  • 伪类选择器：0010
  • 内联选择器：1000
  • 包含选择器：选择器权重之和
  • 群组选择器：单独计算，元素权重不相加
  • 权重相同听后面的

浮动

在标签样式中添加float，分别由左右浮动（left，right）。将元素浮动起来。

1
2
3
4
5
6
<div>
	<p class="p1">1</p>
	<p class="p2">2</p>
    <p style='clear:both;'></p> /*必须撑起父元素*/
</div>
<p class="p">1</p>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
*{
	padding: 0px;
	margin: 0px;
}
.p1{
	width: 200px;
	height:200px;
	background-color: red;
	float: left;	
}
.p2{
	width: 200px;
	height:400px;
	background-color: green;
	float: left;	
}
.p{
	width: 400px;
	height:600px;
	background-color: yellow;	
}

正常情况下，父元素不设置高度，它的高度是由子元素撑开的，如果子元素浮动则父元素就为0了（高度塌陷）。会影响父元素下面的兄弟元素。解决方法，给父元素添加overflow：hidden就会自动隔离兄弟元素

1
2
3
div{
	overflow: hidden;
}

定位

都是使用position属性

相对定位

参考元素自己原来的位置进行移动，用来微调元素位置。

1
2
3
4
5
6
7
div{
	position:relative;
    left:50px;
    right:50px;
    top:50px;
    bottom:50px
}

绝对定位

如果第一级父元素没有添加定位，会一层一层往上找添加定位的父元素，全部没有就会根据浏览器body定位，如果添加则以父元素为参考。父相子绝

1
2
3
4
5
div{
	position:absolute;
    left:0;
    bottom:0;
}

left和bottom表示在参考的位置。

通常relative和absolute是连用的

固定定位

在可见界面中位置不变，不管怎么滑动都不变。可以固定导航栏，返回顶部栏。

1
2
3
4
5
div{
	position:fixed;
    left:0;
    bottom:300px;
}

z-index

表示在z方向的层级，越大越在上面

1
z-index:888;

块级元素

div/p/h1~h6/ol/ul/li

默认独占一行，可以设置宽高

1
2
3
div{
	display:block;
}

使用上面可以变成块元素

行内元素

在行内逐个显示，不能设置宽高。

1
2
3
4
div{
    display:inline;
    display:none; /*隐藏元素*/
}

使用上面可以变成行元素

行内块元素

1
display:inline-block /*兼顾行块元素*/

img最常使用block转换为块级元素。

可在行内进行逐个显示，可以设置宽高。

盒模型

元素：内容+内边距+边框

盒模型：内容+内边距+边框+外边距

从外到内，margin外边距，border边框，padding内边距，content内容

1
2
3
4
5
div{
    width:50px;
    height:50px;/*表示content,包括宽度和高度,高度设置100%最外级元素没有继承是用子元素撑开的*/
    border:2px solid red;/*表示边框，粗细/样式/颜色不分顺序*/
}
1
2
3
html,body{
	height: 100%;/*设置浏览器大小,这样上面的height设置100%才有效果*/
}

内边距，添加之后盒子会变化 auto表示居中。

1
2
3
4
5
6
7
div{
    padding-left:20px;
    padding-top:20px;
    padding-right:20px;
    padding-bottom:20px;
    padding:20px 20px 20px 20px;/*一个值表示四周，两个值对称，三个值，上，左右，下，四个值表示上右下左*/
}

外边距，添加后盒子不会变化会移动

当盒子外边距出现冲突默认选择最大值

当左右外边距出现冲突默认相加

1
2
3
div{
    margin:20px;/*同理padding*/
}

图片截切

把图片剪切到父级元素的框内。

1
2
3
4
5
img{
    display:block;
    width:100%;
    height:100%;
}

背景

1
2
3
4
5
6
7
div{
    background-image:url();/*背景的图片默认重复平铺*/
    background-repeat:repeat-x/repeat-y/no-repeat;/*x轴平铺/y轴平铺/不平铺*/
    background-position:1px 1px;/*水平位置 垂直位置或者使用left right center bottom组合*/
    background-size:cover;/*水平(px/%) 垂直(px/%)/cover等比会部分隐藏/contain等比一边贴合不会隐藏*/
    background:url() no-repeat center center;/*总写路径 平铺 位置(水平 垂直)*/
}

文本

1
2
3
4
5
6
7
8
9
10
11
12
13
p{
    font-size:14px;/*字体大小*/
    font-family:'思源黑体';/*字体*/
    text-indent:28px;/*首行缩进*/
    font-style:oblique/italic/normal;/*字体倾斜/细字体倾斜/正常*/
	font-weight:bolder/bold/normal/24;/*字体加粗/字体加粗/正常*/
    text-align: center;/*文本宽度居中*/
    line-height:21px;/*行高21表示在这个区域高度居中*/
    letter-spacing:10px;/*字间距*/
    word-spacing:10px;/*单词间距，只适用于英文*/
    text-transform:capitalize/uppercase/lowercase;/*大写开头/全部大写/全部小写*/
    text-decoration:none;/*样式*/
}

超链接，上面的属性和下面的属性是通用的。

1
2
3
a{
	text-decoration:overline/line-through/underline/none;/*上划线/删除线/下划线/清除*/
}

位置

1
2
3
p{
    text-align:left/center/right;/*居左/居中/居右*/
}

溢出

对容器里的内容溢出进行处理，文本溢出对文本进行处理

1
2
3
4
5
div{
    overflow:hidden/scroll/auto;/*裁剪/添加滚动条/自动添加滚动条*/
    white-space:nowrap;/*限定文本不换行*/
    text-overflow:ellipsis/clip;/*省略号形式/直接裁剪*/
}

列表样式

1
2
3
4
5
li{/*无序列表*/
    list-style-type:disc/square/circle/none;/*实心圆点/小方块/空心圆点/无*/
    list-style-position:inside/outside;/*内部/外部[默认]*/
    list-style-image:url();/*符号用图片表示*/
}

透明度

1
2
3
opacity:0.2

border:1px solid transparent; /*透明色*/

居中组合

1
2
3
4
5
6
7
position: fixed;
width: 500px;
height: 300px;
left: 0;
right: 0;
top: 200px;
margin: auto;

过渡

2D转换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
div{
    /*位移*/
    transform:translate(x,y);/*移动的像素是多少*/
    transform:translateX(npx);/*向X移动的像素是多少*/
    transform:translateY(npx);/*向Y移动移动的像素是多少*/
    /*缩放大于1放大*/
    transform:scale(x,y);/*缩放的倍数是多少*/
    transform:scaleX(n);/*X缩放的倍数是多少*/
    transform:scaleY(n);/*Y缩放的倍数是多少*/
    /*旋转单位deg*/
    transform:rotate(ndeg);/*正顺逆负旋转*/
    /*倾斜单位deg*/
    transform:skewX(ndeg);/*倾斜,会对页面元素拉伸变形不常用*/
}

配合伪类hover鼠标滑过等等使用变换

使用多个效果公用一个transform

1
transform: translateY(-255px) scale(0.5,0.5) rotate(180deg);

延时过渡

1
2
3
div{
    transition:all 1s;/*all代表所有转换*/
}

动画

animation:动画帧的名字 动画的执行时间 动画执行的次数 动画执行的速度曲线

执行次数：infinite无限循环

速度曲线：linear匀速，

1
2
3
4
5
6
7
8
9
10
11
12
13
div{
    animation:a1 1s;/*定义动画*/
}

@keyframes a1{/*绑定动画的名字,没帧都能写样式*/
    0%{/*初始*/
    	width:10%
    }
        ...
    100%{/*终止*/
        width:100%
    }
}

border

1
2
3
4
5
div{
	border:1px solid red;
    border-left:1px solid red;
    border-radius:50%;/*圆角可以使用百分数也可使用像素*/
}

Bootstrap

下载bootstrap

官方文档

1
2
3
4
5
6
7
8
9
10
container 流式布局容器
container-fluid 将最外面的布局元素 .container 修改为 .container-fluid，就可以将固定宽度的栅格布局转换为 100% 宽度的布局。

一共有12个格子.col-xs-2表示占两个格子
.col-xs-
.col-sm-
.col-md-
.col-lg-
.col-md-offset-4列偏移四个格子
clearfix 清除浮动

font-awesome

下载bootstrap

放入到plugin文件夹中

Jquery

下载bootstrap

bootstrap依赖于jquery，先要引入jquery

js

代码开头使用<script></script>

定义函数

1
2
3
4
<button type="button" onclick="函数名()"></button>
function 函数名(参数){
	函数内容
}

把脚本置于 <body> 元素的底部，可改善显示速度，因为脚本编译会拖慢显示。

使用外部脚本

1
<script src="/js/myScript.js"></script>

外部脚本不能包含 <script> 标签。

可通过完整的 URL 或相对于当前网页的路径引用外部脚本：

本例使用完整的 URL 来链接至脚本：

1
<script src="https://www.w3school.com.cn/js/myScript1.js"></script>

获取方式

1
2
document.getElementById(id); //通过id绑定
document.getElementsByClass()

数据显示方式

1
2
3
4
window.alert(); //警告框
document.write() ; //写入HTML输出
innnerHTML;  //写入HTML元素
console.log(); //控制台

window.alert()

单独使用，会在警告框中跳出内容

1
window.alert(内容) ;//内容可以是函数可以是文字

DOM

write()

单独使用，主要测试使用

1
2
document.write(5 + 6);
<button onclick="document.write(11)">点击按钮</button>
innerHTML

在使用中配合获取方式

1
2
3
function 函数名(参数){
	document.getElementId(id).innerHTML
}
innertext

获取文本

1
2
3
function 函数名(参数){
	document.getElementId(id).innertext
}

value

获取输入框的内容

1
2
3
function 函数名(参数){
	document.getElementId(id).value
}
createElement

创建标签

1
2
3
function 函数名(参数){
	document.createElement('li') //创建一个标签
}
appendChild

添加子标签

1
2
3
function 函数名(参数){
	document.getElementId(id).appendChild(变量名)
}

console.log()

1
控制台中使用

setInterval定时器

1
setinterval(fuc,1000) //表示讲fuc函数每1000毫秒执行一次

定义变量

1
var 变量名=变量值

关键词

关键词 描述
break 终止 switch 或循环。
continue 跳出循环并在顶端开始。
debugger 停止执行 JavaScript，并调用调试函数（如果可用）。
do … while 执行语句块，并在条件为真时重复代码块。
for 标记需被执行的语句块，只要条件为真。
function 声明函数。
if … else 标记需被执行的语句块，根据某个条件。
return 退出函数。
switch 标记需被执行的语句块，根据不同的情况。
try … catch 对语句块实现错误处理。
var 声明变量。

变量操作

1
2
3
var x, y;	// 如何声明变量
x = 7; y = 8;	// 如何赋值
z = x + y;	// 如何计算值

字符串操作可以相加

1
"Bill" + " " + "Gates" /*多行注释*/

javaScript 对大小写敏感

所有 JavaScript 标识符对大小写敏感。

声明变量后没有赋值的话，默认是undefined

多变量赋值

var是全局作用域，let const是块级作用域

1
var name="",age="";

在块中声明的变量可以可以改变外部的变量

1
2
3
4
5
6
var x = 100;
// 此处 x 为 100
{
	var x = 1000;
}
// 此处 x 为 1000

使用let重声明不会改变

1
2
3
4
5
6
7
var x = 100;
// 此处 x 为 100
{ 
  let x = 60;
  // 此处 x 为 60
}
// 此处x 为 100

使用const定义变量，不能重新赋值

1
2
3
4
5
const PI=3.14
//之后再修改会报错
const PI;
PI = 3.14159265359;
//报错

const可以更改对象的属性

1
2
3
4
5
6
7
8
9
10
11
// 您可以创建 const 对象：
const car = {type:"porsche", model:"911", color:"Black"};

// 您可以更改属性：
car.color = "White";

// 您可以添加属性：
car.owner = "Bill";

const car = {type:"porsche", model:"911", color:"Black"};
car = {type:"Volvo", model:"XC60", color:"White"};    // ERROR

const可以更改常量数组的元素，但是无法重新为常量数组赋值：

1
2
3
4
5
6
7
8
9
10
11
// 您可以创建常量数组：
const cars = ["Audi", "BMW", "porsche"];

// 您可以更改元素：
cars[0] = "Honda";

// 您可以添加元素：
cars.push("Volvo");

const cars = ["Audi", "BMW", "porsche"];
cars = ["Honda", "Toyota", "Volvo"];    // ERROR

常量对象

1
2
3
const car = {name:"awds",age="12"}
car.name="wdd"//名字更改
car.attitude="run"//新增加

数列

1
2
3
const car = ["ardi","wMw","porsche"]
car[0] = "wd" // 更改元素：
car.push("right") // 添加元素：

变量作用域

在函数内声明变量时，使用 var 和 let 很相似。

1
2
3
4
5
6
function myFunction() {
  var carName = "porsche";   // 函数作用域
}
function myFunction() {
  let carName = "porsche";   // 函数作用域
}

在全局中var和let都具有全局作用域

使用 JavaScript 的情况下，全局作用域是 JavaScript 环境。

在 HTML 中，全局作用域是 window 对象。

通过 var 关键词定义的全局变量属于 window 对象：

1
2
var carName = "porsche";
// 此处的代码可使用 window.carName，let代码不可使用window.carName

在相同的作用域，或在相同的块中，通过 let 重新声明一个 var 变量是不允许的

在相同的作用域，或在相同的块中，通过 let 重新声明一个 let 变量是不允许的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var x = 10;       // 允许
let x = 6;       // 不允许

{
  var x = 10;   // 允许
  let x = 6;   // 不允许
}
let x = 10;       // 允许
let x = 6;       // 不允许

{
  let x = 10;   // 允许
  let x = 6;   // 不允许
}
let x = 10;       // 允许
var x = 6;       // 不允许

{
  let x = 10;   // 允许
  var x = 6;   // 不允许
}
let x = 6;       // 允许

{
  let x = 7;   // 允许
}

{
  let x = 8;   // 允许
}

逻辑

循环

var循环

1
2
3
4
5
var i = 8;
for (var i = 0; i < 10; i++) {
  // 一些语句
}
// 此处，i 为 10

let循环

1
2
3
4
5
let i = 8;
for (let i = 0; i < 10; i++) {
  // 一些语句
}
// 此处 i 为 8

条件

1
2
3
4
5
6
if(条件){
}else if{

}else{

}

运算符

运算符 描述
+ 加法
- 减法
* 乘法
/ 除法
% 取模（余数）
++ 递加
– 递减
运算符 例子 等同于
= x = y x = y
+= x += y x = x + y
-= x -= y x = x - y
*= x *= y x = x * y
/= x /= y x = x / y
%= x %= y x = x % y

比较运算符

运算符 描述
== 等于
=== 等值等型
!= 不相等
!== 不等值或不等型
> 大于
< 小于
>= 大于或等于
<= 小于或等于
? 三元运算符

逻辑运算符

&& 逻辑与
|| 逻辑或
! 逻辑非

类型运算符

typeof 返回变量的类型。
instanceof 返回 true，如果对象是对象类型的实例。

位运算符

运算符 描述 例子 等同于 结果 十进制
& 与 5 & 1 0101 & 0001 0001 1
| 或 5 | 1 0101 | 0001 0101 5
~ 非 ~ 5 ~0101 1010 10
^ 异或 5 ^ 1 0101 ^ 0001 0100 4
<< 零填充左位移 5 << 1 0101 << 1 1010 10
>> 有符号右位移 5 >> 1 0101 >> 1 0010 2
>>> 零填充右位移 5 >>> 1 0101 >>> 1 0010 2

数据类型

1
2
3
4
var length = 7;                             // 数字
var lastName = "Gates";                      // 字符串
var cars = ["Porsche", "Volvo", "BMW"];         // 数组
var x = {firstName:"Bill", lastName:"Gates"};    // 对象

js会处理对应的不同数据类型

1
2
var x = 911 + "Porsche";
>>>911Porsche //两者都变成了字符串

JavaScript 从左向右计算表达式。不同的次序会产生不同的结果：

1
2
3
4
var x = 911 + 7 + "Porsche";
>>>918Porsche //先进行int相加再进行转换未字符串
var x = "Porsche" + 911 + 7;
>>>Porsche9117 //进行转换为字符串

函数

1
2
3
4
function name(参数 1, 参数 2, 参数 3) {
    要执行的代码
}
name() //执行

return

函数终止，返回数据。

1
2
3
4
5
var x = myFunction(7, 8);        // 调用函数，返回值被赋值给 x

function myFunction(a, b) {
    return a * b;                // 函数返回 a 和 b 的乘积
}

对象

对象包含属性和方法，属性就是本身具有的性质，方法是可以被执行的函数。

对象也是变量。但是对象包含很多值。

这段代码把多个值（porsche, 911, white）赋给名为 car 的变量：

1
var car = {type:"porsche", model:"911", color:"white"};

实例

1
2
3
4
5
6
7
8
var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
}; //注意对象后面需要;

this 关键词

this就是代表的自己对象

在函数定义中，this 引用该函数的“拥有者”。

在上面的例子中，this 指的是“拥有” fullName 函数的 person 对象。

换言之，this.firstName 的意思是 this 对象的 firstName 属性

访问对象属性

您能够以两种方式访问属性：

1
2
objectName.propertyName
person.lastName;

或者

1
2
objectName["propertyName"]
person["lastName"];

访问对象方法

1
2
3
objectName.methodName()
name = person.fullName(); //获取函数的返回值
name = person.fullName; //不适用()访问则访问整个函数

如果通过关键词 “new” 来声明 JavaScript 变量，则该变量会被创建为对象：

1
2
3
var x = new String();        // 把 x 声明为 String 对象
var y = new Number();        // 把 y 声明为 Number 对象
var z = new Boolean();       //	把 z 声明为 Boolean 对象

js事件

事件 描述
onchange HTML 元素已被改变
onclick 用户点击了 HTML 元素
ondbclick 双击了元素
onmouseover 用户把鼠标移动到 HTML 元素上
onmouseout 用户把鼠标移开 HTML 元素
onkeydown 用户按下键盘按键
onload 浏览器已经完成页面加载

点击事件

1
2
<button onclick='document.getElementById("demo").innerHTML=Date()'>现在的时间是？</button> //改变了id对应标签的内容
<button onclick="this.innerHTML=Date()">现在的时间是？</button> //改变了当前标签的内容

字符串

属性

length

1
2
var txt = "132465"
var len = txt.length;

方法

搜索字符串

indexOf(“需要检索字符串”，检索位置)

方法返回字符串中指定文本首次出现的索引（位置）：

1
2
3
var str = "The full name of China is the People's Republic of China.";
var pos = str.indexOf("China");
>>>17

search()

方法返回字符串中指定文本第一次出现的位置

方法搜索特定值的字符串，并返回匹配的位置：

1
2
var str = "The full name of China is the People's Republic of China.";
var pos = str.search("China");
  • search() 方法无法设置第二个开始位置参数。
  • indexOf() 方法无法设置更强大的搜索值（正则表达式）。

lastIndexOf(“需要检索字符串”，检索位置)

方法返回指定文本在字符串中最后一次出现的索引：

1
2
var str = "The full name of China is the People's Republic of China.";
var pos = str.lastIndexOf("China");

如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1。

includes()

是否包含指定字符串，包含则返回True

1
2
let text = "Hello world, welcome to the universe.";
text.includes("world",10)    // 从第十个地方的字符串开始搜索返回 true

startsWith()

如果以指定字符开头，则返回True

1
2
let text = "Hello world, welcome to the universe.";
text.startsWith("Hello")   // 返回 true

endswith()

以指定字符为结尾，则返回True

1
2
let text = "Hello world, welcome to the universe.";
text.endsWith("world", 11)    // 返回 true

提取字符串

slice(起始索引，终止索引)

可以接收负数索引，如果没有第二个索引则索引后面的全部

1
2
3
var str = "Apple, Banana, Mango";
var res = str.slice(7,13);
>>>Banana

substring(终止索引，起始索引)

无法接收负数索引

替换字符串

replace(需要被替换的，替换的内容)

对大小写敏感

1
2
3
4
str = "Please visit Microsoft!";
var n = str.replace("Microsoft", "W3School"); //仅仅替换一个
var n = str.replace(/MICROSOFT/i, "W3School"); //i表示对大小写不敏感
var n = str.replace(/MICROSOFT/g, "W3School");//g表示对str所有的数据进行替换

toUpperCase()

把字符串转换为大写

1
2
var text1 = "Hello World!";       // 字符串
var text2 = text1.toUpperCase();  // text2 是被转换为大写的 text1

toLowerCase()

把字符串转换为大写

1
2
var text1 = "Hello World!";       // 字符串
var text2 = text1.toLowerCase();  // text2 是被转换为大写的 text1

concat()

连接两个或多个字符串

1
2
3
var text1 = "Hello";
var text2 = "World";
text3 = text1.concat(" ",text2);

所有字符串方法都会返回新字符串。它们不会修改原始字符串

trim()

删除字符串两端的空白

1
2
var str = "       Hello World!        ";
alert(str.trim());

提取字符串

charAt()

提取指定索引下的字符串

1
2
3
var str = "HELLO WORLD";
str.charAt(0);  
>>>H

charCodeAt()

返回指定索引下的u’nicode编码

1
2
3
var str = "HELLO WORLD";
str.charCodeAt(0);  
>>>H
1
2
3
var str = "HELLO WORLD";
str[0];  
>>>同样返回H

字符串转换

split(“分割方式”)

1
2
3
4
var txt = "a,b,c,d,e";   // 字符串
txt.split(",");          // 用逗号分隔
txt.split(" ");          // 用空格分隔
txt.split("|");          // 用竖线分隔

toString() 方法

将数值转化为字符串

1
2
3
4
var x = 123;
x.toString();            // 从变量 x 返回 123
(123).toString();        // 从文本 123 返回 123
(100 + 23).toString();   // 从表达式 100 + 23 返回 123

toFixed() 方法

指定位数的小数，以字符串返回

toPrecision() 方法

返回字符串，指定长度

1
2
3
4
5
var x = 9.656;
x.toPrecision();        // 返回 9.656
x.toPrecision(2);       // 返回 9.7
x.toPrecision(4);       // 返回 9.656
x.toPrecision(6);       // 返回 9.65600

全局方法

Number() 返回数字，由其参数转换而来。
parseFloat() 解析其参数并返回浮点数。
parseInt() 解析其参数并返回整数。 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
x = true;
Number(x);        // 返回 1
x = false;     
Number(x);        // 返回 0
x = new Date();
Number(x);        // 返回 1404568027739
x = "10"
Number(x);        // 返回 10
x = "10 20"
Number(x);        // 返回 NaN
parseInt("10");         // 返回 10
parseInt("10.33");      // 返回 10
parseInt("10 20 30");   // 返回 10
parseInt("10 years");   // 返回 10
parseInt("years 10");   // 返回 NaN
parseFloat("10");        // 返回 10
parseFloat("10.33");     // 返回 10.33
parseFloat("10 20 30");  // 返回 10
parseFloat("10 years");  // 返回 10
parseFloat("years 10");  // 返回 NaN

特殊字符

\为转义字符

代码 结果 描述
’ ’ 单引号
" " 双引号
\ \ 反斜杠
代码 结果
\b 退格键
\f 换页
\n 新行
\r 回车
\t 水平制表符
\v 垂直制表符

$

字符串插入值，变量传入

1
2
3
let firstName = "John";
let lastName = "Doe";
let text = `Welcome ${firstName}, ${lastName}!`;
1
2
3
4
5
6
7
let header = "Templates Literals";
let tags = ["template literals", "javascript", "es6"];
let html = `<h2>${header}</h2><ul>`;
for (const x of tags) { //dingyi 
  html += `<li>${x}</li>`;
}
html += `</ul>`;

在js中超大数值可以使用科学计数法书写

1
2
var x = 123e5;    // 12300000
var y = 123e-5;   // 0.00123

NaN - 非数值

NaN 属于 JavaScript 保留词，指示某个数不是合法数。

尝试用一个非数字字符串进行除法会得到 NaN（Not a Number）：

数值属性

属性 描述
MAX_VALUE 返回 JavaScript 中可能的最大数。
MIN_VALUE 返回 JavaScript 中可能的最小数。
NEGATIVE_INFINITY 表示负的无穷大（溢出返回）。
NaN 表示非数字值（“Not-a-Number”）。
POSITIVE_INFINITY 表示无穷大（溢出返回）。

数组

数组可以存放多个值

1
2
3
4
5
6
7
8
9
10
var cars = ["Slo", "Vlo", "Blo"];
cars.push('1') //追加元素
cars.unshift('2') //头部追加元素
cars.splice(1,0,'1') //1位置追加元素 0表示追加	
cars.pop() //尾部删除
cars.shift() //头部删除
cars.splice(2,1) //删除2位置元素 1表示删除
for(var i in cars){//循环的索引
    cars[i] //获取数据
}

访问数组

1
li[0] = "123" //修改元素

length属性

返回数组的长度

1
2
 var cars = ["Slo", "Vlo", "Blo"];
 cars.length;

访问最后一个元素

1
2
fruits = ["Banana", "Orange", "Apple", "Mango"];
var last = fruits[fruits.length - 1]; //访问长度-1

push()方法

push方法返回数组的新长度

1
2
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon");                // 向 fruits 添加一个新元素 (Lemon)

typeof

识别数组

1
2
var fruits = ["Banana", "Orange", "Apple", "Mango"];
typeof fruits;             // 返回 object

数组方法

toString()

1
2
3
4
5
6
7
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString(); 

>>>Banana,Orange,Apple,Mango
var fruits = ["Banana", "Orange","Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * "); 
>>>Banana * Orange * Apple * Mango

pop

1
2
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();              // 从 fruits 删除最后一个元素（"Mango"）

shift

移位数组，将第一个数组删除，并把后面的所有元素都向前移动，这个方法返回被移除的元素。

1
2
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();             // 返回 "Banana"

unshift

反向移位，向数组中添加新数组，所有元素后移，返回数组长度

1
2
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");    // 向 fruits 添加新元素 "Lemon"

splice()

方法可用于向数组添加新项：

第一个参数（2）定义了应添加新元素的位置（拼接）。

第二个参数（0）定义应删除多少元素。

其余参数（“Lemon”，“Kiwi”）定义要添加的新元素。

splice() 方法返回一个包含已删除项的数组：

1
2
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");

concat()

方法通过合并（连接）现有数组来创建一个新数组：

1
2
3
var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias", "Linus"];
var myChildren = myGirls.concat(myBoys);   // 连接 myGirls 和 myBoys

slice()

方法用数组的某个片段切出新数组。可接受两个参数，比如 (1, 3)。

本例从数组元素 1 （“Orange”）开始切出一段数组：

1
2
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1);

数组排序

sort()

以字母顺序对数组进行排序，数字按照大小进行排序

1
2
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();            // 对 fruits 中的元素进行排序

reverse()

1
2
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();            // 对 fruits 中的元素进行排序

字典

1
2
3
4
5
6
7
8
9
10
11
info = {
	num:123,
	name:"wb"
}
info.num
info['num'] //获取值
info.name = 'mv'
info['name'] = 'mv' //修改
for(var i in info){
     i[键名]
}

js管理包

1
npm install -g yarn
1
2
3
4
yarn config list // 显示所有配置项
yarn config get //显示某配置项
yarn config delete //删除某配置项
yarn config set [-g|--global] //设置配置项
1
2
3
4
5
6
yarn install //安装package.json里所有包，并将包及它的所有依赖项保存进yarn.lock
yarn install --flat //安装一个包的单一版本
yarn install --force //强制重新下载所有包
yarn install --production //只安装dependencies里的包
yarn install --no-lockfile //不读取或生成yarn.lock
yarn install --pure-lockfile //不生成yarn.lock

AJAX

核心是XMLHttpRequest

创建 XMLHttpRequest 的语法是：

1
variable = new XMLHttpRequest();

跨域访问

出于安全原因，现代浏览器不允许跨域访问。

这意味着尝试加载的网页和 XML 文件都必须位于相同服务器上。

W3School 上的实例都会打开位于 W3School 域上的 XML 文件。

如果您希望在自己的页面上使用以上实例，那么您所加载的 XML 文件必须位于您自己的服务器上。

XMLHttpRequest对象方法

方法 描述
new XMLHttpRequest() 创建新的 XMLHttpRequest 对象
abort() 取消当前请求
getAllResponseHeaders() 返回头部信息
getResponseHeader() 返回特定的头部信息
open(method, url, async, user, psw) 规定请求 method：请求类型 GET 或 POST url：文件位置 async：true（异步）或 false（同步） user：可选的用户名称 psw：可选的密码
send() 将请求发送到服务器，用于 GET 请求
send(string) 将请求发送到服务器，用于 POST 请求
setRequestHeader() 向要发送的报头添加标签/值对

XMLHttpRequest 对象属性

属性 描述
onreadystatechange 定义当 readyState 属性发生变化时被调用的函数
readyState 保存 XMLHttpRequest 的状态。 0：请求未初始化 1：服务器连接已建立 2：请求已收到 3：正在处理请求 4：请求已完成且响应已就绪
responseText 以字符串返回响应数据
responseXML 以 XML 数据返回响应数据
status 返回请求的状态号 200: “OK” 403: “Forbidden” 404: “Not Found” 如需完整列表请访问 Http 消息参考手册
statusText 返回状态文本（比如 “OK” 或 “Not Found”）

node

node升级

1
2
npm cache
npm install -g n //出现错误加上--force

express安装在指定的文档目录下方

1
npm install express --save

编辑express

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//引入express
// const { response } = require('express');
const express = require('express');
// const { request } = require('http');
//创建应用对象
const app = express();


//创建路由规则,request请求报文封装，response相应报文封装
app.get('/',(request,response)=>{
    response.send('Hello word');
});

//监听接口
app.listen(8001,()=>{
    console.log("服务启动");
});

使用js文件做get请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<script>
        const but=document.getElementsByTagName('button')[0] //表示是获得很多个元素取出第一个
        const result = document.getElementById('st')
        but.onclick = function(){
            // console.log('test');
            // 创建对象
            const xhr = new XMLHttpRequest();
            // 初始化 设置请求方法和url
            xhr.open('GET','http://127.0.0.1:8000/server?a=122&b=233') //使用了get请求
            // 发送
            xhr.send();
            // 事件绑定处理服务端返回的结果
            // on 当..的时候
            // readystate 是xhr对象中的属性 表示状态 0 1 2 3 4
            // 0是最开始属性的值 1表示open调用完毕 2表示send完毕 3返回的部分结果 4返回的全部结果
            xhr.onreadystatechange = function(){
                // 判断(服务端返回所有结果)
                if(xhr.readyState === 4){
                    // 判断状态码200 300 400 500
                    if(xhr.status >=200 & xhr.status <=300){
                        //处理结果
                        console.log(xhr.status)//状态码
                        console.log(xhr.statusText)//状态字符串
                        console.log(xhr.getAllResponseHeaders());//所有相应头
                        console.log(xhr.response)//响应体
                        result.innerHTML = xhr.response
                    }else{
                    }
                }

            }
        }
</script>

使用js文件做post请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="">
        <title>AJAX </title>
        <style>
            #st{
                width: 200px;
                height: 100px;
                border: solid 1px blueviolet;
            }
        </style>
    </head>
    <div id="st"></div>
    <script>
        //读取元素
        const touch = document.getElementById('st')
        //监听事件
        touch.addEventListener('mouseover',touch_function)
        function touch_function(){
            const xhr = new XMLHttpRequest();
            xhr.open("POST",'http://127.0.0.1:8000/server') //使用POST方法
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')//设置请求头信息
            xhr.setRequestHeader('username','Bloslom')
            xhr.send('a=123&b=345&C=3'); //传入post参数
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status >=200 & xhr.status <=300 ){
                    console.log ('post')
                    touch.innerHTML += xhr.response
                    }else{
                }
                }else{
                }
            }
        }
        function i_get(){console.log('I am get')}
    </script>
</html>

接收json数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="">
        <title>AJAX </title>
        <style>
            #st{
                width: 200px;
                height: 100px;
                border: solid 1px blueviolet;
            }
        </style>
    </head>
    <div id="st"></div>
    <script>
        //读取元素
        const touch = document.getElementById('st')
        //监听事件
        window.onkeydown = function(){
            const xhr =new XMLHttpRequest()
            xhr.responseType = 'json'; //处理成为json数据
            xhr.open('GET','http://127.0.0.1:8000/json-server')
            xhr.send();
            xhr.onreadystatechange = function(){
                if(xhr.readyState===4){
                    if(xhr.status<=200&xhr.status<=300){
                        console.log(xhr.response)
                        touch.innerHTML=xhr.response.name //取出json数据的值
                        touch.innerHTML+=xhr.response.age //取出json数据的值
                    }
                }
            }
        }
    </script>
</html>

安装nodemon，可以用来不改代码重启服务

1
npm install -g nodemon

解决IE缓存问题

1
xhr.send('GET',"http://127.0.0.1:8000?t="+Data.now()) //加上一个时间戳

网络超时设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="">
        <title>AJAX </title>
        <style>
            #st{
                width: 200px;
                height: 100px;
                border: solid 1px blueviolet;
            }
        </style>
    </head>
    <div id="st"></div>
    <script>
        //读取元素
        const touch = document.getElementById('st')
        //监听事件
        window.onkeydown = function(){
            const xhr =new XMLHttpRequest()
            xhr.responseType = 'json';
            xhr.timeout = 2000; //设置超时时间
            xhr.ontimeout = function(){ //设置超时处理
                alert('you are net have problem')
            }
            xhr.onerror = function(){ //设置断网处理
                alert('your net be cut')
            }
            xhr.open('GET','http://127.0.0.1:8000/json-server?t='+Date.now())
            xhr.send();
            xhr.onreadystatechange = function(){
                if(xhr.readyState===4){
                    if(xhr.status<=200&xhr.status<=300){
                        console.log(xhr.response)
                        touch.innerHTML=xhr.response.name
                        touch.innerHTML+=xhr.response.age
                    }
                }
            }

        }
    </script>
</html>

取消选择

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="">
        <title>AJAX </title>
        <style>
            #st{
                width: 200px;
                height: 100px;
                border: solid 1px blueviolet;
            }
        </style>
    </head>
    <button>点击发送</button>
    <button>点击取消</button>
    <div id="st"></div>
    <script>
        //读取元素
        const b1 = document.getElementsByTagName('button')
        let xhr = null; //let定义的一个变量名
        //监听事件
        b1[0].onclick = function(){
            xhr = new XMLHttpRequest();  //变量名变更
            xhr.open("GET",'http://127.0.0.1:8000/json-server')
            xhr.send()
        }
        b1[1].onclick = function(){
                xhr.abort()  //取消选择属性
                console.log(xhr)
        }
    </script>
</html>

防止重复发送请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="">
        <title>AJAX </title>
        <style>
            #st{
                width: 200px;
                height: 100px;
                border: solid 1px blueviolet;
            }
        </style>
    </head>
    <button>点击发送</button>
    <button>点击取消</button>
    <div id="st"></div>
    <script>
        //读取元素
        const b1 = document.getElementsByTagName('button')
        let xhr = null;
        let issending = false //定义一个记录，查看是否在发送
        //监听事件
        b1[0].onclick = function(){
            if (issending) xhr.abort()  //判断是否在发送，第一次为false不走xhr.abort不会报错
            xhr = new XMLHttpRequest()
            xhr.open('GET','http://127.0.0.1:8000/json-server')
            xhr.send()
            issending=true //更改为在发送状态
            if (xhr.readyState===4){
                issending=false //发送成功变为不在发送状态
            }
        }
    </script>
</html>