JavaScript（一）

一、js编写格式

1.1、在html代码中，js代码一般写在

1.2、在html代码中，也可以把js代码写在标签的属性内（不推荐这么使用）

    
    
    点击按钮
    
    超链接地址

1.3、可以直接写一个xxx.js文件，专门存放js代码逻辑，然后引入使用（推荐使用）

1.4、js代码注释格式

二、js语法

2.1、基本语法

        1.js中严格区分大小写

        2.js每一条语句以;(分号)结尾

        3.js会忽略多个空格和换行，可以利用空格和换行对代码做格式化

2.2、变量

在js中使用 "var name=xxx" 这种方式定义/声明变量（首次声明一个变量A需要使用var关键字，后续再对变量A做修改时，不需要再使用var关键字了）。

// 第一次定义变量时，使用关键字 var
var name = "zhangsan";
var age = 19;

// 同时定义多个变量，用"逗号"分开
var name = "zhangsan", age = 19;

// 再次给相同的变量重新赋值时，就不需要使用 var 了
name = 'wangwu';
age = 19;

2.3、标识符（变量名，函数名，属性名都属于标识符）

标识符命名规则：

        1.标识符里面可以包含：字母，数字，下划线，$符号

        2.标识符不能以"数字开头"

        3.标识符不能以"js关键字"命名：break、else、new、var、 case、  finally 、 return、 void 、 catch  、for  、switch 、 while 、 continue、  function  、this 、 with 、default 、 if 、 throw 、 delete 、 in 、  try 、do 、 instranceof、  typeof

        4.标识符命名：驼峰体

三、JS数据类型

3.1、String 字符串（基本数据类型）

使用 "双引号" 或 '单引号' 引起来

var Name="zhangsan";
var Name='zhangsan';

使用 \ 作为转译字符

var msg = "aa\"bbb\"cc";

\n  换行

\t   tab键

\\   打印\时，需要双\转译

3.2、Number 数字（基本数据类型）

1.使用 typeof 查看一个变量的类型

2.JS的最大数字和最小数字(小数)上限

3.什么是 NaN（Not A Number）

4.JS的浮点数做减法运算，可能会得到一个不精确的结果

3.3、Boolean 布尔值（基本数据类型）

3.4、Null 空对象（基本数据类型）

3.5、Undefined 定义的变量未赋值（基本数据类型）

3.6、Object 对象（引用数据类型）详见第九章

3.7、强制类型转换（将数据类型转为其他数据类型）

3.7.1、将Number类型，Boolean类型，Null类型和Undefined类型，转换为String类型

方法1：调用"被转换类型"的toString()方法，得到一个返回值

方法2：调用String()函数，把"被转换类型"a作为"参数"传递给String()函数，得到一个返回值

3.7.3、将String类型，Boolean类型，Null类型和Undefined类型，转换为Number类型

调用Number()函数，把"被转换类型"a作为"参数"传递给Number()函数，得到一个返回值

parseInt()函数：把一个字符串转换为一个整数(从左往右依次转换,如果某个字符不是数字就停止转换)

parseFloat()函数：把一个字符串转换为一小数

3.7.4、转换为Boolean类型

调用Boolean()函数将"变量"转换为布尔值(true/false)

四、运算符

4.1、算数运算符（加/减/乘/除/取余，+-*/%）

加法运算

减法运算

乘法运算

除法运算

取余

4.2、一元运算符（+正，-负）

4.3、自增，自减

4.4、逻辑运算符（&&与 ||或 !非）

!非：就是取反

&&与：

||或：

4.5、赋值运算符（=，+=，-=，*=，/+）

4.6、关系运算符（>，>=，<，<=，==，!=）

>，>=，<，<= 比较2个值得大小关系，如果关系成立返回true，否则返回false

==，!= 判断2个值相等或者不相等（会对2个值做自动类型转换），  =（一个"="号是赋值），==（两个"="号是判断2个值是否相等）

===，!== 判断2个值全相等或者全不相等（不会对2个值做自动类型转换，如果2个值的类型不同，直接返回false或者true）

4.7、条件运算符（三元运算符）

语法：条件表达式?语句1:语句2

执行的流程：先对条件表达式进行求值，
        如果该值为true，则执行语句1，并返回执行结果
        如果该值为false，则执行语句2，并返回执行结果

4.8、运算符的优先级（如果不清楚哪个优先级更高，可以把括号运用上）

1. 小括号（） # 有括号先算括号里面的；

