15. // 你也可以在不声明变量的情况下执行函数 16.
17. (function(){
18. // 这就是所谓的自调用匿名函数 19. })();
数组
数组也是一个专门的对象，它可以包含任意数量的数据。要访问数组中的数据你就必须使用数字，用以引用其在数组中的”索引”。
1. // 两种声名数组的不同方式, 2. // 字面:
3. var fruit = ['apple', 'lemon', 'banana']; 4.
5. // 使用数组构造器:
6. var fruit = new Array('apple', 'lemon', 'banana'); 7.
8. fruit[0]; // 访问数组中的第一个数据项 (apple) 9. fruit[1]; // 访问数组中的第二个数据项 (lemon) 10. fruit[2]; // 访问数组中的第三个数据项 (banana)
对象
对象是命名的的值的集合(键-值对)，它和数组很相似，唯一的不同之处在于你可以为每个数据值指定名字。
1. // 两种声明对象的不同方式, 2.
3. // 字面(大括号): 4. var profile = { 5. name: 'Li', 6. age: 23,
7. job: 'Web Developer' 8. }; 9.
10. // 适用对象构造器:
11. var profile = new Object(); 12. profile.name = 'Li'; 13. profile.age = 23;
14. profile.job = 'Web Developer';
if/else语句
if/else语句是JavaScript中最常见的结构，它看上去就像下面这样:
1. var legalDrinkingAge = 21; 2. var yourAge = 23; 3.
4. if ( yourAge >= legalDrinkingAge ) { 5. // 我们使用'alert'来通知用户: 6. alert('你可以喝水.'); 7. } else {
8. alert('对不起，你不能喝水.'); 9. }
循环
循环在遍历数组中的数据项或对象的所有成员时非常有用，JavaScript中最常用的循环是for和while语句。
1. var envatoTutSites = ['NETTUTS','PSDTUTS','AUDIOTUTS','AETUTS','VECTO
RTUTS']; 2. // WHILE循环 3. var counter = 0;
4. var lengthOfArray = envatoTutSites.length; 5. while (counter < lengthOfArray) { 6. alert(envatoTutSites[counter]); 7. counter++; // 等同于 counter += 1; 8. } 9. 10. // FOR循环
11. // (The i stands for \ 12. for (var i = 0, length = envatoTutSites.length; i < length; i++) { 13. alert(envatoTutSites[i]); 14. }
访问DOM节点
假设我们有一个包含了一个段落和一个无序列表的基本XHTML文档:
1.
w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\>
2. 3.
4.
et=UTF-8\ />
5.
6. 7.
8.9.
My first paragraph...
10.11.
12.
19. 24. 25. 26.
在第一个例子中我们将使用’getElementById’这个DOM方法访问我们的段落。
1. var introParagraph = document.getElementById('intro'); 2. / 我们现在访问了一个DOM节点，这个DOM节点代表intro段落。
变量’introParagraph’现在指向DOM节点，我们现在可以在这个节点上做很多事情，我们可以读取它的内容和属性，也可以控制它的任何方面。我们可以删除它、克隆它或将它移到DOM树的其它位置。
我们可以使用JavaScript和DOM接口访问现在文档中的任何东西。所以，我们可能希望用类似的方式访问文档中的那个无序列表，但唯一的问题就在于它并没有ID。你可以给它一个ID属性并使用同样的方法访问它或者使用’getElementsByTagName’方法访问它。
1. var allUnorderedLists = document.getElementsByTagName('ul'); 2. // 'getElementsByTagName' 返回当前存在的节点集合/列表 3. // 它除了那一点微小的差别外其实和数组很相似。
getElementsByTagName
getElementsByTagName方法返回当前存在的节点集合/列表，它和数组的相似之处是它也有length属性。需注意的重要一点是这些集合是’即时’的，如果你在DOM中添加了一个新元素那么这个集合将自动自我更新。由于它和数组类似，所以我们可以使用索引来访问其中的每个节点，从0到这个集合的总长度(减1)。
1. // 访问单个无序列表: [0] index
2. var unorderedList = document.getElementsByTagName('ul')[0]; 3.
4. // 将UL中的列表项创建为节点列表:
5. var allListItems = unorderedList.getElementsByTagName('li'); 6.
7. // 现在我们可以使用for循环遍历列表项:
8. for (var i = 0, length = allListItems.length; i < length; i++) { 9. // 提取其文本节点并alert它的内容:
10. alert( allListItems[i].firstChild.data ); 11. }
遍历DOM
术语”遍历”就是用来描述访问整个DOM寻找节点的行为。DOM接口为我们提供了大量的节点属性以便我们在文档中的所有节点自由访问。 这些节点属性可以方便我们访问关联的/挨着的节点:
Node.childNodes:你可以使用它访问某个元素的所有直属子元素。它将返回一个类似数组的对象，你可以循环遍历它。数组中的节点可以包含所有不同类型的节点，如文本节点和其它类型的元素节点。
◆Node.firstChild:这个属性等同于访问’childNodes’数组的首项(‘Element.childNodes[0]‘)。它是个捷径。
◆Node.lastChild:这个属性等同于访问’childNodes’数组的末项(‘Element.childNodes[Element.childNodes.length-1]‘)。它也是个捷径。
◆Node.parentNode:这个属性可以让你访问当前节点的父节点，仅会有唯一一个父节点，如果想访问’祖父’级节点，可以使用’Node.parentNode.parentNode’，以此类推。
◆Node.nextSibling:这个属性可以让你访问DOM树同级下的下一个节点。
◆Node.previousSibling:这个属性可以让你访问DOM树同级下的上一个节点。
所以就想你看到的一样，遍历DOM就是如此简单，只要你熟练运用了他的那些节点属性。 列表项只能在他们之间没有空格的情况下检索。因为在文档中你能得到文本节点和元素节点，而’
这就是JavaScript基本运行方式，你可以使用本地DOM方法和属性漂亮的访问并提取文档中的元素。现在你可以脱离那些繁琐的框架而独立进行基本的DOM操作了。
相关推荐：
loading