JS个人笔记

zoukankan html css js c++ java

JS个人笔记
一. javaScript简介及基本用法

JavaScript诞生于1995年，主要用于处理网页中的前端验证（指检查用户输入的内容是否符合一定的规则，eg:用户名长度，邮箱格式等），就可以不需要将数据传到服务器再进行验证，就加快了验证的速度，有良好的用户体验。

还有一堆关于JavaScript的简史，由网景公司发明，被SUN公司介入，还有一个JavaScript是微软公司的JScript。。。。。。
- JS的特点：解释型语言，类似于C和JAVA的语法结构（难怪学起来这么的熟悉），动态语言，基于原型的面向对象
- JS代码编写的位置
  
  JS代码可以编写到script标签中；
  
  或者向CSS一样使用外部样式，在外部建一个CSS文档再导入到html中；(script标签一旦用于引入外部文件就不能编写代码了，因为浏览器会忽略，如有需要可再创建一个新的script标签编写)（写到外部文件中可以在不同的页面中同时引用，也可以利用到浏览器的缓存机制，推荐~~~）
  
  或者标签的onclick属性中，a标签的href属性中（但这两个术语结构和行为耦合，不方便维护，不建议使用）
- JS的输出：
  
  alert("hello world")//控制浏览器弹出一个警告框
  document.write("hello world")//让计算机在页面中输出内容
  console.log("hello world")//向控制台输出内容
- JS严格区分大小写
- JS中每一条语句以分号；结尾（如果不写分号，浏览器会自动添加，但是有时候会出错，检查时也不容易找到错误的地方。且会消耗一些系统资源）
- JS会忽略多个空格和换行，所以代码要美观，规范~~~
- 字面量：一些不可改变的值，eg:1,2,3
- 变量：可以用来保存字面量，且变量的值是可以任意改变的
- JS中使用var关键字来声明一个变量
- 标识符：在JS中所有的可以由我们自主命名的可称为标识符，JS底层保存标识符时实际上采用Unicode编码，所以理论上讲所有的utf-8中含有的所有内容都可以作为标识符，比如中文（但是最好不要用！！！）命名规则如下：
  
  可含有字母，数字，下划线_，$
  
  不能是ES中的关键字或保留字
  
  一般用驼峰命名法（一定要好好写名字）
1. 数据类型

数据类型就是字面量的类型，有以下六种
- 记得首字母是大写的
- 其中字符串，数值，布尔值，空值，未定义是基本数据类型，对象是引用数据类型
- 基本数据类型的数据，变量是直接保存的它的值。变量与变量之间是互相独立的，修改一个变量不会影响其他的变量。
- 引用数据类型的数据，变量是保存的对象的引用（内存地址）。如果多个变量指向的是同一个对象，此时修改一个变量的属性，会影响其他的变量。
- 比较两个变量时，对于基本数据类型，比较的是值，对于引用数据类型比较的是地址，地址相同才相同
1.1 String 字符串
- 要使用引号，单引号双引号都可以。但是“你好’，”她说：“你很简单。” “，两个混用或者用两次不可。正确用法：”你好“，‘我很好’，”她说：’我很不好。‘ “
- 在字符串中用作为转义字符
  
  eg:
  
  " :表示”
  ' :表示’
  n :表示换行
  t :表示制表符
  \ :表示
- 用运算符typeof检验变量的类型显示srting
1.1.1 字符串的一些方法
- length：获取字符串的长度
- charAt()：根据索引获取指定的字符
- charCodeAt()：根据索引获取指定的字符编码
- String.fromCharCode()：根据字符编码获取字符
- indexOf()，lastIndexOf()：
  
  从一个字符串中检索指定内容
  
  需要一个字符串作为参数，这个字符串就是要检索的内容，如果找到该内容，则会返回其第一次出现的索引，如果没有找到则返回-1。
  
  可以指定一个第二个参数，来表示开始查找的位置
  
  indexOf()是从前向后找
  
  lastIndexOf()是从后向前找
- slice()：可以从一个字符串中截取指定的内容，并将截取到内容返回，不会影响原变量
  
  参数：第一个：截取开始的位置（包括开始）第二个：截取结束的位置（不包括结束）
  
  可以省略第二个参数，如果省略则一直截取到最后
  
  可以传负数，如果是负数则从后往前数 substr()
  
  和slice()基本一致，不同的是它第二个参数不是索引，而是截取的数量