2. 一元运算符

加加（++）；  减减（--）；  非（!）

3. 算数运算符

加（+）;减（-）;乘（*）;除（/）;取于（%）；这里是先乘（*）除（/）取于（%）后加（+）减（-）。

4. 关系运算符

大于（>）;大于等于（>=）;小于（<）;小于等于（<=）。

5. 相等运算符

等于（==）；不等于（!=）;全等于（===）;不全等于（!==）。

6. 逻辑运算符

先且（&&）后或（||）。

7. 赋值运算符（=）。

8. 逗号运算符（,）。

五、代码块 {}

六、if 条件判断

语法

if (条件表达式) {
    语句。。。
} else if (条件表达式) {
    语句。。。
} else if (条件表达式) {
    语句。。。
} else {
    语句。。。
}

6.1、if判断单个条件

6.2、if判断多个条件

6.3、prompt函数(获取输入框内容)

6.4、if语句嵌套

6.5、条件分支语句（switch语句）

语法：

switch (条件表达式){
    case 表达式:
        语句。。。
        break;
    case 表达式:
        语句。。。
        break;
    case 表达式:
        语句。。。
        break;
    default :
        语句。。。
        break;
}

例子：

七、while循环

7.1、while语法：

while (条件表达式) {
    语句。。。
}

例子：while语句，条件不成立就不执行

7.2、do{xxx} while(xxx) 语法：可以理解为把while循环反过来写

do{
    语句。。。
} while (条件表达式)

例子：do while语句，先执行在判断条件是否成立，也就是会先执行一次(哪怕条件不成立)

7.3、例子：本金1000，利率5%，存多少年到5000块

八、for循环

8.1、for循环 语法

for循环 语法
for (初始化表达式; 条件表达式; 更新表达式){
    语句。。。
}

for循环 执行流程
 1.初始化表达式，初始化变量(只会执行一次)
 2.执行条件表达式，判断结果(true/false)是否执行循环
 3.为true时，执行，否则终止循环
 4.执行更新表达式。然后继续重复第2~4步骤。

8.2、for循环 例子1（这个例子里面for循环和while实现效果是一样的，只是写法上的差异。for循环结构更清晰）

8.2、for循环 例子2：死循环

8.3、for循环 例子3:（求1-100奇数的和）

8.4、for循环 嵌套（九九乘法表）

    

    // 格式渲染
    

8.5、break和continue

break：退出当前for循环

continue：跳过当前循环，进入下一次循环

例子：for循环嵌套（内部的for循环使用break终止外部的for循环）

九、Object 对象（引用数据类型）

9.1、对象{key:value}简介

  对象属于一种复合的数据类型，在对象中可以保存多个不同类型的属性

  对象的分类：

    1.内建对象：ES标准定义的对象（Match String Number Boolean Function Object）

    2.宿主对象：JS运行环境提供的对象（BOM[浏览器对象模型] DOM[文档对象模型]）

    3.自定义对象：开发人员创建的

9.2、对象{key:value}的操作方法（创建对象，对象进行"增"删"改"查"操作）

9.3、对象{key:value}的"属性名(key)"和"属性值(value)"

属性名：使用特殊的属性名称时：对象["属性名"]=属性值

属性值：可以是任意类型的数据

9.4、创建对象的多种方式

9.5、对象的"方法"method（对象的一个属性是函数，那么该函数就是该对象的"方法"，调用函数就是调用该对象的方法）

9.5.1、for循环对象，获取对象的"属性名"和"属性值"

9.6、使用工厂方法创建对象（大批量的创建对象）

十、函数

10.1、函数简介

        函数也是一个对象。

        函数里面封装了一个功能，在需要时即可执行。

10.2、函数的"创建"和"使用"

方式1：创建一个函数对象（不常用）

方式2：使用"函数声明"，来创建一个"函数" 常用

方式3：使用"函数表达式"，来创建一个"函数"（创建一个匿名函数，赋值给一个变量fun）常用

10.3、函数的"参数"

10.3.1、函数的"实参"可以是"任意值"，例子：

函数的参数是"对象"

函数的参数是"函数"

函数的参数是"函数的返回值"

10.4、函数的"返回值"

10.5、立即执行的函数

