轻装上阵，安卓工程师之路---day03(JavaScript-DOM,BOM)

各个现有API的用处：

CSS：查询样式，例如：边框，文本，等

DHTML：查BOM和DOM对象的属性，事件，方法，等，功能较强

JavaScript语言参考手册，查询JS的内置对象的属性和方法

W3CShool手册，学习手册，相当于课件

01 JS数据类型--复合类型

复合类型分为三个子类型

一）对象

就是一系列属性和方法的集合，只是一种类似数组的特殊结构。其属性方法可增加的。

对象为分为四类

1）内置对象，例如：Date,Math,Number,String。。。

2）自定义对象，例如：Person，Car。。。

3）浏览器对象，即BOM，window，document。。。

4）扩展对象，ActiveXObject，将来如果想学AJAX技术的话，会接触到

二）数组

数组就是一群元素的集合

在JS中，定义数组的初始化大小不会影响最终向数组中添加的元素,可自由添加

在JS中，数组元素类型不限，即杂合类型

三）函数

一段具有一定功能的片段，例如：

function sayHello(){

函数体;

如果有返回值，要加上return;

}

02 BOM简介

BOM就是浏览器对象模型，即用JavaScript技术去操作浏览器的各个组成部份，为什么能操作呢？浏览器对象模型JavaScript是由浏览器中内置的JavaScript脚本解释器程序来执行JavaScript脚本语言的为了便于对浏览器的操作，JavaScript封装了对浏览器中的各个对象使得开发者可以方便的操作浏览器

学习JavaScript的重要作用之一：就是操作主流浏览器的每个组成部份，例如：状态栏，地址栏，。。。

学习JavaScript的重要作用之二：就是操作HTML/JSP/XML这些Web页面中的节点

03 BOM分类

BOM对象包括：

window 窗口

location 地址栏

screen 屏幕

document 文档

history 历史栏

navigator 浏览器

其实不止这些，可以到DHTML文档上去查询。

04 window对象

window对象是BOM浏览器对象模型的最顶层对象，类似于Java中的Object对象

一遇到<body>或<frameset>标签后，你们的浏览器自动创建window对象

window对象的常用方法：

open() 打开新窗口

alert() 显示一个警告框。

Confirm() 选择确定框。

prompt() 输入框

setTimeout() 一次性定时器

延时器

setInterval() 周期性定时器

鼠标点击相关：

onclick 在用户用鼠标左键单击对象时触发

ondblclick 当用户双击对象时触

鼠标移动相关：

onmouseout 当用户将鼠标指针移出对象边界时触发

onmousemove 当用户将鼠标划过对象时触发

焦点相关的：

onblur 在对象失去输入焦点时触发

按键相关的：

onkeyup 当用户释放键盘按键时触发

其他：

onchange 当对象或选中区的内容改变时触发

onsubmit 当表单将要被提交时触发

05 location_screen对象

location就是浏览器中的地址栏

href 设置或获取整个URL为字符串

reload() 重新装入当前页面，常用于刷新

screen就是包含关于客户屏幕和渲染能力的信息。

availHeight 获取系统屏幕的工作区域高度，排除 Microsoft Windows 任务栏

availWidth 获取系统屏幕的工作区域宽度，排除 Windows 任务栏

height 获取屏幕的垂直分辨率

width 获取屏幕的水平分辨率

06 document_history_navigator对象

document表示浏览器的文档区域

forms 获取页面所有表单对象

images 获取页面所有图片对象

links 获取所有含有href属性的超链接对象

referrer 获取将用户引入当前页面的位置URL

bgColor 设置或获取表明对象后面的背景颜色的值。

fgColor 设置或获取文档的前景(文本)颜色。

write() 在指定窗口的文档中写入一个或多个 HTML表达式

history表示浏览器的历史栏

length 获取历史列表中的元素数目

go(0) 从历史列表中装入URL，参数为0时表示浏览器刷新

页面刷新在目前学过的技术中（都是通过操作BOM）有如下二种方式：

location.reload();

history.go(0);

navigator对象是包含关于 Web 浏览器的信息

appName 获取浏览器的名称

appVersion 获取浏览器运行的平台和版本

07 form对象及其属性

form对象就是<form>标签

访问表单的方式:

document.forms[n]

document.表单名字

