javascript 复习二

数组的作用

    批量的处理数据。

 

数组的声明

--快速声明方式

  • 1维数组

    var 数组名 = [成员1,成员2,成员3,......];

例如：

  1. var names = ["张三","李四","王五"];
  • 声明数组的数组（2维数组）

例如：

  1. var arg = [
  2. ["aa","bb"],
  3. ["11","22"],
  4. ["33","dd"]
  5. ]; //声明了1个2维数组arg，里面包含3个元素，每个元素都是数组

     如果要输出"22"，使用arg[1][1];

 

--使用Array对象声明数组

  • 创建特定值的数组

    var 数组名 = new Array("成员1","成员2",....)

  • 创建空数组

    var 数组名 = new Array(成员个数)

    使用这个能创建个数等于成员个数的空数组。

--sort方法

    arrayobj.sort(sortfunction)

    返回一个元素已经进行了排序的 Array 对象。

    参数

    arrayObj:必选项。任意 Array 对象。

    sortFunction:可选项。是用来确定元素顺序的函数的名称。如果这个参数被省略，那么元素将按照 ASCII 字符顺序进行升序排列。

    说明

    sort 方法将 Array 对象进行适当的排序；在执行过程中并不会创建新的 Array 对象。

    如果为 sortfunction 参数提供了一个函数，那么该函数必须返回下列值之一：

  • 负值，如果所传递的第一个参数比第二个参数小。
  • 零，如果两个参数相等。
  • 正值，如果第一个参数比第二个参数大。

--push方法

    arrayObj.push([item1 [item2[. . .  [itemN ]]]])

    将新元素添加到一个数组末尾，并返回数组的新长度值。

    参数：   

  • arrayObj：必选项。一个 Array 对象。
  • item, item2,. . . itemN：可选项。该 Array 的新元素。

    push 方法将以新元素出现的顺序添加这些元素。如果参数之一为数组，那么该数组将作为单个元素添加到数组中。

 

--pop方法

    arrayObj.pop( )   

    移除数组中的最后一个元素并返回该元素。

    参数：   

    arrayObj：必选的。 arrayObj 引用是一个 Array 对象。

    说明：

    如果该数组为空，那么将返回 undefined。

 

--unshift方法

    arrayObj.unshift([item1[, item2[, .  . . [, itemN]]]])   

    将指定的元素插入数组开始位置并返回该数组。

    参数：

    arrayObj：必选项。一个 Array 对象。

    item1, item2,. . .,itemN：可选项。将插入到该 Array 开始部分的元素。

    说明：

    unshift 方法将这些元素插入到一个数组的开始部分，所以这些元素将以参数序列中的次序出现在数组中。

 

--shift方法

    arrayObj.shift( )

    移除数组中的第一个元素并返回该元素。

    参数：  

    arrayObj：必选的。 arrayObj 引用是一个 Array 对象。

    说明：

    shift 方法可移除数组中的第一个元素并返回该元素。

 

--concat方法

    array1.concat([item1[, item2[, . . . [,  itemN]]]])   

    返回一个新数组，这个新数组是由两个或更多数组组合而成的。   

    参数:

    array1:必选项。其他所有数组要进行连接的 Array 对象。

    item1,. . ., itemN:可选项。要连接到 array1 末尾的其他项目。

    说明:

    concat 方法返回一个 Array 对象，其中包含了 array1 和提供的任意其他项目的连接。

    要加的项目（item1 … itemN）会按照从左到右的顺序添加到数组。如果某一项为数组，那么添加其内容到 array1  的末尾。如果该项目不是数组，就将其作为单个的数组元素添加到数组的末尾。

