标签：function console log 前端基础 let var document

前端基础

HTML书写页面 CSS 页面美化 JS 页面运动

HTML

超文本标记语言（Hyper Text Markup Language）

基本元素

p 段落标签，独占一行       &nbsp 网页上显示一个空格
i 文字出现斜体效果           hr 水平线   solid实线  shadow阴影
b 文字出现加粗效果          br 换行标记  marquee 滚动
float 浮动 padding 填充  radius半径 relative 相对的有关系的
<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。
embed mp3\mp4标签
border-style: dashed; 虚线边框
a link 未访问 visited访问后 hover 鼠标事件
    
div
clear 消除float浮动

table表格
td的rowspan跨行
td的colspan跨列

表单（输入框和单复按钮选项框属于）form  域
1.标签=元素
disabled(不可操作)  readonly(只读)  placeholder(提示文本)
autofocus(自动获焦)  autocomplete=”on(默认。规定启用自动完成功能)/off禁用自动完成功能)
2.文本框:<input type="text" name="ID" value=""> autocomplete 自动填充+  placeholder浅色占位符
3.密码框：<input type="password" name="pwd" value="">
4.隐藏域：<input type="hidden" name="">
5.单选框：
　　<input type="radio" name="id" checked(选中) value="男">男
          <input type="radio" name="id" value="女">女
6.多选框：
<input type="checkbox" name="id">游戏<br>
<label><input type="checkbox" name="id">游戏<br></label>点字选
<input type="checkbox" name="id"id="sl">睡觉<br><label for="s"></label>
7.下拉列表:
<select name="" id="">
       　<option value="">一班</option>        
写在哪里就默认选择哪里 <option value="" selected(默认选择)>二班</option></select>
8.提示文字     <input placeholder=”提示文字”>
9.普通按钮    <input type="button" name="">
10.提交按钮    <input type="submit" name="">在form表单有效<button>
11.重置按钮    <input type="reset" name="">
12.上传文件     <input type="file" name="" multiple>
13.点图提交     <input type="image" name="">
14.选择日期     <input type="date" name="">
15.选择颜色     <input type="color" name="">
16.邮箱email    <input type="email" name="">
17.多行文本输入框textarea

dl自定义列表 dt列表名称 dd列表内容
ul无序列表 
ol有序列表
display:inline 可以使<ul><li></li></ul>中的li无序排列在同一水平线上 

css样式属性
div
clear:both清除左右浮动
overflow 盒子溢出
字体样式
1、边界 margin(0 auto) 上下为0 左右自动
2、font-size字体大小
3、font-style字体的风格
4、font-variant小型的大写字母字体
5、font-family字体名
6、font-weight字体的粗细

文本样式
1、letter-spacing 字符间距属性
2、line-height行距属性
3、text-indent首页缩进
4、text-decoration字符装饰
5、text-transform英文大小写转换属性
6、text-align水平对齐
7、vertical-align垂直对齐  middle放置在父属性中部
8、letter-spacing字符间距
背景图案
1、background-repeat是否重复填充图案
2、background-position背景图案的起始位置

<script>元素的作用是在HTML页面种导入JavaScript，让网页实现各种动画特效，以及与人之间实现更好的交互效果。
<script>的属性有：
属性	描述
type	表示编写代码使用的脚本语言的内容类型（也称为MIME类型）
src	表示外部脚本文件的 URL
async	表示异步执行脚本（仅适用外部脚本），立即下载脚本，不妨碍页面的其他操作
defer	表示是否对脚本执行进行延迟，直到页面加载为止（仅适用外部脚本）

<p>内联框架</p>
<a href="twoTest.html" target="myiFrame">点我</a>  a的target与 iframe的name定位
<a href="twoTest2.html" target="myiFrame">点我2</a>
<iframe id="" name="myiFrame" width="980" height="580"></iframe>

超链接

a target="_blank" 在新标签页打开 _self 在自己的网页中打开

)

