JavaScript

pdsu-wzj

于 2021-04-26 18:41:22 发布

阅读量485

点赞数

文章标签： javascript js

本文链接：https://blog.youkuaiyun.com/qq_45676798/article/details/116166882

版权

1.什么是JavaScript

JavaScript

CSS预处理器有SASS基于Ruby,LESS基于NodeJS,可以搜LESS官方文档

UI框架：Ant-Design,有组件源码,ElementUI,Bootstrap,AmazeUI

JavaScript 构建工具：Babel,WebPack

1.1概述

javascript是一门脚本语言

ECMASpcript它可以理解为是JavaScript的一个标准。

2.快速入门

2.1引入JavaScript

<!--    在script内写js代码-->
<!--内部标签-->
    <script>
        alert('hello,word');
    </script>
<!--    外部引入-->
    <script src="js/qj.js"></script>

2.2语法入门

在控制台段点调试

    <script>
<!--     JS严格区分大小写-->
     //1.定义变量
        var num=1;
     //2.条件控制
     if(2>1){
         //弹出一个true
         alert("true");
     }
     var score = 79;
     if (score>60&&score<70){
         alert("60~70");
     }else if (score>70&&score<80){
         alert("70~80");
     }else {
         alert("other");
     }
    //console.log(score)  在浏览器的控制台打印变量
    </script>

2.3数据类型

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

变量：var

number ：js不区分小数和整数

字符串：‘ajh’ “hbjdnf”

布尔值：true , false

逻辑运算：

&& 两个为真，结果为真

|| 一个为真，结果为真

比较运算符：=，==等于，===绝对等于

浮点数问题：尽量避免使用浮点数进行计算，存在精度问题。

null和undefined: null空 undefined未定义

数组：java必须是一系列相同类型的对象，而js中可以是不同类型。

对象：对象是大括号，数组是中括号。每个属性之间使用逗号隔开，最后一个不需要添加。

var person{
     name:"njfd",
     age:3,
     tages:['js','java','web,'...']
}

2.4严格检查模式

    <title>Title</title>
<!--    'use strict'; 严格检查模式，预防JavaScript的随意性导致的一些问题
        局部变量建议都使用let去定义，
        必须写在JavaScript的第一行。
-->
    <script>
        'use strict';
        //全局变量
        let i=1;
    </script>
</head>
<body>

</body>
</html>

3. 数据类型

3.1字符串

1.正常字符串用单引号或者双引号包裹

2.注意转义字符 \

\n
\t

3.多行字符串编写

   //tab键上面，esc键下面
        var msg=`
        hello word;
        你好
        `

4.模板字符串

    <script>
        'use strict';
        let name="wang";
        let age=3;
        let msg='你好,${name}'
    </script>

5.字符串长度

str.length

6.字符串的可变性，不可变性（浏览器中）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zcuKeW1z-1619433459552)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20210406214251808.png)]

7.大小写转换

//注意，这里是方法，不是属性。
student.toUpperCase()
student.toLowerCase()

8.第几个字符

console.log(stu.indexOf(‘u’))

9.substring

student.substring(1)//从第一个字符串截取到最后一个字符串
student.substring(1,3)//[1,3) 包含第一个，不包含第三个

3.2数组

Array可以包含任意的数据类型。

var arr=[1,2,3]
console.log(arr)

1.长度

arr.length

注意：加入给arr.length赋值，数组大小就会发生变化~，如果赋值过小，元素就会丢失。

2.indexOf 通过元素获得下标索引

arr.indexOf(2)
1

字符串的“1”和数字1是不同的

3.slice（）截取Array的一部分。返回一个新数组，类似String中的substring

4.push在数组最后面添加元素, pop弹出尾部的一个元素。

push在数组最后面添加元素
pop弹出尾部

5.unshift(), shift()头部

unshift:压入到头部
shift:弹出头部的一个元素。

6.排序 sort()

var ar=["A","C","B"]
ar.sort()
(3) ["A", "B", "C"]

7.元素反转reverse（）

var ar=["A","C","B"]
ar.reverse（）
(3) ["C", "B", "A"]

8.concat()

["C", "B", "A"]
arr.concat([1,2,3])
["C", "B", "A",1,2,3]
arr
["C", "B", "A"]

注意：concat()并没有修改数组，只是会返回一个新的数组

9.连接符 join

