JavaScript笔记【结】

1、JS引入

1. 尽量放在html最下面

• 内部标签引用
• 外部引用，src属性

<script type="text/javascript" src="myjs.js"></script>

2. href src url区别【重点】

href

• link a
• 浏览器可以识别当前的资源是一个样式表，页面解析就不会暂停。

src

• scritp img frame
• 在浏览器下载，编译，执行这个文件之前页面的加载和处理会被暂停
  • 图片加载的时候，下面的页面会暂停加载
  • js文件放到html的最下面

url

• 统一资源定位符
• background-image:url(“img/bg.png”);

2、变量

2.1 变量命名规范

• 驼峰式命名

• 数字，字符，下划线，不能以数字开头

• 大小写敏感，变量名区分大小写！！！【重要】

• 可以以 $ 和 _ 开头

  • JavaScript 命名请不要以 $ 符号开头。此举会引起 JavaScript 库名称冲突。

• 万物皆可var

2.2 【基本类型】特殊值：

1. undefined 未定义，所有js变量未赋予初始值的时候，默认值都是undefined
2. null 空值
3. NaN Not a Number，非数字，非数值，即非法 NaN与所有数值都不相同（NaN===NaN❌）
4. Infinity 含义无穷大

ps：

undefined==null true

undefined===null false

2.3 【基本类型】数值Number

• 不区分小数和整数

• 尽量避免浮点数计算，存在精度问题

  • 在进行二进制转换的时候会出现无限循环的情况

  • var x = 0.1;
    var y = 0.2;
    var z = x + y             // z 中的结果并不是 0.3
    //0.30000000000000004
    
    
    //解决办法
    var z = (x * 10 + y * 10) / 10;       // z 中的结果将是 0.3
    

• NaN是数字类型，但不是数字 Number.isNaN()判断是否是NaN

• Infinity是数字类型 判断 isFinite()是否为有穷，一般为true 有正负

2.4 【基本类型】字符串String

• 单引号或双引号

  • 可以相互嵌套 或者 转义

• tab上面的’``'符号能实现字符串多行输入

  • let text =
    `The quick
    brown fox
    jumps over
    the lazy dog`;
    

• 模板字符串（EL表达式） ` ${变量名} `

  • let firstName = "John";
    let lastName = "Doe";
    
    let text = `Welcome ${firstName}, ${lastName}!`;
    

1. 方法

• str.charAt()

  • 或者直接 str[]

• str.charCodeAt()

  • 查询字符的编码

• str.indexOf()【重点】

  • 需要查找字符或字符串的索引，未找到返回-1

• str.length()

  • 长度

• str.concat(str1,str2…)

  • 将多个字符串拼接

• str.substring(int a,int b)

  • 字符串截取[a,b)
  • 改变原有字符串

• str.substr(index,length)

  • 字符串截取

• var str=slice(a,b)

  • 截取[a,b)的字符串
  • 不改变原有字符串

• str.trim()

  • 删除前置和后缀的空格

• str.replace(/str1/,str2)

  • 替换第一个匹配
  • 需要替换的 格式 /str1/
  • /str1+/g 替换全局

• match()

  • 匹配给定的 字符串 或 正则表达式 ，返回一个数组

• serach()

  • 返回匹配到的第一个字符串的索引，没有返回-1
  • 和indexOf()功能一样，但必须使用正则表达式

• split()

  • 将字符串按照给定的字符切割成数组

2.5 【基本类型】布尔值Boolean

• 所有值都可以用boolean表示**
• 0，null，undefined，“”（空串）都认为是false
• 其他都为true

2.6 【复杂类型】对象Object（数组，对象，日期）

对象介绍

• 对象包含 数组 对象 日期

3、对象Object【重点】

3.1 JS 数组

1. 创建 数组 对象

没有必要使用 JavaScript 的内建数组构造器 new Array()。

请使用 [] 取而代之！

'use strict';
//可以用const定义数组

const var arr1 = []; //空数组
var arr2 = [1,"abc",true]; //赋值元素
//var arr3 = new Array("1",2,'3');

2. 数组属性和方法

• push()
• pop()
• unshift()
• shift()
• splice()【功能强大 重点】
  • 可以添加
  • 可以删除
  • 可以替换
• concat()
• sort()【重点】
• join()

添加删除的方法

var x = cars.length;   // length 属性返回元素的数量
var y = cars.sort();   // sort() 方法对数组进行排序


var fruits = ["Banana", "Orange", "Apple", "Mango"];
//向数组添加一个元素的两种方法
fruits.push("Lemon");                // 向 fruits 添加一个新元素 (Lemon)
fruits[fruits.length] = "Lemon";     // 向 fruits 添加一个新元素 (Lemon)
var num = fruits.unshift(0,-1,-2);	 /* unshift()返回数组中元素的个数向数组的头部增加元素，括号中有多少就加多少 */

//向数组删除一个元素
fruits.pop();                        //从 fruits 删除最后一个元素"Mango"
fruits.shift();            // 从 fruits 删除第一个元素 "Banana"
delete fruits[0];           // 把 fruits 中的首个元素改为 undefined
//使用 delete 会在数组留下未定义的空洞。请使用 pop() 或 shift() 取而代之。


/*
第一个参数（2）定义了应添加新元素的位置（拼接）。

第二个参数（0）定义应删除多少元素。

其余参数（“Lemon”，“Kiwi”）定义要添加的新元素。

splice() 方法返回一个包含已删除项的数组：
*/
fruits.splice(2, 0, "Lemon", "Kiwi");

//slice() 方法创建新数组。它不会从源数组中删除任何元素
var citrus = fruits.slice(1); 



//concat() 方法不会更改现有数组。它总是返回一个新数组。
var myChildren = myGirls.concat(myBoys);   // 连接 myGirls 和 myBoys