锚链接标记

QQ链接：可以进入QQ推广网站中，进行寻找

视频、音频

视频元素

)

音频元素

)

页面结构

)

盒子模型

iframe内联框架

)

表单

readonly只读 hidden隐藏 disable禁用 placeholder提示信息（用在输入框控件上） required不能为空

pattern正则表达式

按钮

文本域、下拉框、文件域

CSS样式

1、如何学习

什么是CSS样式？
CSS怎么用？（快速入门）
CSS选择器（重点+难点）
美化网页（文字、阴影、超链接、列表、渐变....）
盒子模型
浮动
定位
网页动画（特效）

1.1、什么是CSS

Cascading Style Sheet层叠级联样式表

1.2、发展史

CSS2.0 DIV（块）+CSS，HTML与CSS结构分离的思想，网页变得简单，SEO

CSS2.1 浮动、定位

CSS3.0 圆角、阴影、动画.....浏览器兼容性~

1.3、快速入门

建议使用这种规范

1.4、CSS的三种导入方式

行内样式：在标签元素中，编写一个style属性，编写样式即可
HTML页面link添加，外部样式
- 连接式：
  - ```
  <link rel="stylesheet" href="./css/style.css">
```
- 导入式（不建议使用）：会先展示网页再进行渲染
HTML头部编写

  <head>
  <style>

  .content {
      background: red;
  }

  </style>
</head>

1.5、优先级（就近原则）

行内样式 > 内部样式 > 外部样式

2、选择器

作用：选择页面上的某一个或者某一类元素

2.1、基本选择器

不遵循就近原则，id选择器 > class选择器 > 标签选择器

标签选择器：选择一类标签
类选择器 Class：选择所有class属性一致的标签，跨标签 .类名{}
id选择器：全局唯一 #id名{}

2.2、层次选择器

2.2.1、后代选择器：在某个元素的后面

body p{background-color: red;}

2.2.2、子选择器,一代，儿子

body>p{background-color: olivedrab;}

2.2.3、相邻弟选择器只有一个，相邻（对象向下）

.active + p{background-color: darkred;}

2.2.4、通用兄弟选择器：当前选中元素向下的所有兄弟元素

.active~p{background-color: aqua;}

2.3、结构伪类选择器

伪类：条件条件即为过滤器

ul li:first-child{/*第一个元素*/background-color: darkmagenta;}
ul li:last-child{/*最后一个元素*/background-color: aquamarine;}

2.4、属性选择器（常用）

id + class 结合

a[]{} []里写选择的属性，如：选择 id = first 的组件

JavaScript

1、快速入门

1.1、引入JavaScript

1.1.1、内部标签引入

<script>
    //JavaScript代码
</script>

1.1.2、外部引入

<script src='//文件地址'>
</script>

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <script>-->
<!--        alert("hello word!!!");-->
<!--    </script>-->
    <!--外部引入-->
    <!--注意script标签必须成对出现-->
    <script src="./js/xx.js"></script>
<!--    不用显示定义，默认就是javascript语言-->
    <script type="text/javascript"></script>
<body>

</body>
</html>

1.2、基本语法入门

浏览器必备调试须知：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--JavaScript严格区分大小写-->
    <script>
        // 1.定义变量    变量类型 变量名 = 变量值;
        var score = 1;
        // 2.条件控制
        if (score>10){

        }
        /**
         * console.log(score) 在浏览器控制台打印变量！System.out.println();
          */
    </script>
<body>

</body>
</html>

1.3、数据类型

数值，文本，图形，音频，视频.....

变量

var

number

js不区分小数和整数，统一都用number表示

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

字符串

’abc‘ "abc"

布尔值

true,false

逻辑运算

&&、||、！

比较运算符

=	赋值符
==	等于（类型不一样，值一样，也会判断为true）
===	绝对等于（必须类型一样，值一样，判断为true）