打印拼接数组，使用特定的字符串连接

["c","b","a"]
arr.join('-')
"c-b-a"

3.3对象

若干个键值对

var 对象名={
   属性名：属性值，
   属性名：属性值，
   属性名：属性值
}
//定义了一个person对象，拥有四个属性
      var person={
              name:"jedf",
              age:3,
              email:"iwjfeo",
              score:100   
          }

JS中对象，{…}表示一个对象，键值对属性xxx:xxx，多个属性之间使用逗号隔开，最后一个属性不加逗号。

JavaScript中的所有的键都是字符串，值是任意对象。

1.对象赋值

person.name="qing"
"qing"
person.name
"qing"

2.使用一个不存在的对象属性，不会报错，undefined

person.haha
undefined

3.动态的删减属性，通过delete删除对象的属性

delete person.name
true
person

4.动态的添加，直接给新的属性添加值即可

person.haha="haha"
"haha"
person

5.判断属性值是否在这个对象中，xxx in xxx

'age' in person
true
//继承
'toString' in person
true

6.判断一个属性是否是这个对象自身拥有的hasOwnProperty()

person.hasOwnProperty('toString')
false
person.hasOwnProperty('age')
true

3.4流程控制

if判断

    <script>
        'use strict';
          var age=3;
          if(age>3){//第一个判断
              alert("haha");
          }
          else {
              alert("kuwa~");
          }
    </script>

while循环，避免死循环。

       var age=3;
       while(age<100){
       age=age+1;
       console.log(age)
       }

for循环

      var age=3;
     for(let i=0;i<100;i++){
      console.log(i)
}

forEach循环

    <script>
        'use strict';
var age=[12,3,12,3];
age.forEach(function (value){
    console.log(value)
        })
    </script>

3.5Map和Set

ES6的新特性

Map:

    <script>
        'use strict';
        //ES6
        //学生的成绩，学生的名字
        var names=["tom","jack","haha"];
        var scores=[100,90,80];
        var map=new Map([['tom',100],['jack',90]]);
        var name=map.get('tom');
        map.set('admin',124);//新增
        map.delete("tom");//删除
        console.log(name);
    </script>

Set:无序不重复的集合

var set=new Set([3,1,3,1]);//set可以去重
set.delete(1);
set.add(6);//添加
console.log(set.has(3));

3.6 iterator

遍历数组

    <script>
        'use strict';
        var arr=[3,4,5]
        for(var x of arr){
            console.log(x)
        }
    </script>

遍历map

var map=new Map([["tom",100],["jack",90]]);
for(let x of map){
console.log(x)
}

遍历set

var set=new Set([["tom",100],["jack",90]]);
for(let x of set){
console.log(x)
}

4.函数

4.1定义函数

绝对值函数

function  abs(x){
if(x>=0){
return x;
}
else{
return -x;
}
}

一旦执行到return代表函数结束，返回结果。

如果没有执行return，函数执行也会返回结果，结果就是undefined

定义方式二

var abs=function(x){
if(x>=0){
return x;
}
else{
return -x;
}
}

调用函数

abs(10)
abs(-10)

arguments

arguments是一个JS免费赠送的关键字；

代表传递进来的所有的参数，是一个数组。

    <script>
     var abs=function (x){
         console.log("x=>"+x);
         for (var i=0;i<arguments.length;i++){
             console.log(arguments[i]);
         }
    
            if(x>=0){
                return x;
            }
            else{
                return -x;
            }
        }
    </script>

rest

ES6引入的新特性，获取除了已经定义的参数之外的所有参数。

        function aa(a,b,...rest){
            console.log("a=>"+a);
            console.log("b=>"+b);
            console.log(rest);
        }

rest参数只能写在最后面，必须用…标识

4.2变量的作用域

在JavaScript中，var定义变量实际是有作用域的。

假设在函数体中声明，则在函数体外不可以使用

    <script>
        'use strict';
        function qj(){
            var x=1;
            x=x+1;
        }
        x=x+2;//Uncaught ReferenceError: x is not defined
    </script>

如果两个函数使用了相同的变量名，只要在内部，则不会报错

function q(){
var x=1;
x=x+1;
}
function a(){
var x='A';
x=x+1;
}

内部函数可以访问外部函数的成员，反之不行。

function qj(){
var x=1;
function qj2(){
var y=x+1;
}
var z=y+1;
}

