JavaScript入门

JavaScript
提升
推荐

JavaScript

1、什么是javaScript

1.1 概述

JavaScript是一门世界上最流行的脚本语言

java、JavaScript

10~

1.2 历史

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

最新版本已经到es6版本~

但是大部分浏览器还只停留在支持es5代码上！

开发环境-线上环境，版本不一致

2 快速入门

2.1 引入JavaScript

内部标签

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

外部引入

1.js

alert('哈哈哈');//弹窗

test.html

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

测试代码

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--    script 标签内 写js代码-->
<!--    <script>-->
<!--        alert('hello,world');-->
<!--    </script>-->

<!--    外部引入-->
<!--  script 必须成对出现 不能搞成自闭和标签  -->
    <script src="js/1.js"></script>

<!--    不用显示定义type 也默认就是JavaScript-->
    <script type="text/javascript">
        
    </script>
</head>
<body>

</body>
</html>

alert('hello,world');

2.2 基本语法入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        //JavaScript 严格区分大小写同java一样

        // 1、定义变量 ：  变量类型 变量名 = 变量值;
        var score =1;
        alert(score);
        // 2、条件控制
        if(score>60 && score<70){
            alert("60~70");
        }else if(score>70 && score<80){
             alert("70~80");
        }else{
            alert("other");
        }

        /*
        console.log(score) 在浏览器的控制台打印变量   相当于java sout
        */

    </script>
</head>
<body>

</body>
</html>

浏览器必备调试须知

Element：元素爬网站
Console：控制台调试js
Sources：源码打断点
NetWork：网络抓包
Appliaction：应用 web里面的数据库查看网站的cookie

2.3 数据类型

数据、文本、图片、音频、视频......

var

所有的变量都是var

number

JS不区分小数和整数统一用number

123 //整数123
123.1 //浮点数123.1
1.123e3 //科学计数法
-99 //负数
NaN // not a number
Infinity //表示无限大

字符串

'abc'  "abc"

布尔值

true false

逻辑运算

&& // 两个都为真 结果为真

|| // 一个为真 结果为真
    
!  //真即假  假即真

比较运算符

= 赋值
== 等于（类型不一样 值一样 也会判断为true）
=== 绝对等于（类型一样 值一样 结果为true）

这是一个js的缺陷，坚持不要使用==比较

NaN === NaN ： NaN与所有的数值都不相等，包括他自己
只能通过isNaN(NaN)来判断这个数是否是NaN

浮点数问题

 <script>
        console.log((1/3) === (1-2/3));//fasle
    </script>

尽量避免使用浮点数进行运算，存在精度问题！

 <script>
        //console.log((1/3) === (1-2/3));
        console.log(Math.abs(1/3-(1-2/3))<0.0000001);//用这个来判断相等也有哦
    </script>
</head>

null和undefined

null 空
undefined 未定义

数组

Java的数据是一系类相同类型的对象:【js中不需要这样】

 var arr = [1,23,3,'hello',null,true];//保证代码的可读性

 new Array(1,23,3,'hello',null.true);

console.log(arr[0]); // 1
console.log(arr[100]); // undefined

取数组下标：如果越界了，就会undefined

对象

数组是中括号[]，对象是大括号{}

每个属性之间用逗号隔开

       // Person person = new Person(); JAVA
        var person ={
          name:"summer",
          age:3,
          tags:['java','html','jvm','css',234]
        };

console.log(person.age);

2.4 严格检查模式

设置IDEA为ES6！settings中找javaScript

'use strict';//严格检查模式 预防js的随意性 导致产生的问题 【必须写在js的第一行】
        //全局变量
i = 1;
        //es6 局部变量建议都用 let定义
let a= 2;

3、数据类型

3.1 字符串

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

2、注意转移字符以\开头： \n换行 \t制表符 \u4e2d Unicode编码

\' 
\n   换行
\t   制表符 
\u4e2d \u####  Unicode字符
\x41  ASCII

3、多行字符串编写

'use strict';

//tab 上面的`  可以多行字符串
        var msg = `
        你好！
        我的小仙女
        `;
      