须知：

NaN === NaN 结果为false，它与所有的数值都不相等，包括自己
只能通过 isNaN（）方法进行判断是否是NaN
浮点数问题
- ```
console.log((1/3)===(1-2/3))
```
  尽量避免使用浮点数进行运算，存在精度问题

null和undefined

null 是定义了为空
undefined 是未定义

数组

Java中的数组必须是一系列相同类型的对象,JS中不需要这样！

//保证代码的可读性，尽量使用[]
var arr = [1,2,3,'hello',null,true];

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

取数组下标越界了就会undefined

对象

对象是大括号，数组是中括号~

每个属性之间使用逗号隔开，最后一个不需要添加

//Person person = new Person(1,2,3,4,5);
var person = {
	name:"xxx",
	age:3,
	tags:['js','java','web','....']
}

取对象的值

person.name
> "xxx"
person.age
> 3

1.4、严格检查模式

前提：IDEA需要设置支持ES6语法
必须写在第一行
'use strict'; 严格检查模式，预防JavaScript的随意性
局部变量建议使用let去定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <script>
        'use strict';
        let i = 1;
    </script>
<body>

</body>
</html>

2、数据类型讲解

2.1、字符串

正常字符串使用单引号（''）或者双引号("")包裹

注意转义字符 \

\'
\n
\t
\u4e2d	\u#### Unicode字符
\x41	Asc11字符

多行字符串编写

//tab键上面`
        var smg = `
           hello
           word
           你好呀
        `

模板字符串（ES6新特性）

let name = "xxx";
let age = 3;
let msg = '你好啊, ${name}'

字符串长度
```
console.log(str.length)
```
字符串的可变性，不可变

大小写转换

//注意：这是个方法，不是属性
msg.toUpperCase()//转换大写
msg.toLowerCase()//转换小写

获取指定的字符串下标
```
msg.indexOf('你')
```

截取字符串

msg.substring(1)//从第一个字符截取到最后一个字符
msg.substring(1,3)//从第一个字符截取到第三个字符

2.2、数组

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

var arr = [1,2,3,4,5,6]

长度
```
arr.length
```
注意：如果给arr.length赋值，数组大小就可以发生变化，如果赋值过小，元素就会丢失
indexOf，通过元素获得下标索引
```
arr.indexOf(2)
```
注意：字符串的"1"和数字1是不一样的
slice() 可以截取数组Array的一部分，返回一个新的数组，和字符串的substring类似

push()，pop()

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

unshift() shift() 头部

unshift()：压入头部
shift()：弹出头部的一个元素

排序 sort()
```
arr.sort()
```

元素反转reverse

arr.revers()//将数组里的数据反向排列

数组拼接 concat()
```
arr.concat(1,2,3)//数组里写要拼接的内容
```
注意：concat方法并没有修改原来数组，而是生成一个新的数组
连接符 join

打印拼接数组，使用特定的字符串连接
```
arr.join('-')
```

多维数组

arr = [[1,2],[2,2],["5","6"]];
arr[1][1]
2

2.3、对象

若干个键值对

var 对象名 = {
	对象属性名：属性值，
	对象属性名：属性值，
}
//定义了一个person对象，他有四个属性
var person = {
	name:"xxx",
	age:3,
	email:"[email protected]",
	score:0
}

JS中对象，{....}表示一个对象，键值对描述属性xxxx:xxxxx,多个属性之间使用逗号(,)，最后一个属性不加逗号！

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

对象赋值
```
person.name = "xixiuxian"
```
使用一个不存在的对象属性，不会报错 undefined
```
person.haha
undefined
```
动态的删减属性，通过delete删除对象的属性
```
delete person.name
true
```
动态的添加，直接给新的属性添加值即可
```
person.haha = "haha"
```

判断属性值是否在这个属性中 xxx in xxx

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

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

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

2.4、流程控制

if判断：和Java一样

循环：