sort排序 + 反转元素

arr.toString();   //把数组转换为字符串

//方法以字母顺序对数组进行排序：  重点，字母 21>110
points.sort() 

//默认从小到大
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b}); 



//从大到小
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b - a}); 
//也可以写成 箭头函数	
points.sort((a,b)=>{return a<b?1:-1})

fruits.reverse();         // 反转元素顺序

数组转字符串

• 括号内的字符拼接

var a=[1,2,3,4,5];
console.log(a);
var b = a.join('-');
console.log(b);

3. 数组迭代

4. 求数组长度【重点】

• 是属性，不是函数，不能写成len，必须是length

arr.length;

5. 过滤器filter【重点】

语法

Array.filter(function(currentValue, indedx, arr), thisValue)

使用

//返回数组nums中所有大于5的元素。
let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 
let res = nums.filter(function(num){
  return num > 5;
});

//箭头函数 的 this 指的是他的最接近的上下文环境,一般会出现this指向window的失误
let res = nums.filter((num) => {
  return num > 5;
});
 
console.log(res);  // [6, 7, 8, 9, 10]

3.2 JS 日期

1. 创建日期

//当前时间
var d = new Date();

//指定时间
var d = new Date("2018-02-19");


//输出
Fri Mar 04 2022 18:51:47 GMT+0800 (中国标准时间)
secondjs.js:5 Mon Jan 01 2018 08:00:00 GMT+0800 (中国标准时间)


now.getTime(); //时间戳，全世界统一

//转化
//一般用本地时间或时间戳
now.toLocaleString(); //调用本地时间 //'2022/1/12 上午11:12:10'
now.toGMTString(); //'Wed, 12 Jan 2022 03:12:10 GMT'

常用+自定义

let now = new Date();
console.log(now.toLocaleDateString())//调用本地时间 //'2022/1/12'
console.log(now.toLocaleString());//调用本地时间 //'2022/1/12 上午11:12:10'
now.toGMTString(); //'Wed, 12 Jan 2022 03:12:10 GMT'



/*自定义格式
	月份从0开始，需要加一
*/
function mydate(shuru, line) {
    myInput = new Date(shuru);
    var year = myInput.getFullYear();
    var mon = myInput.getMonth();
    var day = myInput.getDate();

    if (mon < 10) mon = '0' + mon;
    if (day < 10) day = '0' + day;


    return year + line + mon + line + day;
}

document.write(mydate(new Date(), "-"));

2. 日期格式

• JavaScript 默认将输出全文本字符串格式：

  • Mon Feb 19 2018 06:00:00 GMT+0800 (中国标准时间)
    

3. 日期获取方法

方法	描述
getDate()	以数值返回天（1-31）
getDay()	以数值获取周名（0-6）
getFullYear()	获取四位的年（yyyy）
getHours()	获取小时（0-23）
getMilliseconds()	获取毫秒（0-999）
getMinutes()	获取分（0-59）
getMonth()	获取月（0-11） 从0开始
getSeconds()	获取秒（0-59）
getTime()	获取时间（从 1970 年 1 月 1 日至今） 毫秒总数

4. 日期设置方法

类似于获取（get 改为 set）

3.3 对象

1. 对象创建

'user strict';
var person1={}
person.age = 21;

var person2 = {
    name: "hcx",
    age: 12
}

/*
不建议 new Object()
var person3 = new Object();
person["name"] = "王建圣";
*/

console.log(person1);
console.log(person2);
console.log(person3);

2. 对象的方法

• has
  • 返回true或false

3.4 Math 对象方法

1. 数学方法

方法	描述
abs(x)	返回 x 的绝对值
acos(x)	返回 x 的反余弦值，以弧度计
asin(x)	返回 x 的反正弦值，以弧度计
atan(x)	以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x)	返回从 x 轴到点 (x,y) 的角度
ceil(x)	对 x 进行上舍入
cos(x)	返回 x 的余弦
exp(x)	返回 Ex 的值
floor(x)	对 x 进行下舍入
log(x)	返回 x 的自然对数（底为e）
max(x,y,z,…,n)	返回最高值
min(x,y,z,…,n)	返回最低值
pow(x,y)	返回 x 的 y 次幂
random()	返回 0 ~ 1 之间的随机数
round(x)	把 x 四舍五入为最接近的整数
sin(x)	返回 x（x 以角度计）的正弦
sqrt(x)	返回 x 的平方根
tan(x)	返回角的正切

2. 随机数

Math.random() 
//返回 0（包括） 至 1（不包括） 之间的随机数：

4、JS基础语法

4.1 逻辑运算 和 关系运算

1. 逻辑运算

• &&
• ||
• !

2. 关系运算

• == 数值比较，不比较数据类型
• === 数值和数据类型都比较
• 其他和java相似

4.2 条件

1. if语句

if(){}
else if(){}
else{}

2. switch语句

• Switch case 使用严格比较（===），值必须与要匹配的类型相同。

switch(表达式) {
     case n:
        代码块
        break;
     case n:
        代码块
        break;
     default:
        默认代码块
} 


switch (new Date().getDay()) {
    case 0:
        day = "星期天";
        break;
    case 1:
        day = "星期一";
         break;
    case 2:
        day = "星期二";
         break;
    case 3:
        day = "星期三";
         break;
    case 4:
        day = "星期四";
         break;
    case 5:
        day = "星期五";
         break;
    case 6:
        day = "星期六";
} 

4.3 循环

1. For循环

for(var i=1;i<10;i++){}

2. For/In循环

• 可以遍历对象属性

  • 打印 对应的key

• 可以遍历数组属性

/*for in对象*/
var Person = {
    name: "wjs",
    asge: 21
}

console.log(Person.name);

for (var x in Person) {
    console.log(Person[x]);
}

3. while 和 do while

4. Loop For Of

