JavaWebDay10
课程大纲
1、BOM对象
2、DOM对象
3、HTMLDom
4、事件
第一章 BOM对象
1、window对象的属性
A. 获取其他BOM对象:
history
location
Navigator
Screen
B. 获取DOM对象
document
2、location对象
A.方法
reload() 重新加载"刷新"
B.属性
href 跳转到某个页面,获取页面地址
C.例如:
var v1 = location.href; //这里的v1 获取页面的地址
location.href = "http://www.itheima.com"; //这里就是跳转到 黑马程序员 页面
3、history历史记录
A.方法
a.forward() //前进历史记录
b.back() //后退历史记录
c.go(数字) //正数是前进,负数是后退
B.属性
length //当前的窗口历史记录的数据(注意:不是浏览器,是窗口)
第二章 DOM对象
1、含义
DOM 文档对象模型 document object modle
2、分类
A.DOM核心
a.节点 Node --> (父亲)
b.文档 Document
c.元素 Element
d.属性 Attribute
e.文本 Text
f.注释 Comment
B.HTMLDom
C.XMLDom
3、获取Element的对象方法
A. getElementById("id值") //通过id获取对象,返回值是唯一的一个对象(id在页面当中唯一)
B. getElementsByTagName("标签") //通过标签的名称获取所有的对象,返回的是一个数组.
C. getElementsByClassName("class值") //通过class属性,获取所有的对象,返回的是一个数组.
D. getElementsByName("name值") //通过name属性,获取所有的对象,返回的是一个数组
4、创建Document几个对象的方法
A. createAttribute() //创建属性
B. createComment() //创建注释
C. createElement() //创建元素
D. createTextNode() //创建文本节点
5、Elemnet元素相关的方法
A. removeAttribute() //删除属性
B. setAttribute() //设置属性
6、Node相关的方法
A.增删改方法
a.增 appendChild()
b.删 removeChild()
c.改 replaceChild()
B.属性
parentNode //返回父节点的对象
7、a标签的超链接
A.两个效果
a.样式
b.界面跳转
B.阻止界面跳转的代码
javascript:void(0);
第三章 HTMLDom
1、关于 innerHTML 的用法
A. 设置和获取标签
B. 控制标签样式
2、设置样式
A.自己代码设置
标签的对象.style. ...
B.用CSS现有的
标签的对象.className = CSS的class属性
第四章 事件
1、事件的四个组成部分
A. 事件 (用户的操作"点击","双击","移动","改变"...)
B. 事件源(按钮,图片,文本输入框...)
C. 监听器 (出现操作之后,需要执行的代码)
D. 注册监听器 (绑定事件源和监听器之间的操作)
2、常见的事件
A. 点击事件:
a. onclick:单击事件 //重点
b. ondblclick:双击事件
B. 焦点事件
a. onblur:失去焦点
b. onfocus:元素获得焦点。
C. 加载事件:
a. onload:一张页面或一幅图像完成加载。
D. 鼠标事件:
a. onmousedown 鼠标按钮被按下。
b. onmouseup 鼠标按键被松开。
c. onmousemove 鼠标被移动。
d. onmouseover 鼠标移到某元素之上。
e. onmouseout 鼠标从某元素移开。
E. 键盘事件:
a. onkeydown 某个键盘按键被按下。
b. onkeyup 某个键盘按键被松开。
c. onkeypress 某个键盘按键被按下并松开。
F. 选择和改变
a. onchange 域的内容被改变。
b. onselect 文本被选中。
G. 表单事件:
a. onsubmit 确认按钮被点击。 //重点(存在返回值,true提交.false不提交)
b. onreset 重置按钮被点击。
案例1: 表单提交事件(写法1)
<!-- HTML的写法 -->
<form method="get">
<input type="text" name="password"/>
<input type="submit"/>
</form>
<!-- JavaScript 脚本-->
<script>
//设置一个页面加载完毕的事件
window.onload = function (ev) {
//获取到表单标签,设置事件
var mform = document.getElementsByTagName("form")[0];
mform.onsubmit = function () {
return false;
}
}
</script>
案例2: 表单提交事件(写法2)【推荐】
<!--
1.在HTML的form表单标签上面,设置属性 onsubmit="return tijiao()"
2.在JavaScript当中定义函数,函数的返回值如果是true就可以提交.是false就不能提交
-->
<!-- HTML的写法 -->
<form method="get" onsubmit="return tijiao()">
<input type="text" name="password"/>
<input type="submit"/>
</form>
<!-- JavaScript 脚本-->
<script>
//定义函数
function tijiao() {
return false;
}
</script>