轻装上阵，安卓工程师之路---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>

时间： 2024-10-13 16:31:38

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

轻装上阵，安卓工程师之路---day04(JavaScript & XML & DTD)

00 Node接口的API(续) createElement() 按照给定的标签名创建一个新的元素节点.方法只有一个参数:将被创建的元素的名字,参数是一个字符串.方法的返回值:是一个指向新建节点的引用指针.返回值是一个元素节点,所以它的 nodeType 属性值等于 1.新元素节点不会自动添加到文档里,新节点没有 nodeParent 属性,它只是一个存在于 JavaScript 上下文的对象. innerHTML 浏览器几乎都支持该属性,但不是 DOM 标准的组成部分.innerHT

轻装上阵，安卓工程师之路---day02(CSS&JavaScript)

01 CSS选择器 CSS的语法格式:选择器{ 属性:属性值; } 举例:h2{color : red; } 常见选择器: 标签选择器 h2{ } 类选择器 .a { } <h2 class=“a”> // 不能是数字,提倡 ID选择器 #a{ } <h2 id=“a”> // ID要唯一组选择器 h1,h2{ } 父类选择器 p a{ } //p标签中的a标签通用选择器 *{

轻装上阵，安卓工程师之路---day01

01 C/S与B/S结构的区别 C/S[Client客户器/Server服务器] 图解:<<C&S结构.JPG>> 核心特点: 1——服务器运行数据负荷较轻,是由于客户端做了一些辅助的计算工作 2——数据的储存管理功能较为透明,由于部分数据存储在本机上完成,所以数据存储功能较为明显的显示出来 3——C/S架构的劣势是高昂的维护成本且投资大例子:QQ,魔兽,红蜘蛛软件,... B/S[Browser浏览器/Server服务器] 这里说的浏览器,不光是指PC浏览器,也包含移动

轻装上阵，安卓工程师之路---day05(Dom4J & Tomcat)

01 Java-DOM4J(DOM4J开源组织)-DOM解析XML文件解析:是用Java等相关技术将XML文件中有用的信息提取出来的过程叫解析. 解析分为二个大类别 1. DOM(Document Object Model)类别一次性将硬盘中的XML文件加载的内存形成一个倒状的树结构,从根开始从上向下依次遍历,获取有用节点的内容 2. SAX(Simple Api for Xml)类别分多次将硬盘中的XML文件加载的内存中,以事件的方式去解析节点中有用的内容目前: 1. 空间不是问题,

轻装上阵，安卓工程师之路---day06(HTTP & Servlet)

01 HTTP协议入门 HTTP协议是Web客户端和Web服务端通信的规则,用于定义客户端与web服务器通迅的格式,它是一个应用层协议,用于定义WEB浏览器与WEB服务器之间交换数据的过程. HTTP协议分类二个版本: 1_HTTP1.0版本客户端请求服务器后,服务器响应信息后,立即断开,且只能请求和响应一个资源缺点:客户端创建连接不容易,需要消耗大量的时间和资源,这时服务器就只响应一个资源就断开,下次客户端再请求,又要创建创建新的连接 2_HTTP1.1版本客户端请求服务器后,服务器响应

web前端全部课件（html5+CSS3+javascript+dom+bom+jquery+jqm+bootstrap+angular+ext+weixin+less）

一.HTML5 BASIC课件 Unit01:Web基础知识.HTML快速入门.文本 Unit02:图像和链接.表格.结构标记 Unit03:列表.表单.其他常用标记二.CSS3 BASIC课件 Unit01:CSS 概述.CSS 语法\尺寸与边框 Unit02:框模型.背景.渐变\文本格式化-1 Unit03:文本格式化-2.表格.浮动.显示 Unit04:列表.定位三.京东首页实战(无PPT) 四.WEB UI课件 Unit01:Photoshop基本操作.网页切图.图像优化 Unit0

15分钟带你了解前端工程师必知的javascript设计模式(附详细思维导图和源码)

15分钟带你了解前端工程师必知的javascript设计模式(附详细思维导图和源码) 前言设计模式是一个程序员进阶高级的必备技巧,也是评判一个工程师工作经验和能力的试金石.设计模式是程序员多年工作经验的凝练和总结,能更大限度的优化代码以及对已有代码的合理重构.作为一名合格的前端工程师,学习设计模式是对自己工作经验的另一种方式的总结和反思,也是开发高质量,高可维护性,可扩展性代码的重要手段. 我们所熟知的金典的几大框架,比如jquery, react, vue内部也大量应用了设计模式, 比如观察

Javascript Dom编程艺术（第2版）读书笔记

Javascript Dom编程艺术这本书我看的是第2版的,真心觉得这本书不错,它将DOM编程的一些基本原则,及如何让Javascript代码在浏览器不支持的情况下,或浏览器支持了Javascript但用户禁用它的情况下做到平衡退化,让最基本的操作仍能顺利完成,以及如何让结构与样式分享做到真正的渐近增强叙述得很清楚,也很容易理解接受.我也是看了这本书之后,才对代码优化,结构,行为,样式有了进一步的加深理解. Javascript Dom编程艺术(第2版)读书笔记,布布扣,bubuko.com

《JavaScript+DOM变成艺术》的摘要（二）

//DOM: //对象是一种独立的数据集合,与某个特定对象相关联的变量被称为这个对象的属性,通过某个特定对象可以为之调用的函数被称为这个对象的方法 // //4个非常实用的DOM方法: //检索特定元素节点的方法: //document.getElementById:与document相关联的函数,在脚本代码里,函数后面必须跟有一组圆括号 //document.getElementsByTagName:返回的是一个数组 //,setAttribute,getAttribute alert(doc