遍历数组 对象 映射（map，set）

5. forEach

• function形参规定第一个是value，第二个是index
• 相对于for in可以直接得到

let arr = [1, 2, 3, 4, 5];
arr.forEach(function (value, index) {//形参第一个是value，第二个是index
    console.log(value, index);
})

4.4 变量类型转化

• 字符串 转 数字
  • 非数字会出现NaN

var num = Number(str);
var num = parseInt(str); 
var flt = parseFloat(str); 

• 其他变量(比如数字) 转 字符串

var str = String(num);

var str = num.toString();

• 数组转字符串拼接

  var a=[1,2,3,4,5];
  console.log(a);
  var b = a.join('-');
  console.log(b);
  

4.5 位运算

运算符	名称	描述
&	AND	如果两位都是 1 则设置每位为 1
|	OR	如果两位之一为 1 则设置每位为 1
^	XOR	如果两位只有一位为 1 则设置每位为 1
~	NOT	反转所有位
<<	零填充左位移	通过从右推入零向左位移，并使最左边的位脱落。
>>	有符号右位移	通过从左推入最左位的拷贝来向右位移，并使最右边的位脱落。
>>>	零填充右位移	通过从左推入零来向右位移，并使最右边的位脱落。

4.6 正则表达式【重点】

1. 什么是正则表达式？

正则表达式是构成搜索模式的字符序列。

该搜索模式可用于文本搜索和文本替换操作。

语法：

/pattern/modifiers;

在 JavaScript 中，正则表达式常用于两个字符串方法：search() 和 replace()。

2. 正则表达式公式

【https://blog.csdn.net/developer_/article/details/86082533】

modifiers

修饰符	描述
i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹配。

pattern

括号用于查找一定范围的字符串：

表达式	描述
[abc]	查找方括号之间的任何字符。
[0-9]	查找任何从 0 至 9 的数字。
(x|y)	查找由 | 分隔的任何选项。
{n}	前面的字符，重复n次
{n,m}	前面的字符，重复n-m次(n,m为数字)

*元字符（Metacharacter）*是拥有特殊含义的字符：

元字符	描述
\d	查找数字。
\s	查找空白字符。
\b	匹配单词边界。
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。
^	字符串开始的位置
$	字符串结束的位置
\w	等同于[a-zA-z0-9_] 数字+字符+下划线+汉字
.	任意一个非换行字符

Quantifiers 定义量词：

量词	描述
n+	匹配任何包含至少一个 n 的字符串。
n*	匹配任何包含零个或多个 n 的字符串。
n?	匹配任何包含零个或一个 n 的字符串。

练习:

var telNo = '0242-12345678';

var telReg = /^0\d{2,3}-\d{7,8}$/

//test方法用来测试
telReg.test(telNo);


var mood = 'xihahaxi';
var moodReg = /^xi((ha){2}|(he))xi$/

4.7 异常

try 语句使您能够测试代码块中的错误。

catch 语句允许您处理错误。

throw 语句允许您创建自定义错误。

finally 使您能够执行代码，在 try 和 catch 之后，无论结果如何。

4.8 作用域【重点】

局部作用域

• 非全局作用域

全局作用域

• var定义，函数之外声明的变量， 或者没有用var定义的变量 会成为全局变量。

• 在 HTML 中，全局作用域是 window。所有全局变量均属于 window 对象。

  • 其他js中也可以访问

• 可以使用 let 或者 严格模式来取消全局作用域（window）

let

“暂时死区”,会导致 ReferenceError

• 函数foo里面定义了x，函数会调用foo里的x，但let不会将作用域提升，因此产生了暂时死区

let x = 10;
let foo = () => {
    console.log(x);
    let x = 20;
    x++;
}
foo();

var和function 则是会 提升，但js中没有重载！！！

警告

请勿创建全局变量。

您的全局变量（或函数）能够覆盖 window 变量（或函数）。

4.9 严格模式

"use strict";
//更安全

4.10 this

1. this是什么？

JavaScript this 关键词指的是它所属的对象。

它拥有不同的值，具体取决于它的使用位置：

• 在方法中，this 指的是所有者对象。
  • 对象方法 this是对象
  • 普通函数
    • 严格模式 undefined
    • 非严格模式 window
• 单独的情况下，this 指的是全局对象。
• 箭头函数没有this

4.11 箭头函数

• 箭头函数没有this

• 之前

hello = function(a) {
  return "Hello World!";
}

• 用了箭头函数之后：

hello = (a) => {
  return "Hello World!";
}

• 如果函数只有一个语句，并且该语句返回一个值，则可以去掉括号和 return 关键字

hello = (a) => "Hello World!";

• 当我们使用箭头函数的时候，箭头函数会默认帮我们绑定外层 this 的值，所以在箭头函数中 this 的值和外层的 this 是一样的。

• 箭头函数是不能提升的，所以需要在使用之前定义。

• 使用 const 比使用 var 更安全，因为函数表达式始终是一个常量。

• 如果函数部分只是一个语句，则可以省略 return 关键字和大括号 {}，这样做是一个比较好的习惯:

4.12 JS性能

1. 减少循环中的活动

• O（n^2）

