js基础知识复习

JavaScript 数组

下面的代码创建名为 cars 的数组：

var cars=new Array();cars[0]="Audi";cars[1]="BMW";cars[2]="Volvo";

或者 (condensed array):

var cars=new Array("Audi","BMW","Volvo");

或者 (literal array):

实例

var cars=["Audi","BMW","Volvo"];

JavaScript 对象

var person={firstname : "Bill",lastname  : "Gates",id        :  5566};

对象属性有两种寻址方式：

实例

name=person.lastname;name=person["lastname"];

向未声明的 JavaScript 变量来分配值

如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。

这条语句：

carname="Volvo";

将声明一个全局变量 carname，即使它在函数内执行。

语句: 

if (time<10)  {  x="Good morning";  }else if (time<20)  {  x="Good day";  }else  {  x="Good evening";  }

var day=new Date().getDay();switch (day){case 6:  x="Today it's Saturday";  break;case 0:  x="Today it's Sunday";  break;default:  x="Looking forward to the Weekend";}

for (var i=0; i<5; i++)  {  x=x + "The number is " + i + "<br>";  }

var person={fname:"John",lname:"Doe",age:25};for (x in person)  {  txt=txt + person[x];  }

while (i<5)  {  x=x + "The number is " + i + "<br>";  i++;  }

do  {  x=x + "The number is " + i + "<br>";  i++;  }while (i<5);

break 语句用于跳出循环。

continue 用于跳过循环中的一个迭代。

错误: 

<script>function myFunction(){try  {  var x=document.getElementById("demo").value;  if(x=="")    throw "empty";  if(isNaN(x)) throw "not a number";  if(x>10)     throw "too high";  if(x<5)      throw "too low";  }catch(err)  {  var y=document.getElementById("mess");  y.innerHTML="Error: " + err + ".";  }}</script><h1>My First JavaScript</h1><p>Please input a number between 5 and 10:</p><input id="demo" type="text"><button type="button" onclick="myFunction()">Test Input</button><p id="mess"></p>

查找 HTML 元素

通常，通过 JavaScript，您需要操作 HTML 元素。

为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

• 通过 id 找到 HTML 元素
• 通过标签名找到 HTML 元素
• 通过类名找到 HTML 元素

var x=document.getElementById("intro");

var x=document.getElementById("main");var y=x.getElementsByTagName("p");

改变 HTML 内容

修改 HTML 内容的最简单的方法时使用 innerHTML 属性。

如需改变 HTML 元素的内容，请使用这个语法：

document.getElementById(id).innerHTML=new HTML

改变 HTML 属性

如需改变 HTML 元素的属性，请使用这个语法：

document.getElementById(id).attribute=new value

改变 HTML 样式

如需改变 HTML 元素的样式，请使用这个语法：

document.getElementById(id).style.property=new style

事件: 

属性此事件发生在何时...onabort图像的加载被中断。onblur元素失去焦点。onchange域的内容被改变。onclick当用户点击某个对象时调用的事件句柄。ondblclick当用户双击某个对象时调用的事件句柄。onerror在加载文档或图像时发生错误。onfocus元素获得焦点。onkeydown某个键盘按键被按下。onkeypress某个键盘按键被按下并松开。onkeyup某个键盘按键被松开。onload一张页面或一幅图像完成加载。onmousedown鼠标按钮被按下。onmousemove鼠标被移动。onmouseout鼠标从某元素移开。onmouseover鼠标移到某元素之上。onmouseup鼠标按键被松开。onreset重置按钮被点击。onresize窗口或框架被重新调整大小。onselect文本被选中。onsubmit确认按钮被点击。onunload用户退出页面。

创建新的 HTML 元素

如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。

<div id="div1"><p id="p1">这是一个段落</p><p id="p2">这是另一个段落</p></div><script>var para=document.createElement("p");var node=document.createTextNode("这是新段落。");para.appendChild(node);var element=document.getElementById("div1");element.appendChild(para);</script>

删除已有的 HTML 元素

如需删除 HTML 元素，您必须首先获得该元素的父元素：

实例

<div id="div1"><p id="p1">这是一个段落。</p><p id="p2">这是另一个段落。</p></div><script>var parent=document.getElementById("div1");var child=document.getElementById("p1");parent.removeChild(child);</script>

提示：如果能够在不引用父元素的情况下删除某个元素，就太好了。

不过很遗憾。DOM 需要清楚您需要删除的元素，以及它的父元素。

这是常用的解决方案：找到您希望删除的子元素，然后使用其 parentNode 属性来找到父元素：

var child=document.getElementById("p1");child.parentNode.removeChild(child);

创建 JavaScript 对象

通过 JavaScript，您能够定义并创建自己的对象。

创建新对象有两种不同的方法：

1. 定义并创建对象的实例
2. 使用函数来定义对象，然后创建新的对象实例

创建直接的实例

这个例子创建了对象的一个新实例，并向其添加了四个属性：

实例

person=new Object();person.firstname="Bill";person.lastname="Gates";person.age=56;person.eyecolor="blue";

替代语法（使用对象 literals）：