- substr()：和slice()基本一致，不同的是它第二个参数不是索引，而是截取的数量
- substring()：和slice()基本一致，不同的是它不能接受负值作为参数，如果设置一个负值，则会自动修正为0，substring()中如果第二个参数小于第一个，自动调整位置
- toLowerCase() ：将字符串转换为小写并返回
- toUpperCase() ：将字符串转换为大写并返回
- split()：可以根据指定内容将一个字符串拆分为一个数组
  
  参数：需要一个字符串作为参数，将会根据字符串去拆分数组可以接收一个正则表达式，此时会根据正则表达式去拆分数组
- match() ：可以将字符串中和正则表达式匹配的内容提取出来
  
  参数：
  
  正则表达式，可以根据该正则表达式将字符串中符合要求的内容提取出来，并且封装到一个数组中返回
- replace() ：可以将字符串中指定内容替换为新的内容
  
  参数：第一个：被替换的内容，可以是一个正则表达式第二个：替换的新内容
- search() ：可以根据正则表达式去字符串中查找指定的内容
  
  参数：正则表达式，将会根据该表达式查询内容，并且将第一个匹配到的内容的索引返回，如果没有匹配到任何内容，则返回-1。
1.2. Number 数值

在JS中所有的数值都是Number类型，包括整数，小数
- 用运算符typeof检验变量的类型显示number
- 可以表示的数字的最大值：1.79.....e+308Number.MAX_VALUE,当超过了最大值用typeof检验显示为Infinity（正无穷），反之则为-Infinity(负无穷)；检验infinity显示为number
- Number.MIN.VALUE: 5e-324 表示的是一个大于0的最小值，而不是一个复数
- NaN：一个特殊的数字，表示Not A Number ，eg: abc*acb就等于NaN
- 整数的运算可以保证精准，但是浮点元素可能得不到一个精确的值，因为计算机是采用二进制的，有的小数不能表示出来，就会有误差，所以对数值有精确度的要求的话最好不要用JS计算
1.3. Boolean 布尔值

用来表示逻辑运算，true表示真，false表示假

1.4. Null 空值

只有一个，null，表示一个空的对象，和空格还是有差别的

检查时返回object

1.5. Undefined 未定义

只有一个，undefined，声明变量后，但是没有给变量赋值（原来如此）

1.6. Object 对象

这个类型就不放在这写了，在下面哦

1.7. 数据类型转换

1.7.1 转为String类型
1. toString()方法(强制)
（null和undefined不可用）
```
var a=1;
b=a.toString();
```
1. String()函数(强制)
（null类型和undefined类型会转为字符串）
```
var a=1;
b=String(a);
```
1. 要转换的数据+" "(隐式)
```
var a=1;
b=a+""
```
1.7.2 转为Number类型
1. Number()函数（强制）
```
var a="1";
b=Number(a);
```
分情况讨论如下：
- String
  
  若字符串为合法数字则转为数字
  
  若为非法数字则转为NaN
  
  若为空串或空格则转为0
- Boolean
  
  若为true则转为1
  
  若为false则转为0
- Null：转为0
- Undefined：转为NaN
1. parseInt()函数（强制）
  
  (将字符串的有效整数位提取出来)
```
var a="12.34bds";
b=parseFloat(a);
```
（可指定进制，如下）
```
var a="12.34bds";
b=parseFloat(a,10);
```
1. parseFloat()函数（强制）
(将字符串的有效小数位提取出来)
```
var a="12.34bds";
b=parseInt(a);
```
1. 用+（隐式）
```
var a="12.34bds";
b=+a;
```
1.7.3 转为Boolean
1. Boolean()函数（强制）
```
var a="true";
b=Boolean(a);
```
分情况讨论如下：
- String：除了空串为false，其余都为true
- Number：除了0和NaN为false，其余都为true
- Null,Undefined：都为false
- 对象：都为true
1. 用！！(隐式)
```
var a="true";
b=!!a;
```
2. 运算符

2.1. 算数运算符
- +，-，*，/（除），%（求余）（记住除和求余不要弄混了）
- 自增
  
  a++的值是自增前的值
  
  ++a的值是自增后的值
  
  （两者的a的值都自增1）
- 同理还有自减
2.2. 逻辑运算符：
- ||（或）：对两端的值进行或运算（只有两边都为false时才返回false）
  
  若第一个值为true，则返回第一个值
  
  若第一个值为false，则返回第二个值
  
  （刚刚才知道原来这样也可以，好！）
- &&（与）：对两端进行与计算（只有两边都为true时才返回true）
  
  若第一个值为false，则返回第一个值
  
  若第一个值为true，则返回第二个值
- ！（非）：对Boolean取反（对非Boolean类型使用时会自动先将其转换为Boolean类型，再进行运算）
2.3. 赋值运算符：