var i;
for (i = 0; i < arr.length; i++) {

2. 减少 DOM 访问

假如您期望访问某个 DOM 元素若干次，那么只访问一次，并把它作为本地变量来使用

3. 延迟 JavaScript 加载

一个选项是在 script 标签中使用 defer=“true”。defer 属性规定了脚本应该在页面完成解析后执行，但它只适用于外部脚本。

5、操作BOM对象

5.1 什么是BOM对象？ 浏览器对象模型【重点】

5.2 Window对象【了解】

window对象 代表 浏览器窗口

navigator 封装了浏览器的信息（不建议使用，核心信息可以被修改）

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

不建议使用这些属性来判断和编写代码

window.navigator.属性

screen

location location代表当前页面的URL信息（重要）

location.assign("https://www.baidu.com");
//表示网页会重定向到设置的页面

document 代表当前页面，HTML DOM文档树

document.title="wjs";
//修改网页名字

document.getElementById(); //获取具体文档树的结点，也能增加删除结点

document.cookie  //获取前端的cookie
//服务器端可以设置cookie；httpOnly 只读，避免恶意获取cookie

hiostry 代表浏览器的历史记录（不建议使用）

history.back();//网页前进
history.forward();//网页后退


history.go();//最常用
<!-- go()，可以用来跳转打指定的页面，需要一个整数作为参数，
1表示向前跳转一个页面，2表示向前跳转两个页面，以此类推。
    -1表示向后跳转一个页面，-2表示向后跳转两个页面，以此类推。 -->

document方法

btn[5].onclick = function () {
    //打开新网页
    window.open("http://www.baidu.com");
}

btn[6].onclick = function () {
    //关闭当前窗口
    window.close();
}

btn[7].onclick = function () {
    //打印
    window.print();
}

5.3 弹出框

JavaScript 有三种类型的弹出框：警告框、确认框和提示框。

alert();//警告框
confirm();//确认框
prompt();//提示框

5.4 Timing事件

• setTimeout() 在延时的时候可以重复触发
• setTimeout() 在延时的时候不能重复触发

window.setTimeout(function, milliseconds);

/*
window.setTimeout() 方法可以不带 window 前缀来编写。

第一个参数是要执行的函数。

第二个参数指示执行之前的毫秒数。
*/

延迟3秒执行函数

<button onclick="setTimeout(myFunction, 3000)">试一试</button>

<script>
function myFunction() {
    alert('Hello');
 }
</script>

练习:5秒内点击无效

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Timming</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 800px;
            height: 50px;
            border: 5px solid blue;
        }

        p {
            text-align: center;
            line-height: 50px;
            font-size: 25px;
            color: blue;
        }
    </style>

</head>

<body>

    <div id="box">
        <p>点击可以响应，5秒内点击无效</p>
    </div>


    <script>
        var box = document.getElementById("box");
        var p = box.children[0];
        console.log(p);

        box, onclick = () => {
            box.style.borderColor = "red";
            p.style.color = "red";
            p.innerText = "5秒内无法点击";
        }

        box.onclick = setInterval(() => {
            box.style.borderColor = "blue";
            p.style.color = "blue";
            p.innerText = "点击可以响应，5秒内点击无效";
        }, 5000)
    </script>

</body>

</html>

5.5 Cookies【后端实现添加】

1. 什么是Cookies？

Cookie 让您在网页中存储用户信息。

5.6 Location属性

练习

• 路径
• 网页重新加载
• 转发和重定向

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>



</head>

<body>

    <button>显示当前url</button>
    <button>刷新页面</button>
    <button>页面跳转</button>
    <button>assign</button>
    <button>repplace</button>


    <button>打开新窗口</button>
    <button>关闭窗口</button>
    <button>打印</button>



    <button>历史前一页</button>


    <button>返回顶部</button>

    <h2></h2>

    <script>
        var btn = document.getElementsByTagName("button");
        var h2 = document.getElementsByTagName("h2")[0];
        console.log(btn);

        btn[0].onclick = function () {
            h2.innerText = location.host + " " + location.href + " " + location.port;
        }

        btn[1].onclick = function () {
            location.reload();
        }

        btn[2].onclick = function () {
            //页面跳转 属性
            window.location = "http://www.baidu.com";
        }

        btn[3].onclick = function () {
            //跳转页面 方法
            window.location.assign("http://www.baidu.com");
        }

        btn[4].onclick = function () {
            window.location.replace("http://www.baidu.com");
        }



        btn[5].onclick = function () {
            //打开新网页
            window.open("http://www.baidu.com");
        }

        btn[6].onclick = function () {
            //关闭当前窗口
            window.close();
        }

        btn[7].onclick = function () {
            //打印
            window.print();
        }



        btn[8].onclick = function () {
            history.go(-1);
        }

        btn[9].onclick = function () {
            //浏览器代表x,y轴
            window.scrollTo(0, 0);

        }

    </script>

</body>

</html>

6、操作DOM对象【重点】

6.1 什么是DOM对象 文档对象模型【重点】

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

可以对这个DOM树型文档进行访问和修改！

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

要操作一个DOM结点，就必须要先获得这个DOM结点

6.2 获取DOM结点

1. 原生获取结点

这是原生代码，之后尽量使用JQuery()

• id getElementById
• class getElementsByClassName[index]
  • 注意要指定下标
• 标签类型 getElementsByTagName[index]
  • 不指定下标默认是一个数组
• 选择选择器 querySelector+querySelectorAll （ie6，7，8丢弃）
  • 类型或者class选择器只会选择第一个
  • querySelectorAll 选择 选到的所有
    • 返回nodelist

//对应 css 选择器
//tagName 和 ClassName 需要加下标，不然会报错  Cannot set properties of undefined
var h1 = document.getElementsByTagName('h1')[index];
var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2')[index];
var p3 = document.querySelector(".c1").style.backgroundColor = "red";// 选择选择器，可以用选择符选择器，其次，style里的属性 background-color采用驼峰式命名 

var x = document.querySelectorAll("p.intro");


//获取父节点下的所有子节点
var father = document.getElementById('father');
var chiledrens = father.children;

2. 获取结点的信息

• nodeName 属性总是返回一个大写字母的值，即使元素在 HTML文档里是小写字母

• nodeClassName 返回属性class名称

常见问题：

• document.getElementById()获取一直为null的最常见的一个原因是js文件在head标签里产生的加载顺序问题

  • 1.可以body标签下引入js文件
  • 2.在引入语句<script type="text/javascript"> 里面加个defer=true属性 defer 属性规定是否对脚本执行进行延迟，直到页面加载为止。