10.6、全局作用域

    1.作用域是指一个变量作用的范围
    2.全局作用域在页面打开时创建，在页面关闭时销毁
    3.全局作用域有一个"全局对象window(DOM)"，可以直接使用（window(DOM)代表的是浏览器的窗口，它由浏览器创建，可以直接使用）
    4.在全局作用域中：创建的变量都会作为"window对象"的"属性"保存，创建的函数都会作为"window(DOM)对象"的"方法"保存
    5.在全局作用域中的变量，是全局变量

10.7、函数作用域

    1.调用函数时创建函数作用域，函数执行完毕后，函数作用域销毁（每调用一次函数，就是创建一个新的函数作用域，之间相互独立）。

    2.函数作用域中定义的变量，在全局作用域中无法访问。

    3.函数作用域中，可以访问全局作用域中定义的变量。

    4.在函数作用域中操作一个变量时，会先在自身的作用域中寻找，如果没有就直接向上一级作用域中查找，直到找到全局作用域为止(如果全局作用域找不到的话，就报错xx is not defined)

    5.在函数中，访问全局作用域的变量是使用：window.变量名称。

    6.在函数中，如果变量没有使用关键字"var"声明，那么该变量属于全局变量。

    7.定义形参就相当于是在函数作用域中声明了变量。

10.8、"函数对象"的call方法和apply方法

function fun1(){
    console.log("fun函数")
}
// 以下3个方法执行结果都一样
fun1.call()     // 返回值: "fun函数"
fun1.apply()    // 返回值: "fun函数"
fun1()          // 返回值: "fun函数"

// 不同点在于: call方法和apply方法可以将一个对象指定为第一个参数,那么这个参数(对象)就是函数执行时的this
var obj = {"name":"zhangsan"}
function fun2(){
    console.log(this.name)
}
fun2.call(obj)  // 返回值: "zhangsan"
fun2.apply(obj) // 返回值: "zhangsan"

10.9、函数的arguments

// 函数在调用时，浏览器每次都会传递进2个隐含的参数: 1.this, 2.arguments(类数组对象)用来保存函数传递的实参
function fun(a,b){
    console.log(typeof arguments)   // 返回值: object
    console.log(arguments)          // 返回值: [Arguments] { '0': 'aaa', '1': 'bbb' }
    console.log(arguments.length)   // 获取实参的数量，返回值: 2
    console.log(arguments[0])       // 获取实参的值(索引为0的值)，返回值: "aaa"
}
fun("aaa","bbb")

十一、构造函数（类）

11.1、什么构造函数(类)？

    创建一个构造函数(类)"Person"，专门用来创建对象。
    构造函数一般首字母大写。
    普通函数直接调用，构建函数(类)使用new关键字来调用。
    使用一个构建函数(类)创建的对象，称为一类对象，也将一个构造函数称为一个类。
    使用 instanceof 来检查一个"对象"是否属于"某个类"，是的话返回true，否则返回false。

11.2、构造函数(类)的创建流程

    1.立刻创建一个新的对象；
    2.将新建的对象，设置为函数中的this，在构造函数中可以使用this来引用新建的对象；
    3.逐行执行函数内的代码；
    4.将新的对象作为返回值返回；

11.3、构造函数内的"函数复用"(将函数定义在全局作用域)

十二、this

12.1、什么是this？

解析器在调用函数时，每次都会向函数内部传递一个隐含的参数"this"（是一个对象，称为"上下文对象"）

根据函数"调用方式"的不同，this指向不同的对象
    1.以"函数的方式"调用时,this永远都是window（函数内调用this时，this指的是window）
    2.以"对象方法的方式"调用时,this就是调用的对象（谁调用this，this就是谁）

12.2、在使用"函数","方法","构造函数"时，this代表什么？

    1.当以函数的形式调用时，this就是window；
    2.当以方法的形式调用时，谁调用方法this就是谁；
    3.当以构造函数(类)的形式调用时，this就是新创建的那个对象；

十三、原型对象 prototype

13.1、什么是原型对象？

       原型对象(prototype)相当于一个公共区域，一个类的所有对象都可以访问该公共区域。（可以把一些公共函数，放到类的原型对象里面）

       在原型对象里面定义的"属性"或者"方法"，对象可以直接调用(对象会优先取自己的"属性"或者"方法"值，如果没有的话，再去原型对象里面找)。

        当一个对象的"属性/方法"不存在时，去"原型对象"内查找，还不存在就去"原型对象的原型对象"中查找，直到找到"Object对象的原型"为止。如果"Object对象的原型"也没有，那么就返回undefined。

13.2、原型对象使用

例子1：原型对象内添加属性/方法

