本文链接：https://blog.csdn.net/sw_eet/article/details/115412903

javascript

1.javascript历史

2.快速入门

2.1引入JavaScript

内部标签

<script>
    alert('hello world');
</script>

外部标签

注意script标签需要都写完，不要写自闭和

<script src="yt.js"></script>

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个JavaScript</title>
    <!--  script里面写，JavaScript脚本  -->
    <!--
    <script>
        alert('hello.world');
    </script>
    -->

    <!--
    外部引入
    script标签要成对出现
    -->
    <script src="yt.js"></script>
</head>
<body>

</body>
</html>

2.2 基本语法入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js基本语法</title>

    <script>
        /*
            JavaScript，区分大小写

            console.log(num)        浏览器控制台打印变量
            
        */
        // 变量    变量类型 变量名 = 初始值;
        var num = 1;
        var name = "yt";
        // alert(name);
        //条件控制
        if(num>-5){
            alert("haha");
        }else if(num<10){
            alert("haha1111111");
        }
        /*  多行注释  */

    </script>
</head>
<body>

</body>
</html>

浏览器调试须知

Element 元素
Console 控制台、可以输入命令
Sources 源码，用于调试
Network 网络请求查看
Application 查看网页在浏览器的缓存，cookie

2.3数据类型

数值、文本、音频、视频…

变量
- var
- 不能以，数字开头

        //全局变量
        i = 1;

number

js不区分小数和整数

122      //整数
122.3   //浮点数
2e3     //科学计数法
NaN     //not a number
Infinity //无限大

字符串
- ‘asd’
- “qwe”
布尔值
- true
- false
逻辑运算
- &&
- ||
- ！
比较运算符
- = 赋值
- == 等于(类型可以不一样、数值相同就相等)
- === 绝对等于(类型一样、数值一样、结果为true)
null和undefined
- null，空
- undefined，未定义
数组
- java数组是相同的类型集合，JavaScript不要求类型一致
- 数组下标越界了就会，undefine

        var a = [1,2,3,"hello",true];
        new Array(1,2,5,'hello',false);

对象
- 对象大括号，对象中括号
- 每个属性之间用逗号隔开，最后一个不用加逗号

        var person = {
            name : "yutang",
            age : 3,
            tag : ['java','mysql','javascript']
        }

//使用对象中的数据
person.name
"yutang"

注意
- 尽量使用、=== ，不要使用，==
- NaN，与所有的数值都不想等，包括自己
- isNaN(NaN)，通过这个方法来判断是否为NaN
- 尽量避免浮点数的运算、比较因为存在浮点数的精度问题

    <script>
        //false  浮点数精度问题
        console.log(1/3===(1-2/3));

        //true    用这个方法来避免
        console.log(Math.abs(1/3===(1-2/3))<0.00001);

    </script>

2.4严格检查模式

    <script>
        //严格检查模式，预防JavaScript的随意性产生问题，必须写在第一行
        //局部变量建议就是用，let
        'use strict'

        //非严格模式认为是全局变量，严格模式报错
        i = 1;
        //es6中，局部变量用let
        let a = 2;
    </script>

3.数据类型

3.1字符串

正常字符串用，单、双引号包裹
单、双引号输出，需要转义字符(\)
多行字符串

    <script>
        //多行字符串，使用反引号括起来
        var a = `
        hello world!
        i need happy!
        `;
        alert(a);
    </script>

模板字符串

        //模板字符串
        let name = "yutang";
        let age = 3;
        let b = `你好,${name}`;
        alert(b);

字符串长度

.length

字符串无可变性
大小写转化

console.log(name.toUpperCase())
VM98:1 YUTANG
undefined
console.log(name.toLowerCase())
VM168:1 yutang

javascript无单个字个字符，单个字符认为是长度为1的字符串
substring,左开右闭

3.2数组

Array可以包含任何数据类型
给数组的长度赋值，过大会出现空的位置，过小会把多余的数值丢弃

    <script>
        //定义数组
        var a = [1,2,3,4,5,6];
        //数组的长度
        alert(a.length);
    </script>

