静态站+js 思维导图模板_ProcessOn思维导图、流程图

JavaScript

什么是JavaScript

JavaScript主要用来向HTML页面中添加交互行为。
JavaScript是一种脚本语言，语法和Java类似。
JavaScript一般用来编写客户端脚本。
JavaScript是一种解释形语言，边执行边解释。

组成

核心语法（ECMAScript）
浏览器对象模型（BOM）
文档对象模型（DOM）组成

语法

使用<script></script>标签

使用外部JS文件

直接在HTML标签中

函数

变量定义

变量声明语法：var 变量名=跟什么类型就是什么类型
数据类型：undefined:未定义,null:空;String:字符串类型;boolean:布尔型;number:数值类型

创建数组

var arr=new Array();
arr["name"]="黄刚";
arr["sex"]="女";
arr["age"]=18;
for(var item in arr){
document.write(arr[item]+"<br/>")
}

=,==,===

=:赋值符号
==：判断数值相等
===：绝对相等，及数值与符号完全相等

自定义函数

function add(a,b){
return a+b;
document.write("123");
}
var add2=function(){
document.write("大家好");
}

常用的系统函数

argument.length;//接收传参个数，arguments是一个动态数组，接收后可以使用循环遍历
parseInt();//转为整数。
parseFloat();//转换为浮点型。
isNaN();//判断非数字，返回布尔值
eval();//计算JavaScript字符串，并把它作为脚本代码；来执行。
split();//字符串切割。
join();//数组以指定字符串分割
substring();字符串切割
reverse();//字符串反转
//时间函数
var dd=new Date();//标准时间
var a=dd.toLocaleString();//本地时间，本机时间
var b=dd.getFullYear();//获取当前年份
var c=dd.getMonth()+1;//获取当前月份（需要+1）
var d=dd.getDate();//获取当前日期
alert(dd.getHours());//获取当前小时
alert(dd.getMinutes());//获取当前分钟
alert(dd.getSecounds());//获取当前秒
//数学函数
Math.random();//随机数0-1
Math.round(1.2);//向上加0.5向下取整
Math.ceil(1.2)；//向上取整
Math.floor(1.2);//向下取整
Math.abs(-1.2);//取绝对值

函数的调用

1、直接add()调用
2、事件触发

事件

常见的HTML事件

onclick() 用户点击HTML元素
onsubmit() 提交事件
onchange() 改变事件

对象

创建对象
//1
function Person(name,age){
this.name=name;
this.age=age;
this.showAge=function(){return this.age;};
this.son=new Array(1,2,3);
}
//2
var p1=new Object();
p1.name="张辽";
p1.age=221;
//3
var p2={
name:"张飞",age:21,sex:"男",arr:[1,2,3]
.wife:{name:"西施",age:18},he:function(){return this.age;}
}

js控制表单提交

http://www.cnblogs.com/tiger95/p/6893664.html

DOM

文档对象模型（Document Object Model）
是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，
组织页面的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM

核心DOM

针对任何结构化文档的标准模型

XML DOM

针对XML文档的标准模型

HTML DOM

针对HTML文档的标准模型

HTML的标准对象模型
HTML的标准编程接口
W3C标准

HTML DOM

标准

整个文档是一个文档节点
每个HTML元素是元素节点
HTML元素内的文本时文本节点
每个HTML属性是属性节点
注释是注释节点

节点树

节点父、子和同胞

在节点树中，顶端节点被称为根
每个节点都有父节点、除了根
一个节点可拥有任意数量的子
同胞是拥有相同父节点的节点

方法和属性

常用方法

getElementById(id)
appendChild(node)
removeChild(node)

常用属性

innerHTML节点文本值
parentNode节点父节点
childNodes节点子节点
attributes节点属性节点

innerHTML属性

获取元素内容的最简单方法是使用 innerHTML 属性。

innerHTML 属性对于获取或替换 HTML 元素的内容很有用。