例子2：判断 "对象自身" 或 "对象(的原型对象)" 是否存在某个属性

十四、数组

14.1、创建数组

// 创建数组-方式1(构建函数创建)
var arr = new Array();

// 数组内添加值
arr[0]=10;
arr[1]=20;
arr[2]=30;
console.log(arr)  // 返回值：[ 10, 20, 30 ]
console.log(typeof arr)  // 返回值：object

// 获取数值的长度
console.log(arr.length)  // 返回值：3

// 创建数组-方式2
var arr1 = ["a","b","c","d", { "name": "sudada", "age": 18 }]
console.log(arr1.length)  // 返回值：5

// 获取数组"索引"对应的值
console.log(arr1[2])  // 返回值：c
console.log(arr1[4])  // 返回值：{ "name": "sudada", "age": 18 }

14.2、数组的常用方法

// 数组的常用方法
var arr2 = ["a","b","c"]

// 1、unshift：往数组的开头添加元素
arr2.unshift("1","2")
console.log(arr2)  // 返回值：[ '1', '2', 'a', 'b', 'c', 'test1' ]

// 2、push：往数组末尾添加值
arr2.push("test1", "test2")
console.log(arr2)  // 返回值：[ 'a', 'b', 'c', 'test1', 'test2' ]

// 3、shift：删除数组第一个元素，并将被删除的那个元素当做返回值返回
res1=arr2.shift()
console.log(res1)  // 返回值：1
console.log(arr2)  // 返回值：[ '2', 'a', 'b', 'c', 'test1' ]

// 4、pop：删除数组最后一个元素，并将被删除的那个元素当做返回值返回
res=arr2.pop()
console.log(res)  // 返回值：test2
console.log(arr2)  // 返回值：[ 'a', 'b', 'c', 'test1' ]

14.3、数组的遍历

例子1：简单的数组便利（for循环数组时，拿到的是"数组的索引"）

var arr3 = ["a","b","c"]

for (var n in arr3){
    // 这里的n取到的是数组的"索引"
    console.log(n)  // 返回值：数组的"索引"
    console.log(arr3[n])  // 返回值：数组的"值"
}

例子2：数组便利时条件判断

// 创造一些数据
function Person(name,age){
    this.name=name;
    this.age=age;
}
var per = new Person("aaa", 18)
var per2 = new Person("bbb", 28)
var per3 = new Person("ccc", 38)
var per4 = new Person("ccc", 48)

// 数组perArr的值，有4个对象
var perArr = [per, per2, per3, per4]

// 把数组perArr对象age>18的人提取出，放到一个新的数组newArr内
function szq(arr){
    var newArr=[];
    for (var i in arr){
        if ( arr[i].age > 18){
            newArr.push(arr[i])
        }
    }
    return newArr
}
console.log(szq(perArr))  // 返回值：[Person { name: 'bbb', age: 28 },Person { name: 'bbb', age: 38 },Person { name: 'bbb', age: 48 }]

14.4、数组的forEath方法

数组的forEach方法
    1.forEach方法需要一个函数作为参数；
    2.数组中有N个元素，那么forEach就会执行N次；
    3.每次执行时会将"便利到的值"以实参的方式传递进来，可以定义形参接收；
    4.传递进来的参数有3个，分别是：参数1(数组的第一个值)，参数2(数组的第一个索引)，参数3(数组的所有值)；

var arr = ["aa","bb","cc","dd",]
arr.forEach(function (value,index,obj){
    console.log(value,index,obj)
})
// 返回值：
// aa 0 [ 'aa', 'bb', 'cc', 'dd' ]
// bb 1 [ 'aa', 'bb', 'cc', 'dd' ]
// cc 2 [ 'aa', 'bb', 'cc', 'dd' ]
// dd 3 [ 'aa', 'bb', 'cc', 'dd' ]

14.4、数组slice（从数组中提取选定的元素）

参数：1.起始值的索引，2.结尾值的索引(不包含结束索引)

var arr2 = ["a","b","c","d","e"]

// 取数组索引 0, 1 的值
console.log(arr2.slice(0,2))
// 返回值: [ 'a', 'b' ]

// 取数组索引 0 以后的所有值
console.log(arr2.slice(0))
// 返回值: [ 'a', 'b', 'c', 'd', 'e' ]

// 取数组索引 1 至 倒数第1个值
console.log(arr2.slice(1,-1))
// 返回值: [ 'b', 'c', 'd' ]

14.5、数组splice（删除元素，同时向数组内添加新的元素）

