JavaScript 总结

事件：
- html对于每一个元素提供通用的事件属性
- onclick :单击
- ondblclick : 双击
- onmouseover : 鼠标划入
- onmouseout : 鼠标划出
获取元素对象
- 允许直接通过id来代表元素对象
- 对象.属性或者方法
- 元素当做javascript，将所有当前元素的属性封装到对象

4、函数

function

java当中方法

public class 类名{
    修饰符 返回值类型 方法名称(数据类型 名字,数据类型 名字){
        
    }
}

javascript当中函数

function 函数名(形参名字,形参名字){
    
}

参数列表

5、document

javascript 已经帮助我们创建了对象
- document : 文档对象
  - dom对象：通过document文档获取到的对象（元素对象），dom对象
- window ：浏览器的创建
  - window.alert(字符串) ：警告框
  - window.confirm(字符串) : 布尔值
  - window.open(地址，打开的方式);
    - window.open('百度一下，你就知道','_self');
    - 第二个参数
      - _self : 本窗口
      - _blank : 新窗口
  - window对象的函数调用的技巧：
    - 调用window的函数，省略window
- console
  - console.log();

6、document的函数

getElementById('元素的id值') : 元素对象
getElementsByClassName('class的名称') ：数组
getElementsByTagName('标签名') : 数组
getElementsByName('')

7、javascript的兼容性问题

有一些javascript在不同的浏览器当中
通过id来获取元素对象IE8以及IE8以下的版本当中无效的
项目应用的角度
- 打开某一个网站，您的浏览器版本过低，请下载最新版本访问本网站（政府类网站）
- 淘宝、京东、拼多多（要求的js代码必须具备兼容）

8、变量

var 变量名;
- 在一个函数内部，没有作用域的概念
let : 循环当中i let，如果var
const ：常量

9、选择结构

if(条件){
    
}

if(条件){
    
}else{
    
}

if(条件){
    
}else if(条件){
    
}else if(条件){
    
}............{
    
}else{
    
}

switch(数值){
    case 值:
        break;
    case 值:
        break;
    default:
        break;
}

10、循环

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

var i = 1;
while(条件){
    
    i ++;
}

11、常用关键字

特殊含义的单词
- function
- if
- else
- for
- var
let ： var定义的变量没有作用域概念的，let定义的变量的是有作用域
const ：定义常量

第三章 javascript的魅力详解

1、函数传参

参数：都代表当前函数在处理业务的同时，需要数据的支持，以形参的形式

2、访问dom对象属性的方式

通过.访问属性：当我们访问的属性是已知
[] : dom对象[值] 当我们访问的属性是未知
dom对象方式：伏笔

3、dom对象常用属性

dom对象可以访问所有的当前元素的行间属性
- class比较特殊，javascript关键字,具有特殊含义的单词 className
- 访问的属性是css语言提供的命名标准 - 解析小驼峰命名
javascript为dom对象提供了一些常用的属性
- innerHTML : 将文本解析成html代码
- innerText ：不会讲文本解析成html代码

4、提取行间事件

html开发规范：结构 + 样式 + 行为 + 事件

规范代码

window.onload = function (){
    
}

btn.onclick = function (){
    
}

小孙.失恋 = function (){
    
}

window.onload 编写js代码的时候，获取未加载到的元素对象

5、this

函数当中：当前对象
事件处理函数当中 : this ,事件源
普通函数： this代表window

对象当中： this代表当前对象

var p = {
    name : 'tom',
    age :12,
    sum : function (){
        this
    }
}

6、数组（浅谈）

var 变量 = [1,2,3,'我爱你中国']

第四章 javascript基础

1、javascript的组成部分

java ： jdk、jre、jvm
javascript ：
- EcmaScript ： javascript核心编译器，ES5
- dom : document object model 文档对象模型将页面当中所有的元素都可以当做一个对象
- bom : browser object model 浏览器对象模型浏览器当做对象 window

2、数据类型

弱类型语言：不强调类型的重要性，定义变量的时候不需要指定数据类型
```
var a = ''
```

类型的关键字

Number ：数字类型
String ：字符串 "" ''

Boolean ： true和false

真 ： true   非空字符串   非0数字   非空对象     
假 ： false  空字符串     0        空对象

Undefined ：未定义类型

Function ：函数类型

声明一个函数
function 函数名称(){
    
}

var 变量 = function (){
    
}

Object : 对象
Array ：数组类型

3、typeof

查看某一个变量的数据类型
调试
typeof 变量

4、前端页面用户输入

全部默认都是字符串
字符串和整数的整数： parseInt(字符串) : 整数 parseFloat(字符串) : 小数
NaN ：值 Not a Number

5、运算符