//给长度赋值
a.length=10
10
a
(10) [1, 2, 3, 4, 5, 6, empty × 4]
//根据元素找位置
a.indexOf(1)
0
//截取数组
a.slice(2,4)
(2) [3, 4]
//push、尾部添加，pop、弹出最后一个
a
(6) [1, 2, 3, 4, 5, 6]
a.push('q','e')
8
a
(8) [1, 2, 3, 4, 5, 6, "q", "e"]
a.pop()
"e"
//shift、弹出头部，unshift、添加头部
a
(7) [1, 2, 3, 4, 5, 6, "q"]
a.shift()
1
a.unshift(9)
7
//sort、排序
//revert、反转
//concat，数组拼接，不会在原始的数据上改动，只是返回了新的
a.concat(0.6)
(7) [1, 2, 3, 4, 5, 6, 0.6]
//join、连接符
a.join("--")
"1--2--3--4--5--6"
//fill、填充

3.3对象

若干个键值对
用大括号括起来，属性之间用逗号隔开，最后一个属性后面不用加逗号
使用一个不存在的对象属性，不会报错显示undefined

   //对象
   //最后一个不用逗号
   var person = {
       name : "yutang",
       age : 3,
       tag : ['java','mysql','javascript']
   }

javascript可以用delete动态删除属性
Javascript可以动态添加

person
{name: "yutang", age: 3, tag: Array(3)}
person.haha="huhdiuh"
"huhdiuh"
person
{name: "yutang", age: 3, tag: Array(3), haha: "huhdiuh"}
delete person.haha
true
person
{name: "yutang", age: 3, tag: Array(3)}

判断某个对象是否有某属性 “xxx” in 对象
- javascript中对象中的属性都是字符串
- javascript中对象中的值是其相应的类型

"name" in person
true
//继承自父类的方法
"toString" in person
true

3.4流程控制

//if语句
if(){

}else if(){

}
//循环，避免死循环
while(){

}
for( ; ; ){

}
do{

}while()
//遍历对象里的元素，类似java中的增强for循环,
//es6的新特性
for( of ){

}
//便利下标
for( in ){

}

3.5Map和Set

    <script>
        //严格语法
        "use strict"
        //es6的最新产品
        //map，通过key来获取value
        var map = new Map([["zhangsan",100],["lisi",78],["wangwu",90]]);
        console.log(map.get("lisi"));
        //添加键值对
        map.set("hsuhdj",68);
        map.delete("lisi");

        //set，无序不重复的集合会去重
        var set = new Set([3,1,1,1,1,1]);
        console.log(set);
        set.add(2);   //添加
        set.delete(1);  //会删去所有的1
        set.has(1)    //判断是否包含某个值
        // Set(2) {3, 1}
        // [[Entries]]
        // 0: 3
        // 1: 1
        // size: (...)
        // __proto__: Set
    </script>

3.6 iterator

es6新特性
遍历set、map用for-of

4.函数

方法，对象里面的函数

4.1定义函数

执行到return就代表函数执行结束。未执行到return函数也会结束，结果为undefined

    <script>
    //定义方式一
        //绝对值函数
        function abs(x) {
            if(x<0){
                x=-x;
            }
            return x;
        }
    //定义方式二
        var  abs = function(x) {
            if(x<0){
                x=-x;
            }
            return x;
        }
    //调用函数
        abs(10);  //10
        abs(-10);  //10
    </script>

参数问题

JavaScript可以不传递参数，也可以传递多个参数

    <script>
    //绝对值函数
    function abs(x) {
        //判断传入参数的值，手动抛出异常
        if(typeof x !== "number"){
            throw "not a number";
        }
        if(x<0){
            x=-x;
        }
        return x;
    }
</script>

arguments
- 是JavaScript免费赠送的关键字
- 它表示函数接受的所有的参数，是一个数组
- 会包含所有的参数，使用未包含的参数需要排除已有的参数

rest

获取除了已经获取的参数，剩余的参数
只能放在参数列表的最后面，前面加…

    //使用格式
    function aaa(a,d,...rest) {
        console.log(rest);
    }

4.2变量的作用域

javascript中的，var有作用域
假设在函数体中申明，在函数体外不能使用（若想使用则用，闭包）
如果函数内部申明了相同的变量，使用不冲突
内部函数变量与外部函数变量名相同，则先在自生函数内向外查找
先用后定义，不会出错。只是变量未赋值。js引擎，自动提升y的定义，为提升赋值。
变量都在最前面进行赋值

    <script>
        function f() {
            var x = 0;
            x = x + 1;
        }
        x = x + 2;  //Uncaught ReferenceError: x is not defined
    </script>

    <!-- 申明相同变量 -->
    <script>
        function f() {
            var x = 0;
            x = x + 1;
        }
        function f1() {
            var x = "0";
            x = x + 1;
        }
    </script>

    <!-- 内部函数能使用外部的变量，反之不可以 -->
    <script>
        function f() {
            var x = 0;
            x = x + 1;
            function f1() {
            var y = x + 1;
            }
            x = y;//Uncaught ReferenceError: x is not defined
        }
    </script>

    <!-- 内部函数变量与外部的变量相同 -->
    <!-- 内部函数变量与外部函数变量名相同，则先在自生函数内向外查找 -->
    <script>
        function f() {
            var x = 0;
            x = x + 1;
            function f1() {
            var x = x + 1;
            }
            f1();
        }
    </script>

    <!-- 先用后定义 -->
    <script>
        var a = 1 + y;
        var y = "1";   
        // x is not defined

        //等价于
        var y;
        var a = 1 + y;
        y = "1";
    </script>

