JS基础思维导图模板_ProcessOn思维导图、流程图

JS学习书单

1.JavaScript DOM编程艺术

锋利的jQuery

JavaScript高级程序设计

JavaScript语言精粹

ECMAScript

注释

//单行注释

/*多行注释*/

JSDoc注释

变量

变量名

区分大小写

首字母必须是字母、_、$

非关键字和非保留字

关键字

break

case

catch

continue

default

delete

do

else

finally

for

function

if

in

instanceof

比较运算符，boolean类型

new

return

switch

this

throw

try

typeof

var

void

while

with

保留字

boolean

abstract

子主题

byte

char

一个字节8位

class

const

常数；不变的

debugger

子主题

double

export

出口；输出

enum

extends

延展

final

float

goto

implements

工具；手段

import

let

int

2个字节，16位

interface

接口

long

4个字节，32位

native

本国的；天生的

package

private

protected

public

short

static

静止的

super

synchronized

同步的

throws

transient

短暂的；临时的

volatile

易变的；不稳定的

全局变量和局部变量

数据类型

基本类型

Number

数值类型

Int

Float

NaN

数值转换

Number()

parseInt

把字符串转为数值

parseFloat

数值范围

isFinite()

数学函数

JS内置的Math对象

Math.?

String

索引从0开始

type.charAt(i)

Boolean

！(取反)操作符

console.log(!1)//false

console.log(!1)//true

console.log(!!-3.14)//true

console.log(!!' ')//true

console.log(!![])//true

console.log(!!{})//true

console.log(!0)//true

console.log(!'')//true

console.log(!NaN)//true

console.log(!null)//true

console.log(!undefined)//true

console.log(!8-1)

-1

Null

var a = null;

typeof null为啥是object

历史遗留问题。。

Undefined

var a;

引用类型

对象字面量//推荐

键值对

读操作

bottle[x]

‘isKeepWarm’:true

bottle['isKeepWarm']

bottle.x//推荐

写操作

bottle.x=149;

bottle[x]=1;

构造函数

var a = new Object()

Object

数组

数组字面量

var bottles=['绿','蓝','紫']；

读操作

bottles[index]

写操作

bottles[0]='黄';

bottles.length=4;//不推荐

则bottles[3]打印出来为undefined；

Array构造函数

var bottles = new Array('绿','蓝','紫');

数组常用方法

push()

末尾加

pop()

末尾减

shift()

开头减

unshift()

开头加

slice()

选取

splice()

选取/剪切原数组

concat

合并

排序

reverse

倒序

sort

默认升序

降序

.sort(function(a,b){ return b-a； })

随机排序

.sort(function(){ return 0.5 - Math.random(); });

测试是否符合条件

every()

每个数据都要满足条件，则返回true

some()

任何一个数据满足条件，则返回true

includes()

判断当前数组是否包含某指定的值，返回true或false

filter()

条件筛选

返回所有满足条件数据组成的数组

让每个人都干点啥

forEach()

数组的每个元素执行一次提供的函数，该方法没有返回值

map()

创建一个新数组，其结果是该数组中的每个元素调用一个提供的函数

其他

indexOf、join等等

函数

函数构造

function关键字

函数名

参数

函数体

返回值

函数声明

function countB(color){}

Javascript Hoisting

函数表达式

var countB = function (color){}

作用域

全局作用域

函数作用域

全局变量

a=0

局部变量

var a=0;

运算符

算术运算符

+

-

*

/

%

++/--

自增

自减

赋值运算符

=

复合赋值运算符

+=

-=

*=

/=

%=

比较运算符

>

<

>=

<=

==或===

相等/严格相等(包括类型的比较)

!=或!==

不相等/严格不相等(推荐使用)

逻辑运算符

！（逻辑非）

&&（逻辑与）

||（逻辑或）

流程控制

if语句

三元运算符//简单时候用

判断条件？(条件为真时执行):(条件为假时执行)

switch语句

循环

while语句

do-while语句

至少执行一次

for语句

for-in语句

break语句

continue语句

BOM

window

global

窗口身份

系统对话框

alert

confirm

prompt

location

属性

hash

host

hostname

href

pathname

port

protocol

search

方法

assign()

reload()

replace()

navigator

userAgent

platform

history

属性

length

方法

back()

forward()

go()

DOM

node

nodeType

Element

var div = document.creatElement('div')

div.id='biu'

div.className='biub'

Attr

Text

CDATASection

EntityReference

Entity

ProcessingInstruction

Comment

Document

DocumentType

DocumentFragment

Notation

nodeObject.nodeType

nodeObject.nodeName

nodeObject.nodeValue

DOM查找

document.getElementById();

[document | Element].getElementsByClassName();

[document | Element].getElementsByTagName();

[document | Element].querySelector();

[document | Element].querySelectorAll();

DOM新增和删除

新增

DocumentFragment

appendChild()

insertBefore()

删除

removeChild()

DOM修改

property和attribute

1.公认的attribute会映射到property

2.读写方式

修改样式

$0.className='blue';

$0.style.color='blue';

浏览器接口

classList

$0.classList.remove('red');

$0.classList.add('blue')

修改内容

innerHTML

outerHTML

DOM遍历

HTMLcollection

.children

parentElement/parentNode

访问兄弟节点

previousElementSibling

previousSibling

回调函数

事件

事件处理程序

h1.addEventListener(type,handle,false)

h1.remove.EventListener(type,handle,false)

事件对象

function(event){}

event.stopPropagation()

事件兼容性初探

事件模型

事件对象

获取对象的方式不同

事件对象几个常用的属性和方法也不标准

跨浏览器事件

封装了on函数

绑定事件的历史演进

事件类型

鼠标类

click

mousedown

mouseup

mouseenter

mouseleave

mouseover

mouseout

mousemove

键盘类

keydown

keypress

keyup

UI类事件

load

unload

resize

scroll

jQuery简单教程

$

选择器

基本选择器

$(tag)

$(.class)

$(#id)

$(*)

组合选择器

$(selector1,selector2)

$(selector1 selector2)

$(selector1>selector2)

$(selector1+selector2)

其他选择器

$(selector : first-child)

$(selector : last-child)

$(selector : eq(index))

$(attribute = value)

遍历DOM元素

添加和删除DOM元素

新增

删除

jQuery事件监听

HTML中引入JS的方式

行内

外链

内嵌