while与for与Java一样

数组循环 forEach

var age = {1,2,3,4,5,6,7}
//函数
age.forEach(function (value){
    console.log(value)
})

for...in

//for(var index in object){}
for(var num in age){
	if(age.hasOwnProperty(num)){
		console.log("存在")
		console.log(age[num])
	}
}

2.5、Map和Set

ES6的新特性

Map：

//学生的成绩，学生的名字
var map = new Map([['tom',100],['jack',80],['hhaa',90]]);
var name = map.get('tom');
map.set('admin',12312);
map.delete("tom")//删除
console.log(name)

Set：无序不重复的集合和Java一样，去除重复项

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

3、函数

3.1、定义一个函数

3.1.1、定义方式一

绝对值函数

function 函数名（函数变量）{
    逻辑运算；
    return 值；
}

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

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

3.1.2、定义方式二

var abs = function(函数变量){
    逻辑运算；
    return 值；
}

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

方式一和方式二等价！！！

3.1.3、调用函数

abs(10)//10
abs(-10)//10

参数问题：JavaScript可以传任意个参数，也可以不传递参数！！！

3.1.4、arguments

arguments是一个js免费赠送的关键字，代表，传递进来的所有参数，是一个数组

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

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

3.1.5、rest

之前的方式：

if (arguments.length>2){
   for (var i =2;i<arguments.length;i++){
                    
   }
}

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

现在:

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

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

3.2、变量作用域

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

在函数体内声明，在函数体外不可以使用（非要想实现可以研究闭包）

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

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

function f() {
  var x = 1;
  x = x + 1;
}
function fx() {
   var x = 1;
}

内部函数可以访问外部函数的成员，外部函数无法访问内部函数的成员

function f() {
    var x = 1;
    x = x + 1;
  function fx() {
      y = x + 1;
   }
  var z = y + 1;
}

内外函数变量和外部函数变量，重名。

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

function f() {
  var x = 1;
  x = x + 1;
  function fx() {
     var x = 'A';
  onsole.log('内部'+x);//内部A
  }
  console.log('外部'+x);//外部2
  fx();
}
f();

提升作用域

结果：xundefined

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

等价于

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

说明：JavaScript执行引擎，自动提升了y的声明，但是不会提升变量y的赋值，这是在JavaScript建立之初就存在的特性。

养成规范：所有的变量都放在函数头部，不要乱放，便于代码维护

3.2.1、全局函数

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

全局对象 Window

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

alert()函数本身也是绑定在window下的

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

规范：

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

如何减少冲突？

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

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

3.2.2、局部作用域 let

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

出现问题：i可以在for作用域外使用

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

function f() {
 for (let i = 0; i < 100; i++) {
    console.log(i);
    }
 console.log(i + 1);//Uncaught ReferenceError: i is not defined
}

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

3.2.3、常量 const

在ES6之前，定义常量方式：只要是大写字母命名的就是常量；建议不要修改这样的值

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

在ES6引入了关键字const

const定义的量为常量，不可以更改

3.3、方法

3.3.1、定义方法

方法就是把函数放在对象里，对象只有：属性和方法，方法一定要带()

var xian = {
  name : '奚',
  birth : 2020,
  //方法
  age : function (){
        let number = new Date().getFullYear() - this.birth;
  console.log(number)
    }
}
xian.age();

将上面的代码拆开，等于：

function getage(){
  let number = new Date().getFullYear() - this.birth;
  return number;
}
  var xian = {
      name : '奚',
  birth : 2020,
  //方法
  age : getage
}

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

3.3.2apply

在JS中，可以控制This的指向

function getage(){
  let number = new Date().getFullYear() - this.birth;
  return number;
}
var xian = {
      name : '奚',
  birth : 2020,
  //方法
  age : getage
}

getage.apply(xian,[]);//this指向了 xian,参数为空

4、内部对象

标准对象