nodeName属性

nodeName 是只读的
元素节点的 nodeName 与标签名相同
属性节点的 nodeName 与属性名相同
文本节点的 nodeName 始终是 #text
文档节点的 nodeName 始终是 #document

nodeValue属性

元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值

nodeType属性

访问

通过使用 getElementById() 方法
通过使用 getElementsByTagName() 方法
通过使用 getElementsByClassName() 方法

getElementById()

getElementsByTagName()

getElementsByClassName()

修改

内容

元素

appendChild() 创建新的HTML元素

insertBefore() 创建新的HTML元素

removeChild() 删除已有的HTML元素

replaceChild() 替换HTML元素

事件

练习

导航

节点列表

getElementsByTagName()方法返回节点列表，节点列表是一个节点数组

节点列表长度

length属性定义节点列表中节点的数量
可以使用length属性来循环节点列表

导航节点关系

能够使用三个节点属性：
parentNode
firstChild
lastChild
在文档中进行导航

根节点

可以访问全部文档
document.documentElement -全部文档
document.body - 文档的主体

childNodes 和 nodeValue

除了innerHTML属性，您也可以使用
childNodes和nodeValue属性来获取元素的内容

认识html

开头、结尾

!DOCTYPE 声明

网页头部

<meta/>

主题部分

网页基本标签

标题标签

段落标签

<p></p>

换行标签

<br/>

水平线标签

<hr/>

字体样式标签

加粗

斜体

特殊符号

空格

&nbsp

大于号>

&gt

小于号<

&lt

引号

&quot

版权符号

&copy

图像标签

<img />

src="图像地址"

alt="text"

title="text"

width="x"

weight="y"

链接标签

<a></a>

href="链接路径"

电子邮件：“mailto:”

target="目标窗口位置"

_self

_blank

name="名字"

列表、表格与框架

列表

定义列表

有序列表

type取值

1

A/a

Ⅰ/i

无序列表

type取值

实体圆心

disc

实体方心

square

空心圆

circle

表格

align

左对齐

left

居中对齐

center

右对齐

right

valign

顶端对齐

top

居中对齐

middle

底端对齐

bottom

基线对齐

baseline

跨列

colspan

跨行

rowspan

框架

<frameset>框架

横向分割

cols="25%,50%,*"

纵向分割

rows="50%,*"

border="5"

frame src="引用页面"

引用页面地址

src=“path”

框架标识名

name

边框

frameborder="x"

滚动条

scrolling="yes/no"

是否允许调整框架窗口大小

noresize="noresize"

框架宽度

width

框架高度

height

表单

method="post"

常用get|post

action="result.html"

向哪发送表单数据

enctype="multipart/form-data"

表单编码属性

<input>

type

text

文本

password

密码

checkbox

复选框

radio

单选框

submit

reset

重置按钮

hidden

image

提交按钮

button

普通按钮

file

文件域

hidden

隐藏域

readonly

文本框

disabled

禁用

name

value

size

指定宽度

maxlength

输入最大字符

checked

指定按钮是否被选中

selected="selected"

默认选中

显示列数

cols

显示行数

rows

wrap属性

通常情况下，当用户在输入文本区域中键入文本后，浏览器会将它们按照键入时的状态发送给服务器。只有用户按下 Enter 键的地方生成换行。

如果您希望启动自动换行功能（word wrapping），请将 wrap 属性设置为 virtual 或 physical。当用户键入的一行文本长于文本区的宽度时，浏览器会自动将多余的文字挪到下一行，在文字中最近的那一点换行。

wrap="virtual" 将实现文本区内的自动换行，以改善对用户的显示，但在传输给服务器时，文本只在用户按下 Enter 键的地方进行换行，其他地方没有换行的效果。

wrap="physical" 将实现文本区内的自动换行，并以这种形式传送给服务器，就像用户真的那样键入的。因为文本要以用户在文本区内看到的效果传输给服务器，因为使用自动换行是非常有用的方法。