=== ：数据类型和值必须一致
== ：忽略数据类型，比较值

6、json

一种全新的数据类型，可以以指定格式来描述对象

{key : value,key : value,key : value}

var a = {
    key : value,
    key : value,
    key : function (){
        
    }
}

json对象.成员

第五章深入javascript

1、函数的返回值

函数的执行结果
函数是可以没有返回值
定义函数： return随意

2、可变长参数（不定参）

函数参数是不固定，函数的调用者来传递
函数不需要参数，函数内部 arguments 代替传递多个参数

3、数组

java数组：必须要指定数据类型，长度是固定
java当中集合类似我们js当中数组

4、声明数组

var 变量 = [元素，元素]
var 变量 = new Array();
函数
- 添加
  - push(元素) ：添加完毕之后数组的长度
  - unshift(元素) ：同上
- 弹出
  - pop() : 尾部弹出
  - shift() : 头部弹出
- 转换函数
  - concat(数组) ： a.concat(b) 对a和b的数组不会产生任何的影响,返回值，返回新的数组
  - join(字符串) ：可以将一个数组通过某一个字符串连接成新的字符串
```
var a = [1,2,3];
var s = a.join('---'); // "1---2---3"
```
  - 字符串.split(字符串) ：将字符串按照指定分隔符拆成数组 (不是数组的函数)
```
var a = '1--2--3';
var b = a.split('--');
```
- 删除和插入函数
  - splice(起始下标,长度) ：从数组的指定下标开始删除指定长度的元素
    - 有返回值：删除的元素
    - 对原生的数组有影响
  - splice(起始下标,长度，不定参)
    - 有返回值：删除的元素
    - 对原生的数组有影响，删除元素，不定参放置删除元素位置
    - 插入
  - 替换
- 切片函数
  - slice(起始下标，终止下标) ：可以从数组当中将某一段元素切出来形成一个数组，对原生数组不会产生任何影响，终止下标对应的元素不包含

第六章定时器

1、定时器

让某一个段代码在指定的时间周期当中反复执行

2、分类

间隔型定时器
- 某一个代码在指定的时间周期当中反复执行
延迟型定时器
- 某一个代码在指定的事件周期过后，只会执行一次

3、间隔型定时器

var 变量 = setInterval(function (){},时间);
应用
- 运动
- 关闭定时器： clearInterval(定时器)

4、延迟型定时器

var 变量 = setTimeout(function (){},时间);
clearTimeout(定时器)

第七章 ES6

1、let、const

let有作用域的概念
const常量

2、数组解构

将数组当中的元素获取出来
```
var [a,b,c] = [1,2,3];
```

3、json解构

将json对象当中的元素获取出来

var {name,age} = {name : '张三',age : 12}

特别重要： Vue当中会有大量的使用

4、数组的函数

添加： push、unshift
弹出： pop、shift
删除、插入： splice()
切片： slice
连接转换 : join()

高阶函数：

参数：是一个函数，不定参 value

1、forEach
数组.forEach(function (value,index,obj){
    执行代码
})

数组.forEach((value,index,obj) => {
    
})
2、filter
var a = 数组.filter(function (value,index,obj){
    return 布尔值;
})
// 将所有满足条件的元素放到新的数组当中

3、every
var a = 数组.every(function(value,index,obj){
    return 条件；
})
// 判断数组当中所有的元素是否都满足指定条件，都满足返回true，有一个不满足返回false
4、some
var a = 数组.some(function(value,index,obj){
    return 条件；
})
// 判断数组当中是有元素满足指定条件，只要有一个满足就返回true，如果都满足返回false
5、sort
数组.sort(function (a,b){
    return a - b;
})
对数组进行升序排列
数组.sort(function (a,b){
    return b - a;
})
对数组进行降序排列
6、map函数
var b = 数组.map(function(value,index,obj){
    return 值
})；
可以对数组进行元素进行操作，操作完毕的结果放到新的数组当中

5、箭头函数

函数：封装一个功能对应的代码

函数的声明：

1、方法1
function 函数名(形参){
    
}
2、方法2
var a = function (参数){

}
3、方法3
var a = (参数) => {}

优势：
- 代码得到了简化
- 如果一个函数只有一个参数，前面()可以省略的
- 如果一个函数内部的代码只有一行的时候，后面{}也可以省略
- 如果一个函数内部的代码只有一行的时候，一行返回了一个结果
- 改变this的指向性
```
a.onclick = function (){
    
    b.onmouseover = () => {
       
    }
}
```

6、this

事件处理函数：事件源
普通函数： this代表window
对象当中： this代表当前对象
setInterval当中 : this代表window

7、箭头函数的应用场景