console.log(msg)
VM186:1 
        你好！
        我的小仙女

4、模板字符串

 		 'use strict';

        let name = 'summer';
        let age = 18;
        //es6新特性
        let msg = `
        你好呀，${name}
        `;
console:
console.log(msg)
VM389:1 
        你好呀，summer

5、字符串长度

str.length

6、字符串的不可变性

let student ="student";
undefined
console.log(student.length)
VM525:1 7
undefined
console.log(student[0])
VM563:1 s
undefined
student[0] = 1;
1
console.log(student)
VM602:1 student

7、大小写转换

console.log(student.toUpperCase())
VM639:1 STUDENT

console.log(student.toLowerCase())
VM721:1 student

8、获取指令下标

student.charAt('t')
"s"

9、截取字符串

student.substring(1)//从第一个字符截取到最后一个字符串
"tudent"
student.substring(1,4)//要头不要尾[1,4)
"tud"

3.2 数组

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

var arr =[1,2,3,4,5,6]//通过下标取值和赋值
arr[0]
arr[0]=1;

1、长度

arr.length

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

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

arr.indexOf(2)
1

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

arr = [1,2,3,4,5,6,"1","2"]
(8) [1, 2, 3, 4, 5, 6, "1", "2"]

arr.indexOf(1)
0

arr.indexOf('1')
6

3、slice() 截取Array的一部分，返回一个新数组【类似于字符串的substring】

arr.slice(3)
(5) [4, 5, 6, "1", "2"]

arr.slice(1,5)
(4) [2, 3, 4, 5]

4、push() pop()

push : 压入到尾部

pop : 弹出尾部的一个元素

arr.length
8

arr.push('a','b')
10

arr
(10) [1, 2, 3, 4, 5, 6, "1", "2", "a", "b"]

arr.pop()
"b"

5、unshift() shift() 头部

unshift：从头部压入

shift：从头部弹出

arr
(7) [1, 2, 3, 4, 5, 6, "1"]

arr.unshift('a','b')
9

arr
(9) ["a", "b", 1, 2, 3, 4, 5, 6, "1"]

arr.shift()
"a"

arr.shift()
"b"

arr
(7) [1, 2, 3, 4, 5, 6, "1"]

arr.unshift('2')
8

arr
(8) ["2", 1, 2, 3, 4, 5, 6, "1"]

6、排序 sort()

arr
(3) ["a", "c", "A"]

arr.sort()
(3) ["A", "a", "c"]

7、元素反转 reverse()

arr.reverse()
(3) ["c", "a", "A"]

8、数组拼接 concat() ===>并没有修改数组，会返回一个新数组

arr.concat([1,2,3])
(6) ["c", "a", "A", 1, 2, 3]

arr
(3) ["c", "a", "A"]

9、连接符 join() 打印拼接数据，使用特定的字符串连接

