JavaScript-复习

本篇只是个人的JavaScript复习，只记录了博主不熟的或者觉得需要记录的为后面学习vue巩固基础，如想学JavaScript，请到w3school进行完整的学习

JavaScript

数据类型

1.原始数据类型

• number: 整数/小数/NaN
• string:字符串
• Boolean: true/false
• null: 一个对象为空的占位符
• undefined: 未定义，如果一个变量没有给初始化值，则会默认赋值为undefined

2.引用数量类型：对象

变量

变量：一小块存储数据的内存空间

JavaScript是弱类型语言，在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型数据

语法：var 变量名 = 初始值；

typeof:获取变量类型

运算符

正号（+）：

在JavaScript中，如果运算符不受运算所要求的类型，那么JavaScript会自动的将运算数进行类型转换

string转number：按字面值转换，如果字面值不是数字，则转为NaN(不是数字的数字)

比较运算符：

1.类型相同：直接比较（字符串：按照字典顺序比较，按位逐一比较，直到得出大小为止）

2.类型不同：先进行类型转换，再比较

流程控制

switch语句接受任意的原始数据类型

function

创建方式

<script>
    <!--创建方式1-->
    var fun = new Function("a","b","alert(a);")
    fun(3,4)
</script>

<script>
    <!--创建方式1-->
    function fun(a,b) {
        alert(a+b)
    }
    fun("hello","world")
</script>

<script>
    <!--创建方式1-->
    var fun = function (a,b) {
        alert(a+b);
    }
    fun(3,4)
</script>

特点

1.方法定义的参数类型不用写,返回值也可不写，分号加不加都可以

2.方法是一个对象，如果定义名称相同的方法不会报错，会覆盖

3.在JavaScript中，方法的调用只与方法的名称有关，和参数列表无关

4.在方法声明中有一个隐藏的内置对象（数组），arguments封装所有的实际参数

<script>
    <!--求任意个数的和-->
   function add() {
       var sum = 0;
       for (var i = 0; i < arguments.length; i++) {
           sum += arguments[i];
       }
       return sum;
   }
   var sum = add(1,2,3,4,5)
    alert(sum)//显示15
</script>

Array

创建

1.var arr = new Array(元素列表)

2.var arr = new Array(默认长度)

3.var arr = [元素列表]

<script>
    var arr = new Array(1,2,3,4,5)
    var arr2 = new Array(5);
    var arr3 = [1,2,3,4];
    document.write(arr+"<br>")//输出1,2,3,4,5
    document.write(arr2+"<br>")//输出....
    document.write(arr3+"<br>")//输出1，2，3，4
</script>

特点

1.数组元素的类型是可变的

<script>
    var arr = [1,"abc",true];
    document.write(arr);//输出1,abc,true
</script>

2.数组长度也是可变的

<script>
    var arr = [1,"abc",true];
    arr[10] = "JavaScript"
    document.write(arr+"<br>");//输出1,abc,true,,,,,,,,JavaScript
    document.write(arr[10]+"<br>");//输出JavaScript
</script>

方法

1.join(参数)：将数组中的元素按照参数的格式来拼接字符串，默认为逗号

<script>
    var arr = [1,"abc",true];
    document.write(arr+"<br>");//输出1,abc,true
    document.write(arr.join("="));//输出1=abc=true
</script>

2.push：向数组末尾添加元素

<script>
    var arr = [1,"abc",true];
    document.write(arr.join("--")+"<br>");//输出1--abc--true
    arr.push("javascript");
    document.write(arr.join("--")+"<br>");//输出1--abc--true--javascript
</script>

Date

创建

var date = new Date()

<script>
    var date = new Date()
    document.write(date)//输出Thu Jun 06 2019 08:36:50 GMT+0800 (中国标准时间)
</script>

方法

1.toLocaleString：根据本地时间格式，把 Date 对象转换为字符串。

<script>
    var date = new Date()
   document.write(date.toLocaleString())//输出2019/6/6 上午8:39:39
</script>

2.getTime：返回 1970 年 1 月 1 日至今的毫秒数，可用作时间戳

<script>
    var date = new Date()
    document.write(date.getTime()+"<br>")//输出1559781701641
</script>

Math

Math对象不用创建，直接使用，Math.方法名()

具体方法在Math查看

RegExp(正则表达式，定义字符串的组成格式)

1.正则表达式

单个字符：[]

如：[a] [ab] [a-zA-Z0-9_]

\d：表示单个数字字符 [0-9]

\w：表示单个单词字符 [a-zA-Z0-9_]

量词符合：？，*，+，{m,n}

?：表示出现0次或1次

*：表示出现0次或多次

+：表示出现1次或多次

{m,n}：表示 m<= 数量 <= n，如果m缺少**{,n}最多n次，如果n缺少{m,}**最少m次

其余的可在RegExp查看

起始和结束符合

^：起始

$：结束

2.正则对象

创建