实例

person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};

使用对象构造器

本例使用函数来构造对象：

实例

function person(firstname,lastname,age,eyecolor){this.firstname=firstname;this.lastname=lastname;this.age=age;this.eyecolor=eyecolor;}

创建 JavaScript 对象实例

一旦您有了对象构造器，就可以创建新的对象实例，就像这样：

var myFather=new person("Bill","Gates",56,"blue");var myMother=new person("Steve","Jobs",48,"green");

把属性添加到 JavaScript 对象

您可以通过为对象赋值，向已有对象添加新属性：

假设 personObj 已存在 - 您可以为其添加这些新属性：firstname、lastname、age 以及 eyecolor：

person.firstname="Bill";person.lastname="Gates";person.age=56;person.eyecolor="blue";x=person.firstname;

把方法添加到 JavaScript 对象

方法只不过是附加在对象上的函数。

在构造器函数内部定义对象的方法：

function person(firstname,lastname,age,eyecolor){this.firstname=firstname;this.lastname=lastname;this.age=age;this.eyecolor=eyecolor;this.changeName=changeName;function changeName(name){this.lastname=name;}}

JavaScript for...in 循环

JavaScript for...in 语句循环遍历对象的属性。

语法

for (对象中的变量)  {  要执行的代码  }

注释：for...in 循环中的代码块将针对每个属性执行一次。

实例

循环遍历对象的属性：

var person={fname:"Bill",lname:"Gates",age:56};for (x in person)  {  txt=txt + person[x];  }

Number对象方法：

toString() 方法可把一个 Number 对象转换为一个字符串，并返回结果。

NumberObject.toString(radix)

返回值

数字的字符串表示。例如，当 radix 为 2 时，NumberObject 会被转换为二进制值表示的字符串。

toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。

语法

NumberObject.toFixed(num)

实例

在本例中，我们将把数字舍入为仅有一位小数的数字：

Show the number 13.37 with one decimal:<script type="text/javascript">var num = new Number(13.37);document.write (num.toFixed(1))</script>

valueOf() 方法可以字符串返回数字。

字符串的输出通常等于该数字。

valueOf() 方法通常由 JavaScript 在后台自动进行调用，而不是显式地处于代码中。

String对象：

方法描述anchor()创建 HTML 锚。big()用大号字体显示字符串。blink()显示闪动字符串。bold()使用粗体显示字符串。charAt()返回在指定位置的字符。charCodeAt()返回在指定的位置的字符的 Unicode 编码。concat()连接字符串。fixed()以打字机文本显示字符串。fontcolor()使用指定的颜色来显示字符串。fontsize()使用指定的尺寸来显示字符串。fromCharCode()从字符编码创建一个字符串。indexOf()检索字符串。italics()使用斜体显示字符串。lastIndexOf()从后向前搜索字符串。link()将字符串显示为链接。localeCompare()用本地特定的顺序来比较两个字符串。match()找到一个或多个正则表达式的匹配。replace()替换与正则表达式匹配的子串。search()检索与正则表达式相匹配的值。slice()提取字符串的片断，并在新的字符串中返回被提取的部分。small()使用小字号来显示字符串。split()把字符串分割为字符串数组。strike()使用删除线来显示字符串。sub()把字符串显示为下标。substr()从起始索引号提取字符串中指定数目的字符。substring()提取字符串中两个指定的索引号之间的字符。sup()把字符串显示为上标。toLocaleLowerCase()把字符串转换为小写。toLocaleUpperCase()把字符串转换为大写。toLowerCase()把字符串转换为小写。toUpperCase()把字符串转换为大写。toSource()代表对象的源代码。toString()返回字符串。valueOf()返回某个字符串对象的原始值。

date对象