typeof 121
'number'
typeof'12'
'string'
typeof[]
'object'
typeof{}
'object'
typeof true
'boolean'
typeof NaN
'number'
typeof Math.abs
'function'
typeof undefined
'undefined'

4.1、Date对象

基本使用

let date = new Date();//Sun Apr 03 2022 13:19:54 GMT+0800 (中国标准时间)
date.getFullYear();//年
date.getMonth();//月
date.getDate();//日
date.getDay();//星期几
date.getHours();//时
date.getMinutes();//分
date.getSeconds();//秒

date.getTime();//时间戳  全世界统一 1970年1月1日 0：00：00 到现在的毫秒数
console.log(new Date(1648963194746));//时间戳转为时间

转换（注意：调用的是方法不是属性）

console.log(new Date(1648963194746))
VM155:1 Sun Apr 03 2022 13:19:54 GMT+0800 (中国标准时间)
undefined
date.toDateString()
'Sun Apr 03 2022'
date.toTimeString()
'14:19:43 GMT+0800 (中国标准时间)'

4.2、JSON

JSON是什么

早期，所有数据传输习惯使用XML文件！

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

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

格式：

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

JSON字符串和对象的转换

var user = {
   name : "xxx",
   age : 18,
   sex : '男'
}

//对象转换为Json字符串
let s = JSON.stringify(user);

//将JSON字符串转化为对象,参数为JSON字符串
let s1 = JSON.parse(s);

JSON和JS的区别

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

4.3、Ajax

原生的JS写法 .xhr 异步请求
jQuey封装好的方法
axios 请求

5、面向对象编程

5.1、原型对象

面向对象语言：Java、JavaScript、c#....，其中，JavaScript有一些区别

类：模板原型
对象：具体的实例

原型：

var Student = {
            name:'xian',
            age:3,
            run : function (){
                console.log(this.name+"run....")
            }
        };

        var xiaoming ={
            name: "xiaoming",
        };
        //小明的原型是 Student
        xiaoming.__proto__ = Student;//原型对象
        var Bird = {
            fly : function (){
                console.log(this.name+"fly....")
            }
        }

        //小明的原型是 Bird
        xiaoming.__proto__ = Bird;

function Student(name){
    this.name = name;
}

//给Student新增一个方法
Student.prototype.hello = function(){
    alert('Hello')
};

5.2、Class对象

Class关键字实在ES6引入的

定义一个类，属性和方法

//定义一个学生类
Class Student{
	constructor(name){//构造方法
	this.name = name;
	}
	hello(){
		alert('hello')
	}
}

var xiaoming = new Student("xiaoming");
var xiaohong = new Student("xiaohong");

xiaoming.hello()

继承

Class XiaoStudent extends Student{
    constructor(name,grade){
        super(name);
        this.grade = grade;
    }
    
    myGrade(){
        alert("我是一名小学生")
    }
    
}

var xiaohong = new Student("xiaohong",1);

本质：查看对象原型

原型链

__ proto__:

6、操作BOM对象(重点)

6.1、浏览器介绍

JavaScript和浏览器的关系

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

BOM：浏览器对象模型

IE 6~11
Chrome
Safari
FireFox

三方

QQ浏览器
360浏览器

6.2、window对象

window对象代表浏览器窗口

window.alert(1)
window.innerHeight
window.innerwidth

6.3、navigator

大多数时候，不会使用这个方法，因为会被人为修改

不建议使用这些方法判断和编写代码

navigator，封装了浏览器的信息

navigator.appName
'Netscape'
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.74 Safari/537.36 Edg/99.0.1150.55'
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/99.0.4844.74 Safari/537.36 Edg/99.0.1150.55'
navigator.platform
'Win32'

6.4、screen

代表屏幕尺寸

screen.width
1536 px
screen.height
864 px

6.5、location（重要）

location 代表当前页面的URL信息

host:"www.baidu.com"
href:"https://www.baidu.com/"
protocol:"https"

