首页  思维导图  详情

静态站+js

2019-03-20 16:56:40   4  举报





AI智能生成

调查

作者其他创作

大纲/内容

静态站+JS

JavaScript

什么是JavaScript

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

组成

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

语法

使用<script></script>标签

使用外部JS文件

直接在HTML标签中

函数

变量定义

创建数组

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

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

自定义函数

常用的系统函数

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-1Math.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() 改变事件

对象

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元素是元素节点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属性来循环节点列表

导航节点关系

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

根节点

可以访问全部文档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取值

A/a

Ⅰ/i

无序列表

实体圆心

disc

实体方心

square

空心圆

circle

表格

align

左对齐

left

居中对齐

center

右对齐

right

valign

顶端对齐

top

middle

底端对齐

bottom

基线对齐

baseline

跨列

colspan

跨行

rowspan

框架

<frameset>框架

横向分割

cols=\

纵向分割

rows=\

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

文件域

隐藏域

readonly

文本框

disabled

禁用

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选择器