js2

四、应用:DHTML--动态效果，比如浏览器信息，屏幕信息等将
1.整个窗口均实现对象化,结构如下
window 
document----html文档-------重点
screen
history
location
event--------重点
navigator
2.window 对象：父对象
打开对话框窗口：window.alert("ss");
window.confirm("ss");
window.prompt();
打开新窗口
window.open(url,name,config);
设置窗口的外观
3.周期性定时器：
window.setInterval(function,mm);
clearInterval


例：
====================================================================
<form>
<input type="text" id="textTime"/>
<input type="button" value="获得时间" onclick="showTime();"/>
<input type="button" value="开始" onclick="startTime()"/>
<input type="button" value="停止" onclick="stopTime()"/>
</form>
=====================================================================
function showTime(){
var t=new Date();
document.getElementById("textTime").value=t.toLocaleTimeString();
}
var timer;
function startTime(){
timer=window.setInterval(showTime,1000);

}
function stopTime(){
window.clearInterval(timer);
}
======================================================================
4.一次性定时器
setTimeout(exp,time)一次性触发代码exp
返回已经启动的定时器
clearTimeout(tID)停止启动的定时器
---tID启动的定时器对象
例如：
<input type="button" value="5s后弹出一个hello" onclick="wait();"/>
单击<a href="javascript:cancelAlert();">这里</a>取消
==================================================================
var timer2;
function wait(){
timer2=window.setTimeout("alert('hello')",5000);
}
function cancelAlert(){
window.clearTimeout(timer2);
}
====================================================================
5. document对象：整个html文档，操作文档中任何内容,通过document--将整个html文档作为一棵节点树（树形结构）
a)找到目标节点：
方法一：精确查找（与位置无关）
document.getElementById(idValue).value---返回//精确查找，不关心文档结构
document.getElementById(idImage).src="21.jpg";


方式二：根据上下层次关系
xxx.parentNode/firstChild/lastChild/childNodes


方式三：根据元素的名称找 由标签找元素
xxx.getElementsByTagName
如：document.getElementsByTagName("a");
tableObj.getElementsByTagName("tr");---返回数组


b)读取或者修改节点信息：
规则一：将html标签对象化
<input type="text" id="textName" value="mary"/>
<img id="idImage" src="1.jpg"/>


例：
<img src="image/1.jpg" id="imgObj1"/>
<p id="pObj1">我爱我的国家</p>


<input type="button" value="标签操作" onclick="testDocument();"/>
===========================================================================
function testDocument(){
var imgObj=document.getElementById("imgObj1");
imgObj.src="image/2.jpg";
var pObj=document.getElementById("pObj1");
pObj.style.color="red";
pObj.style.backgroundColor="yellow";//background-color(取减号，首字母大写)
pObj.style.fontSize="50px";//font-size(取减号，首字母大写)
pObj.innerHTML="泾川职业教育中心";
===========================================================================
规则二：元素标签中间的内容：<对象>.innerHTML


规则三：修改样式类
<style>
h2.style1{
border-top:1px solid red;
border-right:2px solid blue;
}
</style>
=======================================
<h2 id="h2">h2标记文本</h2>
========================================
var h2=document.getElementById("h2");
h2.className="style1";


规则四：得到某个元素对象，其类型未知
xxx.nodeName---当未知节点类型时，使用该属性获得节点的名称
例如:---nodeName得到是全大写
if(xxx.nodeName="IMG"){
xxx.src="";
}
c)增加新节点
第一步：创建一个新元素
document.createElement("a/input/option");
第二步：为新元素设置相关的数据
<input>.innerHTML
第三步：新节点加入树上---新元素加入文档---作为树上某个节点的子节点存在 
xxx.appendChild(newNode);//追加
xxx.insertBefore(newNode,oldNote);//插入。。之前


d)删除节点:父节点删除子节点
假如希望删除节点xxx
xxx.parentNode.removeChild(xxx);


----------------------------------------
增加节点，删除节点综合实例：级联下拉列表
----------------------------------------


<form id="form1">
<input  id="add_button" type="button" value="添加元素" onclick="add_html();"/>
<select id="sel1" onchange="get_selected();">
<option>请选择</option>
<option>甘肃</option>
<option>陕西</option>
</select>
<select id="sel2">
<option>请选择</option>
</select>
</form>


==================================================================================
var arr1=new Array();
arr1[0]=["请选择"];
arr1[1]=["兰州","平凉","张掖","庆阳"];
arr1[2]=["西安","咸阳"];
function get_selected()
{
//获得sel1的对象
var sel1_obj=document.getElementById("sel1");
//获得sel1的子节点的selected的index
var sel1_index=sel1_obj.selectedIndex;

//根据index,找到节点数据
var datas=arr1[sel1_index];
//循环数据
//删除之前sel2的所有子节点
var sel2_obj=document.getElementById("sel2");
while(sel2_obj.childNodes.length>0)
{
sel2_obj.removeChild(sel2_obj.firstChild);


}
for(var i=0;i<datas.length;i++)
{
//获得数据,创建对象
var data=document.createElement("option");
data.innerHTML=datas[i];


//获得sel2的对象,把子节点加入


document.getElementById("sel2").appendChild(data);


}
}
=============================================================




 附：HTML DOM:对DOM操作进行了封装，实现代码的简化