如果把 wrap 设置为 off，将得到默认的动作。

样式css

基本语法

选择器{声明1；}

选择器

标签选择器

<img>

<p>

<h1>

...

类选择器

.class{}

id选择器

#id{}

css样式

行内样式

标签内使用style引入样式

内部样式

样式写在<head>的<style>标签中

外部样式

css代码保存在扩展名为。css的样式表中

css复合选择器

后代选择器

例：h1 strong

交集选择器

例：p.a

并集选择器

例：h3,p,h1,...

JavaScript

JavaScript数组

创建方法

空数组

var obj=new Array();

指定长度数组

var obj=new Array(size);

指定元素数组

var obj=new Array(元素1,元素2,...)

单维数组

var obj=[元素1, 元素2，...]

多维数组

var obj=new Array([元素序列1]，[元素序列2]，...)

基本操作

存取数组元素

单维数组

数组名[下标索引]

多维数组

数组名[外层数组下标][内层元素下标]

特性

数组长度是弹性的，可自由伸缩

数组下标从0开始

下标类型

数值

非数值

转为字符串
生成关联数组
下标将作为对象属性的名字

数组元素可添加到对象中

增加数组

使用"[]"运算符指定一个新下标

删除数组

delete数组名[下标]

遍历数组

for(var 数组元素变量in数组)

数组属性

constructor引用数组对象的构造函数

length返回数组的长度

prototype通过增加属性和方法扩展数组定义

ECMAScript3方法

添加

push()在数组末尾添加数组

unshift()在数组头部添加元素

concat()合并两个数组

删除

pop()删除并返回数值的最后一个元素

shift()删除并返回数组的第一个元素

子数组

splice()

删除任意数量的项

要删除的起始下标
要删除的项数

在指定位置插入指定项

起始下标
0（不删除任何项）
要插入的项

替换任意数量的项

起始下标
要删除的项数
要插入的项

slice()

功能

从已有数组中选取部分元素构成新数组

参数

返回项起始位置
返回项的结束位置

数组排序

reverse()颠倒数组中元素的顺序

sort()

功能

对字符数组或数字数组进行排序

特性

默认为按字符串比较

按数值大小比较需函数支持（升序）

function compare(value1,value2){
if(value1<value2){
    return -1;
}else if(value1>value2){
    return 1;
}else{
    return 0;
}
}

数组转换

toString()

转换为字符串并返回

toLocaleString()

转换为本地格式字符串并返回

join()

用指定分隔符分割数组并转换为字符串

ECMAScript5方法

位置方法

indexOf

从数组的起始位置开始查找

lastIndexOf

从数组的结束位置开始查找

迭代器

every

如果该函数对每一个都返回true,则返回true

filter

返回值为true的所有数组成员

forEach

无返回值

map

返回每次函数调用的结果数组

some

有任意一项返回true,则返回true

缩小方法

reduce

从数组起始位开始遍历

reduceRight

从数组末尾开始遍历

JavaScript DOM基本操作

获取节点

document

getElementById

语法：document.getElementById(元素ID)

功能：通过元素ID获取节点

getElementsByName

语法：document.getElementsByName(元素name属性)

功能：通过元素的name属性获取节点

getElementsByTagName

语法：document.getElementsByTagName(元素标签)

功能：通过元素标签获取节点

节点指针

firstChild

语法：父节点.firstChild

功能：获取元素的首个子节点

lastChild

语法：父节点.lastChild

功能：获取元素的最后一个子节点

childNodes

语法：父节点.childNodes

功能：获取元素的子节点列表

previousSibling

语法：兄弟节点.previousSibling

功能：获取已知节点的前一个节点

nextSibling

语法：兄弟节点.nextSibling

功能：获取已知节点的后一个节点

parentNode

语法：子节点.parentNode

功能：获取已知节点的父节点

子主题