arr
(3) ["c", "a", "A
     
arr.join('-')
"c-a-A"

10、多维数组

arr =[[1,2],[3,4],['5','6','6']]
(3) [Array(2), Array(2), Array(3)]0: (2) [1, 2]1: (2) [3, 4]2: (3) ["5", "6", "6"]

arr[1][1]
4

arr[1][100]
undefined

3.3 对象

若干个键值对

var 对象名={
       属性名: 属性值,
       属性名: 属性值,
       属性名: 属性值,
       ...//最后一个不需要逗号
       }
    
    //定义一个person对象 四个属性
    var person={
            name:'summer',
            age:'18',
            email:'123@qq.com',
            score:100
       }

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

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

1、对象赋值

person.name =123
123

person.name
123

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

person.haha
undefined

3、动态的删减属性

person
{name: 123, age: "18", email: "123@qq.com", score: 100}

delete person.name//通过delete删除对象的属性
true

person
{age: "18", email: "123@qq.com", score: 100}

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

person.haha = 'hhh'
"hhh"

person
{age: "18", email: "123@qq.com", score: 100, haha: "hhh"}

5、判断属性的值是否在这个对象中！ xxx in xxx！

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

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

person.hasOwnProperty('age')
true

person.hasOwnProperty('name')
false

person.hasOwnProperty('haha')
true

3.4 流程控制

if判断

		 var age = 1;
          if(age>8){
           alert('ha');
          }else{
            alert('kua')
          }

while循环避免程序死循环

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

for循环

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

// forEach 循环s
  var age = [12,12,123,13,31,90];
        age.forEach( function(value){
            console.log(value);
        }
        )

//for in 
  var age = [12,12,123,13,31,90];
        for(var num in age){
        //var num  是索引
            console.log(age[num]);
        }

3.5 Map和Set

ES6才出现的新特性

Map

'use strict';

       //es6
       var map = new Map([['tom',100],['jack',90],['haha',80]])
       var name = map.get('tom');//通过key获得value
       map.set('admin',12345);//通过set 插入数据
       console.log(name);

	   map.delete('tom')//删除

Set : 无序不重复的集合

 'use strict';

       //es6
       var set = new Set([3,11,11,11,1]); //set可以去重
       set.add(2);//添加
       set.delete(1);//删除
       console.log(set.has(3));//是否包含某个元素

3.6 iterator迭代器

var arr  = [3,4,5];
for(var x in arr){console.log(x)}// 012下标

for(var x of arr){console.log(x)}//具体的值  遍历数组

var  map = new Map([['a',12],['b',23],['c',98]])
for(var x of map){console.log(x)}//遍历map

var a = new Set([3,4,5.5])
for(var x of a){console.log(x)}//遍历set

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;
    }
}

function(x){....}这是一个匿名函数，但是可以把结果赋值给abs，通过abs就可以调用函数！

方式一和方式二等价！

调用函数：

abs(2);//2
abs(-3);//3

参数问题：

abs(2,34,4)
2

abs()
NaN

js可以传任意个参数，也可以不传递参数~

假设不存在参数，如何规避？抛出异常

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

arguments：