方法描述Date()返回当日的日期和时间。getDate()从 Date 对象返回一个月中的某一天 (1 ~ 31)。getDay()从 Date 对象返回一周中的某一天 (0 ~ 6)。getMonth()从 Date 对象返回月份 (0 ~ 11)。getFullYear()从 Date 对象以四位数字返回年份。getYear()请使用 getFullYear() 方法代替。getHours()返回 Date 对象的小时 (0 ~ 23)。getMinutes()返回 Date 对象的分钟 (0 ~ 59)。getSeconds()返回 Date 对象的秒数 (0 ~ 59)。getMilliseconds()返回 Date 对象的毫秒(0 ~ 999)。getTime()返回 1970 年 1 月 1 日至今的毫秒数。getTimezoneOffset()返回本地时间与格林威治标准时间 (GMT) 的分钟差。getUTCDate()根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。getUTCDay()根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。getUTCMonth()根据世界时从 Date 对象返回月份 (0 ~ 11)。getUTCFullYear()根据世界时从 Date 对象返回四位数的年份。getUTCHours()根据世界时返回 Date 对象的小时 (0 ~ 23)。getUTCMinutes()根据世界时返回 Date 对象的分钟 (0 ~ 59)。getUTCSeconds()根据世界时返回 Date 对象的秒钟 (0 ~ 59)。getUTCMilliseconds()根据世界时返回 Date 对象的毫秒(0 ~ 999)。parse()返回1970年1月1日午夜到指定日期（字符串）的毫秒数。setDate()设置 Date 对象中月的某一天 (1 ~ 31)。setMonth()设置 Date 对象中月份 (0 ~ 11)。setFullYear()设置 Date 对象中的年份（四位数字）。setYear()请使用 setFullYear() 方法代替。setHours()设置 Date 对象中的小时 (0 ~ 23)。setMinutes()设置 Date 对象中的分钟 (0 ~ 59)。setSeconds()设置 Date 对象中的秒钟 (0 ~ 59)。setMilliseconds()设置 Date 对象中的毫秒 (0 ~ 999)。setTime()以毫秒设置 Date 对象。setUTCDate()根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。setUTCMonth()根据世界时设置 Date 对象中的月份 (0 ~ 11)。setUTCFullYear()根据世界时设置 Date 对象中的年份（四位数字）。setUTCHours()根据世界时设置 Date 对象中的小时 (0 ~ 23)。setUTCMinutes()根据世界时设置 Date 对象中的分钟 (0 ~ 59)。setUTCSeconds()根据世界时设置 Date 对象中的秒钟 (0 ~ 59)。setUTCMilliseconds()根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。toSource()返回该对象的源代码。toString()把 Date 对象转换为字符串。toTimeString()把 Date 对象的时间部分转换为字符串。toDateString()把 Date 对象的日期部分转换为字符串。toGMTString()请使用 toUTCString() 方法代替。toUTCString()根据世界时，把 Date 对象转换为字符串。toLocaleString()根据本地时间格式，把 Date 对象转换为字符串。toLocaleTimeString()根据本地时间格式，把 Date 对象的时间部分转换为字符串。toLocaleDateString()根据本地时间格式，把 Date 对象的日期部分转换为字符串。UTC()根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。valueOf()返回 Date 对象的原始值。页面显示时钟例子

<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
// add a zero in front of numbers<10
m=checkTime(m)
s=checkTime(s)
document.getElementById('txt').innerHTML=h+":"+m+":"+s
t=setTimeout('startTime()',500)
}


function checkTime(i)
{
if (i<10) 
  {i="0" + i}
  return i
}
</script>
</head>


<body onload="startTime()">
<div id="txt"></div>
</body>
</html>

数组对象

方法描述concat()连接两个或更多的数组，并返回结果。join()把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。pop()删除并返回数组的最后一个元素push()向数组的末尾添加一个或更多元素，并返回新的长度。reverse()颠倒数组中元素的顺序。shift()删除并返回数组的第一个元素slice()从某个已有的数组返回选定的元素sort()对数组的元素进行排序splice()删除元素，并向数组添加新元素。toSource()返回该对象的源代码。toString()把数组转换为字符串，并返回结果。toLocaleString()把数组转换为本地数组，并返回结果。unshift()向数组的开头添加一个或更多元素，并返回新的长度。valueOf()返回数组对象的原始值

正则表达式 RegExp

RegExp 对象的方法

RegExp 对象有 3 个方法：test()、exec() 以及 compile()。

test()

test() 方法检索字符串中的指定值。返回值是 true 或 false。

例子：

var patt1=new RegExp("e");document.write(patt1.test("The best things in life are free")); 

exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。

例子 1：

var patt1=new RegExp("e");document.write(patt1.exec("The best things in life are free")); 

由于该字符串中存在字母 "e"，以上代码的输出将是：

e

compile() 方法用于改变 RegExp。

compile() 既可以改变检索模式，也可以添加或删除第二个参数。

例子：

var patt1=new RegExp("e");document.write(patt1.test("The best things in life are free"));patt1.compile("d");document.write(patt1.test("The best things in life are free"));

支持正则表达式的 String 对象的方法

方法描述FFIEsearch检索与正则表达式相匹配的值。14match找到一个或多个正则表达式的匹配。14replace替换与正则表达式匹配的子串。14split把字符串分割为字符串数组。

window对象

显示浏览器窗口的高度和宽度：（不包括工具栏/滚动条）

var w=window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth;var h=window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;

其他 Window 方法

一些其他方法：

• window.open() - 打开新窗口
• window.close() - 关闭当前窗口
• window.moveTo() - 移动当前窗口
• window.resizeTo() - 调整当前窗口的尺寸

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

Window Location

window.location 对象在编写时可不使用 window 这个前缀。

一些例子：

• location.hostname 返回 web 主机的域名
• location.pathname 返回当前页面的路径和文件名
• location.port 返回 web 主机的端口 （80 或 443）
• location.protocol 返回所使用的 web 协议（http:// 或 https://）

Window Location Href

location.href 属性返回当前页面的 URL。

window.history 对象在编写时可不使用 window 这个前缀。

为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。

一些方法：

• history.back() - 与在浏览器点击后退按钮相同
• history.forward() - 与在浏览器中点击按钮向前相同

JavaScript 计时事件

通过使用 JavaScript，我们有能力作到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:

setTimeout()

未来的某时执行代码

clearTimeout()

取消setTimeout()