JavaScript基础（快速回忆版）

JavaScript基础（快速回忆版）

1.对象：

对象的定义：

对象是若干键值对（属性之间使用逗号隔开，最后一个属性不加逗号）

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

<script>
    //对象
    var person={
        name:"lyl",
        age:12,
        tages:['java','javascript','web']
    }
</script>

取对象的值

person.name
>lyl
person.age
>12

通过delete删除对象的属性

person.name
"lyl"
delete person.name
true
person
{age: 21, number: 123456}

2.严格检查模式

建议启用严格检查模式，

在javaScript代码块第一行中加入'use strict'

<script>
    //严格检查模式
    'use strict';
    i=1;    //严格检查模式下的错误定义
    let i=1; //局部变量建议都使用let定义
    var m=1;
</script>

3.字符串

多行字符串编写

       //多行字符串编写（使用反引号``）
       var mes=
           `hello
           你好
我是望穿先生！`

模板字符串

//模板字符串
let name='lyl';
let age=21;
let massage=`你好啊，${name}`

字符串的可变性

字符串不可变

4.数组

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

//数组可以包含任意数据类型
var arr=[1,2,3,'lyl',13.8]

通过arr.length获取长度

注意：假如给arr.length赋值，数组的大小就会发生变化，如果赋值过小，元素就回丢失

slice()方法：

slice( )截取Array的一部分，返回一个新的数组，类似于String中的substring

push()和pop()方法：

push:将元素压入到尾部
pop:弹出尾部的一个元素

unshift()和shift()方法：

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

join()方法：

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

var arr=[1,2,3,4,5]
undefined
arr.join('-')
"1-2-3-4-5"

concat()方法：

实现数组的拼接

>var arr2=['k','l']
>undefined
>arr.concat(arr2)
>[1, 2, 3, 4, 5, "k", "l"]

5.分支和循环

循环:

foreach()

var age=[12,23,34,45,21,22]
//foreach()里是函数
age.foreach(function(value)){
            console.log(value)
}

for...in 遍历出索引下标

//遍历出来的是数组的索引
for(var num in age){
    if(age.hasOwnProperty(num)){
        console.log("存在")
        console.log(age[num])
    }
}

6. Map和Set

Map:

//Map
var map=new Map([['lyl',99],['kkk',89]]);
var score =map.get('kkk')    //通过键获取值
console.log(score)

Set:无序不重复的集合

var set=new Set([1,2,3,4,1,1,1]);
console.log(set)
>
0: 1
1: 2
2: 3
3: 4

7. iterator

通过for of遍历值

//for of遍历值
var arr=[3,4,5]
for(var x of arr){
    console.log(x)
}

8.函数

8.1定义函数

定义方式1：

<script>
  //定义函数
  function abs(x){  //绝对值函数
    if(x>=0){
      return x;
    }else{
      return -x;
    }
  }
</script>

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

定义方式2：

//定义方式2
var abs=function (x){
    if(x>=0){
        return x;
    }else{
        return -x;
    }   
}

假设不存在参数，如何规避（需要手动抛出参数）