参数：1.起始值的索引，2.需要删除的索引数量，3.新添加的值

var arr2 = ["a","b","c","d","e"]

// 从删除数组索引为0的值开始删除，删除2个值(删除索引0,1)
arr2.splice(0,2)
console.log(arr2)
// 返回值: [ 'c', 'd', 'e' ]

// 从删除数组索引为1的值开始删除，删除2个值(删除索引1,2)
arr2.splice(1,2)
console.log(arr2)
// 返回值: [ 'a', 'd', 'e' ]

// 删除数组前2个值(删除索引0,1), 删除完毕后，在被删除索引处，添加新的值"sudada"和"zhangsan"
arr2.splice(0,2, "sudada","zhangsan")
console.log(arr2)
// 返回值: [ 'sudada', 'zhangsan', 'c', 'd', 'e' ]

// 删除数组所有的值
arr2.splice(0)
console.log(arr2)
// 返回值: [ ]

14.6、数组去重

// 数组去重
arr2=[1,2,3,3,4,2,2,5,6,7,4,5,3,]

// 获取数组中的每个元素
for (var n=0; n<=arr2.length; n++){
    // console.log(arr2[n])
    for (var i=n+1; i<=arr2.length; i++){
        // console.log(arr2[i])
        // 判断2个元素的值是否相等，如果相等说明出现了重复的元素，则删除i对应的元素
        if (arr2[n]==arr2[i]){
            arr2.splice(i,1)
            // 删除了i所在的元素之后，后面的元素会自动补位，此时不会在比较这个"补位"的元素，需要在比较一次i位置所在的元素
            i--; // 这里自建i--，循环后上面在自增i++，相当于没加没减，又重复的执行了一次
        }
    }
}
console.log(arr2)
// 返回值: [ 1, 2, 3, 4, 5, 6, 7 ]

14.7、数组的join方法 （指定分隔符）

// join方法：将数组转换为字符串(可以指定分隔符)。该方法不会对原数组产生影响
var arr = ["aa", "bb", "cc"]
// 默认的分隔符为","
console.log(arr.join())
// 返回值: aa,bb,cc

// 指定分隔符为"/"
console.log(arr.join("/"))
// 返回值: aa/bb/cc

14.7、数组的concat方法（多个数组合并）

// concat方法：合并多个数组(也可以合并字符串)，将合并的值返回。该方法不会对原数组产生影响
var arr1 = ["a","b","c","d","e"]
var arr2 = ["A","B","D","D","E"]
var arr3 = ["aa", "bb", "cc"]

console.log(arr1.concat(arr2, arr3, "zhangsan"))
// 返回值: [ 'a', 'b', 'c', 'd', 'e', 'A', 'B', 'D', 'D', 'E', "aa", "bb", "cc", "zhangsan" ]

14.7、数组的reverse方法 （反转数据）

// reverse方法：反转数组，将数组值的顺序颠倒。该方法会修改原数组
var arr = ["aa", "bb", "cc"]
console.log(arr.reverse())
// 返回值: [ 'cc', 'bb', 'aa' ]

14.7、数组的sort方法（数组排序）

// sort方法：对数组进行排序。该方法会修改原数组
var arr = ["b","c","d","a","e"]
console.log(arr.sort())
// 返回值: [ 'a', 'b', 'c', 'd', 'e' ]

十五、Date对象，时间相关

15.1、Data对象来表示一个时间

var d = new Date();
console.log(d)  // 返回值：2023-08-06T12:45:42.716Z

// 快速获取当前的时间戳
console.log(Date.now()) // 返回值：1691328309245

15.2、创建一个 "指定时间" 的 "时间对象"（在构造函数中传递一个 "表示时间的字符串" 作为参数）

// 创建一个 "指定时间" 的 "时间对象"（在构造函数中传递一个 "表示时间的字符串" 作为参数）
var d2 = new Date("2023/08/06 12:10:10")
console.log(d2)  // 返回值：2023-08-06T04:10:10.000Z

获取当前日期对象是哪一天
console.log(d2.getDate())   // 返回值：6

获取当前日期对象是周几，0表示周末
console.log(d2.getDay())   // 返回值（0-6）：0

获取当前日期对象是几月份，0表示1月份
console.log(d2.getMonth())   // 返回值（0-11）：7

获取当前日期对象的年份
console.log(d2.getFullYear())   // 返回值：2023

获取当前日期对象的小时数
console.log(d2.getHours())   // 返回值：12