当调用一个函数，函数的参数又是一个函数，函数参数写成箭头函数

var a = [1,2,3,4];
a.foreach(function (){
    this // 代表window
})

btn.onclick =function (){
    a.foreach((value,index,obj) => {
        this
    })
}


class Array{
    forEach(fn){
        for(let i = 0 ; i <= this.length - 1; i ++){
            fn(this[i],i,this);
        }
    }
}

回调函数（callback）：当一个函数并不是我们调用的，传递参数之后，底层代码自动调用的函数

8、模板字符串

当我们进行字符串拼接时候，以往做法是通过+来完成

可以将一个字符串的当中模板，并且通过特定的语法规则向模板当中加入对应的值

`字符串的内容` ： 需要一些读取变量，或者计算过程作为字符串内部连接。 ${表达式}

var name = '张三';
var age = 12;


// console.log('你好，我叫' + name + '，今年' + age)

console.log(`你好， 我叫${name}，今年${age + 12}岁`)

扩展：

${}在哪些地方我们使用过？

select * from user where id=${}

thymeleaf模板引擎当中
th:text="${}"

public Person{
    @Value("张三")
    private String name;
    @Value("#{1 + 12}")
    private int age;
}

ES6对于数组函数的扩展

1、find(value => {return 条件}) : 返回第一个满足条件的元素
var a = [1,2,3,4,5];
var b = a.find((value) => {
return value >= 3
});
console.log(b);
2、findIndex : 用法一致，获取下标

9、字符串常用方法

split(分隔符)

var a = 'tom-12-1.77';
var b = a.split('-'); ['tom',12,1.77]

indexOf(字符串)

var str = "The full name of China is the People's Republic of China.";
var pos = str.indexOf("China");
获取在str当中参数出现在字符串当中的第一次的下标

lastIndexOf(字符串)
- 参照indexOf，最后一次出现的下标
- 如果没有找到对应结果，返回-1
search(字符串) : 下标，作用和indexOf一致
- search支持正则表达式

slice(起始下标，终止下标)

var a = 'hello,how are you';
var b = a.slice(1,5);

substring(起始下标，终止)

var a = '1234567';
var b = a.substring(1,4); // 234
var b = a.substr(1,4);  // 2345

substr(起始下标，长度)
replace(旧字符串，新字符串) ：将字符串当中第一次出现旧字符串的位置替换成新字符串
trim() : 去除字符串两段的空白
charAt(下标) ：获取字符串当中指定字符

10、字符串新增功能

模板字符串
JSON.stringify(json对象) ：转换成过一个字符串
JSON.parse(字符串) : 转换为json
includes(字符串) :布尔值
replaceAll(旧的字符串，新的字符串)

第八章 DOM基础

1、DOM对象属性

原生html属性（class和-命名的特殊一点）
javascript提供的特有属性
- innerHTML
- innterText
DOM对象特有的属性
- children : 获取当前dom元素内部所有的子元素对象 (类似于数组)
- parentNode ：获取一个dom元素的父元素对象
- 首尾子节点
  - firstElementChild、firstChild（严重的兼容性问题）
  - lastElementChild、lastChild（严重的兼容性问题）
- 兄弟节点
  - nextElementSibling、nextSibling（严重的兼容性问题）
  - previousElementSibling、previousSibling（严重的兼容性问题）

2、名词

节点
html
- 标签
- 元素
- dom对象
- 节点

3、访问元素属性的几种方式

通过.访问属性：当我们访问的属性是已知
[] : dom对象[值] 当我们访问的属性是未知
dom对象方式：函数对于属性进行操作
- setAttribute("属性名","值")
- getAttribute("属性名")
- removeAttribute("属性名")

第九章 DOM应用

1、DOM的常用函数

document.createElement('标签名') : DOM对象
普通dom对象 : 父节点.appendChild(dom对象) 将一个dom对象追加到父节点当中
插入节点 : insertBefore（新的节点，旧的节点）
父节点.removeChild(子节点)

2、文档碎片

java代码

Person p1 = new Person();   // GC
p1 = new Person();

javascript

var p = document.getElementById('p1');

p = document.getElementById('p2')

document.createDocumentFragment();

3、高级属性

dom节点数组

第十章 JQuery

1、JQuery

是一个基于js的函数库
jquery.js文件：包含大量的函数

2、JQuery

JQuery()

JQuery(函数(){}) : 代表页面加载完毕之后执行的代码

JQuery(function (){
    
})

JQuery(() => {
    
})

window.onload = function (){
    
}

JQuery(字符串) : 选择器

<div id="oDiv"></div>

JQuery('#oDiv')
JQuery('.abc')
JQuery('div')
JQuery('#oDiv li')

