Web（三）

JavaScript: 完成页面的动态效果

1.ECMAScript

2.事件 - 标签有关
onblur - 失去焦点, 通常用于input标签
onchange - 内容改变, 通常用于select标签
onclick - 单击, 可以用于所有元素
onfocus - 获得焦点, 通常用于input标签
onkeydown - 键盘按下, 通常用于input标签
onload - 某个页面或图像被完成加载, 通常用于body标签
onmouseover - 鼠标被移到某元素之上
onmouseout - 鼠标移开
onsubmit - 提交按钮被点击, 用于form标签

3.onsubmit详解:
提交按钮点击后, 触发onsubmit事件
return false - 表单数据不能提交到服务器
return true - 可以提交到服务器
onsubmit = ‘return checkUserName()’
4.案例一: 知识点
通过id获得元素: document.getElementById(id)
获得input输入框的值: xx.value
正则表达式: /^正则表达式$/
判断正则表达式匹配的方法 regex.test(string)

5.案例二: 知识点
1.document.getElementById(id);
document: 文档对象, html文档的加载是按照书写顺序执行的
id: 元素加载完成后才会对应出现元素的属性
所以, document.getElementById(id) 使用的前提是
元素已经加载好
解决方案: 1.script标签书写在元素后面
2.script标签在head中
body οnlοad=“m1()” -> 页面加载函数
2.修改图片路径
img.src = “”;
3.定时周期性设置
timer = setInterval(“fun1()”, time)
clearInterval(timer);
6.数组:
new Array();
new Array(size);
new Array(element0, element1, …, elementn);
var arr = [element0, element1…];

数组长度可变

补充: parseInt()
Math.random()

7.案例三: 知识点
1.一次性定时设置
timer = setTimeout(“fun1()”, time)
clearTimeout(timer); – 了解
2.显示和隐藏效果
css: display: block inline none

8.BOM: Window Navigator Screen History Location
window在使用时可以省略
window.onload - 页面加载函数
window.history
.document -> DOM
.location
.Navigator
.Screen – window可以获得其他的BOM对象
函数:
window.alert()
confirm()
prompt()

window.setInterval()
setTimeout()
clearInterval()
clearTimeout()

close()
open()

history对象:
go()
forward()
back()
location对象:
属性 href 设置或返回完整的 URL

9.案例四: 知识点

1. span用于修饰单独的文本样式

2. 修改标签体的内容, 不能用value属性
   
   innerHTML:将内容看做HTML标签解析
   innerText:将内容当成纯文本

   a.innerHTML = “< font color=‘red’>内容”;
   a.innerText = “< font color=‘red’>内容”;
   3.事件: event.preventDefault();