获取当前日期对象的分钟数
console.log(d2.getMinutes())   // 返回值：10

获取当前日期对象的秒数
console.log(d2.getSeconds())   // 返回值：10

获取当前日期对象的时间戳,1970年1月1日00:00:00到当前时间的秒数
console.log(d2.getTime())   // 返回值：1691295010000

十六、Math

Math和其他对象不同，不是一个构造函数。是一个工具类对象，里面封装了数学运算相关的属性和方法

16.1、Math对象属性

获取圆周率
console.log(Math.PI) // 返回值：3.141592653589793

16.2、Math对象方法

// 一个数字的绝对值
console.log(Math.abs(12)) // 返回值：12
console.log(Math.abs(-1)) // 返回值：1

// 上舍入（向上取整，小数位有值，就自动进1）
console.log(Math.ceil(1.5)) // 返回值：2
console.log(Math.ceil(1.1)) // 返回值：2
console.log(Math.ceil(1.0)) // 返回值：1

// 下舍入（向下取整，小数位有值，就自动减掉小数位的值）
console.log(Math.floor(1.5)) // 返回值：1
console.log(Math.floor(1.1)) // 返回值：1
console.log(Math.floor(1.0)) // 返回值：1

// 四舍五入
console.log(Math.round(1.5)) // 返回值：2
console.log(Math.round(1.4)) // 返回值：1

// 取随机值（取0-1之间的随机数）
console.log(Math.random()) // 返回值：0.8869327992322307
// 生成一个0-10之间的随机数
console.log(Math.round(Math.random()*10))
// 生成一个0-100之间的随机数
console.log(Math.round(Math.random()*100))

// 生成一个x-y之间的随机数
var x =20;
var y =40;
console.log(Math.round(Math.random()*(y-x))+x)

// 获取最大值
console.log(Math.max(10,20,30,40))   // 返回值：40

// 获取最小值
console.log(Math.min(10,20,30,40))   // 返回值：10

十七、字符串String的相关方法

17.1、常见用法

// 创建一个字符串
var str = "hello"   // 字符串是以"字符数组"的形式保存的 [ "h","e","l","l","o" ]

// 查看字符串的长度
console.log(str.length) // 返回值：5

// 返回指定位置的字符（根据索引获取数组的值）
console.log(str.charAt(0)) // 返回值：h
console.log(str[0]) // 返回值：h

// 把变量 "str" 的值和 " all" 连接在一起
console.log(str.concat(" all")) // 返回值：hello all

// 检查某个值是否存在变量 "str" 中（从前往后找）
// 检索"aaa"是否存在于变量 "str" 中，如果存在则返回对应的"索引值"，如果不存在则返回"-1"
console.log(str.indexOf("aaa")) // 返回值：-1
// 检索"o"是否存在于变量 "str" 中，如果存在则返回对应的"索引值"，如果不存在则返回"-1"
console.log(str.indexOf("o")) // 返回值：4

// 检查某个值是否存在变量 "str" 中，同时指定查找位置（从前往后找）
// 检索"h"是否存在于变量 "str" 中，从"str"第0个索引开始查找，如果找到则返回对应的"索引值"，如果没找到则返回"-1"
console.log(str.indexOf("h", 0)) // 返回值：0
// 检索"h"是否存在于变量 "str" 中，从"str"第1个索引开始查找，如果找到则返回对应的"索引值"，如果没找到则返回"-1"
console.log(str.indexOf("h", 1)) // 返回值：-1

var name = "sudad"
// 检查某个值是否存在变量 "name" 中（从后往前找）
// 检索"aaa"是否存在于变量 "name" 中，如果存在则返回对应的"索引值"，如果不存在则返回"-1"
console.log(name.lastIndexOf("aaa")) // 返回值：-1
// 检索"a"是否存在于变量 "name" 中，如果存在则返回对应的"索引值"，如果不存在则返回"-1"
console.log(name.lastIndexOf("a")) // 返回值：3

var str1= "asdnnwuch";
// 截取字符串索引0,1的值
console.log(str1.slice(0,2)) // 返回值：as

// 截取字符串索引1和1之后所有的值
console.log(str1.slice(1)) // 返回值：sdnnwuch

// 截取字符串索引1 ~ -1的值
console.log(str1.slice(1,-1)) // 返回值：sdnnwuc