全局变量 var

window，全局对象
由于js所有的全局变量都是绑定window上的，所以会引发冲突。我们可以通过绑定在别的对象上解决冲突。

    //全局变量
    var a = 1;
    alert(a);
    alert(window.a);//全局变量绑定在windosw对象下

    <script>
        //唯一全局变量
        var yt = {};
        //定义全局变量
        yt.a = 1;
        yt.aaa function (x) {
            console.log(x);
        }
    </script>

局部变量 let

    <script>
        function aaa(){
            for (var i = 0; i < 100; i++) {
                console.log(i);
            }
            console.log(i+1);   //会输出  i  为  101
        }
    </script>

    <script>
        function aaa(){
            for (let i = 0; i < 100; i++) {
                console.log(i);
            }
            console.log(i+1);   //i is not defined
        }
    </script>

es6，关键字let，用于解决冲突问题。

常量 const

es6之前，全是大写命名的变量是常量
现在用const，就可以不改变了

4.3方法

方法就是把函数放在对象内
js中apply可以控制this的指向

    <script>
        var me = {
            name : "jjsji",
            birth : 2010,
            //方法
            age : function () {
                var now = new Date().getFullYear();
                return now - this.birth;
            }
        }

        //属性
        me.name
        //方法
        me.age()

        //等价于上面
        <script>
        function getage() {
            var now = new Date().getFullYear();
            return now - this.birth;
        }
        var me = {
            name : "jjsji",
            birth : 2010,
            //方法
            age : getage
            
        }
        var meeee = {
            name : "jjsjirrfff",
            birth : 2010,
            //方法
            age : getage
            
        }


    // me.age()    可以调用
    //getage().apply(me,[])    可以调用
    //getage()     NaN     因为直接调用的方法是window的方法
    </script>

5.内部对象

标准对象

5.1 Date

    <script>
        var now = new Date();       //Fri Apr 02 2021 18:09:49 GMT+0800 (中国标准时间)    设备的时间
        now.getFullYear();          //年
        now.getMonth();             //月     1--11
        now.getDate();              //日期
        now.getDay();               //星期几
        now.getHours();             //时
        now.getMinutes();           //分
        now.getSeconds();           //秒

        now.getTime();              //时间戳，从1970-1.1-00:00:00，开始计算全世界统一
        now = new Date(时间戳);
        now.toLocaleString();       //转换为当地时间
    </script>

5.2 json

早期用XML进行数据传输，json用于替代XML
轻量级的数据传输格式
JavaScript一切都是对象，任何js支持的类型都可以用json来表示
json是一种格式化的字符串，以键值对的形式存在
格式
- 对象 {}
- 数组 []
- 所有的键值对，key:value

    <script>
        var person = {
            name : "zhamnjh",
            age : 3,
            tall : 175
        }

        //对象转化为json
        var userjosn = JSON.stringify(person);
        //json转化为对象     参数为json字符串
        var user = JSON.parse(userjosn);
    </script>

json与js对象的区别

    //json
    var josn = '{"name":"yt","age":"18"}';
    //js对象
    var obj = {name:"yt",age:18};

5.3 Ajax

原生的js写法，xhr异步请求
jQuery封装好的方法，$("#name").ajax("")
axios请求

6.面向对象编程

6.1 什么是面向对象

JavaScript的面向对象与Java、c#等有一些区别

类：原指模板
对象：指实例

在JavaScript中有以下的不同

原型

    <script>
        var person = {
            name : "qwe",
            age : 3,
            run : function () {
                console.log(this.name+"---run...");
            }
        };

        var yt = {
            name : "yt"
        };
        //原型
        yt.__proto__ = person;
    </script>
<!-- 
    yt
    {name: "yt"}name: "yt"
    __proto__:
     age: 3name:
      "qwe"run:
       ƒ ()
       __proto__: Object
    yt.run()
    yt---run...
 -->