arguments是一个js免费赠送的关键字：

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

    var  abs = function(x){

    console.log(x);
    for(let i = 0;i<arguments.length;i++){
      console.log(arguments[i]);
    }

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

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

rest

以前：

    function aaa(a,b){
    console.log('a=>'+a);
    console.log('b=>'+b);
    if(arguments.length>2){
        for(var i =2; i<arguments.length;i++){
            //.......   
        }
    }
    }

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

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

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

变量的作用域：

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

假设在函数体中声明，则在函数体外不可以使用~（非要想实现的话，了解闭包）

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

      x = x+2;//Uncaught ReferenceError: x is not defined

如果两个函数使用了相同的变量名，只要在函数内部，就不冲突

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

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

内部函数可以访问外部函数的成员反之则不可以

function qj(){
     var x  = 1;
     //内部函数 可以访问外部函数的成员  反之则不可以
      function qj2(){
        var y  = x+1;//2
    }
     var z =  y+1;// error
    }

假设，内部函数变量和外部函数变量，重名！

    function qj(){
     var x  = 1;
     //内部函数 可以访问外部函数的成员  反之则不可以
      function qj2(){
        var x  = 2;//2
        console.log('inner=>'+x);
    }
        console.log('outer=>'+x);
        qj2();
    }
    qj();

假设在js中，函数查找变量从自身函数开始，由内向外查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部变量~

提升变量的作用域

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

结果：xundefined

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

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

这是在js建立之初就存在的问题~ 所有的变量定义都放在函数头部，不要乱放，便于维护

    function qj(){
     var x = 1, 
        y = x +1,
        z,i,a;
        
        //之后随意用
    }

全局函数

   var x =1;//全局变量
    function f(){
        console.log(x);
    }
        console.log(x);
    f();

全局变量 window

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

alert() 这个函数本身也是一个window变量

    var x ='xxx';
    window.alert(x);
    var old_alert = window.alert;
    //old_alert(x);

    window.alert = function(){
    }

    //alert(123)失效了
    window.alert(123);

    window.alert = old_alert;

    window.alert(456);

js实际上只有一个全局作用域，任何变量(函数也可以为变量)，假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，报错‘RefrenceError

规范

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

    //唯一全局变量
    var Summer = {}；
    
    //定义全局变量
    Summer.name  = 'haha';
    Summer.add = function(a,b){
     return a+b;
    }

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

局部作用域

    function aaa(){
        for (var i = 0; i<100; i++){
            console.log(i);
        }
        console.log(i+1);//i 出了这个作用域还可以使用  101
    }

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

    function aaa(){
        for (let i = 0; i<100; i++){
            console.log(i);
        }
        console.log(i+1);//i 出了这个作用域还可以使用  101
    }

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

常量 const

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

   var PI = 3.14;
   console.log(PI);

   PI='123';//可以改变这个值

   console.log(PI);

在ES6引入了常量关键字const

   const PI = 3.14;//只读变量
   console.log(PI);

   PI='123';//error typeError: Assignment to constant variable.

4.2 方法

定义方法

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

    var summer = {
     name:'book',
     birth:1997,
     //方法
     age: function(){
        //今年-出生的年
      var now  =  new Date().getFullYear();
      return now - this.birth;
     }
    }

    //属性
summer.name

summer.age()//调方法一定要带括号
24

this代表什么？拆开上面的代码看看~

    function getAge(){
        var now  =  new Date().getFullYear();
        return now - this.birth;
    }


    var summer = {
     name:'book',
     birth:1997,
     age: getAge
    }
    
    //summer.age()  24
    //getAge()  NAN  this肯定是window  window中没有birth这个属性

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

apply

在js中可以控制this的执行！

getAge.apply(summer,[])//this,指向了summer对象，参数为空
24


### 4.3 闭包（难点）



### 4.4 箭头函数（新特性）



### 4.5 创建对象



### 4.6 class继承（新特性）



### 4.7 原型链继承（难）



## 5、常用对象

### 5.1 Date

> 标准对象

```js
typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof Array
"function"
typeof []
"object"
typeof {}
"object"
typeof NaN
"number"
typeof Math.abs
"function"
typeof undefined
"undefined"
typeof Date
"function"

var now = new Date()

now
Sun Jan 03 2021 23:17:26 GMT+0800 (中国标准时间)
now.getFullYear()//年 2021
2021
now.getMonth()//月 0~11
0
now.getDate()//日期
3
now.getHours()//小时
23
now.getDay()//星期 周日0
0
now.getMinutes()//分钟
17
now.getSeconds()//秒
26
now.getTime()//时间戳 全世界统一 1970 1.1.0:00:00毫秒数
1609687046786

//时间戳转为时间
console.log(new Date(1609687046786))
VM119:1 Sun Jan 03 2021 23:17:26 GMT+0800 (中国标准时间)

//转换为各种时间
var now = new Date(1609687046786);
now.toLocaleString()
"2021/1/3 下午11:17:26"

new Date()
Tue Jan 05 2021 23:32:56 GMT+0800 (中国标准时间)
new Date().toGMTString
ƒ toUTCString() { [native code] }
new Date().toGMTString()
"Tue, 05 Jan 2021 15:33:15 GMT"

5.2 JSON

Json是什么

早期，所有的数据传输习惯使用XML文件！
JSON是一种轻量级的数据交换格式
简洁和清晰的层次结构使得JSON成为理想的数据交换语言
易于人阅读和编写，同时易于机器解析和生成，并有效地提升网络传输效率
BSON类似json 二进制！

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

格式

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

json字符转和js对象转化

    var user ={
        name:'summer',
        age:'18',
        sex:'女'
    }

    //对象转化为json字符串
    var jsonUser = JSON.stringify(user);//对象转化为字符串

    var jsonParse = JSON.parse(jsonUser);//字符串转化对象


console.log(user)
 {name: "summer", age: "18", sex: "女"}

console.log(jsonUser)
{"name":"summer","age":"18","sex":"女"}

console.log(jsonParse)
 {name: "summer", age: "18", sex: "女"}

区别json和js对象

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

5.3 AJax

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

6、面向对象编程

6.1 什么是面向对象

javascript、java、c#....面向对象：Javascript有些区别！

类：模板
对象：具体的实现

在javascript这个需要转换一下思维方式！

class继承

class关键字是在ES6引入的

1、定义一个类，类中有属性和方法

 //ES6之后的  定义一个学生的类
    class Student{
        constructor(name){
            this.name = name;
        }
        hello(){
            alert('Hello')
        }
    }

    class smallStudent extends Student{
         constructor(name,grade){
            super(name);
            this.grade = grade;
        }

            myGrade(){
                alert("我是一名小学生！")
            }
    }

    var xiaoMing = new Student('xiaoMing');
    var xiaoHong = new Student('xiaoHong');

    var smallGirl = new smallStudent('girl',123);

原型-------对应Java中的继承

__ proto__

最终指向Object 然后成环

7、操作BOM元素

浏览器介绍

JavaScript 和浏览器关系？

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

BOM：浏览器对象模型

内核~~~~

IE 6-11 window
Chrom window
Safari ios
FireFox linux上默认的浏览器

三方：

qq浏览器
360浏览器

window

window代表浏览器的窗口

window.alert(1)
undefined
window.innerHeight
187
window.innerWidth
965
window.outerHeight
527
window.outerWidth
772
//内部高度和外部高度 可以调整浏览器高度

Navigator

Navigator 封装了浏览器的信息

navigator.appName
"Netscape"
navigator.appVersion

navigator.userAgent

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

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

screen

代表屏幕的尺寸

screen.width
1280
screen.height
720

location 重要

location代表当前页面的URL信息（可以用来重定向）

host: "www.baidu.com"   主机
href: "https://www.baidu.com/?tn=request_18_pg"  当前指向位置
protocol: "https:"  协议

reload: ƒ reload()  【方法】 重新加载 刷新网页
//设置新的地址
location.assign('https://pjjx.1688.com/?tracelog=cps&clickid=14b8cfc09ecea57c336119a7139e154e')

document

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

document.title
"百度一下，你就知道"
document.title='summer'
"summer"//网页名字会变化为summer

<body>

<dl id="language">
    <dt>Java</dt>
    <dd>JavaSE</dd>
    <dd>JavaEE</dd>
</dl>

<script>
    var dl = document.getElementById('language');
</script>
</body>

获取具体的文档树节点,能动态的删除节点增加节点，就可以控制网页了

document可以获得网页的cookie【客户端的本地信息】

document.cookie
""

劫持cookie原理

www.taobao.com

<script src='aa.js'>	
</script>

<!--恶意人员，获取你的cookie用ajax上传到它的服务器 可以不需要用户名和密码 就能登录-->

服务器端可以设置 cookie：httpOnly 只读的就会安全

history

history代表浏览器的历史记录

history.back()//浏览器后退

history.forward()//浏览器前进

8、操作DOM对象（重点）

核心

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

更新：更新Dom节点
遍历Dom节点：得到Dom节点
删除：删除一个Domi节点
添加：添加一个新的节点

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

获得Dom节点

  //对应CSS选择器

   var h1 = document.getElementsByTagName('h1');//通过标签获取节点
   var p1 = document.getElementById('p1');//通过标签获取节点
   var p2 = document.getElementsByClassName('p2');//通过标签获取节点
   var parent = document.getElementById('parent');//通过标签获取节点

   var children =parent.children;//获取父节点下的所有子节点
    //parent.firstElementChild 父节点第一个节点
    //parent.lastElementChild  父节点最后一个节点

这是原声代码，之后我们尽量都用JQuey

更新Dom节点

<body>

<div id="id1">

</div>

<script>
    var id1 = document.getElementById('id1');
</script>
</body>

操作文本

id1.innerText = '123'; 修改文本的值
id1.innerHTML = '<strong>123</strong>'; html可以解析HTML文本标签

操作JS

id1.style.color = 'red';//字体颜色  属性使用字符串包裹

id1.style.fontSize = '20px';//字体大小  下划线转驼峰命名问题

id1.style.padding= '2em';//内边距

删除Dom节点

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


<div id="parent">
   <h1>标题一</h1>
   <p id="p1">p1</p>
   <p class="p2">p2</p>
</div>

<script>
   var self = document.getElementById('p1');
   var father = self.parentElement;//找父类
   father.removeChild(p1);//然后干掉
   
   //删除是一个动态的过程
   parent.removeChild(parent.children[0]);
   parent.removeChild(parent.children[1]);
   parent.removeChild(parent.children[2]);
</script>

【注意】：删除多个节点的时候，children是在实时变化的，删除节点的时候一定要注意~

插入Dom节点

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

追加操作append

移动一个已有的标签

<body>
<p id="js">JavaScript</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'),
         list = document.getElementById('list');
    
         list.appendChild(js);
</script>
</body>

创建一个新标签实现插入

<body>
<p id="js">JavaScript</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'),//已存在的节点
         list = document.getElementById('list');

        //通过js创建一个新的节点
        var newp = document.createElement('p');//创建一个p标签;
        newp.id = 'newp';//id属性 为newp
        newp.innerText = 'hello summer~';//p标签中间加个文字
        list.appendChild(newp);

</script>
</body>

动态改标签！万能~

<body>
<p id="js">JavaScript</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'),//已存在的节点
         list = document.getElementById('list');

        //通过js创建一个新的节点
        var newp = document.createElement('p');//创建一个p标签;
        //newp.setAttribute('type','text/css'); 设置标签属性 等价下面这句
        newp.id = 'newp';//id属性 为newp
        newp.style
        newp.innerText = 'hello summer~';//p标签中间加个文字
        list.appendChild(newp);

        //创建一个标签节点
        var myScript = document.createElement('script');
        myScript.setAttribute('type','text/css');
        list.appendChild(myScript);

        //创建一个style标签
        var myStyle = document.createElement('style');//创建了一个style标签
        myStyle.setAttribute('type','text/css');
        myStyle.innerHTML = 'body{ background-color:rgba(23,43,422,0.5); }';//设置标签内筒

        var head = document.getElementsByTagName('head')[0];
        head.appendChild(myStyle);

</script>

insert

<body>
<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>

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

9、操作表单（验证）

表单是什么？form Dom树

文本框：text
下拉框：<select>
单选框：radio
多选框：checkbox
隐藏域：hidden
密码框：password
...(13种滑块 and so on)

表单的目的：提交信息

获得要提交的信息

<body>

<form action="post">
    <p>
        <span>用户名:</span><input type="text" id="username">
    </p>

<!--    多选框的值，就是定义好的value-->
    <p>
        <span>性别:</span>
        <input type="radio" name="sex" value="man" id="boy">男
        <input type="radio" name="sex" value="woman" id="girl">女
    </p>


</form>

<script>
    var input_text = document.getElementById('username');
    var boy_radio = document.getElementById('boy');
    var girl_radio = document.getElementById('girl');

    //得到输入框的值
    input_text.value;
    //修改输入框的值
    input_text.value = '123';

    //对于单选框，多选框等等固定的值，boy_radio.value----"man"  只能取得固定的值
    girl_radio.checked;//查看返回的结果是否为true
    girl_radio.checked = true; //赋值
</script>
</body>

提交表单

<!--    MD5工具类-->
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

md5加密密码【表单优化】

<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    MD5工具类-->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>

<!--表单绑定提交事件
    onsubmit=绑定一个提交检测的函数----获取一个true  false
    将这个结果返回给表单，使用onsubmit接收！
    onsubmit="return aaa()
-->
<form action="#" method="post" onsubmit="return aaa()">
    <p>
        <span>用户名:</span><input type="text" id="username" name="username">
    </p>
<!--    <p>-->
<!--        <span>密码:</span><input type="password" id="password" name="password">-->
<!--    </p>-->

    <p>
        <span>密码:</span><input type="password" id="input-password" >
    </p>

    <!--    这样就不会再提交代码的时候密码变长！！-->
    <input type="hidden" id="md5-password" name="password">

<!--    绑定事件 onclick 被点击的时候-->
    <button type="submit">提交</button>
</form>


<script>
    function aaa(){
       alert(1);
       var uname = document.getElementById('username');
       //var pwd = document.getElementById('password');
       var pwd = document.getElementById('input-password');
       var md5pwd = document.getElementById('md5-password');

  //     console.log(uname.value);
       //MD5算法
  //     pwd.value = md5(pwd.value);
  //      console.log(pwd.value);//密码

        md5pwd.value = md5(pwd.value);
        //可以判断表单内容：true就是通过提交 false组织提交
        return true;
    }
</script>
</body>

10、jQuery

JavaScript

jQuery库：里面存在大量的JavaScript函数

获取jQuery

<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    cdn 在线引入-->
<!--    <script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>-->
<!--    引入库文件-->
    <script src="lib/jquery-3.5.1.js"></script>
</head>
<body>
<a href="" id="test-jquery">点我</a>
<script>
    //选择器就是css的选择器
    $('#test-jquery').click(function(){
        alert(1);
    });
</script>
<!--jquery 公式 选择器就是css的选择器
    $(选择器).动作()  $(selector).action()
-->
</body>

选择器

文档工具类http://jQuery.cuishifeng.cn/

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    //原生的js 选择器少，麻烦不好记
    //标签选择器
    document.getElementsByTagName('');
    //ID选择器
    document.getElementById('');
    //class选择器
    document.getElementsByClassName('');

    //jquery  css中的选择jquery全部都能用
    $('p').click();//标签选择器
    $('#id').click();//id选择器
    $('.class').click();//class选择器

</script>
</body>

事件

鼠标事件、键盘事件、其他事件；

    $('.class1').mousedown()//鼠标按下
    $('.class1').mouseenter()
    $('.class1').mouseleave()//鼠标离开
    $('.class1').mousemove()//鼠标移动
    $('.class1').mouseout()
    $('.class1').mouseover()//鼠标悬浮
    $('.class1').mouseup()

示例

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.5.1.js"></script>
    <style>
        #divMove{
            width:500px;
            height:500px;
            border: 1px solid blue;
        }
    </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>

操作Dom元素

节点文本操作

$('#test-ul li[name=python]').text()//获得值
"Python"
$('#test-ul li[name=python]').text('123')//设置值

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

css操作

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

元素的显示和隐藏

$('#test-ul li[name=python]').show()//显示
$('#test-ul li[name=python]').hide()//隐藏

本质就是css的 display : none;

娱乐测试

$(window).width()
905
$(window).height()
188

$('#test-ul li[name=python]').toggle()//切换

未来

$('#form').ajax()

$.ajax({ url: "test.html", context: document.body, success: function(){
    $(this).addClass("done");
}});

_小技巧

如何巩固JS(看jquery源码，看游戏源码)
巩固HTML和CSS（扒网站，直接改或者全部down下来，然后对应修改看效果~）

提升

闭包自己看下

JavaScript入门

JavaScript

1、什么是javaScript

1.1 概述

1.2 历史

2 快速入门

2.1 引入JavaScript

2.2 基本语法入门

浏览器必备调试须知

2.3 数据类型

var

number

字符串

布尔值

逻辑运算

比较运算符

浮点数问题

null和undefined

数组

对象

2.4 严格检查模式

3、数据类型

3.1 字符串

3.2 数组

3.3 对象

3.4 流程控制

3.5 Map和Set

3.6 iterator迭代器

4、函数及面向对象

4.1 函数定义及变量作用域

定义方式一：

定义方式二：

调用函数：

arguments：

变量的作用域：

4.2 方法

5.2 JSON

5.3 AJax

6、面向对象编程

6.1 什么是面向对象

7、操作BOM元素

window

Navigator

screen

location 重要

document

history

8、操作DOM对象（重点）

获得Dom节点

更新Dom节点

删除Dom节点

插入Dom节点

追加操作append

9、操作表单（验证）

表单是什么？form Dom树

表单的目的：提交信息

获得要提交的信息

提交表单

10、jQuery

获取jQuery

选择器

事件

操作Dom元素

节点文本操作

css操作

元素的显示和隐藏

娱乐测试

未来

小技巧

提升

推荐

公告

_小技巧