reload:f reload()//刷新网页
//设置新的地址,跳转新的地址
location.assign('网址')

6.6、document

document当前页面的信息，HTML DOM文档数

document.title
"百度一下，你就知道"
document.title = 'xian'
"xian"

获取具体的文档树节点

<dl id="xx">
    <dt>java</dt>
    <dd>JavaSE</dd>
    <dd>JavaEE</dd>
</dl>
<script>
    var id = document.getElementById('xx');

</script>

获取cookie，现在无法正常显示了

document.cookie
''

劫持cookie原理：

www.taobao.com

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

服务器端可以设置cookie：httpOnly

6.7、history

代表浏览器的历史记录

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

7、操作DOM对象（重点）

DOM：文档对象模型

7.1、核心

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

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

要操作一个DOM节点，必须先获得一个DOM节点

7.2、获得DOM节点

//对应CSS选择器
let h1 = document.getElementsByTagName('h1');
let p1 = document.getElementById('p1');
let p2 = document.getElementsByClassName('p2');
let father = document.getElementById('father');

var childers = father.children;//获取父节点下的所有子节点
//father.firstChild
//father.lastChild

7.3、更新节点

<div id="id1"></div>
<script>    
    let id1 = document.getElementById('id1');    
</script>

操作文本：

id1.innerText = '1231' 修改文本的值
id1.innerHTML = '1231' 可以解析HTML文本标签

操作JS：

```
id1.style.color = 'red'
'red'
```

删除节点：

步骤

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

//先获取自己
let id1 = document.getElementById('id1');
//获取父节点
let father = id1.parentElement;
//通过父节点删除自己
father.removeChild(p1);

//删除是一个动态的过程
father.removeChild(father.children[0])
father.removeChild(father.children[1])
father.removeChild(father.children[2])

注意：删除多个节点的时候，children[]是在时刻变化的，删除节点的时候需要注意！

7.4、插入节点

如果获取了某个节点，假设这个DOM节点是空的，我们可以通过innerHTML 就可以增加一个元素了，但是，若这个节点已经存在元素了，就无法使用这种方式进行操作，因为会产生覆盖。

7.4.1、追加

追加已有元素

<p id="js">JavaScript</p>
<div id="ls">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>
<script>
    let js = document.getElementById('js');
    let ls = document.getElementById('ls');
    ls.appendChild(js);//追加
</script>

创建新节点进行插入

<p id="js">JavaScript</p>
<div id="ls">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>
<script>
    let js = document.getElementById('js');//已存在的节点
    let ls = document.getElementById('ls');
    ls.appendChild(js);//追加
    //通过JS创建一个新的节点
    var newp = document.createElement('p');//创建一个p标签
    newp.id = 'newp';
    newp.innerText = 'hello';

    //创建一个标签节点
    let myScript = document.createElement('script');
    myScript.setAttribute('type','text/javascript');//通过这个属性可以设定属性任意的值
    
    //创建一个style标签
    let myStyle = document.createElement('type');//创建一个空style标签
    myStyle.setAttribute('type','text/css');
    myStyle.innerHTML = 'body{background-color: chartreuse}';//设置标签内容
    document.getElementsByTagName('head')[0].appendChild(myStyle)
    
    //加入到ls后
    ls.appendChild(newp)
</script>

insertBefore

let ee = document.getElementById('ee');
let js = document.getElementById('js');
let ls = document.getElementById('ls');

//ls要包含的节点 .insertBefore(newNode,targetNode)
ls.insertBefore(js,ee);

8、操作表单（验证）

表单是什么？form、DOM树

表单的目的：提交信息

8.1、获得提交的信息

<form action="post">
    <p><span>用户名：</span><input type="text" id="username"></p>
    <p>
<!--        多选框的值和单选框的值是写死的-->
        <span>性别：</span>
        <input type="radio" name="sex" value="男" id="boy">男
        <input type="radio" name="sex" value="女" id="girl">女
    </p>