以下为从源数组复制元素到结果数组：

  • 如果一个对象引用被从 item1 或 item2 复制到结果中，那么结果中的对象引用仍然指向同一个对象。对该对象的改变将同时反映在两个数组中。
  • 对于连接到新数组的数值或字符串，只复制其值。一个数组中值有改变并不影响另一个数组中的值。
  1. function ConcatArrayDemo(){
  2. var a, b, c, d;
  3. a = new Array(1,2,3);
  4. b = "JScript";
  5. c = new Array(42, "VBScript);
  6. d = a.concat(b, c);
  7. // 返回数组 [1, 2, 3, "JScript", 42, "VBScript"]
  8. return(d);
  9. }

 

--join方法

    arrayObj.join(separator)

    返回字符串值，其中包含了连接到一起的数组的所有元素，元素由指定的分隔符分隔开来。

    参数：

    arrayObj：必选项。Array 对象。

    separator：必选项。是一个 String 对象，作为最终的 String对象中对数组元素之间的分隔符。如果省略了这个参数，那么数组元素之间就用一个逗号来分隔。

    说明：

    如果数组中有元素没有定义或者为 null，将其作为空字符串处理。

    实例：

  1. function JoinDemo(){
  2. var a, b;
  3. a = new Array(0,1,2,3,4);
  4. b = a.join("-");
  5. return(b);
  6. } //b是个字符串，值是"0-1-2-3-4"

 

--reverse方法

    arrayObj.reverse( )

    反转一个数组，在执行过程中改变原数组，这个方法并不会创建一个新的 Array 对象。

 

--slice方法

    arrayObj.slice(start, [end])

    返回一个数组的一段。

    参数：

    arrayObj：必选项。一个 Array 对象。

    start：必选项。arrayObj 中所指定的部分的开始元素是从零开始计算的下标。

    end：可选项。arrayObj 中所指定的部分的结束元素是从零开始计算的下标。

    说明

    slice 方法返回一个 Array 对象，其中包含了 arrayObj 的指定部分。

    slice 方法一直复制到 end 所指定的元素，但是不包括该元素。如果 start 为负，将它作为  length + start处理，此处 length 为数组的长度。如果 end 为负，就将它作为  length + end 处理，此处 length 为数组的长度。如果省略 end ，那么  slice 方法将一直复制到 arrayObj 的结尾。如果 end 出现在 start之前，不复制任何元素到新数组中。

     实例：

  1. var a, b;
  2. a = new Array(0,1,2,3,4);
  3. b = a.slice(0,3); //b是a数组的从0到2,3个元素
  4. document.write(b); //将输出0,1,2

     start,end可以是负值，如果为负值将被加上length。例如：

  1. var a, b;
  2. a = new Array(0,1,2,3,4);
  3. b = a.slice(0, -1); //从0开始，到5+(-1)=4之前（不包括4）
  4. document.write(b); //可以直接理解为从0一直到最后1个之前

 

--概念

  • DOM: 就是Document Object Model。
  • 什么是Document?

    在JS里，Document指的就是像html,xml这样的标记语言文档。

  • 为什么要用标记语言？

    因为JS只能操作对象，而结构化的标记语言把它元素（比如<div>内容</div>）转成JS对象也比较方便，所以使用标记语言。

    JS在操作文档时，要把元素转换为对象。

  • 转成对象后能做什么？

    转成对象后就能够操作对象，改变标签属性，改变标签内容，改变标签样式。

 

 

DOM的使用

DOM可以将页面元素转为JS对象，有两种方法转成对象：

--1.通过利用标签名，id,name方式来转换对象。（通过标签名一次转多个对象，id一次转1个对象，name一次转多个对象）具体使用下面方法：

  • var 对象名 = document.getElementsByTagName("标签名");
  • var 对象名 = document.getElementById("Id名");
  • var 对象名 = document.getElementsByName("元素名");

    可以将元素转换为对象，转了以后元素的属性将自动转为对象的属性。

    转成对象后可以改变对象的属性，内容，进而改变元素的属性，内容。

 

--使用元素属性，改变元素属性的方法

    转成对象后，元素的属性将自动转为对象的属性，可以直接引用，例如：

  1. <body>
  2. <a id="alink" href="www.baidu.com" target="_blank" title="this is a test!">test</a>
  3. </body>
  4. </html>
  5. <script type="text/javascript">
  6. var aobj = document.getElementById("alink"); //通过Id转为对象
  7. alert(aobj.title); //通过对象属性引用元素属性
  8. aobj.title = "test finished!"; //通过对象属性改变元素属性
  9. //此时元素的title属性已经成了"test finished!"
  10. </script>

     查看页面源代码：

    此时title属性的值已经是"test finished!"

 

--改变元素内容的方法

    利用对象属性(innerText,innerHTML,textContent)，有两种方法可以改变元素的内容：

  • 1.只读取，改变文本，不能添加、读取HTML标签：innerText（ie使用），textContent(火狐使用)

    innerText的使用例子：

  1. <html>
  2. <body>
  3. <a id="alink" href="www.baidu.com" target="_blank" title="this is a test!">test</a>
  4. </body>
  5. </html>
  6. <script type="text/javascript">
  7. var aobj = document.getElementById("alink");
  8. aobj.innerText = "broTher";
  9. </script>

     在ie中，innerText可以改变元素的属性，如图：

    在火狐中，innerText不能改变元素的属性，如图：

    使用innerText，所有HTML标签将被视为文本，如下例：

  1. <body>
  2. <a id="alink" href="www.baidu.com" target="_blank" title="this is a test!">test</a>
  3. </body>
  4. </html>
  5. <script type="text/javascript">
  6. var aobj = document.getElementById("alink");
  7. aobj.innerText = "<b>broTher</b>"; //在innerText的值中有<b>标签，但被视为文本
  8. </script>

     虽然innerText里面有<b>标签，<b>标签也被视为文本的一部分，如图：

 

  • 2.可以从内容中读取，在内容中添加HTML标签：innerHTML。

内容中添加标签的例子：

  1. <body>
  2. <a id="alink" href="www.baidu.com" target="_blank" title="this is a test!">test</a>
  3. </body>
  4. </html>
  5. <script type="text/javascript">
  6. var aobj = document.getElementById("alink");
  7. aobj.innerHTML = "<b>broTher</b>"; //<b>将被浏览器作为标签
  8. </script>

    在浏览器中<b>将被解释为标签，如图：

 

posted @ 2012-08-20 16:55  小薇林  阅读(211)  评论(0)  编辑  收藏  举报