var oDiv = document.getELementById('oDiv'); // dom对象

var oDiv = $('#oDiv')                       // jquery
oDiv.jquery当中提供的函数()

3、JQuery作用

javascript ：将页面当中的元素封装DOM对象，进而对DOM对象进行相应的操作
jquery ：将页面当中的元素封装成JQuery对象，进而可以访问JQuery提供的函数。
一旦我们将元素封装成jquery对象，只能访问jquery提供的函数，不能再访问javascript的dom对象的内容。

$(function (){
    
})

$(() => {
    
})

window.onoad = function (){
    $('#btn').click(() => {
        
    });
}

4、常用函数

样式相关函数
- css('样式名') : 样式值
- css('样式名','样式值') : 将某一个元素的样式进行设置
- css({样式名:样式值,样式名:样式值}) : 给元素设置多个样式
内部文档相关的函数
- html函数
  - html() : 获取元素内部的html代码
  - html('字符串') : 设置元素内部的文本，文本内部的html进行解析
- text函数
  - text() : 获取元素内部的文本
  - text('字符串') : 设置元素内部的文本，不会解析html
- val函数
  - val() : 获取一个元素的value属性值
  - val(值) : 设置

5、选择器

选择器（selector）：通过选择器语法规则获取页面当中的元素，jquery对象
基本选择器
- $('#id值') ：通过id获取一个元素的jquery对象
- $('.class值') ：通过class值来获取一组元素（并不是数组）
- $('标签名') : 通过标签名来获取一组元素（并不是数组）
- 多元素选择器: $('选择器1，选择器2，选择器3')
```
$('#abc,.a,li')
```
层级选择器
- $('选择器选择器') ：从第一个选择器对应的元素内部获取所有满足第二个选择器的所有元素
```
$('#abc .abc') : 获取id为abc的元素内部当中所有的class为abc的元素对象
$('li h3') : 获取所有li当中所有的h3
```
- $('选择器>选择器') ：从第一个选择器对应的元素内部获取满足第二个选择器的子元素
- $('选择器+选择器') ：相邻兄弟选择器，相邻的弟弟
- $('选择器~选择器') ：通用兄弟选择器，所有的弟弟

6、基本筛选器

可以将jquery获取到的多个元素进行筛选，筛选出来指定元素
$('选择器:筛选器')
:first
:last
:eq(下标)
:not(选择器) ：从多个元素当中筛选出来除了制定选择器之外的所有元素

7、内容筛选器

:contains(文本) ：筛选出来包含指定文本的元素
:empty

8、可见性筛选器

:hidden : 获取所有隐藏
:visibale :获取所有可见

9、属性

[属性名] ：
[属性名=值] ： $('input[type=text]')
[属性名!=值] ： $('input[type!=text]')
[属性名*=值] : 包含
[属性名^=值] ：指定值开始
[属性名$=值] ：指定值结尾

10、表单

:input : 获取所有表单元素
:text
:password
:checkbox

11、表单属性筛选

:selected

$('option:selected').val() : 获取所有被选中的option

:disabled

$(':text:disabled')  获取所有禁用状态文本框

:enabled

$(':text:enabled')   获取所有可用状态文本框

:checked
```
$(':checkbox:checked') 
```

第十一章 jquery事件处理

1、jquery事件处理

提供大量的函数，帮助我们给元素增加事件
javascript元素获取封装dom对象，访问属性 on事件

2、ready函数

window.onload = function (){
    
}

$(document).ready(() => {});

$(() => {
    
    
    
    
    
    
    1
})

3、如何将dom对象转换为jquery对象

dom对象转为为jquery对象 : $(dom对象)
jquery对象转换为dom对象：伏笔

4、事件分类

单击
双击
移入
移出
javascript处理事件
- html任意元素都提供了事件属性 onclick、onmouseover......、onblur、onfocus
jquery处理事件
- click(fn)
- dbclick(fn)
- 鼠标相关事件
  - mouseover(fn)
  - mouseout(fn)
  - mousedown(fn) : 左键
  - mouseup(fn) ：左键
  - mousemove(fn) :
- 焦点相关事件（element-ui大量前端验证）
  - blur(fn)
  - focus(fn)
  - 焦点：当某一个元素获取键盘的使用权，当前元素获取了焦点；如果某一个元素失去了键盘使用权，失去焦点
  - 哪一类元素可以获取焦点： input、select、textarea 可以获取焦点
- change(fn)
  - input、select、textarea加入
  - 当一个元素获得焦点之前和失去焦点之后的value值发生变化，触发change事件
- 键盘相关的事件：当一个元素可以通过键盘操作，可以进行键盘事件处理
  - input、select、textarea、window、document
  - keydown
  - keyup
  - keypress