• class和类型选择器返回的是一个数组，可以下标读取结点

• 选择的DOM结点修改style里的属性，注意命名修改为驼峰式命名

  • 比如 background-color采用驼峰式命名backgroundColor

• nodeName 属性总是返回一个大写字母的值，即使元素在 HTML文档里是小写字母。

6.3 更新结点【重点】

• 获取要修改的结点

• 如需更改 HTML 元素的样式，请使用此语法：

  document.getElementById(id).style.property = new style
  

• 使用innerHTML || innerText

  • value是表单框里的数据

//操作修改文本
var id1 = document.getElementById('id1');
id1.innerText = '123'; //改变结点的值
id1.innerHTML= '<strong>124</strong>'; //解析文本标签

//操作修改css
id1.style.color = 'red';
id1.style.fontSize = '20px';
//等等

6.4 删除结点

• 获取目标结点的父节点
• 通过父节点删除自己
• 不能自己删除自己

var father = document.getElementById('father');
//父结点的获取方式还有一种
//var p1 = document.getElementById('p1');
//var father = p1.parentElement;

father.removeChild('p1');

6.5 创建和插入结点

• 创建结点node
• 创建文本结点textNode
• textNode追加给结点node
• node追加给ul

<body>

    <ul id="mylist">
        <li>li1</li>
        <li>li2</li>
    </ul>

    <button onclick="handleClick()">点我</button>

    <script>
        function handleClick() {
            var node = document.createElement("li");
            var textNode = document.createTextNode("wjs");
            node.appendChild(textNode);
            document.getElementById("mylist").appendChild(node);
        }
    </script>


</body>

另一种方法类似

• 创建结点node
• node直接添加innerHTML
• node追加给ul
• 也可以使用键值对形式传值

<body>

    <ul id="mylist">
        <li>li1</li>
        <li>li2</li>
    </ul>

    <button onclick="handleClick()">点我</button>

    <script>
        function handleClick() {
            var node = document.createElement("li");
            // var textNode = document.createTextNode("wjs");
            // node.appendChild(textNode);

            //万能键值对方式
            node.setAttribute('id','newP');
            node.setAttribute('style','fontSize:10px');

            document.getElementById("mylist").appendChild(node);
            node.innerHTML = "wjs";
        }
    </script>

指定位置插入结点

<body>

    <ul id="mylist">
        <li>li1</li>
        <li>li2</li>
    </ul>

    <button onclick="handleClick()">点我</button>

    <script>
        function handleClick() {
            var mylist = document.getElementById("mylist");
            var node = document.createElement("li");
            node.innerHTML = "wjs";
            var oldNode = document.getElementsByTagName("li")[0];

            mylist.insertBefore(node, oldNode);


        }
    </script>


</body>

6.6 DOM表单操作

1. 约束验证 HTML input 属性

• input属性修改采用value=
• 其他的采用innerHTML

属性	描述
disabled	规定应禁用 input 元素。
max	规定 input 元素的最大值。
min	规定 input 元素的最小值。
pattern	规定 input 元素的值模式。
required	规定 input 字段必填。
type	规定 input 元素的类型。

6.7 DOM事件

1. 常见事件

• onclick点击事件【重点】

  • ondbclick双击事件

• onload 和 onunload 事件

  • 当用户进入后及离开页面时，会触发 onload 和 onunload 事件。
  • onload 和 onunload 事件可用于处理 cookie。

• onblur事件 失去焦点（获取焦点后失去）

• onfocus

  • 绑定获取焦点事件，获取光标闪动

• onsubmit【表单】

  • 表单提交到action属性的地址

• onchange 事件【表单】

  • 失去焦点并且点击其他地方
  • onchange 事件经常与输入字段验证结合使用。(input text)

• onmouseentry 和 onmouseleave事件 和 onmousemove【重点】

• onmousedown, onmouseup 以及 onclick 事件

  • onkeydown（按下） onkeyup（松开） onkeypress（按下松开） 键盘事件

2. 鼠标事件-MouseEvent【重点】

• 函数自带的，实参有写成e也有写成event
• 函数实参中可以省略event
• 不省略的时候最好加上event = event || window.event;

event是事件的参数啊！在event中包含了事件触发时的参数，比如click事件的event中包含着.e.pageX,e.pageY,keydown事件中包含着ev.keyCode等，在ie中，event是全局的可以通过window.event来获取，在其他浏览器中都是作为参数传入的。
所以好多事件函数都是这样写：

// clientX：当鼠标事件发生时，鼠标相对于浏览器（浏览器的有效区域）x轴的位置；
// clientY：当鼠标事件发生时，鼠标相对于浏览器（浏览器的有效区域）y轴的位置；
// screenX：当鼠标事件发生时，鼠标相对于显示器屏幕x轴的位置；
// screenY：当鼠标事件发生时，鼠标相对于显示器屏幕y轴的位置；
// offsetX：当鼠标事件发生时，鼠标相对于事件源x轴的位置
// offsetY：当鼠标事件发生时，鼠标相对于事件源y轴的位置

mydiv.onclick = function(event){
    if(!event){event = window.event;} //这句也可以简写成：ev=window.event||ev;
    alert(event.pageX+”,”+event.pageY);
}

6.8 DOM事件监听

1. 什么是事件监听？

• addEventListener() 方法为指定元素指定事件处理程序。

• addEventListener() 方法为元素附加事件处理程序而不会覆盖已有的事件处理程序。

您能够向一个元素添加多个事件处理程序。

您能够向一个元素添加多个相同类型的事件处理程序，例如两个 “click” 事件。

您能够向任何 DOM 对象添加事件处理程序而非仅仅 HTML 元素，例如 window 对象。

2. 语法