+=：

eg：a+=1 等于 a=a+1

同理还有-=，*=，等等等等等等，就这吧

2.4. 关系运算符：>, <, >=, <=

2.5. 相等运算符：
- ==：相等（若对不同类型进行比较，会转为相同类型）
- !=：不等（同上）
- ===：全等（不会进行类型转换）
- ！==：不全等（同上）
2.6. 特殊值：
- Null==Undefined, 返回true
- Null===Undefined, 返回false
- 原因：undefined衍生自null
- NaN不和任何值相等，包括自身
2.7. 三元运算符

？=：先对表达式求值，若为true，执行语句1，若为false则执行语句2（个人感觉有点像if else）

语法：条件表达式？语句1：语句2

2.8 优先级

越上面的优先级越高

3. 流程空值语句

程序是自上而下执行的

3.1 条件判断语句
- if(条件表达式){
  
  执行语句
  
  }
- if(条件表达式){
  
  执行语句
  
  }else{
  
  执行语句
  
  }
- if(条件表达式){
  
  执行语句
  
  }else if（条件表达式）{
  
  执行语句
  
  }else if（条件表达式）{
  
  执行语句
  
  }else if（条件表达式）{
  
  执行语句
  
  }......
  
  else{
  
  执行语句
  
  }
- 这个部分就偷懒了，就写这么多了，对就是这样，没有了
3.2 条件分支语句
- switch（条件表达式）{
  
  case 表达式：
  
  执行语句
  
  break；
  
  case 表达式：
  
  执行语句
  
  break；
  
  case 表达式：
  
  执行语句
  
  break；
  
  ......
  
  default:
  
  执行语句
  
  break；
  
  }
- 嗯，这个也就写到这里吧，你知我也知
3.3 循环语句
- do{
  
  执行语句
  
  }while（条件表达式）
- while（条件表达式）{
  
  执行语句
  
  }
- for（初始化表达式；条件表达式；更新表达式）{
  
  执行语句
  
  }
- 死循环
  
  while（true）{
  
  执行语句
  
  }
  
  for（;;）{
  
  执行语句
  
  }
- 这个也就写这么多吧，大家也都知道了
二. 对象

对象是JS中的引用数据类型，是复合数据类型，在对象中可以保存多个不同数据类型的属性

1. 创建对象
```
var obj=new Object();
```
```
var obj={};
```
2. 向对象添加属性

属性值可以是任意的数据类型
```
对象.属性名=属性值;
```
```
对象["属性名"]=属性值;
```
```
var 对象名={
    属性名：属性值,
    属性名：属性值,
    属性名：属性值,
    ...
}
```
3. 读取对象中的属性

若读取一个对象没有的属性，不会报错，会返回一个undefined
```
属性.属性名
```
```
对象["属性名"]
```
4. 删除对象中的属性
```
delete 对象.属性名
```
```
delete 对象["属性名"]
```
5. 查看对象是否有指定的属性
```
"属性名" in 对象
```
6. 一些对象和类

6.1 Data
- 日期的对象，在JS中通过Date对象来表示一个时间
- 创建一个当前的时间对象
  
  var d = new Date();
- 创建一个指定的时间对象
  
  var d = new Date("月/日/年时:分:秒");
- 方法：
  
  getDate()：当前日期对象是几日（1-31）
  
  getDay() ：返回当前日期对象时周几（0-6）
  
  0 周日
  
  1 周一
  
  getMonth()：返回当前日期对象的月份（0-11）
  
  0 一月 1 二月。。。
  
  getFullYear() 从 Date 对象以四位数字返回年份。
  
  getHours() 返回 Date 对象的小时 (0 ~ 23)。
  
  getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
  
  getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
  
  getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
  
  getTime()：返回当前日期对象的时间戳
  
  时间戳，指的是从1970年月1日 0时0分0秒，到现在时间的毫秒数计算机底层保存时间都是以时间戳的形式保存的。
  
  Date.now()：可以获取当前代码执行时的时间戳
6.2 Math
- Math属于一个工具类，它不需要我们创建对象，它里边封装了属性运算相关的常量和方法，我们可以直接使用它来进行数学运算相关的操作
- 方法：
  
  Math.PI：常量，圆周率
  
  Math.abs()：绝对值运算
  
  Math.ceil()：向上取整
  
  Math.floor()：向下取整
  
  Math.round()：四舍五入取整
  
  Math.random()：生成一个0-1之间的随机数
  
  生成一个x-y之间的随机数：
  
  Math.round(Math.random()*(y-x)+x);
  
  Math.pow(x,y)：求x的y次幂
  
  Math.sqrt()：对一个数进行开方
  
  Math.max()：求多个数中最大值
  
  Math.min()：求多个数中的最小值