</form>
<script>
    let input = document.getElementById('username');
    let boy = document.getElementById('boy');
    let girl = document.getElementById('girl');
    //得到输入的值
    input.value;
    //修改输入框的值
    input.value = '31';

    //对于单选框和多选框等等固定值，用value只能取得当前值
    boy.checked;//查看返回的结果是否为true

8.2、提交表单（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>
<body>
<form action="post">
    <p><span>用户名：</span><input type="text" id="username" name="username"></p>
    <p><span>密码：</span><input type="password" id="password" name="password"></p>
<!--    onclick被点击-->
    <button type="button" onclick="aaa()">提交</button>
</form>

<script>
    function aaa() {
        let username = document.getElementById('username');
        let password = document.getElementById('password');
        console.log(username.value);
        //MD5加密算法
        password.value = md5(password.value);
        console.log(password.value);
    }
</script>

9、jQuery

JavaScript

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

9.1、获取jQuery

//在线CDN
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

9.2、jQuery使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<body>

<a href="" id="test-jQuery">点我</a>
<script>
    //选择器就是CSS选择器
    $('#test-jQuery').click(function () {
        alert('111')
    })
</script>
</body>
</html>

9.3、jQuery选择器

//原生js，选择器少，麻烦不好记
    //标签
    document.getElementsByTagName();
    //id
    document.getElementById();
    //类
    document.getElementsByClassName();

    //jQuery  css中的选择器全部都可以用
    $('p').click()//标签选择器
    $('#ip1').click()//id选择器
    $('.class1').click()//class选择器

文档工具站：

jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm (cuishifeng.cn)

9.4、事件

标签：function,console,log,前端,基础,let,var,document
From： https://www.cnblogs.com/xixiuxian/p/16629102.html

前端基础

前端基础

HTML

基本元素

超链接

视频、音频

视频元素

音频元素

页面结构

盒子模型

iframe内联框架

表单

按钮

文本域、下拉框、文件域

CSS样式

1、如何学习

1.1、什么是CSS

1.2、发展史

1.3、快速入门

1.4、CSS的三种导入方式

1.5、优先级（就近原则）

2、选择器

2.1、基本选择器

2.2、层次选择器

2.2.1、后代选择器：在某个元素的后面

2.2.2、子选择器,一代，儿子

2.2.3、相邻弟选择器 只有一个，相邻（对象向下）

2.2.4、通用兄弟选择器：当前选中元素向下的所有兄弟元素

2.3、结构 伪类选择器

2.4、属性选择器（常用）

JavaScript

1、快速入门

1.1、引入JavaScript

1.1.1、内部标签引入

1.1.2、外部引入

1.2、基本语法入门

1.3、数据类型

1.4、严格检查模式

2、数据类型讲解

2.1、字符串

2.2、数组

2.3、对象

2.4、流程控制

2.5、Map和Set

3、函数

3.1、定义一个函数

3.1.1、定义方式一

3.1.2、定义方式二

3.1.3、调用函数

3.1.4、arguments

3.1.5、rest

3.2、变量作用域

3.2.1、全局函数

3.2.2、局部作用域 let

3.2.3、常量 const

3.3、方法

3.3.1、定义方法

3.3.2apply

4、内部对象

4.1、Date对象

4.2、JSON

4.3、Ajax

5、面向对象编程

5.1、原型对象

5.2、Class对象

6、操作BOM对象(重点)

6.1、浏览器介绍

6.2、window对象

6.3、navigator

6.4、screen

6.5、location（重要）

6.6、document

6.7、history

7、操作DOM对象（重点）

7.1、核心

7.2、获得DOM节点

7.3、更新节点

7.4、插入节点

7.4.1、追加

8、操作表单（验证）

2.2.3、相邻弟选择器只有一个，相邻（对象向下）

2.3、结构伪类选择器