class继承
- es6的新特性

    <script>
        //定义一个类
        class student{
            //构造器
            constructor(name) {
                this.name = name;
            }
            //方法
            hello(){
                console.log(this.name+"---hahaha");
            }
        }
        //继承
        var yt = new student("yt");

        class xiaostudent extends student{
            constructor(name,age) {
                super(name);
                this.age = age;
            }
            myage(){
                console.log("我是一名"+this.age+"岁的小学生");
            }
        }
        var xiaohong = new xiaostudent("xiaohong",1);
    </script>

原型链 (__proto__)

7.操作BOM对象(重要)

BOM：浏览器对象模型

IE6-11
Chrome
Safari
Firefox
Opera

window对象(重要)

window代表浏览器窗口，窗口的宽高n

navigation

封装了浏览器的信息，平台、版本、用户信息
一般我们不会使用这个对象，因为可以进行人为修改

scree

获取屏幕的宽高

location(重要)

代表当前网页指向的URL

    host: "www.bilibili.com"    
    href: "https://www.bilibili.com/video/BV1JJ41177di?p=19&spm_id_from=pageDriver"
    protocol: "https:"      //协议
    reload: ƒ reload()      //重新加载

document

代表当前页面，HTML的DOM树
获取具体的文档树节点
获取网页的cookie

history

history.back(); //浏览器历史记录后退
history.forward(); //浏览器历史记录前进

8.操作DOM对象

DOM；文档对象模型
浏览器的网页就是一个Dom树形结构

更新Dom节点
遍历Dom节点
删除Dom节点
添加新的节点

8.1获取Dom节点

除了通过id获取到的值是单个值，其他(class、tag)都是数组

<div id="div">
    <h1>一级标题</h1>
    <p id="p1">jdjdkj</p>
    <p class="p2">jdkjdkljdlkj</p>
</div>

<script>
    //获取标签属性
    document.getElementsByTagName("h1");
    //获取id属性
    document.getElementById("p1");
    //获取class属性
    document.getElementsByClassName("p2");
    //获取父节点下的子节点
    var div = document.getElementById("div");
    div.children
</script>

8.2更新节点

<body>
<div id="div">123</div>

<script>
    var div = document.getElementById("div");
    //修改文本内容
    div.innerText = "nihai";
    //修改HTML
    div.innerHTML = "<strong>hdjhdjhdjdhj</strong>";
    //修改css样式
    //样式属性全为，驼峰命名。
    //属性值全为，字符串
    div.style.fontSize = "30px";
</script>
</body>

8.3删除节点

删除是一个动态的过程，删除多个节点时children是一直变化的

先获取父节点
再通过父节点删除掉自己

<body>
<div id="div">
    <h1>一级标题</h1>
    <p id="p1">jdjdkj</p>
    <p class="p2">jdkjdkljdlkj</p>
</div>

<script>

    //删除子节点
    var self = document.getElementById("p1");
    var father = self.parentElement;
    father.removeChild(self);
    //下面是错误的，因为删除过程是动态的
    father.removeChild(father.children[0]);
    father.removeChild(father.children[1]);
    father.removeChild(father.children[2]);
</script>
</body>

8.4插入节点

我们获得某个DOM节点。如果此节点是一个空节点，我们可以使用innerHTML、innerText，这两个方法进行填充。但是如果此节点不是空节点，那么我们就会把节点中已有的内容进行覆盖，此时不能用这个方法。

append，插入到父节点的最后面
insert，插入到节点之前

追加

<body>
<p id="js">javascript</p>
<div id="div">
    <p id="se">javase</p>
    <p id="ee">javaee</p>
    <p id="me">javame</p>
</div>

<script>
    //把js追加到div中，移动节点
    var js = document.getElementById("js");
    var div = document.getElementById("div");
    div.appendChild(js);
</script>
</body>

创建一个新标签，插入

<body>
<p id="js">javascript</p>
<div id="div">
    <p id="se">javase</p>
    <p id="ee">javaee</p>
    <p id="me">javame</p>
</div>

<script>
    //创建一个新节点
    var newp = document.createElement("p");
    newp.innerText = "nihjjsjhjh";
    newp.setAttribute("id","newp");     //newp.id = "newp";
    //插入想要的位置
    var div = document.getElementById("div");
    div.appendChild(newp);
</script>
</body>

插入到子节点之前

<body>
<p id="js">javascript</p>
<div id="div">
    <p id="se">javase</p>
    <p id="ee">javaee</p>
    <p id="me">javame</p>