三. 函数

函数也是一个对象，也具有普通对象的功能，其中可以封装一些代码，在需要的时候可以去调用函数来执行这些代码

1. 创建函数

函数的语句是按顺序向下执行

但是在全局作用域中var声明的变量和使用函数声明创建的函数（function 函数名（）{}）会放在最前面执行，只声明没有赋值，和没有该函数的特性

同时在局部作用域，也就是函数作用域中也如此，且在函数作用域中var声明的是局部变量，没有var的声明的是全局变量
```
--声明
function 函数名([形参1],[形参2],[形参3]...[形参n]){
    执行语句
}
--函数表达式
var 函数名=function（[形参1],[形参2],[形参3]...[形参n]）{
    执行语句
};
```
2. 调用函数
```
函数对象([形参1],[形参2],[形参3]...[形参n]);
```
3. 形参和实参
- 形参：形式参数，定义函数时，可以在()中定义一个或多个形参，形参之间使用,隔开定义形参就相当于在函数内声明了对应的变量但是并不赋值，形参会在调用时才赋值。
- 实参：实际参数，调用函数时，可以在()传递实参，传递的实参会赋值给对应的形参, 调用函数时JS解析器不会检查实参的类型和个数，可以传递任意数据类型的值。如果实参的数量大于形参，多余实参将不会赋值，如果实参的数量小于形参，则没有对应实参的形参将会赋值undefined
4. 函数的返回值

函数执行的结果，使用return 来设置函数的返回值。return后可以跟任意类型的值，可以是基本数据类型，也可以是一个对象。
```
return 值;
```
- return后边的代码都不会执行，一旦执行到return语句时，函数将会立刻退出。
- 如果return后不跟值，或者是不写return则函数默认返回undefined。
4.1 something else break、continue和return的区别
- break
  
  退出循环
- continue
  
  跳过当次循环
- return
  
  退出函数
5. 作用域

5.1. 全局作用域
- 直接在script标签中编写的代码都运行在全局作用域中
- 全局作用域在打开页面时创建，在页面关闭时销毁。
- 全局作用域中有一个全局对象window，window对象由浏览器提供，可以在页面中直接使用，它代表的是整个的浏览器的窗口
- 在全局作用域中创建的变量都会作为window对象的属性保存在全局作用域中创建的函数都会作为window对象的方法保存
- 在全局作用域中创建的变量和函数可以在页面的任意位置访问。在函数作用域中也可以访问到全局作用域的变量。
- 尽量不要在全局中创建变量
5.2 函数作用域
- 函数作用域是函数执行时创建的作用域，每次调用函数都会创建一个新的函数作用域。
- 函数作用域在函数执行时创建，在函数执行结束时销毁。
- 在函数作用域中创建的变量，不能在全局中访问。
- 当在函数作用域中使用一个变量时，它会先在自身作用域中寻找，如果找到了则直接使用，如果没有找到则到上一级作用域中寻找，如果找到了则使用，找不到则继续向上找
5.3 this（上下文对象）
- 我们每次调用函数时，解析器都会将一个上下文对象作为隐含的参数传递进函数。使用this来引用上下文对象，根据函数的调用形式不同，this的值也不同。
- this的不同的情况：
  
  以函数的形式调用时，this是window
  
  以方法的形式调用时，this就是调用方法的对象
  
  以构造函数的形式调用时，this就是新创建的对象
  
  使用call和apply调用时，this是指定的那个对象
  
  在全局作用域中this代表window
6. 构造函数
- 构造函数是专门用来创建对象的函数
- 一个构造函数我们也可以称为一个类
- 通过一个构造函数创建的对象，我们称该对象时这个构造函数的实例
- 通过同一个构造函数创建的对象，我们称为一类对象
- 构造函数就是一个普通的函数，只是他的调用方式不同，
- 如果直接调用，它就是一个普通函数如果使用new来调用，则它就是一个构造函数
6.1 构造函数的执行流程：
- 创建一个新的对象
- 将新的对象作为函数的上下文对象（this）
- 执行函数中的代码
- 将新建的对象返回
6.2 instanceof 检查一个对象是否是一个类的实例
- 语法
```
对象 instanceof 构造函数
```
- 如果该对象时构造函数的实例，则返回true，否则返回false
  
  Object是所有对象的祖先，所以任何对象和Object做instanceof都会返回true