element.addEventListener(event, function, useCapture);

• 第一个参数是事件的类型（比如 “click” 或 “mousedown”）。

• 第二个参数是当事件发生时我们需要调用的函数。

• 第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。

  • false 事件冒泡
  • true 事件捕获

**注意：**请勿对事件使用 “on” 前缀；请使用 “click” 代替 “onclick”。

• 阻止监听 e.stopPropagation();

3. 案例

<body>

    <div id="box">
        <h2>
            <em>冒泡</em>
            捕获
        </h2>
    </div>

</body>

<script>
    var box = document.getElementById("box");
    var h2 = document.getElementsByTagName("h2")[0];
    var em = document.getElementsByTagName("em")[0];

    box.addEventListener("click", function () {
        console.log("box- Listener -wjs真帅");
    }, false)

    h2.addEventListener("click", function () {
        console.log("h2- Listener -wjs真帅");
    }, false)

    em.addEventListener("click", function () {
        console.log("em- Listener -wjs真帅");
    }, false)
</script>

</html>

4. 阻止默认事件

阻止本来会发生的效果，比如a标签的跳转

e.preventDefault();

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="box">
        <a href="./CreateNode.html">a1</a>
        <a href="./DOM.html">a2</a>
        <a href="./事件委托.html">a3</a>
    </div>

    <script>
        var parent = document.getElementById("box");
        var child = parent.getElementsByTagName("a");

        console.log(child);

        parent.onclick = function () {
            alert("div被点击！");
        }

        for (var i = 0; i < child.length; i++) {
            console.log("xh");
            child[i].onclick = function (e) {
                e.preventDefault();
                alert("你点击的href是" + this.href);
            }
        }
    </script>

</body>

</html>

6.9 事件委托【面试】

1. 什么是事件委托

给父元素绑定事件，用来监听子元素的冒泡事件，
并找到是哪个子元素的事件

2. 为什么要使用事件委托技术？

减少对DOM操作，提高代码性能

3. 案例

介绍:

• 通过对ul监听
• 捕获事件结点
• 判断并且修改属性

优点：

• 只需要获取ul一个结点，减少对DOM操作！！！

过程问题：

• target.nodeName == “LI”
• nodeName 属性总是返回一个大写字母的值，即使元素在 HTML文档里是小写字母。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #list li {
            display: block;
            width: 100px;
            height: 100px;
            margin: 20px 0;
            background-color: red;
        }

        #list .clicked {
            background-color: yellow;
        }
    </style>

</head>

<body>

    <ul id="list">
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
        <li>列表项4</li>
        <li>列表项5</li>
        <li>列表项6</li>
        <li>列表项7</li>
    </ul>

    <script>
        var list = document.querySelector("#list");

        // console.log(list);

        list.onclick = function (e) {

            var target = e.target || e.srcElement;
            // 可以捕获当前事件作用的对象
            console.log(target.nodeName);
            if (target.nodeName == "LI") {
                if (target.className == "clicked") {
                    target.className = "";
                } else {
                    target.className = "clicked";
                }
            }
        }
    </script>

</body>

</html>

6.10 常见结点属性

最常用的几个方法

/*cssText属性可以添加多个css样式*/
node1.style.cssText="color:#fff; background:#c00";

/*注意js中的style修改不能出现-，统一修改为驼峰式命名*/
比如 background-color采用驼峰式命名backgroundColor


node1.innerText="123";  //纯文本
node1.innerHTML="123<em>123</em>";  //识别标签并转化

node1.nodeName;  //结点的名称
node1.nodeType;  //结点元素 1   || 属性  2

//克隆ul结点和子节点的所有结点
box.appendChild(ul.cloneNode(true));

7、JSON

7.1 JSON？

和后端交互数据的一种格式

格式

"name":"Bill Gates"

"arr":[
    {"wjs":12},
    {"jcx":12}
]

json变量

• 格式简单
• 不能保存日期格式，其他都可以，日期格式可以string=》new Date(string) 在js中转化为日期变量

7.2 解析JSON

//json=>js
var obj = JSON.parse('{ "name":"Bill Gates", "age":62, "city":"Seattle"}');


//js=>json
var obj = { name:"Bill Gates", age:62, city:"Seattle"};
var myJSON = JSON.stringify(obj);

8、Ajax

8.1 Ajax？

**异步交互：**不刷新页面情况下获取并修改后端接口

1. XMLHttpRequest对象

Ajax 的核心是 XMLHttpRequest 对象。

2. 模板，原生代码实现Ajax

• 创建XMLHttpRequest 对象
• send并open
• 判断并传回信息

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div class="myDiv">获取新数据</div>
    <button>Ajax测试</button>


    <script>
        var t1 = document.getElementsByClassName("myDiv")[0];
        var btn = document.getElementsByTagName("button")[0];

        btn.onclick = function () {
            var xmlHttp;
            if (window.XMLHttpRequest) {
                //Groole firbox ie7+
                xmlHttp = new XMLHttpRequest();
            } else {
                //用来识别ie5，兼容
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }


            xmlHttp.open("GET", "http://localhost:3000/api/getData", true);
            xmlHttp.send();

            xmlHttp.onreadystatechange = function () {
                // debugger;
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    console.log(xmlHttp.responseText);
                    t1.innerHTML = xmlHttp.responseText;
                }
            }

        }

    </script>

</body>

</html>

3. XMLHttpRequest 对象方法【了解】

方法	描述
new XMLHttpRequest()	创建新的 XMLHttpRequest 对象
abort()	取消当前请求
getAllResponseHeaders()	返回头部信息
getResponseHeader()	返回特定的头部信息
open(method, url, async, user, psw)	规定请求method：请求类型 GET 或 POSTurl：文件位置async：true（异步）或 false（同步）user：可选的用户名称psw：可选的密码
send()	将请求发送到服务器，用于 GET 请求
send(string)	将请求发送到服务器，用于 POST 请求
setRequestHeader()	向要发送的报头添加标签/值对