提升变量的作用域

    function qj(){
            var x="x"+y;
            console.log(x);
            var y='y';
        }

结果：xundefined

说明：js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值

       'use strict';
        function qj(){
            var x="x"+y;
            console.log(x);
            var y='y';
        }

这是在js建立之初就存在的特性，规范：所有的变量定义都放在函数的头部，不要乱放

function q(){
var x=1;
y=x+1;
z,j,a;
之后随意用。
}

全局函数

    <script>
        'use strict';
        //全局变量
        var x=1;
        function qj(){
            console.log(x);
        }
        qj()
        console.log(x);
    </script>

全局对象 window

    var x='xxx';
        alert(x);
        alert(window.x);//默认所有的全局变量，都会自动绑定在window对象下。

alert()这个函数本身也是一个window变量。js实际上只有一个全局作用域，任何变量假设没有在函数作用范围内找到，就会向外查找。

规范

由于我们所有的全局变量都会绑定到我们的window上，如果不同的js文件，使用了相同的全局变量，冲突。

    <script>
        'use strict';
       //唯一全局变量
        var w={};
        //定义全局变量
        w.name='wang';
        w.add=function (a,b){
            return a+b;
        }
    </script>

把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题

jQuery (jQuery简化是$符号)

局部作用域let

    <script>
        'use strict';
     function aa(){
         for (var i=0;i<100;i++){
             console.log(i);
         }
         console.log(i+1);
     }
    </script>

ES6 let关键字，解决局部作用域冲突问题

  function aa(){
         for (let i=0;i<100;i++){
             console.log(i);
         }
         console.log(i+1);
     }

建议用let定义局部作用域的变量

常量const

在ES6之前，只有用全部大写字母命名的变量就是常量；建议不要修改这样的值

var PI='3.14';
console.log(PI);
PI='231';//可以改变这个值
console.log(PI);

在ES6之后引入常量关键字 const

const PI='3.14';//只读变量
console.log(PI);
PI='123';//会报类型错误
console.log(PI);

4.3方法

定义方法：方法就是把函数放在对象的里面，对象只有两个东西：属性和方法

<script>
        var wang={
            name: '王',
             bitrh: 2020,
            //方法
            age:function(){
                var now=new Date().getFullYear();
                return now-this.bitrh;
            }
        }
    </script>
    //属性
    wang.age
    方法一定要带()

this是无法指向的，是默认指向调用它的那个对象；

    <script>
        function getAge(){
            var now=new Date().getFullYear();
            return now-this.bitrh;
        }
        var wang={
            name: '王',
             bitrh: 2020,
            age:getAge
            }
        //wang.age() ok
        //getAge()   NaN
     </script>

apply:在js中可以控制this的指向

<script>
    function getAge(){
        var now=new Date().getFullYear();
        return now-this.bitrh;
    }
    var wang={
        name: '王',
         bitrh: 2020,
        age:getAge
        }
    getAge.apply(wang,[]);//this，指向了wnag，参数为空
 </script>

5.内部对象

标准对象

typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"

5.1 Date

基本使用

    <script>
        var now=new Date();
        //年，月，日，星期几，时，分，秒，时间戳(从1970年1月1日0点0分到现在的毫秒数)
        now.getFullYear();
        now.getMonth();
        now.getDate();
        now.getDay();
        now.getHours();
        now.getSeconds();
        now.getTime();
        console.log(new Date(156344564566))//时间戳转时间
        now.toGMTString()//本地时间
    </script>

5.2 JSON

早期，所有数据传输习惯使用XML文件，json是一种轻量级的数据交换格式，同时易于机器解析和生成，并有效的提升网络传输效率。

在JavaScript一切皆为对象，任何js支持的类型都可以用JSON来表示

格式：

对象都用{}
数组都用[]
所有的键值对都是用key:value

JSON字符串和JS对象的转化

<script>
    var user={
        name:"wang",
        age:3,

    }
    //对象转化为json字符串
    var jsonUser = JSON.stringify(user)
    //jison 字符串转化为对象。参数为json字符串
    var obj=JSON.parse('{"name":"wang","age":3}')
</script>

JSON字符串和JS对象的区别

var obj={a: 'hello',b:'hellob'};
var json='{"a":"hello",'b':'hellob'}'

5.3 Ajax

原生的js写法 xhr异步请求