function abs(x){  
    //手动抛出异常
    if(typeof x!='number'){
        throw 'Not a number'
    }
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

8.2 arguments关键字

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

var abs=function (x){
    for (var i=0;i<arguments.length;i++){ //如果一次传入多个参数，按数组进行遍历
        console.log(arguments[i])
    }
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

8.3 rest关键字

arguments包含所有的参数，我们有时候想要使用多余的参数类进行附加操作，需要排除已有的参数

rest是 ES 6 引入的新特性，可以获取除了已经定义的参数之外的所有参数

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

function lyl(a,b,...rest){
    console.log(rest);  //输出除了a,b这两个参数以后的所有参数
}

9. 变量的作用域

var 定义的变量有作用域‘

变量在函数内有效，内部函数可以访问外部函数的成员，反之则不行

全局对象window

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

规范：

由于我们所有的全局变量都会绑定到我们的window对象上，如果不同的js文件，使用了相同的全局变量，如何才能减少冲突？

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

//单一全局变量
var lyl={};
//定义全局变量
lyl.name="望穿先生";
lyl.add=function (a,b){
    return a+b;
}

建议使用let关键字 定义局部变量

解决局部作用域冲突的问题

常量关键字 const

const PI="3.14"  //定义常量
console.log(PI);
PI="1234";     //常量不可被修改，此时会报类型错误

10.方法

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

var lyl={
    name:"望穿先生",
    birth:2000,
    //方法
    age:function (){
        var now = new Date().getFullYear();
        return now-this.birth;
    }
    //调用方法一定要带()
    lyl.age()

apply(在js中可以控制this指向)

function getAge(){
    var now = new Date().getFullYear();
    return now-this.birth;
}
var lyl={
    name:"望穿先生",
    birth:2000,
    age:getAge()
}
getAge().apply(lyl,[]);  //this,只指向了lyl，参数为空

11.内部对象

11.1 Date对象

 let date = new Date();
 date.getFullYear();  //年
 date.getMonth();    //月
 date.getDate();      //日
 date.getDay();       //星期
 date.getHours();     //时
 date.getMinutes();   //分
 date.getSeconds();    //秒
 date.getTime();       //时间戳，从1970年 1.1 00.00到现在的时间戳

// 通过时间戳返回正确格式的时间
// console.log(new Date(1646962666507))
 // VM194:1 Fri Mar 11 2022 09:37:46 GMT+0800 (中国标准时间)

转换

date = new Date(1646962666507)
date.toLocalestring()         //将时间戳转换为当前时间

11.2 JSON对象

Json是什么

• JSON(JS对象简谱)是一种轻量级的数据交换格式

• 简洁和清晰的层次结构使得JSON成为理想的数据交换语言

• 易于人阅读和编写，同时也有易于机器解析和生成，并有效提升网络传输效率

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

格式：

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

var user={
  name:"lyl",
  age:21,
  sex:"男"
}
//将对象转化为json字符串
let jsonuser=JSON.stringify(user)

//字符串转化为对象,参数必须是JSON字符串
let obj=JSON.parse('{"name":"lyl","age":21,"sex":"男"}')
//JSON.parse('{"name":"lyl","age":21,"sex":"男"}')
//{name: "lyl", age: 21, sex: "男"}

注意：json和js对象的区别

let obj={a:'hello',b:'你好'}
let json='{"a":"hello","b":"你好"}'

12.面向对象编程

类似于java中的继承，javaScript中有原型继承

let Student={
  name:"lyl",
  age:21,
  run:function (){
    console.log(this.name+"run...")
  }
}

let mike={
  name:"望穿先生",
  age:22,
}
//mike的原型指向Student,使得mike也可以执行run方法
mike.__proto__ =Student;

class

class关键字，是在ES6引入的

定义一个类，属性，方法

//定义一个学生类
class Student{
  //构造器
  constructor(name) {
    this.name=name;
  }
  hello(){
    alert("你好啊");
  }
}
let mike=new Student();
mike.hello();

继承

//继承
class xiao extends Student{
  constructor(name,grade) {
    super(name);
    this.grade=grade;
  }
  MyGrade(){
    alert("我的成绩是100");
  }
}
let linda=new xiao("linda",20);

原型链

13.操作BOM对象（重点）

JavaScript和浏览器的关系：

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

BOM:浏览器对象模型

• IE 6-11
• Chrome
• Safari
• FireFox

window对象

window代表浏览器窗口

    window.innerHeight     //窗口内部高度
    window.innerWidth      //窗口内部宽度

Navigator对象

Navigator,封装了浏览器的信息

大多数时候，我们不会使用navigator对象，因为会被人修改，所以不建议使用这些属性来判断和编写代码

navigator.appName      //浏览器名字
navigator.appVersion    //版本

Screen对象

代表屏幕

screen.width
screen.height

location对象（重要）

location代表当前页面的URL信息

//设置新的地址
location.assign('https://cnsblog.wangchaunxiansheng.com')

Document对象

document代表当前的页面，HTML,DOM(文档树)

获取cookie

doucument.cookie

服务器端可以设置cookie:httpOnly

history对象

history代表浏览器的历史记录

history.back()  //返回
history.forward()  //前进

14.操作DOM对象

DOM文档对象模型

核心：

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

• 更新：更新DOM节点
• 遍历DOM结点：得到DOM节点
• 删除：删除一个DOM节点
• 添加：添加一个新的节点

获得DOM节点:

（这是原生代码，之后我们尽量都是用jQuery）

<div id="farther">
    <h1 class="lll">我是h1</h1>
    <p id="p1">我是p1</p>
    <p class="p2">我是p2</p>
    <p></p>
</div>
<script>
    let div=document.getElementById("farther");
    let p2=document.getElementsByClassName("p2")
    let chidren=div.children;  //获取父节点下的所有子节点
    let first=div.firstChild;   //第一个子节点
    let last=div.lastChild;     //最后一个子节点
</script>

更新DOM节点：

<div id="lyl">

</div>
<script>
  let lyl=document.getElementById("lyl")
  lyl.innerText="你好啊";
</script>

操作文本：

• lyl.innerText="你好" 修改文本的值
• lyl.innerHTML='你好 ' 可以解析HTML文本标签

操作js

• lyl.style.color="red" 将文本颜色修改为红色

删除DOM节点：

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

<div>
  <p id="p1">p1</p>
</div>
<script>
  let self =document.getElementById("p1");   //找到自身节点
  let farther=self.parentElement;            //通过自身节点找到父节点
  farther.removeChild(self);                 //通过父节点删除自己
</script>

插入DOM节点:

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

追加元素

<p id="js">外部p标签</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>
<script>
    let js=document.getElementById("js");
    let list=document.getElementById("list")
    //将id为js的外部p标签追加到div中
    list.appendChild(js)
</script>

创建元素

<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>
<script>
    let list=document.getElementById("list")
    //创建一个新的节点，p标签为例
    let newp =document.createElement("p");
    //为新创建的标签添加id
    newp.id="newp";   
    //为新建的标签添加元素值
    newp.innerText="我是新创建的p标签"
    //将新创建的标签追加到div中
    list.appendChild(newp)
</script>

通过setAttribute()为新创建的节点设置属性

<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>
<script>
    let list=document.getElementById("list")
    //通过setAttribute为新创建的节点设置属性
    let newscript=document.createElement("script");
    newscript.setAttribute("type","text/javascript");
    list.appendChild(newscript)
</script>

15.操作表单（验证）

得到表单输入框的内容

<form action="post">
  <span>用户名：</span><input type="text" id="user">
</form>
<script>
  let input_test=document.getElementById("user");
  //得到input输入框的值
  let va=input_test.value;

  //修改输入框的值
  input_test.value="你好"
</script>

得到表单，单选框的值

<form action="" method="post">
  <span>用户名：</span><input type="text" id="user">
  <p><span>性别：</span>
    <input type="radio" name="sex" id="boy" value="man">男
    <input type="radio" name="sex" id="girl" value="women">女
  </p>
</form>
<script>
  let input_test=document.getElementById("user");
  let boy_radio=document.getElementById('boy');
  let girl_radio=document.getElementById('girl');
  //对于单选框，多选框等等固定的值 通过.value只能获取当前的值
  boy_radio.checked;    //查看返回的结果，如果为true,则表示被选中
  girl_radio.checked=true;    //将其赋值为true，则被选中
</script>

MD5加密的提交表单（注意onsubmit的return）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>md5加密</title>
  <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!--通过onsubmit去绑定一个检测提交的函数，将这个结果返回给表单，使用onsubmit接收-->
<form action="https://www.baidu.com" method="post" onsubmit="return a()">
    <p>
        <span>用户名：</span><input type="text" id="user" name="username">
    </p>
    <p>
        <span>密码：</span><input type="password" id="input_pwd" >
    </p>
    <input type="hidden" id="md5" name="password">
    <p>
        <button type="submit">提交</button>
    </p>
</form>
<script>
    function a(){
        alert("提交成功");
        let username=document.getElementById("user");
        let input_pwd=document.getElementById("input_pwd");
        let md5_pwd=document.getElementById("md5");
        md5_pwd.value=md5(input_pwd.value);
        //可以校验判断表单提交的内容，true就是通过提交，false就是阻止提交
        return true;

    }
</script>
</body>
</html>

效果：

此时的password已经被MD5加密

16. jQuery

jQuery库，里面存在大量的javascript函数

获取jQuery

CDN引入或者下载引入

//jQuery公式  选择器+shijian 
$(selector).action()

简单实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery</title>
  <!--CDN引入-->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<button id="button" type="button">点击我</button>
<script>
  //jquery就是css选择器
  $("#button").click(function (){
    alert("hello,jquery");
  })
</script>
</body>
</html>

选择器：

css的选择器全部都可以用

参考文档：http://jquery.cuishifeng.cn/

事件：

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

简单实例（移动鼠标显示位置）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery事件</title>
  <style type="text/css" rel="stylesheet">
    #divMove{
      width: 600px;
      height: 600px;
      border: 1px solid black;
    }
  </style>
  <!--CDN引入-->
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<!--要求：获取鼠标当前的一个坐标-->
mouse : <span id="mouseMove"></span>
<div id="divMove">
  在此处移动鼠标
</div>
<script>
  //当网页元素加载完毕之后，响应事件
  $(document).ready(
          function (){
            $("#divMove").mousemove(function (e){
              $("#mouseMove").text("x:"+e.pageX+" y:"+e.pageY);
            })
          }
  )
</script>
</body>
</html>

操作DOM

<ul id="test">
  <li class="js">JavaScript</li>
  <li name="python">Python</li>
</ul>
<script>
  $("#test li[name=python]").test();        //无参数，则取值
  $("#test li[name=python]").test("123456"); //设置值
  
  //元素的显示和隐藏 ,本质是display :none;
  $("#test li[name=python]").show();    //显示
  $("#test li[name=python]").hide();    //隐藏
  
</script>