4. XMLHttpRequest 对象属性【了解】

属性	描述
onreadystatechange	定义当 readyState 属性发生变化时被调用的函数
readyState	保存 XMLHttpRequest 的状态。0：请求未初始化1：服务器连接已建立2：请求已收到3：正在处理请求4：请求已完成且响应已就绪
responseText	以字符串返回响应数据
responseXML	以 XML 数据返回响应数据
status	返回请求的状态号200: "OK"403: "Forbidden"404: "Not Found"如需完整列表请访问 Http 消息参考手册
statusText	返回状态文本（比如 “OK” 或 “Not Found”）

8.2 method(get,post)

表单复习

9、html5新增

9.1 canvas绘图

• 获取canvas标签
• 获取getContext对象，只能是2d
• 两种填充方式
  • ctx.fillRect(0, 0, 100, 100);
  • ctx.strokeRect(100, 100, 100, 100);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <!-- 理论：canvas是一个HTML5新增元素，可以使用canvas元素在网页中进行绘图，可以设置宽度和高度
    可以通过dom在javaScript中获得canvas元素。可以使用css对canvas元素进行修饰。网页中可以有多个
    canvas，ie8以及更早的浏览器不支持canvas -->
    <canvas id="cvs" width="500" height="500" style="border: 1px solid black"></canvas>
    <script>
        var canvas = document.getElementById("cvs");
        var ctx = canvas.getContext("2d");
        if (ctx) {
            // ctx.rect(0, 0, 50, 50);
            // ctx.fill();//绘制填充图形
            // ctx.stroke();//绘制描边图像

            //简写
            ctx.fillRect(0, 0, 100, 100);

            ctx.strokeRect(100, 100, 100, 100);

            ctx.fillStyle = "red";
            ctx.fillRect(200, 200, 100, 100);

            ctx.strokeStyle = "orange";
            ctx.strokeRect(300, 300, 100, 100);
            
            
            //绘制半圆
            ctx.lineWidth = 5;//线条宽度
            ctx.arc(100, 100, 50, 0, 1 * Math.PI); //绘制弧线  x，y,r,起始角度,结束角度
            ctx.stroke();
        }
    </script>
</body>
</html>

9.2 web储存

1. localStorage储存

• 可以将信息存储，页面关闭不会消失，存在本地

2. sessionStorage储存

• 页面重新加载的时候会刷新

3. 为什么使用localStorage？

• 在 HTML5 之前，应用程序数据只能存储在 cookie 中，包括每个服务器请求。
• 与 cookie 不同，存储限制要大得多（至少5MB），并且信息不会被传输到服务器。

案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <h2>localStorages数据</h2>
    <h2>sessionStorage数据</h2>
    输入内容: <input type="text">
    <button>localStorage</button>
    <button>sessionStorage</button>
    <button>刷新</button>
    <button>删除</button>

    <script>

        var h2 = document.getElementsByTagName("h2");
        var btn = document.getElementsByTagName("button");
        var input = document.getElementsByTagName("input")[0];

        if (window.localStorage.getItem("myLCText")) {
            h2[0].innerText = window.localStorage.getItem("myLCText");
        }
        if (window.localStorage.getItem("mySSText")) {
            h2[1].innerText = window.sessionStorage.getItem("mySSText");
        }

        //localStorage
        btn[0].onclick = function () {
            if (input != "") {
                window.localStorage.setItem("myLCText", input.value);
                h2[0].innerText = window.localStorage.getItem("myLCText");
            }
        }

        //sessionStorage
        btn[1].onclick = function () {
            if (input != "") {
                window.sessionStorage.setItem("mySSText", input.value);
                h2[1].innerText = window.sessionStorage.getItem("mySSText");
            }
        }

        //刷新页面，localStroage不会消失  
        //sessionStorage会消失
        btn[2].onclick = function () {
            location.reload();
        }

        btn[3].onclick = function () {
            window.localStorage.clear();
            location.reload();
        }

    </script>

</body>

</html>

9.3 audio+video【了解】

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- html5新增了audio和video元素，用以在页面中播放音频和视频，取代之前使用的flash，embed等。 -->
    <!-- 音频格式有：MP3，wav，ogg，视频文件播放格式：MP4，webm，ogg。不同浏览器对视频格式的支持
    的程度也有所不同，单目前主浏览器都已支持video和audio这两个html5元素 -->

    <!-- 常用属性如下：
    1)controls:播放控件
    2)autoplay:自动播放
    3)loop:循环播放
    4)muted:静音
    5)width:视频播放器的宽度
    6)height:视频播放器的高度
    7)preload:预加载，常用属性值为auto（预加载视频）、metadata（仅加载元数据，
    如文件大小，时间，第一帧）、none（不执行预加载）；
    8）poster：视频文件默认显示的图片

    上面属性中，controls，autoplay、loop、muted在设置时属性和属性值相同，按照HTML5上面
    的代码规范，也写属性名即可。
    为了浏览器的兼容性，有时需要同时提供多种视频或者音频文件 -->

    <audio controls autoplay>
        <source src="./陈立农 - 女孩 (Cover 韦礼安).mp3" type="audio/mp3">
    </audio>


    <!-- 方法对视频和音频进行操作

        1）paly():播放音频或视频
        2）pause():暂停音频或视频
        3）load():重新加载音频或视频
        4）canPlayType:检测浏览器能播放的音频或视频的类型
        
        视频事件，可以覆盖对音频，视频的各种情况
        1) onpause     暂停多媒体
        2)onplay   开始播放多媒体
        3)onpalying 正在播放多媒体
        4)onloadstart 开始加载多媒体  -->

    <video controls autoplay>
        <source src="" type="video/mp4">
    </video>