常用属性有：

action：提交到服务器的路径，例如：将表单提交到交来学的Servlet程序

method：以什么方式提交到服务器，例如：GET和POST

name：为每个<form>标签取一个名字，但要唯一

08 函数的三种定义方式

一）正常定义方式（重点)

function add(num1,num2){

return num1+num2;

}

二）构造函数方式

注意：构造函数方式定义javascript函数注意Function中的F大写,因为它调用的是JavaScript的Function内置对象

var add = new Function("num1","num2","return num1+num2");

add(3,4);

三）无/匿名函数方式（重点)

var add = function(num1,num2){return num1+num2}

add(1,2);

09 DOM简介

关于DOM的学习，强烈建议到W3C School的浏览器脚本教程查询HTML DOM教程。

DOM文档对象模型，DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范。DOM是一种与浏览器，平台，语言无关的接口，使得你可以访问页面其他的标准组件。

D，表示HTML/JSP/XML，今天我们只说HTML

O，表示对象，以对象的方式访问web页面中的元素

M，DOM是一套规则，在这DOM看来，所有的文档，加载到内存后，

都是一个倒状的树结构

10 节点的四种类型

一）文档节点[document] 整个文档就是一个文档节点：document

二）元素节点[xxxElement] 每一个HMTL标签都是一个元素节点

三）文本节点[xxxTextElement] 标签中的文字

四）属性节点[xxxAttributeElement] 标签的属性

任何一个文档，加载到内存后，都会形成一个倒状树结构，

树中的每个元素都是由节点组成的

11 node接口的常用api

getElementById()-->一个元素节点，需要用document对象调用

getElementsByName()-->一个数组，里面都是元素节点，需要用document对象调用

getElementsByTagName()-->一个数组，里面都是元素节点，可用document对象调用，也可用其它对象调用

hasChildNodes()-->有子节点返回true；无子节点返回false，只有元素节点有子节点，文本节点和属性节点不可能再包含任何子节点

nodeName 只读属性

nodeType 只读属性，元素节点：1；属性节点：2；文本节点：3；注释：8；文档节点：9

nodeValue 读写属性

getAttribute() 获取属性

getAttributeNode() 获取节点

setAttribute()创建或修改

removeAttribute()

replaceChild() 替换节点

本天重点代码集锦：

JavaScript对象创建：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

</head>

<body>

//自定义对象Person