6.3 枚举对象中的属性
- 语法：
```
for(var 属性名 in 对象){
    
}
```
for...in语句的循环体会执行多次，对象中有几个属性就会执行几次,每次讲一个属性名赋值给我们定义的变量，我们可以通过它来获取对象中的属性。

7. call（），apply（）
- 这两个方法都是函数对象的方法需要通过函数对象来调用
- 通过两个方法可以直接调用函数，并且可以通过第一个实参来指定函数中this
- 不同的是call是直接传递函数的实参而apply需要将实参封装到一个数组中传递
8. arguments
- arguments和this类似，都是函数中的隐含的参数
- arguments是一个类数组元素，它用来封装函数执行过程中的实参所以即使不定义形参，也可以通过arguments来使用实参
- arguments中有一个属性callee表示当前执行的函数对象
9. 原型（prototype）
- 创建一个函数以后，解析器都会默认在函数中添加一个数prototype prototype属性指向的是一个对象，这个对象我们称为原型对象。
  
  当函数作为构造函数使用，它所创建的对象中都会有一个隐含的属性执行该原型对象。这个隐含的属性可以通过对象.proto来访问。
  
  原型对象就相当于一个公共的区域，凡是通过同一个构造函数创建的对象他们通常都可以访问到相同的原型对象。我们可以将对象中共有的属性和方法统一添加到原型对象中，这样我们只需要添加一次，就可以使所有的对象都可以使用。
  
  当我们去访问对象的一个属性或调用对象的一个方法时，它会先自身中寻找，如果在自身中找到了，则直接使用。如果没有找到，则去原型对象中寻找，如果找到了则使用，如果没有找到，则去原型的原型中寻找，依此类推。直到找到Object的原型为止，Object的原型的原型为null，如果依然没有找到则返回undefined
  
  hasOwnProperty()
  
  这个方法可以用来检查对象自身中是否含有某个属性
  
  语法：对象.hasOwnProperty("属性名")
四. 数组（Array）
- 数组也是一个对象，是一个用来存储数据的对象和Object类似，但是它的存储效率比普通对象要高。其中保存的内容我们称为元素，并使用索引（index）来操作元素，索引指由0开始的整数
1. 数组的操作：

1.1 创建数组
```
var arr = new Array();

var arr = [];
```
1.2 向数组中添加元素
```
数组对象[索引] = 值;
arr[0] = 123;
arr[1] = "hello";
```
1.3 创建数组时直接添加元素
```
var arr = [元素1,元素2....元素N];
var arr1 = [123,"hello",true,null];
```
1.4 获取和修改数组的长度
- 使用length属性来操作数组的长度
- 获取长度：数组.length
  
  length获取到的是数组的最大索引+1
  
  对于连续的数组，length获取到的就是数组中元素的个数
- 修改数组的长度数组.length = 新长度 - 如果修改后的length大于原长度，则多出的部分会空出来 - 如果修改后的length小于原长度，则原数组中多出的元素会被删除
- 向数组的最后添加元素数组[数组.length] = 值;
1.5 数组的方法
- push()
  
  用来向数组的末尾添加一个或多个元素，并返回数组新的长度
  
  语法：数组.push(元素1,元素2,元素N)
- pop()
  
  用来删除数组的最后一个元素，并返回被删除的元素
- unshift()
  
  向数组的前边添加一个或多个元素，并返回数组的新的长度
- shift()
  
  删除数组的前边的一个元素，并返回被删除的元素
- slice()
  
  可以从一个数组中截取指定的元素
  
  该方法不会影响原数组，而是将截取到的内容封装为一个新的数组并返回
  
  参数： 1.截取开始位置的索引（包括开始位置） 2.截取结束位置的索引（不包括结束位置）
  
  - 第二个参数可以省略不写，如果不写则一直截取到最后
  
  参数可以传递一个负值，如果是负值，则从后往前数
- splice()
  
  可以用来删除数组中指定元素，并使用新的元素替换该方法会将删除的元素封装到新数组中返回
  
  参数： 1.删除开始位置的索引 2.删除的个数 3.三个以后，都是替换的元素，这些元素将会插入到开始位置索引的前边
- reverse()
- 可以用来反转一个数组，它会对原数组产生影响
- concat()
- 可以连接两个或多个数组，它不会影响原数组，而是新数组作为返回值返回
- join()
  
  可以将一个数组转换为一个字符串
  
  参数：需要一个字符串作为参数，这个字符串将会作为连接符来连接数组中的元素如果不指定连接符则默认使用, sort()
  
  可以对一个数组中的内容进行排序，默认是按照Unicode编码进行排序调用以后，会直接修改原数组。
  
  可以自己指定排序的规则，需要一个回调函数作为参数： function(a,b){
  
  //升序排列
  //return a-b;
  
  //降序排列
  return b-a;
  }
