document 对象
创建新节点
-document.createElement(elementName)
-elementName,要创建的元素的标签名称
-返回的是新创建的节点
js 代码如下:
var newNode = document.createElement("input");
//设置节点信息
newNode.type="text";
newNode.value="marry";
newNode.style.color="red";
增加新节点
parentNode.appendChild(newNode);
追加,新节点作为父节点的最后一个子节点添加
parentNode.insertBefore(newNode,refNode);
refNode:参考节点,新节点位于参考节点之前添加
//c 作为兄弟节点添加
A.inserBefore(c,d);
//添加一个孩子 b
A.appendChild(b);
- 删除节点
node.removeChild(childNode)
删除某个子节点,childNode 必须是 node 的子节点
自定义对象
1. 自定义对象概述
自定义对象是一种特殊的数据类型,由属性和方法封装而成。
属性指与对象有关的值 对象.属性名
方法指对象可以执行的行为或可以完成的功能 对象.方法名()
2. 创建对象
- 直接创建对象
直接创建 Object 对象
function testObject(){
var personObj = new Object();
//添加属性
personObj.name="jack";
personObj.age="18";
//添加方法
personObj.say = new Function("alert('hello')");
//测试
personObj.say(); //hello
alert(personObj.age); //18
}
- 使用构造器创建对象
定义构造函数,以创建自定义的对象
语法:function ObjName (参数1,参数2,···){}
function Person(n,a){
//定义 name 和 age 属性
this.name=n;
this.age=a;
//定义方法 showName
this.showName = function(){
alert("my name is"+ this.name);
}
//定义方法 introduceSelf
this.introduceSelt = introFunc();
}
function introFunc(){
alert(this.name +":"+ this.age);
}
//测试对象
function test(){
var p1 = new Person("marry",10);
alert(p1.name);
alert(p1.age);
alert(p1.showName());
alert(p1.introduceSelf());
}
- 使用 JSON 创建对象
JavaScript Object Notation,是一种轻量级的数据交换格式。
- 使用 名/值 对的方式定义
- 名需要用“”引起来,如果值是字符串类型也需要用 “”引起来
- 多对定义之间用”,”号隔开
var obj = {"name":"Dave","age":88};
//测试对象
alert(obj.name);
js 中的事件和 event 对象
事件
1. 什么是事件?
页面元素状态发生改变,用户在操作键盘或鼠标时触发的动作。事件触发后都会产生 event对象
- 键盘事件
- 鼠标事件
- 状态改变事件
2. 事件属性
通过一个事件属性,可以在某个事件发生时对某个元素进行某种操作。
3. 事件的定义
//<html>中的代码
<input type="button" value="按钮" onclick="method();">
//js 中的代码
btnObj.onclick = method;
//或者
btnObj.onclick = function(){
alert("hello");
}
4.取消事件
onXXX = “return false;”;
event 对象
1. event 对象概述
任何一个事件触发时都会产生 event 对象,event 的对象记录了事件触发时鼠标的位置、键盘按键状态和触发对象等信息。使用 event 对象可以获得相关信息,比如单击位置、触发对象等。
2. 获取 event 对象
根据不同的浏览器获取 event 对象有所不同
IE 浏览器直接使用 event,代码如下:
<p onclick="alert(event.clientX);">p text</p>
<div onclick="func();">div text</div>
function func(){
alert(event.clientX +":"+ event.clientY);
}
Firefox 浏览器,js 中的代码不能直接写 event(需要作为参数传入) ,代码如下:
<div onclick="func(event)">div text</div>
function func(event){
alert(event.clientX+":"+event.clientY);
}
3. 如何使用 event 对象
事件源:触发事件的元素(事件的目标节点)。
对于 event 对象经常需要获得事件源,而不同浏览器又有所区别
IE 浏览器:event.srcElement
FireFox 浏览器:event.target
获取事件源代码如下:
<div onclick="func(event)">div text</div>
//IE
function func(e){
alert(e.srcElement);
}
//FireFox
function func(e){
alert(e.target);
}
//考虑兼容问题可以这样写:
fuction func(e){
var obj = e.srcElement || e.target
alert(obj);
}
事件处理机制
1. 冒泡机制
当处于 DHTML 对象模型底部的事件触发时,会依次激活上面的对象的同类事件的处理。
2. 可以取消事件冒泡
event.stopPropagation();
event.cancelBubble = true;