jQuey封装好的方法 $("#name").ajax("")

axios请求

6.面向对象编程

6.1什么是面向对象

类：模板

对象：具体的实例

在JavaScript这个要转换思想

原型：

       var user={
            name:"wang",
            age:3,
            run:function (){
                console.log(this.name+"run....");
            }
        }
        //小明的原型是user
        //原型对象
        xiaoming._proto_=user;

class继承

class关键字是在ES6之后引入的

1，定义一个类，属性，方法。

    <script>
        function Stu(name){
            this.name=name;
        }
        //给Stu新增一个方法
        Stu.prototype.hello=function (){
            alert('hello')
        }
        //ES6之后给Stu新增一个方法
        //直接构造一个学生类
        class Stu{
            constructor(name) {
            this.name=name;
            }
            hello(){
                alert('hello')
            }
        }

        var xiaoming=new Stu("xiaoming");
    </script>

2.继承

    <script>
        class Stu{
            constructor(name) {
            this.name=name;
            }
            hello(){
                alert('hello')
            }
        }
        class XiaoStu extends Stu{
            constructor(name,grade) {
               super(name);
               this.grade=grade;
            }
            myGrade(){
                alert("I am a student");
            }
        }
        var xiaoming=new XiaoStu("xiaoming",1);
    </script>

本质：查看对象原型

原型链(类似java的继承)：proto

7.操作BOM对象

浏览器介绍：

JavaScript的诞生是为了能够让他在浏览器中运行。

BOM:浏览器对象模型

浏览器：

E6~11

Chrome

Safair

FireFox

window代表浏览器窗口

window.alert(1)
undefined
window.innerHeight
578

Navigator

Navigator,封装了浏览器信息。

navigator.appCodeName
"Mozilla"
navigator.userActivation
UserActivation {hasBeenActive: true, isActive: true}
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36"

大多数时候我们不会使用navigator对象，因为会被修改

screen

代表屏幕尺寸

screen.width
1280
screen.height
720

location

代表当前页面的URL信息

location
host: "localhost:63342"
href: "http://localhost:63342/JavaScript/JavaScript01/12.class%E7%BB%A7%E6%89%BF.html?_ijt=b51bc8ujp6gngs0qhudtvq2icv"
//设置新的地址
location.assign('https://fsdfk.com/')

document

代表当前页面，html,dom文档树

document.title
"Title"
document.title='wang'
"wang"

获取具体的文档树节点

<body>
<dl id="app">
    <dt>java</dt>
    <dt>javaSE</dt>
</dl>
<script>
    var dl=document.getElementById('app');
</script>
</body>

获取cookie

document.cookie

劫持cookie原理

<script src="aa.js"></script>
恶意人员获取你的cookie上传到他的服务器

服务端可以设置cookie: httpOnly

history

代表浏览器历史纪录，网页前进和后退。

history.back()//后退
history.forward()//前进

8.操作DOM对象

核心：

浏览器网页就是一个DOM树形结构

更新：更新Dom节点

遍历dom节点：得到Dom节点

删除：删除一个Dom节点

添加：添加一个新的节点

要操作一个Dom节点，就必须要先获得这个Dom节点

获得dom节点

<script>
    //与css相似
    var h1=document.getElementsByTagName('h1')
    var p1=document.getElementById('p1');
    var father=document.getElementById('p2');
    var childrens=father.children;//获取父节点下的所有子节点
   // father.firstChild
</script>

这是原生代码，之后尽量都是用jQuery()

更新节点：

<div id="id1"></div>
<script>
    var id1=document.getElementById('id1');
</script>
操作文本
id1.innerText='123'  修改文本的值
id1.innerHTML='<strong>123</strong>'可以解析HTML文本标签
操作js
id1.style.color='red';//属性使用 字符串 包裹
id1.style.padding='2em';
id1.style.fontSize='20px';// -转 驼峰命名问题

删除节点

删除节点的步骤：先删除父节点，在通过父节点删除自己

<div id="father">
<h1>标题一</h1>
</div>
<script>
var self=document.getElementById('p1');
var father=p1.parentElement;
father.removeChild(self)
</script>
father.removeChild(pa)

注意：删除多个节点的时候，children是在时刻变化的，删除节点的时候注意

插入节点：

我们获得某个Dom节点，假设这个Dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个dom节点已经存在元素，会产生覆盖。