1. var reg = new RegExp(正则表达式)
2. var reg = /正则表达式/

    <script>
        var reg = new RegExp("\w{6,12}")
        //单词字符开始，单词字符结束
        var reg = /^\w{6,12}$/
    </script>

方法

test(参数)：验证参数是否符合正则表达式

<script>
    //单词字符开始，单词字符结束
    var reg2 = /^\w{6,12}$/
    var name = "javascript"
    var flag = reg2.test(name);
    alert(flag)//输出true
    name = "java"
    flag = reg2.test(name);
    alert(flag)//输出false
</script>

Global

自行查看Global

BOM

Browser Object Model 浏览器对象模型

BOM将浏览器的各个组成部分封装成对象

组成

• Window:窗口对象
• Navigator:浏览器对象
• Screnn:显示器屏幕对象
• History:历史记录对象
• Location:地址栏对象

Window窗口对象

特点

window对象不需要创建可以直接使用，window.方法名()；window的引用可以省略，方法名()。

<script>
    alert("Window")
    window.alert("Hello")
</script>

方法

1.与弹出框有关

alert()：显示带有一段消息和一个确认按钮的警告框。

confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。

• 点击确认按钮，返回true
• 点击取消按钮，返回false

<script>
    var flag = confirm("确定要退出吗？");
    if (flag){
        document.write("退出")//flag为true
    } else {
        document.write("不退出")//flag为false
    }
</script>

prompt()：显示可提示用户输入的对话框。

• 返回值，获得用户输入的值

2.与打开关闭有关

open()：打开一个新的浏览器窗口或查找一个已命名的窗口。返回值是一个window对象

close()：关闭浏览器窗口，谁调用我，我关闭谁

3.与定时器有关

setTimeout()：在指定的毫秒数后调用函数或计算表达式。

• 参数：code:要调用的函数后要执行的 JavaScript 代码串。millisec:在执行代码前需等待的毫秒数

• 返回唯一标识，用于取消定时器

  <script>
      setTimeout(fun,4000)
      function fun() {
          alert("我被执行了");
      }
  </script>
  

clearTimeout()：取消由 setTimeout() 方法设置的 timeout。

<script>
    var timeout = setTimeout(fun,4000);
    clearTimeout(timeout);
    function fun() {
        alert("我被执行了");
    }
</script>

setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。

• 参数与setTimeout()相同，只是setTimeout()是执行单次，而setInterval()循环执行

clearInterval()：取消由 setInterval() 设置的 timeout。

• 使用方法与clearTimeout()相同

属性

获取其他BOM对象

• history
• screen
• navigator
• location

获取DOM对象

• document

Location对象

创建

1.windo.location

2.location

方法

reload()：重新加载当前文档。

属性

href：设置或返回完整的 URL。

search：设置或返回从问号 (?) 开始的 URL查询部分（问号 ? 之后的部分，返回的值包括问号）

小demo：倒计时跳转页面,倒计时为0时跳转到百度页面

    <style>
        p{
            text-align: center;
        }
        span{
            color:red;
        }
    </style>

</head>
<body>
    <p><span id="time">5</span>秒后，跳转到百度首页...</p>
    <script>
        var time = document.getElementById("time");
        var second = 5;
        function fun() {
            second --;
            if (second == 0){
                location.href = "https://www.baidu.com";
            }
            time.innerHTML = second;
        }
        setInterval(fun,1000);
    </script>
</body>
</html>

History

History 对象包含用户（在浏览器窗口中）访问过的 URL。

创建

1.window.history

2.history

方法

back()：加载 history 列表中的前一个 URL。

forward()：加载 history 列表中的下一个 URL。

go(参数)：加载 history 列表中的某个具体页面。

• 参数：正数：前进几个历史记录；负数：后退几个历史纪录

属性

length：返回当前窗口历史列表中的 URL 数量。

<input type="button" id="btn" value="获取历史纪录数量">
 <script>
     var btn = document.getElementById("btn");
     btn.onclick = function () {
         document.write(history.length+"")
     }
 </script>

DOM

Documnet Object Model 文档对象模型

将标记语言文档的各个组成部分，封装为对象，可以动态使用这些对象，定义了访问和操作HTML文档的标准方法

DOM将HTML文档表达为树结构

核心DOM

• Document：文档对象
• Element：元素对象
• Attribute： 属性对象
• Text：文本对象
• Comment：注释对象
• Node：节点对象，其他五个父对象

Document

创建

1.window.document

2.document

方法

获取Element对象

• getElementById()：返回带有指定 ID 的元素。
• getElementsByTagName()：返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）
• getElementsByClassName()：返回包含带有指定类名的所有元素的节点列表。

创建其他DOM对象

• createAttribute()：创建属性节点。
• createElement()：创建元素节点。
• createTextNode()：创建文本节点

Element

创建

通过document来创建

方法

• removeAttribute()：从元素中移除指定属性。
• setAttribute()：把指定属性设置或更改为指定值。

Node