var str2= "123d,235,asdjkl,a123d";
// 指定字符串的分隔符为","，将分割后的数据以数组的格式展示
console.log(str2.split(',')) // 返回值：[ '123d', '235', 'asdjkl', 'a123d' ]

var str3= "AsdiqamSdkwqemasdS";
// 字符串转为大写
console.log(str3.toUpperCase()) // 返回值：ASDIQAMSDKWQEMASDS

// 字符串转为小写
console.log(str3.toLowerCase()) // 返回值：asdiqamsdkwqemasds

十八、正则表达式

18.1、字符串常用的正则表达式方法

var str = "asdmka,dsji,98823jkl,asdj"
// 将字符串拆分为数组
console.log(str.split()) // 返回值： [ 'asdmka,dsji,98823jkl,asdj' ]

// 将字符串指定分隔符拆分为数组
console.log(str.split(",")) // 返回值： [ 'asdmka', 'dsji', '98823jkl', 'asdj' ]

var str1 = "a1b2b3b4n5m6"
// 将任意字母均作为分隔符，拆分字符串
console.log(str1.split(/[a-z]/)) // 返回值： ['',  '1', '2', '3', '4', '5', '6']

var str2 = "hello abc hello sdf"
// 搜索"abc"是否存在，如果存在则返回索引值，不存在则返回-1
console.log(str2.search("abc")) // 返回值：6

// 搜索 "abc" 或 "sdf" 是否存在，如果存在则返回索引值，不存在则返回-1
console.log(str2.search(/abc|sdf/)) // 返回值：6

// 搜索 "a * c" 是否存在，如果存在则返回索引值，不存在则返回-1
console.log(str2.search(/a[bc]c/)) // 返回值：6

var str3 = "ma9m9ZidTY"
// 提取所有字母（只返回匹配到的第一个字母），返回一个数组格式
console.log(str3.match(/[a-z]/)) // 返回值： ['m']
// 提取所有字母（返回所有的小写字母），返回一个数组格式
console.log(str3.match(/[a-z]/g)) // 返回值： [ 'm', 'a', 'm', 'i', 'd' ]
// 提取所有字母（返回所有的字母，忽略大小写），返回一个数组格式
console.log(str3.match(/[a-z]/gi)) // 返回值： [ 'm', 'a', 'm', 'Z', 'i', 'd', 'T', 'Y']

var str4 = "abc abc ABC sdf ert"
// 内容替换，把"abc"替换为"sudada"，默认只替换第一个匹配到的
console.log(str4.replace("abc", "sudada")) // 返回值：sudada abc ABC sdf ert
// 替换完毕后，原来的值不会发生改变
console.log(str4) // 返回值：abc abc ABC sdf ert

// 内容替换，把"abc"替换为"sudada"，替换所有（不忽略大小写）
console.log(str4.replace(/abc/g, "sudada")) // 返回值：sudada sudada ABC sdf ert

// 内容替换，把"abc"替换为"sudada"，替换所有（忽略大小写）
console.log(str4.replace(/abc/gi, "sudada")) // 返回值：sudada sudada sudada sdf ert

18.2、正则表达式语法

// 字符串"b"出现的次数: {3} 表示字符串"b"出现的次数为3次，和字符串"a"无关
var reg1 = /ab{3}/
console.log(reg1.test("acabbb")) // 返回值：true
console.log(reg1.test("ab")) // 返回值：false

// 字符串"ab"出现的次数: {3} 表示字符串"ab"出现的次数为3次
var reg2 = /(ab){3}/
console.log(reg2.test("abababa")) // 返回值：true
console.log(reg2.test("ab")) // 返回值：false

// 字符串"b"出现的次数: {1,3} 表示字符串"b"出现的次数为1~3次
var reg3 = /ab{1,3}c/
console.log(reg3.test("abbbc")) // 返回值：true
console.log(reg3.test("abbbbc")) // 返回值：false

// 字符串"b"出现的次数: {3,} 表示字符串"b"出现的次数为3次及以上
var reg4 = /ab{3,}c/
console.log(reg4.test("abbbbbc")) // 返回值：true
console.log(reg4.test("abbc")) // 返回值：false

// 字符串"b"出现的次数: + 表示字符串"b"出现的次数为1次及以上，相当于{1,}
var reg5 = /ab+c/
console.log(reg5.test("abc")) // 返回值：true

// 字符串"b"出现的次数: * 表示字符串"b"出现的次数为0次及以上，相当于{0,}
var reg6 = /ab*c/
console.log(reg6.test("aac")) // 返回值：true
console.log(reg6.test("abc")) // 返回值：true

