本文档介绍了Aptana IDE的功能及安装方法，并详细记录了JavaScript的基础知识，包括浏览器对象树(BOM)、DOM操作及函数定义等内容。
学习笔记，记得很零散，不仅有javaScript的内容，还有许多。。。。。。
Aptana简介
Aptana是一个非常强大,开源,专注于JavaScript的Ajax开发IDE它的特性包括
1、JavaScript,JavaScript函数,HTML,CSS语言的Code Assist功能
2、Outliner(大纲)：显示JavaScript,HTML和CSS的代码结构
3、支持 JavaScript，HTML，CSS代码提示，包括JavaScript 自定函数
4、代码语法错误提示。
5、支持Aptana UI自定义和扩展。
6、调试JavaScript
7、支持流行AJAX框架的 Code Assist功能:JQuery ext js dwr
Aptana插件在ecpise中安装
eclipse插件引入方法
1、在eclipse的plugins文件夹的同级目录新建文件夹，命名为plugInsNew(自
定义);
2、打开plugInsNew，在其中新建一个你插件容易记的文件夹，比如：
aptana_update_024747(自定义)
3、打开aptana_update_024747 在其中新建一个eclipse(名字固定)文件夹；
4、打开eclipse文件夹，将你的features和plugins文件夹放入；
5、在plugInsNew同级目录新建links文件夹（如有可省）；
6、在links文件夹里新建文件( 名字自定义,后缀名是 .link)
如：aptana_update_024747.link文件，并将插件路径引入： 如
path=E:\\eclipse\\pluginsNew\\aptana_update_024747
重新启动eclipse即可！
这样引入插件的好处是可以方便的识别，加入或删除你所需要的插件！
myeclipse插件引入方法
1、在D盘新建文件夹pluginsNew(自定义)
2、打开pluginsNew ，在其中新建一个你插件容易记的文件夹，比如：
aptana_update_024747
3、打开aptana_update_024747 在其中新建一个eclipse文件夹；
4、打开eclipse文件夹，将你的features和plugins文件夹放入；
5、找到myecplise的安装目录D:\Program Files\MyEclipse
6.5\eclipse\links下的links文件夹
6、在links文件夹里新建文件如：aptana_update_024747.link文件，并将
插件路径引入： 如
path=D:\\pluginsNew\\aptana_update_024747
重新启动myeclipse即可！
回顾javaScript基础知识
浏览器的对象树——BOM
1. navigator(浏览器)
2. Window
document(文档对象)
links 链接对象<a></a>
archors 锚对象
forms表单对象
images图片对象
frame(框架对象)
location(位置对象)
history(历史对象)
浏览器的对象含义
Navigator对象：
浏览器对象，包含了正在使用的 Navigator 的版本信息。反映了当前使用的浏览器的资料。JavaScript 客户端运行时刻引擎自动创建 navigator 对象。
Window对象：
表示的是浏览器窗口，最顶层的对象, window的属性对应于整个窗口 。
Document对象：
文档对象是JavaScript 中window 和frames对象的一个属性,是显示于窗口或框架内的一个文档。描述当前窗口或指定窗口对象的文档。它包含了文档从<head>到</body>的内容。
Frame 对象：
是 window 对象。用最容易理解的话说，每一个HTML 文件占用一个 window 对象， 包括定义框架的网页 （“框架网页”）
Location对象：
地址对象 它描述的是某一个窗口对象所打开的地址。
* window.location = “链接地址”;
History对象：
历史对象包含了用户已浏览的 URL 的信息，是指历史对象指浏览器的浏览历史。
* back() 后退，跟按下“后退”键是等效的。
* forward() 前进，跟按下“前进”键是等效的。
Links对象：
是一个数组， 包含了文档中所有连接标记 （包含 href 属性的<a>标记和<map>标记段里的<area>标记），按照在文档中的次序，从 0 开始给每个连接标记定义了一个下标。
Archors对象：
是一个数组，包含了文档中所有锚标记（包含 name 属 性的<a>标记）， 按照在文档中的次序， 从 0 开始给每个锚标记定义了一个下标。
Forms对象：
是一个数组，包含了文档中所有的表单（<form>）。要引用单个表单，可以用 document.forms[x]，但是一般来说，人们都会这样做：在<form>标记中加上“name=”...“”属性，那么直接用“document.<表单名>”就可以引用了。
Images对象：
图片对象 document.images[] 是一个数组，包含了文档中所
有的图片（<img>）。
每个对象有它自己的属性、方法和事件。
对象的属性是反映该对象某些特定的性质的。
例如：字符串的长度、图像的长宽等等。
对象的方法能对该对象做一些事情。
例如：表单的“提交”(Submit)等等。
对象的事件就 能响应发生在对象上的事情。
例如：提交表单产生表单的“提交事件”。
window对象常用方法
alert(‘信息’) ： 消息框
prompt(‘提示信息’,默认值)： 标准输入框
confirm( ) ： 确认框
open( ) ： 打开一个新窗口
close( ) ： 关闭窗口
Form表单对象
访问表单的方式:
* document.forms[n]
* document.表单名字
表单对象常用的属性
action <from action=”xxx”>
表单提交的目的地址
method <form method=”xxx”>
表单提交方式
name <form name=”xxx”>
表单名称
javaScript定义函数的三种方式
正常方法
function print(msg){
document.write(msg);
}
对函数进行调用的几种方式：
函数名（传递给函数的参数1，传递给函数的参数2，….）
变量 = 函数名（传递给函数的参数1，传递给函数的参数2，….）
对于有返回值的函数调用，也可以在程序中直接使用返回的结果，例如：alert("sum=“ + square(2,3));
不指定任何函数值的函数，返回undefined。
构造函数方法 new Function();
//构造函数方式定义javascript函数 注意Function中的F大写
var add=new Function('a','b','return a+b;');
//调用上面定义的add函数
var sum=add(3,4);
alert(sum);
注:接受任意多个字符串参数，最后一个参数是函数体。
如果只传一个字符串，则其就是函数体。
函数直接量定义函数
//使用函数直接量的方式定义函数
var result=function(a,b){return a+b;}
//调用使用函数直接量定义的函数
var sum=result(7,8);
alert(sum);
注:函数直接量是一个表达式，它可以定义匿名函数
DOM
DOM ：DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范,DOM是一种与浏览器，平台，语言无关的接口，使得你可以访问页面其他的标准组件
D：文档 – html 文档 或 xml 文档
O：对象 – document 对象的属性和方法
M：模型
DOM 是针对xml(html)的基于树的API。
DOM树:节点（node）的层次。
DOM 把一个文档表示为一棵家谱树（父，子，兄弟）
DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面
节点及其类型
节点
* 由结构图中我们可以看到，整个文档就是一个文档节点。
* 而每一个HMTL标签都是一个元素节点。
* 标签中的文字则是文本节点。
* 标签的属性是属性节点。
* 一切都是节点……
特性/方法 类型/返回类型
说 明
nodeName String
节点的名字；根据节点的类型而定义
nodeValue String
节点的值；根据节点的类型而定义
nodeType Number
节点的类型常量值之一
ownerDocument Document
指向这个节点所属的文档
firstChild Node
指向在childNodes列表中的第一个节点
lastChild Node
指向在childNodes列表中的最后一个节点
childNodes NodeList
所有子节点的列表
previousSibling Node
指向前一个兄弟节点；如果这个节点就是第一个兄弟节点，那么该值为null
nextSibling Node
指向后一个兄弟节点；如果这个节点就是最后一个兄弟节点，那么该值为null
hasChildNodes() Boolean
当childNodes包含一个或多个节点时，返回真
attributes NamedNodeMap
包含了代表一个元素的特性的Attr对象；仅用于Element节点
appendChild(node) Node
将node添加到childNodes的末尾
removeChild(node) Node
从childNodes中删除node
replaceChild (newnode, oldnode) Node
将childNodes中的oldnode替换成newnode
insertBefore (newnode, refnode) Node
在childNodes中的refnode之前插入newnode
节点树
节点树的概念从图中一目了然，最上面的就是“树根”了。节点之间有父子关系，祖先与子孙关系，兄妹关系。这些关系从图中也很好看出来，直接连线的就是父子关系了。而有一个父亲的就是兄妹关系……
查找元素节点
getElementById()
寻找一个有着给定 id 属性值的元素，返回值是一个有着给定 id 属性值的元素节点。如果不存在这样的元素，它返回 null.
var oElement = document.getElementById ( sID )
该方法只能用于 document 对象
<input type=“text” value=“传智播客5周年" id="tid">
function test(){
var usernameElement=document.getElementById(“tid");
//获取元素的值
alert("usernameElement.value: "+usernameElement.value)
//获取元素的类型
alert("usernameElement.type: "+usernameElement.type)
}
getElementsByName()
寻找有着给定name属性的所有元素，这个方法将返回一个节点集合，这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定name属性的所有元素的总个数。
<form name="form1">
<input type="text" name="tname" value="国庆60年_1" /><br>
<input type="text" name="tname" value="国庆60年_2" /><br>
<input type="text" name="tname" value="国庆60年_3" /><br>
<input type="button" name="ok" value="保存" id="ok" onclick="test();">
</form>
function test(){
var tnameArray=document.getElementsByName("tname");
alert(tnameArray.length);
for(var i=0;i<tnameArray.length;i++){
window.alert(tnameArray[i].value);
}
}
<input type="text" name="username" value="国庆60年_1" /><br>
<input type="text" name="username" value="国庆60年_2" /><br>
<input type="text" name="username" value="国庆60年_3" /><br>
<input type="button" name="ok" value="保存" id="ok"><br>
<script language="JavaScript">
//该方法返回是数组类型
var usernameElements=document.getElementsByName("username");
for (var i = 0; i < usernameElements.length; i++) {
//获取元素的类型
//alert(usernameElements[i].type)
//获取元素value的值
//alert(usernameElements[i].value);
//采用函数直接量的方法
usernameElements[i].onchange = function(){
alert(this.value);
}
}
</script>
getElementsByTagName()
寻找有着给定标签名的所有元素，这个方法将返回一个节点集合，这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定标签名的所有元素的总个数。
var elements = document.getElementsByTagName(tagName);
var elements = element.getElementsByTagName(tagName);
该方法不必非得用在整个文档上。它也可以用来在某个特定元素的子节点当中寻找有着给定标签名的元素。
var container = document.getElementById(“sid”);
var elements = container.getElementsByTagName(“p”);
alert(elements .length);
// //处理input
// var inputElements=document.getElementsByTagName("input");
// //输出input标签的长度
// //alert(inputElements.length);
// for(var i=0;i<inputElements.length;i++){
// if(inputElements[i].type!='button'){//submit
// alert(inputElements[i].value);
// }
// }
//处理select
// //获取select标签
// var selectElements=document.getElementsByTagName("select");
// //获取select下的子标签
// for(var j=0;j<selectElements.length;j++){
// var optionElements=selectElements[j].getElementsByTagName("option");
// for(var i=0;i<optionElements.length;i++){
// alert(optionElements[i].value);
// }
// }
var textareaElements=document.getElementsByTagName("textarea");
alert(textareaElements[0].value);
var inputElements=document.getElementsByTagName("input");
for(var i=0;i<inputElements.length;i++){
if (inputElements.type != 'submit') {
inputElements[i].onchange = function(){
alert(this.value)
};
}
var selectElements=document.getElementsByTagName("select");
for (var i = 0; i < selectElements.length; i++) {
selectElements[i].onchange=function(){
alert(this.value);
}
}
var textareaElements=document.getElementsByTagName("textarea");
for (var i = 0; i < textareaElements.length; i++) {
textareaElements[i].onchange = function(){
alert(this.value);
};
}
查看是否存在子节点
hasChildNodes()
该方法用来检查一个元素是否有子节点，返回值是 true 或 false.
var booleanValue = element.hasChildNodes();
文本节点和属性节点不可能再包含任何子节点，所以对这两类节点使用 hasChildNodes 方法的返回值永远是 false.
如果 hasChildNodes 方法的返回值是 false，则 childNodes,firstChild,lastChild 将是空数组和空字符串。
hasChildNodes()
var selectElements=document.getElementsByTagName("select");
alert(selectElements[0].hasChildNodes())
var inputElements=document.getElementsByTagName("input");
for(var i=0;i<inputElements.length;i++){
alert(inputElements[i].hasChildNodes());
}
DOM 属性 -- nodeName
文档里的每个节点都有以下属性。
nodeName:一个字符串，其内容是给定节点的名字。
var name = node.nodeName;
* 如果节点是元素节点，nodeName返回这个元素的名称
* 如果是属性节点，nodeName返回这个属性的名称
* 如果是文本节点，nodeName返回一个内容为#text 的字符串
注:nodeName 是一个只读属性。
nodeValue：返回给定节点的当前值（字符串）
如果给定节点是一个属性节点，返回值是这个属性的值。
如果给定节点是一个文本节点，返回值是这个文本节点的内容。
如果给定节点是一个元素节点，返回值是 null
nodeValue 是一个 读/写 属性，但不能对元素节点的 nodeValue 属性设置值，
但可以为文本节点的 nodeValue 属性设置一个值。
var li = document.getElementById(“li”);
if(li.firstChild.nodeType == 3)
li.firstChild.nodeValue = “天安门”;
nodeType 属性返回的整数值对应着 12 种节点类型,常用的有三种：
Node.ELEMENT_NODE ---1 -- 元素节点
Node.ATTRIBUTE_NODE ---2 -- 属性节点
Node.TEXT_NODE ---3 -- 文本节点
nodeType 是个只读属性
nodeValue：返回给定节点的当前值（字符串）
如果给定节点是一个属性节点，返回值是这个属性的值。
如果给定节点是一个文本节点，返回值是这个文本节点的内容。
如果给定节点是一个元素节点，返回值是 null
nodeValue 是一个 读/写 属性，但不能对元素节点的 nodeValue 属性设置值，
但可以为文本节点的 nodeValue 属性设置一个值。
var li = document.getElementById(“li”);
if(li.firstChild.nodeType == 3)
li.firstChild.nodeValue = “天安门”;
扫一扫
8370
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