1.6 遍历数组
- 遍历数组就是将数组中元素都获取到
- 一般情况我们都是使用for循环来遍历数组：
  
  for(var i=0 ; i<数组.length ; i++){
  //数组[i]
  }
- 使用forEach()方法来遍历数组（不兼容IE8）
  
  数组.forEach(function(value , index , obj){
  
  });
  
  forEach()方法需要一个回调函数作为参数，数组中有几个元素，回调函数就会被调用几次，每次调用时，都会将遍历到的信息以实参的形式传递进来，我们可以定义形参来获取这些信息。
  
  value:正在遍历的元素
  
  index:正在遍历元素的索引
  
  obj:被遍历对象
五. DOM
- 文档对象模型，通过DOM可以来修改网页中各个内容
- 文档：指网页，一个网页就是一个文档
- 对象：对象将网页中的每一个节点都转换为对象，转换完对象后就可以以一种纯面向对象的形式来操作网页了
- 模型：用来表示节点和节点之间的关系，方便操作页面
- 节点：构成网页的最基本的单元，网页中的每一个部分都可以成为是一个节点，但节点的类型是不同的
  
  文档节点：代表整个网页
  
  元素节点：代表网页中的标签
  
  属性节点：代表网页中的属性
  
  文本节点：代表网页中的文本内容
1.1 DOM操作

1.11 DOM查询：

在网页中浏览器已经为我们提供了document对象，它代表的是整个网页，它是window对象的属性，可以在页面中直接使用。

document查询方法：
- 根据元素的id属性查询一个元素节点对象：document.getElementById("id属性值");
- 根据元素的name属性值查询一组元素节点对象：document.getElementsByName("name属性值");
- 根据标签名来查询一组元素节点对象：document.getElementsByTagName("标签名");
- 通过具体的元素节点来查询
  
  元素.getElementsByTagName()：通过标签名查询当前元素的指定后代元素
  
  元素.childNodes：获取当前元素的所有子节点，会获取到空白的文本子节点
  
  元素.children：获取当前元素的所有子元素
  
  元素.firstChild：获取当前元素的第一个子节点
  
  元素.lastChild：获取当前元素的最后一个子节点
  
  元素.parentNode：获取当前元素的父元素
  
  元素.previousSibling：获取当前元素的前一个兄弟节点
  
  元素.nextSibling：获取当前元素的后一个兄弟节点
1.12 DOM的修改
- document.createElement()：可以根据标签名创建一个元素节点对象
- document.createTextNode()：可以根据文本内容创建一个文本节点对象
- 父节点.appendChild(子节点)：向父节点中添加指定的子节点
- 父节点.insertBefore(新节点，旧节点)：将一个新节点插入到旧节点的前面
- 父节点.replaceChild(新节点，旧节点)：使用一个新节点替换旧节点
- 父节点.removeChild(子节点)：删除指定的子节点
1.13 DOM对CSS的操作
- 读取内联样式
  
  元素.style.样式名
  
  元素.style.width
  元素.style.height
  
- 修改内联样式
  
  元素.style.样式名=样式值
  
  通过style修改的样式都是内联样式，由于内联样式的优先级比较高，所以我们通过JS来修改的样式，往往会立即生效，但是如果样式中设置了!important，则内联样式将不会生效。
- 读取元素的当前样式
  
  一般浏览器
  
  使用getComputedStyle()：这个方法是window对象的方法，可以返回一个对象，这个对象中保存着当前元素生效样式
  
  参数： 1.要获取样式的元素 2.可以传递一个伪元素，一般传null
  
  eg：获取元素的宽度 getComputedStyle(box , null)["width"];
  
  通过该方法读取到样式都是只读的不能修改
  
  IE8
  
  使用currentStyle
  
  语法：元素.currentStyle.样式名
  
  eg：box.currentStyle["width"]
  
  通过这个属性读取到的样式是只读的不能修改