// 字符串"b"出现的次数: ? 表示字符串"b"出现的次数为0~1次，相当于{0,1}
var reg7 = /ab?c/
console.log(reg7.test("abc")) // 返回值：true
console.log(reg7.test("abbc")) // 返回值：false

// 检查一个字符串是否是以a开头，使用：^
var reg8 = /^a/
console.log(reg8.test("abc")) // 返回值：true
console.log(reg8.test("bac")) // 返回值：false

// 检查一个字符串是否是以a结尾，使用：$
var reg9 = /a$/
console.log(reg9.test("ba")) // 返回值：true
console.log(reg9.test("abad")) // 返回值：false

// 检查手机号是否符合长度(规范)
var reg10 = /^1[0-9]{10}$/
console.log(reg10.test("13245678912")) // 返回值：true

// 检查字符串中是否存在：. (.表示任意字符，这里需要用到转译字符"\")
var reg11 = /\./
console.log(reg11.test("as.dj")) // 返回值：true
console.log(reg11.test("adas")) // 返回值：true

// 检查字符串中是否存在：字母，数字，_
var reg12 = /\w/
console.log(reg12.test("as")) // 返回值：true
console.log(reg12.test("123")) // 返回值：true
console.log(reg12.test("_")) // 返回值：true

// 检查字符串中是否存在："字母，数字，_"之外的其他的值
var reg13 = /\W/
console.log(reg13.test(".*")) // 返回值：true
console.log(reg13.test("as")) // 返回值：false
console.log(reg13.test("123")) // 返回值：false
console.log(reg13.test("_")) // 返回值：false

// 检查字符串中是否存在：任意的数字，相当于 [0-9]
var reg14 = /\d/
console.log(reg14.test("123")) // 返回值：true
console.log(reg14.test("abc")) // 返回值：false

// 检查字符串中是否存在：数字之外的其他的值
var reg15 = /\D/
console.log(reg15.test("123")) // 返回值：false
console.log(reg15.test("abc")) // 返回值：true

// \s 检查字符串中是否存在：" "
var reg16 = /\s/
console.log(reg16.test(" ")) // 返回值：true
console.log(reg16.test("abc")) // 返回值：false

// \S 检查字符串中是否存在：" "之外的其他的值
var reg17 = /\S/
console.log(reg17.test(" ")) // 返回值：false
console.log(reg17.test("abc")) // 返回值：true

十九、DOM

19.1、什么是dom？

Document Object Module 文档对象模型

在JS中通过DOM来对HTML文档进行操作

19.2、事件

事件发生：就是用户和浏览器之间的交互行为，比如：点击按钮，鼠标移动，关闭窗口等。

事件处理：接收(捕捉)用户的交互行为后，响应该行为(事件)。

19.3、文档的加载（onload事件会在"整个页面"加载完成之后才触发）

    
    



    点我

如果不使用onload事件的话，因为页面加载顺序是从上而下的，会找不到"btn"对象，如下：

    
    



    点我

不使用onload事件，如何解决？把script标签写到button标签下面即可，如下：

    点我

    

19.4、dom查询一（获取元素节点，通过document对象调用）

读取元素节点属性，直接使用"元素.属性名"
    例子："元素.id" 或 "元素.name" 或 "元素.value"
    例外："class属性" 不能这么读，属于保留字（读取"class属性"时要使用 "元素.className"）

19.4.1、document.getElementById("btn") 

通过id属性，获取一个元素节点对象

    dianji

    

19.4.2、document.getElementsByTagName("li")

通过标签名，获取一组元素节点对象

    
shanghai
    
beijing
    
shenzhen

    

19.4.3、document.getElementsByName("gender")

通过name属性，获取一组元素节点对象（输入框input,表单form）

19.4.4、图片切换的小功能（上述3个功能结合实现）

    
    

    prev
    next

19.5、dom查询二（获取元素节点的子节点，通过具体的元素节点调用）

    

        
shanghai
        
beijing
        
shenzhen
    

    

19.6、dom查询三（获取元素节点的父节点/同级节点，通过具体的节点调用）

    
shanghai
beijing
shenzhen

19.7、dom查询四（body标签，html标签，页面所有标签，元素的class属性）

    
box1中的div

19.8、全选样例

    
    




    

    足球
    篮球
    羽毛球
    乒乓球
    全选/全不选
    

    
    
    
    

19.9、DOM增删改