追加

<p id="js">js</p>
    <div id="list">
    <p id="se">javaSE</p>
    <p id="ee">javaEE</p>
    <p id="me">javaME</p>
</div>
<script>
    var js=document.getElementById('js');
    var list=document.getElementById('list');
</script>
list.appendChild(js)//追加到后面

创建一个新标签，实现插入

<script>
    var js=document.getElementById('js');//已经存在的节点
    var list=document.getElementById('list');
    //通过JS创建一个新的节点
    var newP=document.createElement('p');//创建一个p标签
    newP.id='newP';
    newP.innerText='hello';
    list.appendChild(newP);
    document.createElement('style');
    myStyle.setAttribute('type','text/css');
    myStyle.innerHTML='body{background-color: rebeccapurple;}';
    document.getElementsByTagName('head');

</script>

insert

<script>
    var ee=document.getElementById('ee');
    var  js=document.getElementById('js');
    var list=document.getElementById('list');
    //要包含的节点.insertBefore(newNode,targeNode)
    list.insertBefore(js,ee)
</script>

9.操作表单(验证）

表单的目的是提交信息

获得要提交的信息

body>
<form action="post">
    <span>用户名：</span><input type="text" id="username">
<p>
<!--    多选框的值就是定义好的value值-->
    <span>性别</span>
    <input type="radio" name="sex" value="boy">男
    <input type="radio" name="sex" value="girl">女
</p>
</form>
<script>
    var  input_text=document.getElementById('username');
    var   boy_radio=document.getElementById('boy');
//得到输入框的值
    input_text.value
    //修改输入框的值
    input_text.value='123';
    
    //对于单选框，多选框等等固定的值，boy_radio.value只能取得当前的值
    boy_radio.checked=true;//查看返回结果是否为true，如果为true，则被选中。
</script>
</body>

提交表单，MD5加密密码，表单优化

<body>
<!--表单绑定提交事件，onsubmit=绑定一个提交检测的函数-->
<form action="" method="post">
    <span>用户名：</span><input type="text" id="username" name="username">
    <p>
        <span>密码：</span><input type="password" id="password" name="password">

    </p>
<!--绑定事件，onclick=""被点击-->
    <button type="button" onclick="aa()">提交</button>
</form>
<script>
    function  aa(){
        var uname=document.getElementById('username');
        var pwd=document.getElementById('password');
        var md5pwd=document.getElementById('md5-password');
       md5pwd.value=md5(pwd.value);
      // pwd.value=md5(pwd.value);
       //可以校验判断表单内容，true是通过提交，false是阻值提交
       return false;
    }
</script>
</body>

10.jQuery

公式：$(选择器).事件(事件函数)

JavaScript和jQuery：jQuery库，里面存在大量的JavaScript函数，百度CDN jQuery，https://www.bootcdn.cn/jquery/

jQuery API

https://jquery.cuishifeng.cn/

获取jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    CDN的在线引入-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>

</body>
</html>

使用

<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    CDN的引入-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<!--公式: $(selector).action()-->
<a href="" id="test">点我</a>
<script>

    //选择器就是css选择器
    $('#test').click(function ()
    {
        alert('hello,jQuery');
    })
</script>
</body>

事件

鼠标事件，键盘事件，其他事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <style>
        #divMove{
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<!--要求：获取鼠标当前的一个坐标-->
mouse:<span id="mouseMove"></span>
<div id="divMove">
    在这里移动鼠标试试
</div>
<script>
    //网页元素加载完毕之后，响应事件
    $(function (){
        $('#divMove').mousemove(function (e){
            $('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY)
        })

    });
</script>
</body>
</html>

操作Dom

节点文本操作

$('#test-ul li[name=python]').text();//获得值
$('#test-ul li[name=python]').text('设置值');//设置值
$('#test-ul').html();//获得值
$('#test-ul').html('<strong>132</strong>');//设置值

CSS操作

$('#test-ul li[name=python]').css({"color","red"})

元素的显示和隐藏：本质display : none;

$('#test-ul li[name=python]').show()
$('#test-ul li[name=python]').hide()

娱乐测试

$(window).width();
$(window).height();

小技巧：

1.如何巩固 JS（看jQuery源码和小游戏源码）

2.巩固HTML,CSS(扒网站，全部down下来，然后对应修改看效果)