- 其他的样式相关的属性：以下样式都是只读
  
  clientHeight：元素的可见高度，指元素的内容区和内边距的
  
  clientWidth：元素的可见宽度，指元素的内容区和内边距的宽度
  
  offsetHeight：整个元素的高度，包括内容区、内边距、边
  
  offfsetWidth：整个元素的宽度，包括内容区、内边距、边
  
  offsetParent：当前元素的定位父元素，离他最近的开启了定位的祖先元素，如果所有的元素都没有开启定位，则返回body
  
  offsetLeft，offsetTop：当前元素和定位父元素之间的偏移量，offsetLeft水平偏移量 offsetTop垂直偏移量
  
  scollHeight，scollWidth：获取元素滚动区域的高度和宽度
  
  scollTop，scollLeft：获取元素垂直和水平滚动条滚动的距离
  
  判断滚动条是否滚动到底
  
  垂直滚动条：scollHeight - scollTop=clientHeight
  
  水平滚动：scollWidth - scollLeft=cilentWidth
1.2 元素的属性
- 读取元素的属性：语法：元素.属性名
  
  eg：ele.name ele.id ele.value ele.className
- 修改元素属性：
  
  语法：元素.属性名=属性值
  
  innerHTML：使用该属性可以获取或设置元素内部的HTML代码
1.3 事件

事件是用户和浏览器之间的交互行为，如点击按钮，关闭窗口，鼠标移动等。我们可以为事件来绑定回调函数来相应事件
- 绑定事件的方式：
  
  在标签的事件属性中设置相应的JS代码
  
  <button onclick="js代码">按钮</button>
  
  为对象的指定事件属性设置回调函数的形式来处理事件
  
  <button id="btn">按钮</button>
  <script>
  var btn=document.getElementByld("btn");
  btn.onclick=function(){
  
  balabala
  };
  </script>
1.31 事件对象

当响应函数被调用时，浏览器每次都会将一个事件对象作为实参传递进响应函数中，这个事件对象中封装了当前事件的相关信息，比如：鼠标的坐标，键盘的按键，鼠标的按键，滚轮的方向。可以在响应函数中定义一个形参，来使用事件对象，但是在IE8以下浏览器中事件对象没有做完实参传递，而是作为window对象
```
元素.事件 = function(event){
                event = event || window.event;
                
            };
            
            元素.事件 = function(e){
                e = e || event;
                
            };
```
1.32 事件的冒泡

事件的冒泡指的是事件向上传导，当后代元素上的事件被触发时，将会导致其祖先元素上的同类事件也会触发。事件的冒泡大部分情况下都是有益的，如果需要取消冒泡，则需要使用事件对象来取消。可以将事件对象的cancelBubble设置为true，即可取消冒泡
```
元素.事件 = function(event){
                    event = event || window.event;
                    event.cancelBubble = true;
                };
```
1.4 文档的加载
- 浏览器在加载一个页面时，是按照自上向下的顺序加载的，加载一行执行一行。如果将js代码编写到页面的上边，当代码执行时，页面中的DOM对象还没有加载，此时将会无法正常获取到DOM对象，导致DOM操作失败。
  
  解决方式一：将js代码编写到body的下边
  
  <body>
  <button id="btn">按钮</button>
  <script>
  var btn = document.getElementById("btn");
  btn.onclick = function(){
  };
  </script>
  </body>
  
  解决方式二：将js代码编写到window.onload = function(){}中
  
  window.onload 对应的回调函数会在整个页面加载完毕以后才执行，所以可以确保代码执行时，DOM对象已经加载完毕了
  
  <script>
  window.onload = function(){
  var btn = document.getElementById("btn");
  btn.onclick = function(){
  };
  };
  </script>
1.5 some dom属性
- innerHTML和innerText：这两个属性并没有在DOM标准定义，但是大部分浏览器都支持这两个属性，它们作用类似，都可以获取到标签内部的内容，不同是innerHTML会获取到html标签，而innerText会自动去除标签，如果使用这两个属性来设置标签内部的内容时，没有任何区别的
- 读取标签内部的文本内容
  
  <h1>h1中的文本内容</h1>
  元素.firstChild.nodeValue
- document.all：获取页面中的所有元素，相当于document.getElementsByTagName("*");
- document.documentElement：获取页面中HTML根元素
- document.body：获取页面中的body元素
- document.getElementByClassName()：根据元素的属性值查询一组元素节点对象（不支持IE8以下的浏览器）
- document.querySelector()：根据CSS选择器去页面查询一个元素（若匹配到多个，则返回第一个）
- document.querySelectorAll()：根据CSS选择器去查询一组元素，将匹配到的所有元素封装到一个数组中返回
六. 正则表达式
- 正则用来定义一些字符串的规则，程序可以根据这些规则来判断一个字符串是否符合规则，也可以将一个字符串中符合规则的内容提取出来。
- 创建正则表达式
  
  var reg = new RegExp("正则","匹配模式");
  
  var reg = /正则表达式/匹配模式