</body>

</html>

9.4 闭包【重点】

1. 什么是闭包？

函数内嵌返回匿名函数，外部可以获取函数内部参数和变量，函数内部参数和变量不会被垃圾回收的 一种手段

缺点：

• 不会被回收，内存消耗或泄露
  • 需要主动销毁
• 和箭头函数一样，匿名函数的this指向window

<body>
    <!-- 闭包的本质就是在一个函数内部创建另一个函数 -->
    <!-- ①函数嵌套函数
②函数内部可以引用函数外部的参数和变量
③参数和变量不会被垃圾回收机制回收 于是这里就产生了内存消耗的问题-->

    <!-- 闭包最⼤的作⽤就是隐藏变量，闭包的⼀⼤特性就是内部函数总是可以访问其所在的外部函数中声明的参数和变量，即
使在其外部函数被返回（寿命终结）了之后
基于此特性，JavaScript可以实现私有变量、特权变量、储存变量等 -->
    <script>

        function a() {
            var name = "wjs";
            //匿名函数,没有声明函数名
            return function () {
                console.log("name:" + name);
                return name;
            }
        }
        //函数a返回的是一个函数，此时变量name不会被垃圾回收！
        var b = a();
        console.log(b());


        //匿名函数中的变量会被垃圾回收
        //fn1需要引用fn中的num，因此fn中的参数和变量不会被垃圾回收，会存在内存消耗问题
        function fn() {
            var num = 1;
            return function () {
                var n = 0;
                console.log(num++);
                console.log(n++);
                // return ;
            }
        }

        var fn1 = fn();
        fn1();
        fn1();
    </script>
</body>

面试1

<body>
    <script type="text/javascript">
        //代码片段一
        var name = "The Window";
        var object = {
            name: "My Object",
            getNameFunc: function () {
                return function () {
                    return this.name;
                };
            }
        };
        alert(object.getNameFunc()());  //?  


        //代码片段二
        var name2 = "The Window";
        var object2 = {
            name2: "My Object",
            getNameFunc: function () {
                var that = this;
                console.log(that)
                return function () {
                    return that.name2;
                };
            }
        };
        alert(object2.getNameFunc()()); //? 
    </script>
</body>
</html>

<meta charset="UTF-8">

2. 应用闭包的主要场景

定时器setTimeout

• 原生的setTimeout传递的第一个函数不能带参数，通过闭包可以实现传参效果。
• window.setTimeout(function, milliseconds);

function f1(a) {
    function f2() {
        console.log(a);
    }
    return f2;
}
var fun = f1(1);
setTimeout(fun,1000);//一秒之后打印出1

封装私有变量

函数防抖

回调

面试题：

<!-- 3.为什么0.1+0.2不等于0.3？在什么场景下遇到这个问题？如何解决？  -->


   <!-- 因为在 0.1 + 0.2 进行计算的时候，实际上计算的是这两个数字在计算机里所存储的二进制
    0.1 和 0.2 在进行二进制转换的时候会出现无限循环的情况 -->

    <!-- 可以将其转换为整数后在进行运算,运算后再转为对应的小数 -->

  <!-- 1. 除了es6 的 symbol之外，javaScript有哪几种数据类型？ -->
<!-- 
    值类型(基本类型)：字符串（String）、数值(Number)、布尔(Boolean)、
    空（Null）、未定义（Undefined） -->

      <!-- 引用数据类型：对象(Object)、数组(Array)、函数(Function)。 -->38分钟前

<!-- 说明==和===的区别 -->
    <!-- == 代表相同， ===代表严格相同 -->

    <!-- 当进行双等号比较时候： 先检查两个操作数数据类型，如果相同， 则进行===比较，
    如果不同， 则愿意为你进行一次类型转换， 转换成相同类型后再进行比较，
    而===比较时， 如果类型不同，直接就是false. -->

    <!-- （1）如果两个值类型相同，再进行三个等号(===)的比较
　　   （2）如果两个值类型不同，也有可能相等，需根据以下规则进行类型转换在比较：
　　　　1）如果一个是null，一个是undefined，那么相等
　　　　2）如果一个是字符串，一个是数值，把字符串转换成数值之后再进行比较 -->

//     三等号===:
    // 　　（1）如果类型不同，就一定不相等
    // 　　（2）如果两个都是数值，并且是同一个值，那么相等；如果其中至少一个是NaN，
    //         那么不相等。（判断一个值是否是NaN，只能使用isNaN( ) 来判断）
    // 　　（3）如果两个都是字符串，每个位置的字符都一样，那么相等，否则不相等。
    // 　　（4）如果两个值都是true，或是false，那么相等
    // 　　（5）如果两个值都是null，或是undefined，那么相等  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <!-- 3.为什么0.1+0.2不等于0.3？在什么场景下遇到这个问题？如何解决？  -->


   <!-- 因为在 0.1 + 0.2 进行计算的时候，实际上计算的是这两个数字在计算机里所存储的二进制
    0.1 和 0.2 在进行二进制转换的时候会出现无限循环的情况 -->

    <!-- 可以将其转换为整数后在进行运算,运算后再转为对应的小数 -->
    <script>
        var a=0.1;
        var b=0.2;
        console.log(0.1+0.2)
        var rusult   =  (a*100+b*100)/100
        console.log(rusult);
        // var result=(a*100+b*100)/100
        // console.log(result)
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据类型</title>
</head>
<body>
    <!-- 1. 除了es6 的 symbol之外，javaScript有哪几种数据类型？ -->
<!-- 
    值类型(基本类型)：字符串（String）、数值(Number)、布尔(Boolean)、
    空（Null）、未定义（Undefined） -->

      <!-- 引用数据类型：对象(Object)、数组(Array)、函数(Function)。 -->
</body>
</html>