特点：所有DOM对象都可以被认为是一个节点

方法

• appendChild()：向节点的子节点列表的结尾添加新的子节点

• removeChild()：删除并返回当前节点的指定子节点

• replaceChild()：用新节点替换一个子节点

  <body>
      <div id="div1">
          <div id="div2">div2</div>
          div1
      </div>
     <input type="button" id="btn" value="删除节点">
     <input type="button" id="btn_add" value="添加节点">
      <script>
         var btn = document.getElementById("btn");
         btn.onclick = function () {
             var div1 = document.getElementById("div1");
             var div2 = document.getElementById("div2");
             div1.removeChild(div2);
         }
         var btn_add = document.getElementById("btn_add");
         btn_add.onclick = function () {
             var div1 = document.getElementById("div1");
             //在div1创建子节点
             var div3 = document.createElement("div");
             div3.setAttribute("id","div3");
             div3.innerHTML = "div3";
             div1.appendChild(div3)
         }
      </script>
  </body>
  

属性

• parentNode：返回节点的父节点

小demo，动态生成表格

    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>

</head>
<body>

<div>
    <input type="text" id="id" placeholder="请输入编号">
    <input type="text" id="name"  placeholder="请输入姓名">
    <input type="text" id="gender"  placeholder="请输入性别">
    <input type="button" value="添加" id="btn_add">
</div>


    <table id="table">
        <caption>学生信息表</caption>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>操作</th>
        </tr>



    </table>
    <script>
        var btn_add = document.getElementById("btn_add");
        btn_add.onclick = function () {
            var id = document.getElementById("id").value
            var name = document.getElementById("name").value
            var gender = document.getElementById("gender").value
            var arr = [id, name,gender]
            var tr = document.createElement("tr");
            for (var i = 0; i < arr.length; i++) {
                var td= document.createElement("td")
                td.innerHTML = arr[i]
                tr.appendChild(td)
            }
            var td= document.createElement("td")
            var btn_del = document.createElement("button");
            btn_del.innerHTML = "删除"
            btn_del.setAttribute("onclick","delTr(this)")
            td.appendChild(btn_del)
            tr.appendChild(td)
            var table = document.getElementById("table")
            table.appendChild(tr);
        }
        function delTr(btn) {
            var tr = btn.parentNode.parentNode;
            var table = document.getElementById("table");
            table.removeChild(tr);
        }

    </script>

HTML DOM

HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

控制样式

使用元素的style属性来设置

<div id="div">div</div>
<script>
    var div = document.getElementById("div");
    div.onclick = function () {
        div.style.border = "1px solid red"
        div.style.width = "200px"
        div.style.fontSize = "40px";
    }
</script>

事件

事件学习

小demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        table{
            border: 1px solid;
            width: 500px;
            margin-left: 30%;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            margin-top: 10px;
            margin-left: 30%;
        }
    </style>

    <script>
        window.onload = function () {
            //全选
            document.getElementById("selectAll").onclick = function () {
                var checkboxs = document.getElementsByName("check");
                for (var i = 0; i < checkboxs.length; i++) {
                    checkboxs[i].checked = true;
                }
            }
            //全不选
            document.getElementById("unSelectAll").onclick = function () {
                var checkboxs = document.getElementsByName("check");
                for (var i = 0; i < checkboxs.length; i++) {
                    checkboxs[i].checked = false;
                }
            }
            //反选
            document.getElementById("selectRev").onclick = function () {
                var checkboxs = document.getElementsByName("check");
                for (var i = 1; i < checkboxs.length; i++) {
                    checkboxs[i].checked = !checkboxs[i].checked;
                }
            }

            document.getElementById("first").onclick = function () {
                var checkboxs = document.getElementsByName("check");
                var first = document.getElementById("first")
                for (var i = 0; i < checkboxs.length; i++) {
                    checkboxs[i].checked = first.checked;
                }
            }
            //表格变色
            var trs = document.getElementsByTagName("tr");
            for (var i = 0; i < trs.length; i++) {
                //移到元素上
                trs[i].onmouseover = function () {
                    this.style.backgroundColor = "pink";
                }
                //移出元素
                trs[i].onmouseout = function () {
                    this.style.backgroundColor = "white";
                }
            }
        }
    </script>

</head>
<body>

<table>
    <caption>学生信息表</caption>
    <tr>
        <th><input type="checkbox" name="check" id="first"></th>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>

    <tr>
        <td><input type="checkbox" name="check"></td>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

    <tr>
        <td><input type="checkbox" name="check"></td>
        <td>2</td>
        <td>任我行</td>
        <td>男</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

    <tr>
        <td><input type="checkbox" name="check"></td>
        <td>3</td>
        <td>岳不群</td>
        <td>?</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

</table>
<div>
    <input type="button" id="selectAll" value="全选">
    <input type="button" id="unSelectAll" value="全不选">
    <input type="button" id="selectRev" value="反选">
</div>
</body>
</html>