- 语法：匹配模式： i:忽略大小写 g:全局匹配模式
  
  设置匹配模式时，可以都不设置，也可以设置1个，也可以全设置，设置时没有顺序要求
  
  正则语法 | 或 [] 或除了 [a-z] 小写字母 [A-Z] 大写字母 [A-z] 任意字母 [0-9] 任意数字
  
  量词
  
  {n} ：正好n次 {m,n}： m-n次 {m,} ：至少m次
  
  +：至少1次 {1,} ? ： 0次或1次 {0,1}
  
  *：0次或多次 {0,}
  
  转义字符
  
  在正则表达式中使用作为转义字符 . 表示任意字符 w：相当于[A-z0-9] W：相当于[^A-z0-9] d：任意数字 D：除了数字 s：空格 S：除了空格：单词边界 B：除了单词边界 ^ ：表示开始 $ ：表示结束
- 方法： test()：可以用来检查一个字符串是否符合正则表达式，如果符合返回true，否则返回false
终于开始学JS了，之前粗略的学完HTML5和CSS之后就模仿拉勾网做了一个静态的页面，还学了微信小程序，所以就一直拖着还没有学JS，现在终于要开始了。但是我总觉的之前学的HTML和CSS不是很全面，打算在重新找一个视频好好补充一下。就这吧，挂了，哈哈哈哈哈哈哈哈哈哈哈，以上都是废话，嗯，对就是这样
- 我的天，终于写完了，写了好久好久好久，写得自己都怀疑人生了，怎么这么多（好吧，大部分是抄的笔记，但是打的也好累）
- 但是觉得又有点问题，等我什么时候有空了再改改（可能没有这个时间）
- 里面还有一些知识点自己还没有很熟悉，还需要再看看
- 十一月。加油
查看全文

相关阅读:
mui-popover显示、隐藏弹出菜单的方法
 mui使用总结
 js 原生 document.querySelectorAll document.getElementsByTagName document.querySelector document.getElementById的区别
 mui.min.js:7 Uncaught DOMException: Failed to execute 'send' on 'XMLHttpRequest': Failed to load
三个div并排
 菜单栏伸缩（附jquery-1.12.1.js）
验证码生成（点击就更换）
IDEA算法导包后 import javax.crypto.Cipher; import javax.crypto.KeyGenerator; import javax.crypto.SecretKey;报错
 IDEA加密算法（含所需jar包（commons-codec-1.11.jar ,bcprov-jdk15on-160.jar））
1,eclipse导入项目jdk版本不一样解决方案 2,java报javax.servlet.jsp cannot be resolved to a type

原文地址：https://www.cnblogs.com/bell-ld/p/13909275.html

一. javaScript简介及基本用法

1. 数据类型

1.1 String 字符串

1.1.1 字符串的一些方法

1.2. Number 数值

1.3. Boolean 布尔值

1.4. Null 空值

1.5. Undefined 未定义

1.6. Object 对象

1.7. 数据类型转换

1.7.1 转为String类型

1.7.2 转为Number类型

1.7.3 转为Boolean

2. 运算符

2.1. 算数运算符

2.2. 逻辑运算符：

2.3. 赋值运算符：

2.4. 关系运算符：>, <, >=, <=

2.5. 相等运算符：

2.6. 特殊值：

2.7. 三元运算符

2.8 优先级

3. 流程空值语句

3.1 条件判断语句

3.2 条件分支语句

3.3 循环语句

二. 对象

1. 创建对象

2. 向对象添加属性

3. 读取对象中的属性

4. 删除对象中的属性

5. 查看对象是否有指定的属性

6. 一些对象和类

6.1 Data

6.2 Math

三. 函数

1. 创建函数

2. 调用函数

3. 形参和实参

4. 函数的返回值

4.1 something else break、continue和return的区别

5. 作用域

5.1. 全局作用域

5.2 函数作用域

5.3 this（上下文对象）

6. 构造函数

6.1 构造函数的执行流程：

6.2 instanceof 检查一个对象是否是一个类的实例

6.3 枚举对象中的属性

7. call（），apply（）

8. arguments

9. 原型（prototype）

四. 数组（Array）

1. 数组的操作：

1.1 创建数组

1.2 向数组中添加元素

1.3 创建数组时直接添加元素

1.4 获取和修改数组的长度

1.5 数组的方法

1.6 遍历数组

五. DOM

1.1 DOM操作

1.11 DOM查询：

1.12 DOM的修改

1.13 DOM对CSS的操作

1.2 元素的属性

1.3 事件

1.31 事件对象

1.32 事件的冒泡

1.4 文档的加载

1.5 some dom属性

六. 正则表达式