JavaScript学习目标:
1、了解js的常识
2、js的语言基础
3、掌握js的事件处理机制
4、理解DOM模型
5、经典案例
js的常识
1、JavaScript简介
一种动态脚本语言,用于操作html(增加,修改,删除html标记)
以html标记的样式进行修改
获得浏览器信息以及用于AJax(可以用来异步向web服务器发送请求)
2、js在浏览器里执行,文件的后缀是 .js (也可在web服务器里执行)
客户端网页动态生成技术
ECMAScript 动态网页技术的标准,JavaScript的标准
js的语言基础
1、数据类型
js是一种弱类型的语言,对变量不用明确指定类型
2、分为基本数据类型和复合数据类型
基本数据类型:1、number
2、String
3、boolean
4、null
5、undefined
复合类型:1、Array
2、函数
3、Object
on:绑定事件处理代码到html标记上,当点击链接时,会产生点击事件,由onclick指定的onclick表示绑定点击事件
null和undefined与null的值相等
在比较时,true与1的值相等
day802,803
js的事件处理机制及dom模型
1、js的数据验证
2、dom模型:
(1)、什么是dom? document boject model
将一个结构化的文档(比如xml,html等)转化成一个条例dom要求的树,通过对树的操作(crud),来间接实现对结构分文档的操作。
(2)、浏览器如何显示html文档
浏览器读取html文档,将其转化为w3c dom树(即一棵对象树)放在内存里。如果dom树的节点发生任何改变,浏览器就会立即显示这种改变。
对w3cdom树,我们可以使用js来操控
(3)、w3c dom的结构
A.继承关系图:
除了Node,Document,Element,HTMLElement这四个节点以外,其他节点都与html文档中元素一一对应
Node-Document-HTMLDocument(代表整个html文档)-HTMLBodyElement
Node-Element-HTMLElement-HTMLFormElement(form)-HTMLInputElement,HTMLSelectElement-HTMLOptionElement(option)
Node-Element-HTMLElement-HTMLDivElement(div)
Node-Element-HTMLElement-HTMLTableElement(表格)-HTMLTableCaptionElement(caption),HTMLTableElement(行),
HTMLTableCellElement(单元格),HTMLULElement,HTMLOLElement,HTMLLIElement
B.如何访问某个节点
方式一:document.getElementById(id);
依据标记的id查找
方式二:parentNode previousSibling nextSibling childNodes firstChild lastChild
因为不同浏览器对dom模型中的空节点支持不一,所以,以上方法用得不多,尽量使用方式一。
getElementByTagName(tagName)
依据标签名查找,返回的是一个HTMLCollection。
对于某些节点,可以采用特殊的方式来访问:
Form:
elements属性值是一个HTMLCollection,HTMLCollection可以采用如下两种方式访问:
form1.elements[0]:第一个控件
from2.elements['id'/name]:得到的是该表单中id或者name对应的控件
elements属性也可以不写,这样:form['id'].value
document:
forms属性值是一个HTMLCollection,返回当前html文档里的所有表单对象。
C.修改节点
1)、value属性
2)、innerHTML属性
3)、style属性;对于某个节点,可以通过修改其style属性,来改变其样式。
style属性只能获得内联行样式
4)、className
5)、src属性
6)、options属性(Select)
D.添加节点
创建节点:document.createElement(Tag)-----tag:是一个合法的标签名
比如:document.createElement('div');
document.createTextNode(text)
创建一个字符节点:<div>hello</div>
添加节点:appendChild(node):添加到父节点的所有子节点的末尾
insertBefore(newNode,refNode):
E.删除节点:
parentNode.removeChild(node);
3、使用js改变html两个元素的默认行为
对于<form>,默认是当点击submit按钮,浏览器会提交该表单的数据
对于<a href="">test</a>,默认是,当点击链接之间的内容时,浏览器会跳转到href所指向的地址。
改变方式:
对于表单:如果onsubmit返回值是false,则表单不会提交。
<form οnsubmit="return false;">
... ...
对于链接:如果onclick返回值是false,则链接不会跳转
<a href="" οnclick="return false;">test</a>
4、select的常用属性和方法
length:
length属性可返回下拉列表中选项的数目。
selectedIndex:
selectedIndex属性可设置或返回下拉列表中被选
options:
返回包含<select>元素中所有<option>的一个数组,如果把options.length属性设置为0,select对象中所有选项都会被清除;
如果options.length属性的值比当前值小,出现在数组尾部的愿书就会被丢弃;
如果把options[]数组中的一个元素设置为,那么选项就会从select对象中删除
onchang:当改变选择时调用
Option对象的selected属性
true:表示该选项被用户选择了。
false:没有被选择
Option对象表示select中的某个选项,
text:
value:
可以使用如下语句创建一个Option
var op1=new Option(text,value);
select.options[1]=op1;
5、表格的常用属性与方法
length
length 属性可返回下拉列表中选项的数目。
selectedIndex
selectedIndex 属性可设置或返回下拉列表中被选选项的索引号
options
返回包含 <select> 元素中所有 <option> 的一个数组。
如果把 options.length 属性设置为 0,Select 对象中
所有选项都会被清除;
如果 options.length 属性的值比当前值小,出现
在数组尾部的元素就会被丢弃。;
如果把 options[] 数组中的一个元素设置为 null,
那么选项就会从 Select 对象中删除.
onchange
当改变选择时调用。
Option 对象的 selected 属性
true:表示该选项被用户选择了。
false:没有被选择
Option对象表示Select中的某个选项,
text:
value:
可以使用如下语句创建一个Option
var op1 = new Option(text,value);
select.options[1] = op1;
6、传统的html dom模型:
1、window
open方法:打开一个新的窗口,
第二个参数表示窗口名,如果该窗口名对应的窗口已经打开,则不再打开新的窗口
例如:window.open('1.html','new','height=100,width=200,top=0,left=0,toolbar=no,
menubar=no,scrollbars=no,resizable=no,location=no,status=no');
close方法:关闭窗口,返回值为窗口对象句柄
location属性:获得location对象
confirm方法:弹出一选择对话框,返回用户是否确认
prompt方法:弹出一个供用户输入信息的对话框,返回用户输入信息
setTimeout方法:用于在指定的毫秒数之后,调用函数或指定表达式
clearTimeout()方法:用于取消由setTimeout()方法设置的timeout
setInterval方法:按照指定的周期(以毫秒计)来调用函数或计算表达式
clearInterval:可取消由setInterval()设置的timeout,clearInterval()方法的参数必须是setInterval()返回值
opener:打开窗口
parent:当前窗口的父窗口
7、事件处理机制
1、事件对象
如何获得一个事件对象
对于ie:直接使用event对象
对于ff:函数中添加一个参数(event)
2、如何通过事件对象获得事件源
对于ie:srcElement属性
对于ff:target属性
3、事件冒泡机制
子节点产生的事件会向上抛给父节点
禁止事件冒泡:
e.cancelBubble=true;
4、事件处理代码绑定的方式
A、绑定到html元素之上
B、绑定到dom之上
A与B的区别:B方式不能传参
8、js框架
prototype:
$('id')相当于 document.getElementById('id');
$F('id')相当于 document.getElementById('id').value;
$('id1','id2','id3') 返回一个数组
9、两个内置对象
Date
Math
js笔记
最新推荐文章于 2024-09-11 07:39:18 发布