</div>

<script>
    //把js追加到div中，移动节点
    var js = document.getElementById("js");
    var div = document.getElementById("div");
    //插入到某节点之前
    var ee = document.getElementById("ee");
    div.insertBefore(js,ee);
</script>
</body>

9.操作表单

表单
- form
- input

<body>
<form action="#">
    <P>
        <span>用户名：</span><input type="text" id="username">
    </P>
    <p>
        <input type="radio" name="sex" id="boy">男
        <input type="radio" name="sex" id="girl">女
    </p>
</form>
<script>
    //获取用户名输入框内容
    var un = document.getElementById("username");
    un.value;
    //修改输入框内容
    un.innerText = "qwer";
    //获取单选框是否被选中
    var boy = document.getElementById("boy");
    boy.checked;
    //修改单选框的值
    boy.checked = true;

</script>
</body>

提交表单、md5加密

<!-- 低级玩法，不安全 -->
<body>
<form action="">
    <p>
        <span>账户：</span>
        <input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码：</span>
        <input type="password" id="pwd" name="pwd">
    </p>
    <p>
        <button type="submit" onclick="tj()">提交</button>
    </p>
</form>
<script>

    function tj() {
        var username = document.getElementById("username");
        var pwd = document.getElementById("pwd");
        console.log(username.value);
        console.log(pwd.value);
        //md5加密
        pwd.value = md5(username.value);
        console.log(pwd.value);
    }
</script>
</body>
<!-- 高级玩法 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
    <!--  MD5工具类  -->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!--
    onsubmit    绑定提交检测函数
    将结果返回给表单，使用onsubmit接受
    οnsubmit="return tj()"
-->
<form action="" onsubmit="return tj()">
    <p>
        <span>账户：</span>
        <input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码：</span>
        <input type="password" id="pwd" name="input-pwd">
    </p>
    <p>
        <span>密码：</span>
        <input type="hidden" id="md5pwd" name="md5-pwd">
    </p>
    <p>
        <button type="submit">提交</button>
    </p>
</form>
<script>

    function tj() {
        var username = document.getElementById("username");
        var input_pwd = document.getElementById("input-pwd");
        var md5_pwd = document.getElementById("md5-pwd");

        //md5加密
        md5_pwd.value = md5(input_pwd.value);
        console.log(pwd.value);
        //可以在此处校验表单内容，true表示提交通过，false表示阻止提交
        return true;
    }
</script>
</body>
</html>

10.jQuery

jQuery库，里面存在着大量的javascript函数
可以引入jQuery的js文件来使用
可以使用jQuery的链接来使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引入jQuery</title>
    <!-- cdn引入 -->
    <!--    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>-->
    <!--    本地引入-->
    <script src="../js/jquery-3.6.0.min.js"></script>
    <!--
    选择器就是css选择器
    公式  $(selector).action()
    -->
</head>
<body>

<a href="https://www.baid.com" id="a">111</a>

<script>

    $("#a").click(
        function () {
            alert("jdijfoijfoi");
        }
    );
</script>
</body>
</html>

10.1选择器

<script>
    //https://jquery.cuishifeng.cn/
    //jQuery使用手册，不会就去看下

    //就是原生选择器
    //标签
    document.getElementsByTagName();
    //类
    document.getElementsByClassName();
    //id
    document.getElementById();

    //jQuery能使用所有的css选择器
    //标签
    $("p").click();
    //类
    $(".pp").click();
    //id
    $("#ppp").click();
</script>

10.2jQuery事件

事件有很多，不会就去上方网站查找

<script>
    //鼠标移动事件
    $().onmousemove();
    //鼠标按下事件
    $().onmousedown();
    //网页加载完毕事件
    $(document).ready(function () {});    //简化为  $(function () {});
</script>

10.3jQuery操作DOM

<body>
<ul id="ul">
    <li name="li1">java</li>
    <li class="li2">python</li>
</ul>
<script>
    //获取值
    $('#ul li[name=\"li1\"]').text();                        //$().html();
    //修改文本内容
    $('#ul li[name=\"li1\"]').text("hduqwhjdiuhio");         //$('#ul li[name=\"li1\"]').text("<P>huhuh</p>")
    //修改css样式
    $('#ul li[name=\"li1\"]').css("color","red");
    //隐藏，本质---------display : none;
    $('#ul li[name=\"li1\"]').hide();
    //显示
    $('#ul li[name=\"li1\"]').show();
</script>
</body>