function Person(xid,xname,xsal){

//xid,xname,xsal是形式参数，名字可以任意

//this.id表示该对象的属性

//this指向p

//属性

this.id = xid;

this.name = xname;

this.sal = xsal;

//方法，在JS中函数中可以再定义函数

this.run = function(){

document.write(p.name + "在跑<br/>");

}

</script>

//创建Person对象

var p = new Person(2005,"赵君",3500);

//显示Person对象信息

document.write(p.id + "<br/>");

document.write(p.name + "<br/>");

document.write(p.sal + "<br/>");

p.run();

//我临时为Person对象添加属性和方法

p.city = "上海";

p.go = function(){

document.write(p.name+"在"+p.city+"工作过<br/>");

}

//调用属性和方法

p.go();

</script>

</body>

</html>

JavaScript二维数组的创建

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

</head>

<body>

//定义一个一维数组

var students = new Array(3);

//为数组元素设置值

students[0] = "哈哈";

students[1] = "呵呵";

students[2] = "嘻嘻";

students[3] = "笨笨";

students[4] = "聪聪";

students[5] = 123;

students[6] = false;

//显示

for(var i=0;i<students.length;i++){

document.write(students[i] + "<br/>");

}

</script>

//定义一个二维数组

var students = new Array(3);

for(var i=0;i<students.length;i++){

students[i] = new Array(2);

}

//为数组元素设置值

students[0][0] = "哈哈";students[0][1] = 10000;

students[1][0] = "呵呵";students[1][1] = 12000;

students[2][0] = "嘻嘻";students[2][1] = 14000;

//显示

for(var i=0;i<students.length;i++){

document.write(students[i][0]+"----"+students[i][1]+"<br/>");

}

</script>

</body>

</html>

JavaScript动态获取可变参数方法

//因为JS为动态语言，所以参数初始可以不设定到后期用的时候再设定，而且只需要调用函数的属性arguments，即可获取当前参数的数组。再利用遍历即可获取全部参数

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

</head>

<body>

function show(){

//获取参数的个数

var size = show.arguments.length;

window.alert(size);

}

show("html","css","javascript");

show("html","css","javascript","xml");

show("html","css","javascript","xml","tomcat");

</script>

</body>

</html>

由于很多方法都是通过DHTML文档来查询，所以下面的代码，我只是省略的出示部分代码：

//将当前时间显示在浏览器的状态栏中

window.status = y+"年"+m+"月"+d+"日"+h+"时"+mi+"分"+s+"秒";

function openNewWindow(){

//打开一个新窗口，显示03号页面

window.open("03_window_open.html");

}

//显示一个确认框

function deleteLine(){

var flag = window.confirm("你确认要删除该本记录吗？");

f(flag == 1){

alert("请等待，正在删除中，，，");

}else{

;

}

function updateTime(){

var now = new Date();

var str = now.toLocaleString();

//将str变量的值，设置到span标签中去，下面写的代码，会提前用到DOM的知识

//innerHTML表示获取标签之间的内容

document.getElementById("time").innerHTML = str;

}

//每隔1秒钟将时间更新

window.setInterval("updateTime()",1000);

鼠标获取document区域的动态代码：

//只要在浏览器有任何动态，浏览器就负责创建一个事件对象，名叫event

//当鼠标在浏览器的文档区域中不断移动时触发

window.document.onmousemove = function(){

//获取此时鼠标的x和y坐标

var x = event.clientX;

var y = event.clientY;

//设置到x和y这二个span标签中

document.getElementById("xID").innerHTML = x;

document.getElementById("yID").innerHTML = y;

}

//当鼠标从浏览器的文档区域中移出时触发

window.document.onmouseout = function(){

//设置0到x和y这二个span标签中

document.getElementById("xID").innerHTML = 0;

document.getElementById("yID").innerHTML = 0;

}

</script>

动态为标签添加事件

//定位input标签，并为其动态添加onblur事件

document.getElementById("nameID").onblur = function(){

//获取用户名，this表无名函数中，就表示调用的对象，即input标签

var name = this.value;

//判断长度

if(name.length > 0){

window.alert(name);

}else{

window.alert("用户名必填");

}

</script>

获取表单内容，并通过window的onsubmit方法阻止提交

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>10_bom_onchange_onsubmit.html</title>

</head>

<body>

</select>

</form>

//选中哪个城市，就以警告形式显示那个城市

document.getElementById("city").onchange = function(){

//获取选中的城市，这里的this表示select标签

//var value = this.value;

//获取选中option的索引号，从0开始

var i = this.selectedIndex;

//通过数组下标的形式获取option标签

var city = this[i].innerHTML;

//判断

if(city != "选择省份"){

//显示

alert(city);

}

</script>

//点击提交按钮后，阻止表单提交

document.getElementById("registerID").onsubmit = function(){

var flag = true;

//onsubmit事件对应的函数，如果返回true则提交表单到action指定的地方处理

//onsubmit事件对应的函数，如果返回false则不提交表单

//项目中我们常用onsubmit事件对应的函数做表单验证

return flag;

}

</script>

</body>

</html>

Document的事件keyup被event捕获，在event中利用keycode来获取按下的键

//对document对象添加onkeyup事件

document.onkeyup = function(){

//获取按健的unicode编码

//event是每个同学的浏览器自行创建的，因为每个浏览器内部机制不同，创建时略有区别

var unicode = event.keyCode;

//显示

window.alert(unicode);

}

</script>

//获取屏幕的宽和高

var h = window.screen.availHeight;

var w = window.screen.availWidth;

alert(h+":"+w);

</script>

利用标签的集合获取他的子标签数组

<body>

用户名：<input type="text" name="username"/>

密码：<input type="password" name="password"/>

</form>

用户名：<input type="text" name="username"/>

</form>

<hr/>

<a href="#">去oracle</a><br/>

//document对象中有多少个表单

//var size = window.document.forms.length;

//alert(size);

//document对象中有多少张图片

//alert(document.images.length);

//获取第二个超连接中间的文本

alert(document.links[1].innerHTML);

</script>

</body>

为每个相同的input标签添加onclick事件，遍历添加事件

<body>

打起精神来

</font>

//为上述三个按钮动态添加单击事件

var inputElementArray = document.getElementsByTagName("input");

var size = inputElementArray.length;

for(var i=0;i<size;i++){

inputElementArray[i].onclick = function(){

//获取你点击的按钮的value属性值,this表示你点击的按钮

var tip = this.value;

//判断

if("前景变红" == tip){

//document.fgColor = "red";

document.fgColor = "red";

}else if("前景变绿" == tip){

//document.fgColor = "green";

document.fgColor = "green";

}else if("前景变蓝" == tip){

//document.fgColor = "blue";

document.fgColor = "blue";

}

</script>

</body>

//获取浏览器的名字和版本

window.document.write(window.navigator.appName + "<br/>");

window.document.write(window.navigator.appVersion + "<br/>");

</script>

getElementsByName用法

<body>

<br>

<br>

<br>

//分别取得value的值

var inputElementArray = document.getElementsByName("tname");

var size = inputElementArray.length;

for(var i=0;i<size;i++){

//获取数组中的每一个input元素节点

var inputElement = inputElementArray[i];

//获取input元素节点的value属性值

var content = inputElement.value;

//显示

window.alert(content);

}

</script>

</body>

getElementsByTagName用法

<body>

</select>

//通过document对象定位select元素节点

var selectElement = document.getElementsByTagName("select")[0];

//通过select对象定位所有的option元素节点

var optionElementArray = selectElement.getElementsByTagName("option");

//迭代

for(var i=0;i<optionElementArray.length;i++){

//取出每一个option元素节点

var optionElement = optionElementArray[i];

//获取option元素节点的value属性和标签之间的内容

var value = optionElement.value;

var html = optionElement.innerHTML;

alert(value + ":" + html);

}

</script>

</body>

hasChildNodes用法，分别获取元素，属性，文本节点

<body>

</select>

//select元素是否有子元素

//var selectElement = document.getElementsByTagName("select")[0];

//var flag = selectElement.hasChildNodes();

//alert(flag?"有子节点":"无子节点");

//option[2]元素是否有子元素

//var selectElement = document.getElementsByTagName("select")[0];

//var gzOptionElement = selectElement.getElementsByTagName("option")[2];

//var flag = gzOptionElement.hasChildNodes();

//alert(flag?"有子节点":"无子节点");

//广州元素是否有子元素

var selectElement = document.getElementsByTagName("select")[0];

var gzOptionElement = selectElement.getElementsByTagName("option")[2];

var gzTextElement = gzOptionElement.firstChild;

var flag = gzTextElement.hasChildNodes();

alert(flag?"有子节点":"无子节点");

</script>

</body>

获取nodeName，nodeType，nodeValue

//取得type属性名字nodeName，类型nodeType，值nodeValue

var inputElement = document.getElementById("tid");

var typeAttributeElement = inputElement.getAttributeNode("type");

var nodeName = typeAttributeElement.nodeName;//type

var nodeType = typeAttributeElement.nodeType;//2

var nodeValue = typeAttributeElement.nodeValue;//text

alert(nodeName+":"+nodeType+":"+nodeValue);

元素节点替换

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

</head>

<body>

</ul>

<hr/>

</ul>

//单击gz节点时，用color节点替换

document.getElementById("gz").onclick = function(){

//定位新节点

var colorElement = document.getElementById("color");

//this表示广州节点

//定位父节点

var cityElement = document.getElementById("city");

//替代

cityElement.replaceChild(colorElement,this);

}

</script>

</body>

</html>

removeAttribute,setAttribute方法的使用例子

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

</head>

<body>

//单击"生效"按钮，将其"失效"

document.getElementsByTagName("input")[0].onclick = function(){

//将按钮失效

this.setAttribute("disabled","disabled");

//修改按钮的value属性值

this.setAttribute("value","失效");

}

//单击"恢复"按钮，将其”生效“

document.getElementsByTagName("input")[1].onclick = function(){

document.getElementsByTagName("input")[0].removeAttribute("disabled");

document.getElementsByTagName("input")[0].setAttribute("value","生效");

}

</script>

</body>

</html>

posted @ 2015-07-22 08:25 暴走骑士阅读(256) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

黑曼巴

轻装上阵，安卓工程师之路---day03(JavaScript-DOM,BOM)

公告