增加节点 
var obj=new Option("text","value");
selObj.options[i]=obj;
删除所有的option--循环
selObj.option.length=0;


Select对象：Select对象代表HTML表单中的一个下列表
---<select>标签即表示一个Select对象
常用属性
---option、selectedIndex size
常用方法
---add(option) remove(index)
事件
<select onchange="alert(this.selectedIndex);">
<option value="1">aa</option>
<option value="2">bb</option>
</select>
table对象：用HTML DOM的方式操作表格
<table>.insertRow(index);----返回row对象
<row>.insertCell(index);


6.事件：
onXXX="return false;"--------取消事件
7.DOM概述
DOM：文档对象模型
HTML文档中的所有节点组成了一个文档树（或节点树）
-----树起邕于文档节点
-----document对象是一棵文档树的根
-----HTML文档中的每个元素、属性、文本等都代表着树中的一个节点

根据层次
8.screen对象---封装了屏幕相关的信息
属性：width/height
--availWidth/avaiHeight


var n=screen.width;
screen.width=1000//不能改的，只能用第上一句得到
9.history---封装了历史访问记录
history.back();
history.forward();
history.go(num);直接进行访问
10.location
location.href="url";
location.replace(url);

新窗口打开用-----window.open()打开新标签，或窗口
原窗口中打开------location.href----不回打开新窗口，在当前窗口中打开，保留当前历史记录
location.replace();---当前窗口打开，不回保留历史记录 例如，从支付界面不请允许回到订单页面
静态写死用-------<a>
//location.href等同于location["href"]
11.navigator------------浏览器软件的相关信息

var showtext="Navigator对象属性列表：\n";
for(var propname in navigator)
{
showtext+=propname+":"+navigator[propname]+"\n";
alert(showtext);
}
12-6.event（事件）对象
a)事件的类别
鼠标事件：onclick/ondblclick/onmouseover/onmouseout
键盘事件：onkeydown/onkeyup
复制网页无用Ctrl+C


状态改变事件：onblur/onfocus/onchange/onload/onunload{body里}onsubmit（form里）
b)事件可以被取消
onXXX="return false;"----取消某事件
c)定义事件
<标签里 onxxx="代码"
d)事件冒泡机制
Document------onclick()
form----------onclick()
input---------onclick()
事件由底层---顶层执行，底层执行引发上一层事件
例如：扫雷游戏可用到
e)event对象
任何事件触发后将会产生一个event对象
event对象记录事件发生时的鼠标位置、键盘按键状态和触发对象等信息
---获得event对象
---使用event对象获得相关信息，如单击位置、触发对象等
常用属性：clientX/clientY  srcElement元素标签


在ie/chrome里：event 
在firefox里：直接在js 中使用event


获得event对象
firefox：只能在html页面获得,而不能在js中其他浏览器：既可以在js 中，也可以在html中
event.target.nodeName(火孤)
event.srcElement(IE)
兼顾兼容问题：
在html上使用event关键字获得事件对象,传入js代码里，使用target||srcElement得到引发事件的对象


五、面向对象基础（脚本不是完全的面向对象，更多的是封装）
封装、继承、多态
1.封装:定义一个对象（包含数据和行为）

方式一：使用Object
var s=new Object;
s.name="mary";
s.age=18;
s.sing=function(){alert("hello");}
alert(s.name);
alert(s.age);
s.sing();
方式二：自定义对象的模板(见使用此模式)
function Student(n1,a1)//方式里有this,则这个方法就是个类
{
this.name=n1;
this.age=a1;
this.introduces_self=function()
{
alert(" I am " +this.name+",I am"+this.age+" years old")
}


}
function test_student()
{
var p1=new Student("marry",30);
var p2=new Student("join" ,27);
pl.introduces-self();
p2.introduces-self();


}
传递，js范围里，两种可用传递到服务端，采用一种通用的格式(xml)，另一种是JSON
方式三：使用JSON方式封装，常用于数据交换
var s={
"name":"mary",
"age":18,
"address":"北三环"
};


JSON(javascript object notation)是一种轻量级的数据交换格式
----使用名/值对的方式定义
----名称需要使用""引起来
----多对定义之间使用,隔开
----一般不需要定义方法
var obj={
"name":"mary",
"age":18,
"sing":function(){alert("hello")}//一般不需要定义方法
};


------------------------------------
参数特多不方便,用包更好
function xxx(name,age,score,address)
{


处理学员的各自信息（传入）;
name/age/score
}

function xxx(student)
{
student.name/age/address
student.sing();
}


------------------------------------




-->