静态站+js
2019-03-20 16:56:40 4 举报AI智能生成
登录查看完整内容
为你推荐
查看更多
sx
作者其他创作
大纲/内容
静态站+JS
JavaScript
什么是JavaScript
JavaScript主要用来向HTML页面中添加交互行为。JavaScript是一种脚本语言，语法和Java类似。JavaScript一般用来编写客户端脚本。JavaScript是一种解释形语言，边执行边解释。
组成
核心语法（ECMAScript）浏览器对象模型（BOM）文档对象模型（DOM）组成
语法
使用<script></script>标签
<script type=\"text/javascript\"><!--JavaScript语句--></script>
使用外部JS文件
<link type=\"text/javascript\" src=\"name.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 声明
<html></html>
网页头部
<head></head>
<title></title>
<meta/>
主题部分
<body></body>
<iframeset></iframeset>
网页基本标签
标题标签
<h1></h1>
段落标签
<p></p>
换行标签
<br/>
水平线标签
<hr/>
字体样式标签
加粗
<strong></strong>
斜体
<em></em>
特殊符号
空格
 
大于号>
>
小于号<
<
引号
"
版权符号
©
图像标签
<img />
src=\"图像地址\"
alt=\"text\"
title=\"text\"
width=\"x\"
weight=\"y\"
链接标签
<a></a>
href=\"链接路径\"
电子邮件：“mailto:”
target=\"目标窗口位置\"
_self
_blank
name=\"名字\"
列表、表格与框架
列表
定义列表
<dl></dl>
<dt></dt>
<dd></dd>
有序列表
<ol></ol>
<li></li>
type取值
1
A/a
Ⅰ/i
无序列表
<ul></ul>
实体圆心
disc
实体方心
square
空心圆
circle
表格
<table></table>
<tr></tr>
<td></td>
align
左对齐
left
居中对齐
center
右对齐
right
valign
顶端对齐
top
middle
底端对齐
bottom
基线对齐
baseline
跨列
colspan
跨行
rowspan
框架
<frameset>框架
横向分割
cols=\
纵向分割
rows=\
border=\"5\"
frame src=\"引用页面\"
<iframe>
引用页面地址
src=“path”
框架标识名
name
边框
frameborder=\"x\"
滚动条
scrolling=\"yes/no\"
是否允许调整框架窗口大小
noresize=\"noresize\"
框架宽度
width
框架高度
height
表单
<form></form>
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
指定按钮是否被选中
<select></select>
<option></option>
selected=\"selected\"
默认选中
<textarea></textarea>
显示列数
cols
显示行数
rows
wrap属性
通常情况下，当用户在输入文本区域中键入文本后，浏览器会将它们按照键入时的状态发送给服务器。只有用户按下 Enter 键的地方生成换行。如果您希望启动自动换行功能（word wrapping），请将 wrap 属性设置为 virtual 或 physical。当用户键入的一行文本长于文本区的宽度时，浏览器会自动将多余的文字挪到下一行，在文字中最近的那一点换行。wrap=\"virtual\" 将实现文本区内的自动换行，以改善对用户的显示，但在传输给服务器时，文本只在用户按下 Enter 键的地方进行换行，其他地方没有换行的效果。wrap=\"physical\" 将实现文本区内的自动换行，并以这种形式传送给服务器，就像用户真的那样键入的。因为文本要以用户在文本区内看到的效果传输给服务器，因为使用自动换行是非常有用的方法。如果把 wrap 设置为 off，将得到默认的动作。
样式css
基本语法
选择器{声明1；}
选择器
标签选择器
<img>
<p>
<h1>
...
类选择器
.class{}
id选择器
#id{}
<style type=\"text/css\"/>
css样式
行内样式
标签内使用style引入样式
内部样式
样式写在<head>的<style>标签中
外部样式
css代码保存在扩展名为。css的样式表中
css复合选择器
后代选择器
例：h1 strong
交集选择器
例：p.a
并集选择器
JavaScript数组
创建方法
空数组
var obj=new Array();
指定长度数组
var obj=new Array(size);
指定元素数组
单维数组
多维数组
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()
对字符数组或数字数组进行排序
默认为按字符串比较
按数值大小比较需函数支持（升序）
数组转换
toString()
转换为字符串并返回
toLocaleString()
转换为本地格式字符串并返回
join()
用指定分隔符分割数组并转换为字符串
ECMAScript5方法
位置方法
indexOf
从数组的起始位置开始查找
lastIndexOf
从数组的结束位置开始查找
迭代器
every
filter
返回值为true的所有数组成员
forEach
无返回值
map
返回每次函数调用的结果数组
some
缩小方法
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
功能：获取已知节点的父节点
子主题
0 条评论
回复 删除
下一页
